*{
    padding: 0;
    margin: 0;
    text-transform: capitalize;
}
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.topbar{
    padding: 20px 60px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url(image/banner.png);
    background-position: center;
    background-size: cover;
    height: 100vh;
}


body,html{
    width: 100%;
    overflow-x: hidden !important;
}




.navbar{
    display: flex;
    justify-content: space-between;
}
ul{
    color: white;
    display: flex;
    list-style-type: none;
    gap: 20px;
}
.under{
    position: relative;
}
.under::after{
    content: '';
    width: 25px;
    background: #fff;
    height: 2px;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}
.logo img{
    width: 100px;
}
.now button{
    padding: 10px 30px;
    background-color: rgb(255, 255, 255);
    border: 1px solid white;
    border-radius: 20px;
}
.center{
    text-align: center;
    position: absolute;
    top: 50%;
    justify-content: center;
    left: 27%;
}
.find{
    margin-left: 90px;
    line-height: 3;
    color: #fff;
}

.white-area{
    text-align: center;
    gap: 20px;
    padding: 10px 30px;
    display: flex;
    justify-content: center;
    width: 530px;
    background-color: #fff;
    border-radius: 30px;
}
.white-area .location,.check-in,.check-out,.guest{
    color: #aaa;
    border-right: 1px solid #aaa;
    padding-right: 20px;
}
.search{
    margin-left: 30px;
    background-position: center;
    background-size: cover;
    height: 40px;
    width: 40px;
    background-color:indianred;
    border-radius: 50%;
}
.search i{
    position: relative;
    top: 9px;
    width: 40px;
}

/* exclusive */
.exclusive{
    padding: 20px 60px;
}
.exclusive h2{
    font-size: 35px;
    font-weight: 400;
    margin-bottom: 20px;
}
.exclusive-image img{
    border-radius: 10px;
    width: 180px;
    margin-bottom: -20px;
}
.exc-1:hover{
        filter: hue-rotate(900deg);
        transition: 0.5s;
}
.exclusive-image h6,.p{
    position: relative;
    top: -50px;
    left:55px;
    color: #fff;
}
.exclusive-image p{
    font-size: 13px;
}
.exclusive-image h6{
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    left: -1px;
}
.exclusive-image{
    display: flex;
    flex-wrap: wrap;
    gap: 70px;
}




/* trending-place */
.trend img:hover{
    filter: contrast(59%);
    transition: 0.5s;
}
.trending-place img{
    width: 273px;
    border-radius: 10px;
}
.trending-place{
    line-height: 2;
    padding: 20px 80px;
}
.trending-place h2,img{
    line-height: 4;
}
.trending-place h2{
    font-size: 25px;
    font-weight: 500;
}
.trending-place h3{
    font-size: 15px;
    font-weight: 400;
}
.trend{
    display: flex;
    gap: 30px;
}



/* sharng ia earning now */
.sharing:hover{
    filter: contrast(59%);
    transition: 0.5s;
}
.sharing{
    background-position: center;
    background-size: cover;
    margin: 20px 60px;
    background-image:url(image/banner-2.png);
    border-radius: 10px;
    height: 60vh;
    color: #fff;
}
.h1{
    font-size: 30px;
}
.p2{
    font-weight: 600;
    width: 300px;
}
.shar{
    line-height: 1.6;
    position: relative;
    top: 60px;
    left: 50px;
}
.btn{
    margin-top: 20px;
    color: #fff;
    border: 1px solid rgb(325, 118, 75);
    padding: 10px 10px;
    border-radius: 6px;
    background-color:indianred;
}




/* travelling stories */
.traveller h1{
    padding: 20px 60px;
    font-weight: 500;
}
.stories{
    padding: 20px 140px;
}
.ship img:hover{
    filter: contrast(59%);
    transition: 0.5s;
}
.ship img{
    width: 300px;
    border-radius: 10px;
}
.ship h5{
    left: 10px;
    text-align: center;
    position: relative;
    top: -170px;
}
.stories{
    gap: 50px;
    color: #fff;
    display: flex;
}
.btn2{
    position: relative;
    left: 40%;
    padding: 15px 60px;
    border-radius: 40px;
    color: #fff;
}


