body{
    font-family: muli;
    margin:0;
    padding: 0;
    background: #f6f6f6;
}

ul{
    font-family: muli;
    margin: 0;
    padding: 0;
    list-style: none !important;
}
a{
    font-family: muli;
    text-decoration: none !important;
}
p{
    font-family: muli;
    margin-bottom: 0;
}
header{
    font-family: muli;
    width: 100%;
    z-index: 999;
    position: fixed;
    box-shadow: 0 0 10px rgba(221, 221, 221, 0.459)
}
.fx{
    font-family: muli;
    background: white;
 
}
@font-face{
    font-family: muli;
    /*src: url('../font/Muli/static/Muli-LightItalic.ttf');*/
	src: url('../webfonts/core-sans-gs1.ttf');
}
@font-face{
    font-family: muli-blod;
    /*src: url('../font/Muli/static/Muli-Bold.ttf');*/
	src: url('../webfonts/core-sans-gs2.ttf');
}
/* *******************************header area************************* */
header  {
    font-family: muli;
    background: white;
   
    width: 100%;
    z-index: 999;
}
header .top-bar .logo-area img{
    font-family: muli;
height: 50px;
width: 160px;
} 
header .top-bar .logo-area{
    font-family: muli;
    padding: 5px 0px;

}
header .top-bar .logo-area .white-logo{
    font-family: muli;
    display: none;
}
header .left-area{
    font-family: muli;
     top:15px; 

}
header .left-area .search{
    position: relative;
}
header .left-area .search form input,.search2 form input{
    font-family: muli;
border: 2px solid gainsboro;
border-radius: 5px 0px 0px 5px;
}
header .left-area .search .close-search{
    position: absolute;
    top: 110%;
    z-index: 99999;
    color: black;
    font-size: 20px;
    background: white;
    padding: 0px 8px;
    border-radius: 50%;
    left: 40px;
    display: none;
    cursor: pointer;
}