/* footer */
footer{
    padding-top: 50px;
    line-height: 3;
    color: #aaa;
}
footer p{
    line-height: 1.3;
    text-align: center;
}
.icon{
    color: #0000009f;

    text-align: center;
}
footer h1{
    color: #0000009f;
    text-align: center;
}
.icon i:hover{
    color: rgb(245, 126, 126);
    text-align: center;
}
hr{
    margin: 20px 60px;
}





















/* second htmllll */
.u1{
    color: #aaa;
}
.now2 button{
    padding: 10px 30px;
    border: 1px solid indianred;
    border-radius: 20px;
    background-color: indianred !important;
    color: #fff;
}
.top{
    padding: 20px 60px;
    background-color: #fff;
    height: 50px;
    box-shadow: 3px 3px 3px rgb(145, 142, 142);
}
.under-1{
    position: relative;
}
.under-1::after{
    content: '';
    width: 25px;
    background: #949292;
    height: 2px;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}
.two{
    padding: 20px 60px;
}


.list{
    align-content: center;
}


/* @media (max-width:1242px){
    .center{

        justify-content: center;
    }
}
















@media (max-width:1123px){
    .center{
        margin-left: -50px;
    }
}



@media (max-width:995px){
    .center{
        margin-left: -80px;
    }
}



@media (max-width:875px){
    .center{
        margin-left: -110px;
    }
}



@media (max-width:505px){
    .center{
        margin-left: -60px;
    }
}

@media (max-width:631px){
    .white-area{
        padding: 20px 20px;
        margin: 0px 30px;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
}




@media (max-width:479px){
    .white-area{
        padding: 20px 20px;
        margin: 30px 30px;
        flex-wrap: wrap;
        margin-left: 40px   ;
        text-align: center;
        justify-content: center;
    }
}



@media (max-width:669px){
    .white-area{
        padding: 20px 20px;
        margin: 30px 80px;
        flex-wrap: wrap;
        margin-left: 70px;
        text-align: center;
        justify-content: center;
    }
}




@media (max-width:773px){
    .center{
        margin-top: -30px;
        margin-left: -150px;
    }
}


@media (max-width:841px){
    .list{
        display: none;
    }
}



@media (max-width:1315px){
    .exclusive>h2{
        margin: 40px 0px;
        text-align: center;
    }
    .exclusive-image{
        justify-content: center;
    }
} */















.checkbtn{
    position: absolute;
    top: 22px;
    right: 50px;
    display: none;
    font-size: 25px;
}
#check{
    display: none;
}
.logo-1{
    display: none;
}
@media (max-width:890px){
    .now{
        margin-right: 300px;
    }
    .checkbtn{
        display: block;
        color: #fff;
    }
    ul{
        display: block;
        z-index: 100;
        position: fixed;
        width: 50%;
        background-color: #2c3e50;
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all .7s;
    }
    .list{
        height: 50px;
    }
    .list ul li{
        display: block;
        margin: 10px 0;
        line-height: 30px;
    }
    #check:checked~ul{
        left: 0;
    }
    label .logo-1{
        font-size: 22px;
    }
}


@media (max-width:1269px){
    .white-area,.find{
        position: relative;
        right: 40px;
    }
}


@media (max-width:1193px){
    .white-area,.find{
        position: relative;
        right: 60px;
    }
    .find{
        margin-right: 65px;
    }
}




@media (max-width:1092px){
    .white-area,.find{
        position: relative;
        right: 79px;
    }
    .find{
        margin-right: 80px;
    }
}



@media (max-width:1031px){
    .white-area,.find{
        position: relative;
        right: 89px;
    }
    .find{
        margin-right: 80px;
    }
}




@media (max-width:930px){
    .white-area,.find{
        position: relative;
        right: 99px;
    }
    .find{
        margin-right: 80px;
    }
}







@media (max-width:849px){
    .white-area,.find{
        position: relative;
        right: 116px;
    }
    .find{
        margin-right: 80px;
    }
}






@media (max-width:779px){
    .white-area,.find{
        position: relative;
        right: 132px;
    }
    .find{
        margin-right: 80px;
    }
}







@media (max-width:680px){
    .white-area,.find{
        position: relative;
        right: 142px;
    }
    .find{
        margin-right: 80px;
    }
}


@media (max-width:643px){
    .white-area,.find{
        position: relative;
        right: 152px;
    }
    .find{
        margin-right: 80px;
    }
}






@media (max-width:625px){
    .white-area,.find{
        position: relative;
        right: 157px;
    }
    .find{
        margin-right: 80px;
    }
}






@media (max-width:620px){
    .white-area{
        flex-wrap: nowrap;
    }
}
.exclusive>h2{
    margin: 60px 0px;
    text-align: center;
}
.exclusive-image{
    justify-content: center;
}





@media (max-width:1311px){
    .trend,.stories{
        padding: 0px 60px;
        flex-wrap:wrap;
    }
    .trend,.stories{
        justify-content: center;
    }
    
}
.traveller>h1,.action{
    text-align: center;
}




@media (max-width:938px){
    .btn2{
        position: relative;
        left: 37%;
        padding: 15px 60px;
        border-radius: 40px;
        color: #fff;
    }       
}



@media (max-width:697px){
    .btn2{
        position: relative;
        left: 32%;
        padding: 15px 60px;
        border-radius: 40px;
        color: #fff;
    }       
}



@media (max-width:592px){
    .btn2{
        position: relative;
        left: 29%;
        padding: 15px 60px;
        border-radius: 40px;
        color: #fff;
    }       
}





@media (max-width:510px){
    .btn2{
        position: relative;
        left: 27%;
        padding: 15px 60px;
        border-radius: 40px;
        color: #fff;
    }       
}


@media (max-width:472px){
    .btn2{
        position: relative;
        left: 22%;
        padding: 15px 60px;
        border-radius: 40px;
        color: #fff;
    }       
}








@media (max-width:890px){
    .now{
        margin-right: 260px;
    }
}




@media (max-width:781px){
    .now{
        margin-right: 220px;
    }
}








@media (max-width:710px){
    .now{
        margin-right: 200px;
    }
}



@media (max-width:657px){
    .now{
        margin-right: 160px;
    }
}



@media (max-width:603px){
    .now{
        margin-right: 130px;
    }
}



@media (max-width:551px){
    .now{
        margin-right: 100px;
    }
}


@media (max-width:514px){
    .now{
        margin-right: 80px;
    }
}



@media (max-width:498px){
    .now{
        margin-right: 65px;
    }
}



@media (max-width:469px){
    .now{
        margin-right: 60px;
    }
}




@media (max-width:450px){
    .now{
        margin-right: 55px;
    }
}




@media (max-width:622px){
    .white-area{
        text-align: center;
        gap: 20px;
        padding: 10px 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 450px;
        margin-left: 35px;
        background-color: #fff;
        border-radius: 30px;
        font-size: 14px;
    }
}



@media (max-width:564px){
    .white-area{
        text-align: center;
        gap: 20px;
        padding: 10px 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 400px;
        margin-left: 45px;
        background-color: #fff;
        border-radius: 30px;
        font-size: 14px;
    }
}





@media (max-width:509px){
    .white-area{
        text-align: center;
        gap: 20px;
        padding: 10px 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 400px;
        margin-left: 35px;
        background-color: #fff;
        border-radius: 30px;
        font-size: 14px;
    }
}