header .left-area .search form button,.search2 form button{
    font-family: muli;
border: 2px solid gainsboro;
border-radius: 0px 5px 5px 0px;
    border-left: none;

background: #009D1B;
color: white;
}
header .left-area figure{
    font-family: muli;
    text-align: right;
}header .left-area figure span{
    font-family: muli;
    margin-right: 20px;
    font-size: 18px;
    background: #009D1B;
    color: white;
    padding: 5px 10px;
    font-weight: 900;
    border-radius: 5px;
}
header .left-area{
    position: relative
}
header .left-area .log {
    position: absolute;
    right: 0;
    top:50px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    padding: 10px;
    border: none;
    display: none;
}
header .left-area .log ul{
    background: #8bc0e4;
    padding: 4px
}
header .left-area .log li a{
    color:white;
    width: 100px;
    display: block;
}
.mobile-version-sidebar{
    display: none
}
.mobile-version-sidebar .left-area{
    background: white;
}
header .left-area figure img{
    font-family: muli;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
header .menu ul{
    font-family: muli;
    text-align: center;
}
header .menu ul li{
    font-family: muli;
    display: inline-block;
}
header .menu ul li{
    font-family: muli;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 20px;
}
.mobile-user{
    display: none !important;
}
header .menu ul li a{
    font-family: muli;
    color: rgb(0,0,0);
}
header .menu ul li a:hover{
    font-family: muli;
    color: black;
}

header .menus .mobile-sidebar img{
    font-family: muli;
    width: 70px;
    height:70px;
    display: inline-block;
    border-radius: 50%;
}
header .menus .mobile-sidebar .name{
    font-family: muli;
    display: inline-block;
}
.search2{
    font-family: muli;
    margin-bottom: 20px;
    background: rgb(60, 80, 214);
    margin-top: 60px;
    padding: 10px;
    display: none;
}
.search2 form{
    font-family: muli;
    width:250px;
    margin:auto
}

/* *******************************header area end************************* */
.carousel-inner .carousel-item{
    font-family: muli;
    background: #00cc00;
    padding: 10px;
    border-radius: 20px;
    color:white
}

/* *******************************middle-area area ************************* */

.middle-area .left-area{
    font-family: muli;
position: fixed;
    width: 30%;
}
.middle-area .left-area  .user-info .cover-photo{
    font-family: muli;
    position: relative !important;
}
 .cover-photo img{
    font-family: muli;
    width: 100%;
    height: 200px;
}
 .user-info .dp{
    font-family: muli;
    position: absolute;
    top:45px;
    left: 20px;
}

 .user-info  .dp img {
    font-family: muli;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: inline-block
}
 .user-info .name{
    font-family: muli-blod;
    display: inline-block;
    font-weight: 600;
    margin-left: 10px;
    padding:5px 10px;
    border-radius: 10px;
    background: white;
    position: absolute;
    top: 10px;
    right: 10px;
}
  .user-info .items ul li{
    font-family: muli;
float: left;
border: 1px solid gray;
text-align: center;
    width: 25%;
}
 .user-info .items ul:after{
    font-family: muli;
    display: block;
    clear: both;
    content: '';
}
  .user-info .items ul li a {
    font-family: muli;
    /*! padding: 2px 27.1px; */
   color: rgb(58, 58, 58);
    text-align: center;
    display: block;
    font-size: 13px;
    /*! width: 25%; */
}
.user-info .about{
    font-family: muli;
    background: white;
    width: 100%;
    border: 1px solid gray;
    padding: 10px;
}
.pluse{
    font-family: muli;
    display: none
}
  .user-info .follow{
    font-family: muli;
    display: inline-block;
    font-weight: 600;
    margin-right: 10px;
    padding:5px 20px;
    border-radius: 10px;
    background: white;
    top:160px;
    position: absolute;
    right: 122px;
}
 .user-info .bio{
    font-family: muli;
    display: inline-block;
    font-weight: 600;
    margin-left: 10px;
    padding:5px 20px;
    border-radius: 10px;
    background: white;
    top:160px;
    position: absolute;
    right: 10px;
}
 .user-info .bio span{
    cursor: pointer;
}
.card{
    font-family: muli;
    margin-top:10px
}
.trips-card form h3{
    font-family: muli;
    width: 100%;
    background: #263ac1;
    border: none;
    color: white;
    padding: 7px;
    border-radius: 10px;
}
.trips-card form{
    font-family: muli;
    position: relative;
}
.trips-card form:after{
    font-family: muli;
    display: block;clear: both;content: '';
}
.trips-card form .option{
    font-family: muli;
    float: right;
    display: block;
    width: 100%;
}
.trips-card .filter .head-option .plus{
    color: white;
    display: inline-block;
}
.trips-card .filter .head-option p{
    display: inline-block;
    margin-left: 65px;
    
}
.trips-card .filter .head-option .dr-show{
    float: right;
    padding-top: 7px;
}
.trips-card .filter .head-option{
    font-family: muli;
    display: inline-block;
    width: 100%;
    border: none;
    padding: 10px;
    background: #026873;
    color: white;
border-radius: 10px;
    background-position:  95% 55%;;
    font-size: 21px;
    cursor: pointer;

}
                            

.trips-card .filter{
    position: relative;
}

.trips-card .filter .drop-option i , .bio-option .drop-option i{
    text-align: right;
    display: block;
    cursor: pointer;
}
.trips-card .filter .drop-option ul li a,.bio-option .drop-option ul li a{
    color: black;
    padding: 5px;
    font-weight:600;
    display: block;
}
.bio-option .drop-option{
    width: 200px;
}
.trips-card .filter .drop-option,.bio-option .drop-option{
    background: white;
    position: absolute;
    display: none;
    top:0;
    z-index: 999;
    right:0;
    border: 2px solid gray;
    border-radius: 20px;
    padding:20px;
    text-align: center;

}
select::-ms-expand {
    display: none;
}
.trips-card form ul li a{
    font-family: muli;
    color: black;
    padding: 5px;
}
.trips-card form ul{
    font-family: muli;
    width: 100px;
    background: white;
    border-radius: 10px;
    border: 2px solid rgba(160, 155, 155, 0.301);
}

.card ul {
    font-family: muli;
    padding: 20px;
}
.card ul li a{
    font-family: muli;
    color: rgb(58, 58, 58);
}
.middle-area .right-area{
    font-family: muli;
    margin-left:39%;
    width: 60%;
} 
.most-liked{
    font-family: muli;
    background: #263ac1;
    text-align: center;
    color: white;
    padding: 13px;
    font-size: 20px;
    font-weight: 600;
    display: none;
    border-radius: 25px
}

.middle-area .right-area .add img{
    font-family: muli;
    width: 100%;
    height: 100px;
}
.slick-arrow{
    font-family: muli;
border: none;
background: #263ac1;
color: white;
width: 10%;
padding: 2px 20px;
font-size: 35px;
border-radius: 20px;

}
.slick-prev{
    font-family: muli;
    position: absolute;
    top:-4px
}
.slick-next{
    font-family: muli;
    position: absolute;
    top:-4px;
    right: 0;
}

.middle-area .right-area .treand .post{
    font-family: muli;
    background: #00cc00;
    padding: 5px;
    border-radius: 10px;
    color: white;
    width:80% !important;
    margin:auto
}
.middle-area .right-area .more-option {
    font-family: muli;
    position: absolute;
    right: 0;
    top:40px;
    padding: 10px;
    background:#ffffff;
	border: 1px #666666 solid;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 1);
    display: none;
    color:#000000;
    z-index: 99;
}
.middle-area .right-area .more-option ul{
    font-family: muli;
    list-style: none;
}
.middle-area .right-area .more-option ul li{
    font-family: muli;
    display: inline-block;
}
.middle-area .right-area .more-option ul li a{
    font-family: muli;
    padding: 5px 5px;
    color: white;
    display: block;
}
.middle-area .right-area .posts .post .date img ,.middle-area .right-area .posts .post .date-2 img,.middle-area .right-area .posts .post .night .icon img{
    font-family: muli;
    width:70px;
    height: 50px;
    display: inline-block;
    margin-right: 10px;
}
.middle-area .right-area .posts .post .night .icon{
    background: grey
        ;margin-top:10px;
    border-radius:30px;
    color: white;
    font-size: 20px
}
.middle-area .right-area .posts .post .night .icon i {
    margin-left: 10px
}
.middle-area .right-area .posts .post .night .icon span{
    margin-left:25px 
}
.middle-area .right-area .posts .post .date,.middle-area .right-area .posts .post .date-2 ,.middle-area .right-area .posts .post .night .icon{
    font-family: muli;
    /*border:1px solid rgba(35, 56, 194, 0.63);*/
    padding: 10px;
    margin-bottom: 10px;
}
.middle-area .right-area .posts .post .user-profile{
    font-family: muli;
    border:1px solid rgba(35, 56, 194, 0.63);
    margin-bottom: 10px;
    padding: 10px;
}
.middle-area .right-area .posts .post .thumbnail img{
    font-family: muli;
    width: 100%;
    height: 500px;
    /*border:1px solid rgba(35, 56, 194, 0.63);*/
}

.middle-area .right-area .posts .post .user-profile ul li{
    font-family: muli;
    display: inline-block;
    margin: 0px 4px;

}
.middle-area .right-area .posts .post .user-profile ul li img{
    font-family: muli;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.middle-area .right-area .posts .post .title{
    font-family: muli;
    text-align: center;
    
    background: #ffffff;
    padding: 5px 0px;
    color: #000000;
	border: 1px #666666 solid;
    border-radius: 10px 10px 0px 00px;
} 
.middle-area .right-area .posts .post .react{
    font-family: muli;
    background: #ffffff;
    color: #000000;
    padding: 5px 0px;
	border: 1px #666666 solid;
    border-radius: 0 0 15px 15px;
}
.middle-area .right-area .posts .post .react i{
    padding: 0px 20px;
    padding-right: 4px
}

.middle-area .right-area .posts .post .react .dates{
    font-family: muli;
    position: absolute;
    right: 40%;
}
.menu-2 {
    background: #f5f5f5;
    display: none;
}
.menu-2 .head{
    background: #556f8080;
}
.menu-2 li {
    position: relative
}
.menu-2 ul li .arro{
    position: absolute;
    right: 10px;
    top:10px
}
.menu-2 ul li a{
    color: black;
    display: block;
    text-align: center;
    padding: 3px;
}
.menu-2 ul .apps ul{
    display: none;
}
.middle-area .right-area .posts .post .thumbnail img{
    font-family: muli;
    height: 500px;
    width: 100%;
}
.middle-area .right-area .posts .post .content{
    font-family: muli;
    background: #8bc0e4;
    padding: 10px;
}
.middle-area .right-area .posts .post .content .thumbnail img {
    font-family: muli;
    width: 130px;
    height: 90px;
    margin-right: 20px;
}
.middle-area .right-area .posts .post .content {
    font-family: muli;
    display: flex;
}
.middle-area .right-area .posts .post {
    font-family: muli;
    position: relative;
    margin-bottom: 20px;
}
.middle-area .right-area .posts .post figure{
    font-family: muli;
    position: absolute;
    bottom: -22px;
    right: -3px;
}
.middle-area .right-area .posts .post figure img{
    font-family: muli;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 1, 0, 55)
}
.middle-area .right-area .posts .post .hotel-info{
    font-family: muli;
    padding: 20px;
    background: #7485f9;
    color: white;
}
.middle-area .right-area .posts .post .hotel-info .icon{
    font-family: muli;
    margin-right: 30px
}
.middle-area .right-area .posts .post .hotel-info .icon,.middle-area .right-area .posts .post .hotel-info .info{
    font-family: muli;
    float: left;
}
.inner-info:after{
    font-family: muli;
    display: block;
    clear: both;
    content:'';
}
.middle-area .right-area .posts .post .hotel-info .icon img{
    font-family: muli;
    width: 120px;
    height: 90px;
    margin-bottom: 10px
}
.middle-area .right-area .img-upload{
    font-family: muli;
    background: rgb(48, 70, 214);
    padding: 10px;
    border-radius: 20px;
    margin-bottom: 30px;
}
.middle-area .right-area .img-upload .hotel-gallery select{
    width: 97%;
    padding: 5px;
     -webkit-appearance:none;
    -moz-appearance: none;
    border: none;
    margin-bottom: 10px !important;;
     background: url('../images/kisspng-drop-down-list-computer-icons-arrow-5ae60ec30bde91.8577893815250264990486.png') no-repeat white;
    background-size: 25px;
    background-position:  95% 55%;;
    font-size: 20px;
    cursor: pointer;
    margin: auto;
    display: block;
}
.middle-area .right-area .img-upload .hotel-gallery li img{
    font-family: muli;
    width: 100%;
    height: 140px;
}
.middle-area .right-area .img-upload .main-area .hotel-thumbnail img{
    font-family: muli;
width:320px;
height: 220px;
}
.middle-area .right-area .img-upload .main-area .hotel-thumbnail{
    font-family: muli;
    display: inline-block
}
.middle-area .right-area .img-upload .main-area{
    font-family: muli;
    margin-bottom: 25px
}
.middle-area .right-area .img-upload .main-area .hotel-croped img{
    font-family: muli;
    width: 200px;
}
.middle-area .right-area .img-upload .main-area .hotel-croped{
    font-family: muli;
    display: inline-block;
    margin-left:20px 
}
.middle-area .right-area .img-upload a{
    font-family: muli;
    background: white;
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
    color: black;
    font-weight: 600
}
.middle-area .set-33{
    font-family: muli;
    background: #7485f9;
    padding: 20px;
    border-radius: 30px;
}

.options {
    font-family: muli;
    width: 100%;
    overflow: hidden;
    overflow: -moz-hidden-unscrollable;
    background: url(../images/50-508006_open-down-arrow-icon-blue.png) no-repeat  white;
    display: inline-block;
    position: relative;
    background-size: 30px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 20px;
    background-position: 97%;
  }
  
  .options select {
    font-family: muli;
    background: transparent;
    -webkit-appearance: none;
    width: 100px;
    border: 0;
  
  }
.middle-area .right-area .options select,.middle-area .right-area .options textarea{
    font-family: muli;
    width: 100%;
   
    border: none;
    cursor: pointer;
}
.middle-area .right-area .submit input{
    font-family: muli;
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    background: white;
    border: none;
}
.middle-area .right-area .c-11 input{
    font-family: muli;
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    background: white;
    border: none;
    margin-bottom: 10px;
}
.middle-area .right-area .options textarea{
    font-family: muli;
    height: 100px;
}
.middle-area .login-area,.middle-area .sing-up-area{
    font-family: muli;
    background: #026873;
    width: 60%;
    margin: auto;
    border-radius: 30px;
    padding: 20px;
    text-align: center;
    color: white;
}
.middle-area .login-area .logo-area ,.middle-area .sing-up-area .logo-area{
    font-family: muli;
    width: 100%;
    display: block;
    text-align: center;
}
.middle-area .login-area form input,.middle-area .sing-up-area input{
    font-family: muli;
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 20px;
    outline: none;
    background: white;
    border: 1px solid #5977ff;
    box-shadow: 0 3px 10px rgb(0, 0, 0,0.8);
}
.middle-area .sing-up-area .submit{
    font-family: muli;
    width: 20%;
    margin: auto;
}
.middle-area .sing-up-area .shor-description{
    font-family: muli;
    margin-bottom: 10px;
    font-size: 20px;
}
.middle-area .login-area a{
    font-family: muli;
    color: white;
}
.middle-area .login-area .forget-pass{
    font-family: muli;
    text-align: right;
    
    margin-bottom: 20px;
}

.middle-area .login-area .language select{
    width: 100%;
    border: none;
    padding: 10px;
    font-family: muli;
    border-radius: 20px;
    outline: none; box-shadow: 0 3px 10px rgb(0, 0, 0,0.8);
    background: white;
    color: black;
    cursor: pointer;
    margin-bottom: 40px;
    text-align: center;
     -webkit-appearance:none;
    -moz-appearance: none;
    background: url('../images/kisspng-drop-down-list-computer-icons-arrow-5ae60ec30bde91.8577893815250264990486.png') no-repeat  white;
    background-size: 25px;
    background-position: 60% 55%;
}
.middle-area .login-area .logo-area img,.middle-area .sing-up-area .logo-area img{
    font-family: muli;
    width: 250px;
}
.middle-area .creat-area .introduce .left-side , .middle-area  .creat-area .introduce .right-side{
    font-family: muli;
    width:45%;
    float: left;
 
}
.middle-area  .creat-area .introduce .right-side img{
    font-family: muli;
    margin-bottom: 20px;
}
.middle-area .creat-area .introduce .left-side{
    font-family: muli;
    margin-right: 5%;
}
.middle-area .creat-area .introduce .right-side{
    font-family: muli;
    margin-left: 5%;
}
.middle-area .creat-area .introduce:after{
    font-family: muli;
    display: block;
    clear:both;
    content: '';
}
.middle-area .creat-area .introduce{
    font-family: muli;
    background:#cfd3f2 ;
    padding: 20px 40px;
    border-radius: 30px;
    box-shadow: 0 3px 10px rgb(0, 0, 0,0.8);
}
.middle-area .creat-area .left-side img ,.middle-area .creat-area .right-side img{
    font-family: muli;
    width:100%;
    height: 200px;
}
.middle-area .creat-area .options input ,.middle-area .creat-area .options textarea{
    font-family: muli;
    box-shadow: 0 3px 5px rgb(0, 0, 0,0.3);
    margin-bottom: 15px;
    border: none;
    width: 100%;
    padding: 5px;
}
.middle-area .creat-area .options .submit input{
    font-family: muli;
    border-radius: 30px;
    background: #263ac1;
    color: white
}
.middle-area .creat-area .options .s-date input{
    font-family: muli;
    width: 47%;
    float: left;
    margin-right: 1%; 
}
.middle-area .creat-area .options i{
    float: left;
    font-size: 35px;
}
.middle-area .creat-area .options .e-date input{
    font-family: muli;
    width: 47%;
    margin-left: 1%;
    float: left
}
.middle-area .creat-area .options .s-city input{
    font-family: muli;
    width: 47%;
    float: left;
    margin-right: 1%;
}
.middle-area .creat-area .options .e-city input{
    font-family: muli;
    width: 47%;
    margin-left: 1%;
    float: left
}
.middle-area .creat-area .options textarea{
    font-family: muli;
    height: 70px
}
.middle-area .creat-area .options:after{
    font-family: muli;
    display: block;
    clear: both;
    content: '';
}
.mobile-menu-bars{
    font-family: muli;
    display: none;
}
.serc{
    font-family: muli;
    display: none;
}
header .menus .mobile-sidebar{
    font-family: muli;
    display: none;
}


.remove2{
    display: none;
}
/* *******************************middle-area   end************************* */

/* *******************************responsive-area   ************************* */
@media(max-width:770px){
  
    .mobile-user{
        display: block !important;
        position: relative;
    }
 .mobile-user .dp{
        font-family: muli;
        position: absolute;
        top:60px;
        left: 40px;
    }
    
 .user-info .name{
 
    top: 30px;
    right: 40px;
}
    
  .user-info .follow{
   top:150px;
      right: 180px;
}
 .user-info .bio{
   top:150px;
    right: 70px;
}
 .mobile-user  .dp img {
    font-family: muli;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block
}
    
    header {
        position: relative;
    }
    .remove2{
        display: block;
    }
    .fx{
        position: fixed;
        width: 100%;
    }
    .middle-area{
        margin-top: 50px;
    }
    header .left-area .search .close-search{
    }
    .remove{
        display: none;
    }
        header .menus .mobile-sidebar a{
        color:white
    }
    header .menus .mobile-sidebar{
        display: block;
        border-bottom: 1px solid rgba(220, 220, 220, 0.308);
    }
    .middle-area .creat-area .left-side img, .middle-area .creat-area .right-side img{
        height: 140px;
    }
    header .top-bar .logo-area {
       max-width: 25% !important;
        flex:0 0 20%;
        text-align: center;
       position: absolute;
       left: 0;
       right: 0;
       margin: auto;
    }
  
    header .menu ul{
        text-align: left;
    }

    header , .fx{
        height: 60px;
    }
    header:after{
        display: block;
        clear: both;
        contain: '';
    }
    .mobile-menu-bars{
   display: block;
        position: absolute;
        margin: 12px;
        cursor: pointer;
        left: 0;
    }
    .open{
             
        font-size: 22px;
        border-radius: 50%;
        background: #263ac1;
        padding: 8px 10px;
        color: white;
    }
    .clos{
         font-size: 22px;
        border-radius: 50%;
        background: #263ac1;
        padding: 7px 10px;
         display: none;
         position: absolute;
         left: 1px;
         color: white;
    }
    .pluse{
        display: inline-block
    }
    .mobile-menu-bars i{
        cursor: pointer;
    }
    header .left-area{
        max-width: 100px;
        position: absolute;
        top: 10px;
        right: 20px;
    }
    .middle-area .login-area,.middle-area .sing-up-area{
        width:100%;
       }
       .middle-area .sing-up-area .submit{
           width: 60%;
       }
       .middle-area .sing-up-area .shor-description{
           font-size: 18px;
       }
    header .left-area figure a span{
        display: none
    }
    .serc{
        font-size: 18px;
        background: #263ac1;
        color: white;
        border-radius: 50%;
        padding: 5px 10px;
        font-weight: 900;
        position: absolute;
        cursor: pointer;
        display: block;
    }
   .top-bar a span{
        font-size: 18px;
        background: #263ac1;
        color: white;
        border-radius: 50%;
        margin-right: 20px;
        padding: 5px 10px;
        font-weight: 900;
        position: absolute;
        margin: 12px 80px;
        left: 0;
    }
   header .left-area .search form .input-group{
        display: none
    }
    header .menu ul li{
        display: block;
        padding: 2px 10px;
        border-bottom: 1px solid rgba(220, 220, 220, 0.308);
    }
    header .menu ul li a{
        font-size: 15px;
      color:rgb(0,0,0);
    }

    header .menus{
        background: white;
        position: absolute;
        left:-350px;
        width: 350px;
        height: 100vh;
        transition: all 0.3s;
        overflow-y: scroll;
        z-index: 9;
    }
  
    header .show{
        left:0;
        transition: all 0.3s;
    }
    header .menu li a{
        color: white;
    }
    .search,header .left-area figure{
        max-width: 50%;
    }
}
@media(max-width:500px){
.mobile-user .dp{
    font-family: muli;
    position: absolute;
    top:60px;
    left: 20px;
}

 .user-info .name{
 
    top: 30px;
    right: 40px;
}
    
  .user-info .follow{
   top:150px;
      right: 130px;
}
 .user-info .bio{
   top:150px;
    right: 50px;
}
    .mobile-menu-bars,header .left-area .search form button{
        font-size: 19px;
    }
    header .menus{
        width: 300px;
        left: -300px;
    }
    header .show{
        left: 0;
    }
    .user-info .dp img{
        height: 90px;
        width: 90px;
    }
    .search2 form{
        margin-left: 30px;
    }
    header .top-bar .logo-area{
        margin:0;
        left:31%
    }
    .middle-area .creat-area .introduce{
        padding: 15px;
        font-size: 15px;
    }
    .middle-area .creat-area .left-side img, .middle-area .creat-area .right-side img{
        height: 120px;
    }
    .middle-area .right-area .most-liked{
        display: block;
    }
    .middle-area .right-area .treand{
        display: none;
    }
    .top-bar a span{
        font-size: 15px;
        margin:10px 60px;
        top: 5px;
    }header .top-bar .logo-area img{
        width: 128px;
        height: 40px;
		margin-top:4px;
    }
    .serc{
        font-size: 15px;
        top: 4px;
    }
       .mobile-menu-bars{
 
        top: 2px;
    }
    .open{
        font-size: 19px;
        padding: 8px 10px
     
    }
    .clos{
         font-size: 19px; padding: 8px 10px
    }
    .middle-area .right-area .posts .post .thumbnail img{
        height: 260px;
    }
   
}
@media(max-width:770px){
    .user-most-like{
        display: block !important;
    }
    .middle-area .left-area{
        display: none;
    }
    .middle-area .right-area .img-upload .hotel-gallery li{
        max-width: 33% !important;
    }
   .menu-2{
       display: block;
   }
   .menu{
       display: none;
   }
    .middle-area .right-area{
        margin: auto !important;;
        width: 80%;
    }

    .middle-area .right-area .posts .post .content .thumbnail img {
        width: 90px;
        height: 70px;
        margin-right: 20px;
    }
}
@media(max-width:1040px){
    .trips-card .filter .head-option p{
       margin-left: 60px;
        
    }
}
@media(max-width:980px){
    .slick-arrow{
        padding: 0px;
    }
    .trips-card .filter .head-option p{
      /*  margin-left: 40px;*/
         
     }
    
.middle-area .right-area .treand .post h3{
    font-size: 17px;
}
}
@media(max-width:360px){
    header .top-bar .logo-area img{
        width: 120px;
        height: 35px;
    }
    header .top-bar .logo-area{
        top:7px;
        left: 30%;
    }
    .middle-area .creat-area .left-side img, .middle-area .creat-area .right-side img{
        height: 100px;
    }
}

@media(max-width:550px){
    .middle-area .creat-area .options i{
        font-size: 20px;
        padding-top: 4px;
    }
    .search2 form{
        margin-left: 10px;
    }
    header .left-area .search .close-search{
       left: 140%;
    }
.middle-area .login-area .language select{
  
    background-position: 65% 55%;
}
}
@media(max-width:450px){
    .middle-area .login-area .language select{
  
        background-position: 70% 55%;
    }
}
@media(max-width:340px){
    .middle-area .creat-area .options i{
     display: none;
    }
    .middle-area .login-area .language select{
  
        background-position: 75% 55%;
    }
    .middle-area .creat-area .options input, .middle-area .creat-area .options textarea{
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .middle-area .creat-area .left-side img, .middle-area .creat-area .right-side img{
        height: 90px;
    }
}
@media(max-width:1100px){
    .middle-area .left-area .user-info .dp img{
        width: 100px;
        height: 100px;
    }
}
@media(max-width:1000px){
    .middle-area .right-area .img-upload .main-area .hotel-thumbnail img{
        width: 240px;
        height: 160px;
    }
    .middle-area .right-area .img-upload .hotel-gallery li img{
        height: 100px
    }
    .middle-area .right-area .img-upload .main-area .hotel-croped img{
        width:150px
    }
}
@media(max-width:550px){
    .middle-area .right-area .img-upload .hotel-gallery li{
        padding: 0px 10px;
    }
    .middle-area .right-area .img-upload .hotel-gallery li img{
        height: 100px;
    }
    .middle-area .right-area .img-upload .main-area .hotel-thumbnail img{
        width: 180px;
        height :140px;
    }
    .middle-area .right-area .img-upload .main-area .hotel-croped img{
        width: 120px;
    }
    .middle-area .right-area{
        width: 90%;
    }
}
@media(max-width:540px){
  
    .middle-area .right-area .img-upload .hotel-gallery li img{
        height: 70px;
		width: 70px;
    }
    .middle-area .right-area .img-upload .main-area .hotel-thumbnail img{
        width: 150px;
        height :120px;
    }
    .middle-area .right-area .img-upload .main-area .hotel-croped img{
        width: 100px;
    }
   
}


@media(max-width:1920px){
    .middle-area .right-area{
        margin-left: 20%;
    }
}

@media(max-width:1700px){
    .middle-area .right-area{
        margin-left: 46%;
    }
}
@media(max-width:1600px){
    .middle-area .right-area{
        margin-left: 40%;
    }
}
@media(max-width:1400px){
    .middle-area .right-area{
        margin-left: 20%;
    }
}