*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,html{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    height: 100%;
    width: 100%; 
    overflow-x: hidden;
}
a{
    text-decoration: none;
    color: white;
    margin-left: 10px;
}
ul{
    list-style-type: none;
    display: flex;
    gap: 10px;
}
i:hover,.login:hover,.register:hover{
    color: rgb(233, 114, 71);
}
/* NAV-----------------------------------------------------BAR */
.top-nav-bar{
    display: flex;
    justify-content: space-around;
    align-content: center;
    background-color: rgb(54, 1, 92);
    color: white;
    font-size: 11px;
    position: fixed;
    width: 100vw;
    padding: 10px;
    min-height: 4vh;
    z-index: 300;
}
.bottom-nav-bar
{
    background-color: rgb(66, 11, 105);
    opacity: 0.8;
    position: fixed;
    top: 33px;
    width: 100vw;
    min-height: 20vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    z-index: 300;
}
.logo img{
    margin-right: 10px;
    cursor: pointer;
}
.logo{
    color: white;
    font-size: 30px;
    font-weight:900;
    cursor: pointer;
}
.nav-bar{
    font-size: smaller;
}
.nav-bar ul{
    display: flex;
    gap: 30px;
}
li>img{
    display: none;
}
.cross-mark{
    display: none;
}
.nav-bar li>a:hover{
border-bottom: 2px solid;
border-image: linear-gradient(to right, orange, #8d4fff);
border-image-slice: 1;
padding-bottom: 10px;
}
.search i{
    transform: scaleX(-1);
    margin-right: 5px;
    cursor: pointer;
}
.search-bar{
    height: 30px;
    width: 250px;
    position: absolute;
    top: 100px;
    right:65px;
    /* display: none; */
    transform: translateX(800%);
    transition: transform 0.4s ease-in;
    font-size: 17px;
    
}
.search-active{
  /* display: block; */
  transform: translateX(0%);
  z-index: 100;
  opacity: 1;
  width: 200px;
}
.burgur{
    cursor: pointer;
    display: none;
}
.burgur div{
    width: 20px;
    height: 3px;
    border-radius: 10px;
    background-color: white;
    margin: 3px;
}

/*------------------Parallax  bg-img-container______________________ */

.bg-img-container{
    background-image: url("https://preview.colorlib.com/theme/travelix/images/about_background.jpg");
    height: 70%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
}

.upper-options >h1{
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    color: white;
}
/* _____________OPTION AND FORM TOP________ */
.options-form{
    display: flex;
    flex-direction:column;
    width: 100%;
    position: relative;
    bottom: 103px;
}
.upper-options{
    height: 90px;
    background-color: white;
    border-top-right-radius:60px ;
    border-top-left-radius:60px ;
    display: grid;
    grid-template-columns: 160px 170px 160px 150px 160px 160px;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
}



.upper-options button{
    height: inherit;
    padding: 50px;
    border: 0;
    width:max-content;
    cursor: pointer;
}
.upper-options i:hover{
    color: white;
}
.upper-options button:hover{
    background-color: #fa9e1b;
    height: inherit;
    padding: 50px;
    color: white;
}
.first-button{
    border-top-left-radius:60px ;
}
.last-button
{
    border-top-right-radius:60px ;
}
.form-div{
    height: 400px;
    background-image: linear-gradient(to right, orange, #8d4fff);
    display: flex;
    justify-content: center;
    align-items: center;
    position:relative;
    bottom: 5px;
    margin-top: 15px;
}

.top-form{
    display: flex;
    gap: 2%;
    width: 80%;
    /* justify-content: space-between; */
    color: white;
    font-size: 13px;
}
/* .destination-form{
    display: flex;
    gap: 6%;
    width: 80%;
    justify-content: space-between;
    color: white;
    font-size: 13px;
} */
.destination-form .destination-box1>input{
    width: 250px;
    height: 40px;
    color: rgb(155, 151, 151);
    font-size: 20px;
    padding: 10px;
    margin-top: 10px;
}
.destination-form .destination-box2>input,.destination-form .destination-box3>input{
    width: 200px;
    height: 40px;
    color: rgb(155, 151, 151);
    font-size: 20px;
    padding: 10px;
    margin-top: 10px;
}
.destination-form .destination-box4 select,.destination-form .destination-box5 select{
    width: 100px;
    height: 40px;
    color: rgb(155, 151, 151);
    font-size: 20px;
    padding: 10px;
    margin-top: 10px;
}

.destination-radio-buttons{
    margin-top: 20px;
    color: white;
    display: none;
    grid-template-columns: 150px 150px 150px 150px 150px;
    justify-content: space-between;
    margin-bottom: 30px;
}
.radio-box span{
    font-size: 10px;
    margin-left: 10px;
    
} 
.load-more{
    color: white;
    display: none;
}
.load-more>.loadMore{
    display: inline;
    cursor: pointer;
}

.extra_options{
    display: none;
}

.destination-box6{
    width: 150%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.destination-form .destination-box6>input{
    width: 160px;
    height: 55px;
    color: white;
    font-size: 15px;
    border-radius: 30px;
    background-color: rgb(65, 2, 65);
    border: none;
    position: relative;
    top: 30px;
    right: 560px;
}
.options-and-form-box{
    display: none;
}

/*________________________________ FILTER___________________________ */

.filter-div{
    margin-top: 10px;
}
.filters >ul{
    display: flex;
    /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 10%;
    position: relative;

}
.filters ul li{
    padding: 13px;
    border: 2px solid rgb(196, 187, 187);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}
.filters ul li i{
margin-left: 100px;
}
.sub-menu1{
    display: none;
}
.sub-menu2{
    display: none;
}
.sub-menu3{
    display: none;
}
.sub-menu4{
    display: none;
}
.sub-menu5{
    display: none;
}
.filters ul :hover .sub-menu1{
    display: block;
    position: absolute;
    top:45px;
    left: 0;
    z-index: 50;
    background-color: white;
}
.sub-menu1 > ul{
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sub-menu1 > ul >li{
    padding: 13px;
    width: 183px;
}
.filters ul :hover .sub-menu2{
    display: block;
    position: absolute;
    top:45px;
    z-index: 50;
    background-color: white;
}
.sub-menu2 > ul{
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sub-menu2 > ul >li{
    padding: 13px;
    width: 100%;
}
.filters ul :hover .sub-menu3{
    display: block;
    position: absolute;
    top:45px;
    z-index: 50;
    background-color: white;
}
.sub-menu3 > ul{
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sub-menu3 > ul >li{
    padding: 13px;
    width: 100%;
}
.filters ul :hover .sub-menu3{
    display: block;
    position: absolute;
    top:45px;
    z-index: 50;
    background-color: white;
}
.sub-menu3 > ul{
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sub-menu3 > ul >li{
    padding: 13px;
    width: 100%;
}
.filters ul :hover .sub-menu4{
    display: block;
    position: absolute;
    top:45px;
    z-index: 50;
    background-color: white;
}
.sub-menu4 > ul{
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sub-menu4 > ul >li{
    padding: 13px;
    width: 100%;
}
.filters ul :hover .sub-menu5{
    display: block;
    position: absolute;
    top:45px;
    z-index: 50;
    background-color: white;
}
.sub-menu5 > ul{
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sub-menu5 > ul >li{
    padding: 13px;
    width: 100%;
}

/* __________________________CARDS_____________________________________ */

.best-offers{
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    padding-left: 70px;
    margin-top: 100px;
}
/* .best-offers .heading{
    margin-top: 100px;
    margin-bottom: 100px;
} */
.offer-desciption{
    font-size: 13px;
    width: 90%;
    line-height: 25px;
}

.offers_price {
    display: inline-block;
    font-size: 36px;
    font-weight: 700;
    color: rgb(237, 168, 74);
    line-height: 25px;
}
.offers_price>span{
    margin-left: 10px;
    color:rgb(139, 127, 139);
    font-size: 13px;
    cursor: default;
    font-weight: lighter;
}
.box1 img{
    height: 350px;
    width: 250px;
}

.all-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.offers-grid{     
    display: grid;
    grid-template-columns: auto;
}
.book-now{
    /* width: 200px;
    height: 50px;
    color: white;
    font-size: 15px;
    border: none;
    border-radius: 30px;
    background-image: linear-gradient(to right, orange, #8d4fff);
    transition: background-image 0.5s linear;
    border-image-slice: 1; */
    /* margin: 0 30%; */
    /* margin-top: 13%;
    margin-bottom: 5%;
    cursor: pointer;
    padding: 15px; */
    width: 160px;
    height: 55px;
    color: white;
    font-size: 15px;
    border-radius: 30px;
    background-color: rgb(65, 2, 65);
    border: none;
    margin-top: 13%;
    margin-bottom: 5%;
    cursor: pointer;
    padding: 15px;
}
.book-now:hover{
    background-image: linear-gradient(to right,#8d4fff, orange);
    border-image-slice: 1;
}
.offer-title{
    background-color:rgb(255, 165, 38) ;
    width: 50%;
    height: 30px;
    font-size: 11px;
    text-align: center;
    padding-top: 8px;
    position: relative;
    bottom:60px;
    color: white;
}
.star1{
    color: #ffeb8d ;
    font-size: 10px;
}
.star2{
    color: #fed46b ;
    font-size: 10px;
}
.star3{
    color: #fbb53d ;
    font-size: 10px;
}
.star4{
    color: #fa9e1b ;
    font-size: 10px;
}
.star5{
    color: #d8d7d1 ;
    font-size: 10px;
}
.point-div{
    background-color: blue;
    position: relative;
    left: 70%;
    bottom: 53px;
}
.review-point{
    display: flex;
    gap: 15px;
    position: absolute ;
}
.review-point h1{
    background-color: #fa9e1b;
    padding: 10px;
    font-size: 20px;
    border-radius: 50%;
    margin-right: 100px;

}
.review-point p{
    color: thistle;
}
.review-point  span{
    font-size: 14px;
    font-weight: 600;
    color: black;
}

























/* ____________________________________RESPONSIVE__________________________________________________ */

@media screen and (max-width:1036px)
{
    .options-form{
        display: none;
    }
    .options-and-form-box{
        display: flex;
        background-image: linear-gradient(to right, orange, #8d4fff);
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding-bottom: 100px;
        margin-bottom: 50px;
    }
    .options-div{
        padding-top: 100px;
        display: flex;
        flex-direction: column;
        width: 80vw;
    }
    .options-and-form-box >h1{
        position: relative;
        bottom: 100px;
        left: 100px;
        margin-left:10%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        color: rgb(255, 255, 255);
    }
    .options-div button{
        height: 60px;
        border: none;
        cursor: pointer;
        text-align:start;
        padding-left: 15px;
        background-color: white;
    }
    .options-div button span{
        margin-left: 10px;
        color: black;
        font-size: 15px;
    }
    .options-div button span:hover{
        margin-left: 10px;
        color: white;
        font-size: 15px;

    }
    .options-div i{
        color: #fa9e1b;
        font-size: 20px;
    }
    .options-div i:hover{
        color: white;
    }
    .options-div button:hover{
        background-color: #fa9e1b;
        color: white;
    }
    .forms-div{
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        width: 80vw;
        gap: 30px;
        color: white;
    }
    .forms-div .box-temp input{
        width: 100%;
        height: 40px;
        font-size: 15px; 
        margin-top: 10px;
    }
    .forms-div select{
        width: 100%;
        height: 40px;
        margin-top: 10px;
    }
    .check-box-grid
    {
        margin-top: 20px;
        color: white;
        display: grid;
        grid-template-columns: 120px 120px 120px 120px 120px;
        justify-content: space-between;
        margin-bottom: 30px;
    }
    .responsive-check-buttons
    {
        display: none;
    }
    .responsiveExtra_options{
        display: none;
    }
    .show_extra_option_responsive{
        margin-top: 20px;
        display: inline-block ;
    }
    .responsive-load-more{
        margin-top: 20px;
    }
    .responsiveLoadMore{
        width: 200px;
        cursor: pointer;
    }
    .forms-div #submit{
        width: 120px;
        border: 1px solid white;
        border-radius: 30px ;
        height: 40px;
        margin-top: 10px;
        cursor: pointer;
        background-color: rgb(65, 2, 65) ;
        color: white;
    }
    .forms-div #submit:hover{
        background-color: #74482f ;
    }
        /* ---------------BEST TOURS--------------- */

        .card{
            width: 75vw;
            height: 100vh;
        }
}
@media screen and (max-width:768px)
{ 
    body{
        overflow-x: hidden;
    }
    .top-nav-bar{
        display: flex;
        justify-content: space-between;
        align-content: center;
        background-color: rgb(54, 1, 92);
        color: white;
        font-size: 11px;
        position: fixed;
        width: 100%;
        padding: 10px;
        min-height: 4vh;
        z-index: 300;
    }
    li>img{
        display: inline-block;
    }
    .upper-target-ul{
        background-color: red;
        position: absolute;
        top:0;
        left:0;
        height: 100vh;
        width: 100vw;
        background-image: linear-gradient(to right, orange, #8d4fff);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: 'Dancing Script', cursive;
        font-size:30px;
        transform: translateX(600%);
        transition: transform 0.6s ease-in;
        z-index: 100;
    }
    .nav-bar li>a:hover{
        border-bottom: 0px solid;
        border-image: linear-gradient(to right, orange, #8d4fff);
        border-image-slice: 1;
        text-decoration: line-through;
        padding-bottom: 10px;
    }
    .burgur{
        display: block;
        cursor: pointer;
        z-index: 200;
    }
    .cross-mark{
        display: block;
        position: absolute;
        top: 50px;
        right: 30px;
        cursor: pointer;
    }
    .nav-active{
        transform: translateX(0%);
        z-index: 800;
        opacity: 1;
        width: 100%;
    }
    /* OUR OFFER HEADING RESPONSIVE PART */
    .options-and-form-box >h1{
        position: relative;
        bottom: 100px;
        left: 130px;
        margin-left: 50px;
        transform: translate(-50%, -50%);
        font-size: 40px;
        color: rgb(255, 255, 255);
    }

/* responsive check boxes */
.check-box-grid
{
    margin-top: 20px;
    color: white;
    display: grid;
    grid-template-columns: 190px 190px;
    justify-content:  flex-start;
    margin-bottom: 30px;
}
/* ______________BEST OFFERS___________________ */

.best-offers{
    padding-left:   40px;
}
.offers-grid{     
    display: grid;
    grid-template-areas: "one one"
                         "two two"
                         "three three"
                         "four four";
    gap: 100px
}
.grid1{
    grid-area: one;
}
.grid2{
    grid-area: two;
}
.grid3{
    grid-area: three;
}
.grid3{
    grid-area: three;
}
.grid4{
    grid-area: four;
}
.box1 img{
    width: 90vw;
    height: 90vh;
}
.offer-desciption{
    font-size: 13px;
    width: 90vw;
    line-height: 25px;
}
.point-div{
    background-color: blue;
    position: relative;
    left: 60%;
    bottom: 53px;
}
}
@media screen and (max-width:486px)
{ 
    .top-nav-bar{
        /* display: none; */
        font-size: 7px;
        height: 35px;
    }
    .bottom-nav-bar{
        width: 100vw;
    }
    
    .logo>img{
        height: 20px;
    }
    .logo{
        font-size: 20px;
    }
    body{
        overflow-x: hidden;
    }
    .nav-active{
        transform: translateX(0%);
        z-index: 400;
        opacity: 1;
        width: 100vw;
        height: 100vh;
    }
    .options-and-form-box >h1{
        left:80px;
        margin-left: 50px;
        font-size: 30px;
    }


    /* ___________________BEst OFFERS_____________ */

    .best-offers{
        padding-left: 20px;
    }
    .point-div{
        background-color: blue;
        position: relative;
        left: 60%;
        bottom: 53px;
    }
    .review-point span ,p{
        font-size: 10px;
    }
    .review-point h1{
        font-size: 10px;
    }
}




/* Foooter By suraj */

.top-footer {
    display: flex;
    justify-content: space-between;
    background-color: rgba(49, 18, 75, 255);
    padding: 5%;
    color: honeydew;
    /* flex-direction: column; */
  }
  
  .top-footer > div {
    width: 25%;
    
  }
  
  .top-footer > div:first-child > div:first-child {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
    
  }
  
  
  .top-footer > div:first-child p {
    font-weight: lighter;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding-right: 2%;

  }
  .top-footer > div:first-child ul {
    display: flex;
    justify-content: space-evenly;
   
    width: 80%;
    padding-left: 0%;
  }
  .top-footer > div:first-child ul li i {
    color: white;
    border: 1px solid rgba(242, 255, 0, 0.851);
    padding: 5px;
    color: whitesmoke;
    border-radius: 100%;
  }
  .top-footer > div:first-child ul li i:hover,.top-footer-tag-container ul li:hover{
    background: #fa9e1b;
    cursor: pointer;
  }
  .top-footer > div:nth-child(2) > h3{
    margin-bottom: 20px;
  }
  .top-footer > div:nth-child(2) > div {
    padding-left: 5px;
    display: flex;
    /* gap: 3px; */
    align-items: center;
    margin-bottom: 20px;
    margin-right: 20px;
   
  
  }
  .blog-post-logo-container {
    width: 30%;
  }
  .blog-post-logo-container + div h5:first-child {
    margin-bottom: 1px;
    font-weight: 300;
  }
  .blog-post-logo-container + div h5:nth-child(2) {
    margin-top: 10px;
    color: #f79c22;
    font-weight: 200;
    font-size: 1.03em;
  }

  .blog-post-logo-container +div >h5:nth-child(1):hover,.contact_info_text:hover{
    color: #f79c22;
    cursor: pointer;
  }
  .top-footer-tag-container > h3{
    margin-bottom: 20px;
  }
  .top-footer-tag-container div ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-left: 0%;
  }
  .top-footer-tag-container div ul li {
    width: 40%;
    margin-bottom: 10px;
    border: 1px solid #8a5035;
    padding: 5%;
    font-size: 0.8em;
    font-weight: 300;
  }
  .top-footer-tag-container div ul li:nth-child(odd) {
    margin-right: 5px;
  }
  .top-footer-tag-container div ul li a {
    color: whitesmoke;
  }
  
  
  .top-footer-content-info > h3{
    margin-bottom: 20px;
  }
  
  .contact-info-item {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
  }
  .contact-info-icon {
    width: 12%;
  }
  .contact-info-icon img {
    width: 70%;
  }
  /* top footer css end */
  
  /* contact info or botxtom footer start css */
  .copyright,.copyright ul li a,.copyright ul{
      display: flex;
      justify-content: space-evenly;
      background-color: #1f0733;
      color: #3d274e;
      align-items: center;
      font-weight: 500;
      font-size: 0.8rem;
      align-items: center;
  
  }
  .copyright ul li a:hover{
      color: whitesmoke;
  }
  .copyright p{
      width: 30%;
      letter-spacing: 1px;
      padding: 1%;
  }
  .copyright p span{
      color: #0d49a7;
  }
  .copyright p span:hover{
      color: #063580;
  }
  .copyright ul{
    width: 40%;
  }
  
  /* contact info or botxtom footer end css */
  
  
  /* media query  suraj start*/
  @media only screen and (max-width: 1100px) {
  
    /* top footer media qury start */
    .top-footer {
      flex-direction: column;
    }
    
    .top-footer > div {
      width: 70%;
      margin: auto;
      margin-bottom: 30px;
     }
  
    .top-footer > div:first-child ul {
      display: flex;
      justify-content: flex-start;
    }
    .top-footer > div:first-child ul li {
      margin-right:15px;
    }
    .blog-post-logo-container{
      margin-right: 0%;
      width: 25%;
    }
   
  
    .top-footer-tag-container div ul li {
      width: 30%;
      padding: 2%;
      font-size: 1em;
      /* margin-right: 20px; */
    }
    .top-footer-content-info > h3{
      margin-bottom: 50px;
      font-size: 1.3em;
    }
    /* top footer media qury end */
    
    
    .trending-hotels-card {
      width: 30%;
      /* border: 1px solid green; */
      
    }
  }
  
  @media only screen and (max-width: 900px) {
    .top-footer-tag-container div ul li{
      width: 43%;
      /* margin-right: 5%; */
    }
    /* bottom footer or copyright media query start */
   
    .copyright {
      flex-direction: column-reverse;
    }
    .copyright ul{
      flex-direction: column;
      justify-content: flex-start;
      margin-bottom: 15px;
      align-items: flex-start;
      width: 90%;
      margin: auto;
      margin-bottom: 5px;
      margin-top: 40px;
    }
    .copyright ul li a{
      margin-bottom: 15px;
    } 
    .copyright p{
      width: 85%;
      font-size: 0.8rem;
    }
    /* bottom footer or copyright media query end */
  
    /* client page media query start */
    .client{
      /* border: 1px solid red; */
      width: 90%;
      margin: auto;
    }
    .test_slide_container {
      flex-direction: column;
    }
    .test-item-img-container > img {
      width: 190%;
      height: 460px;
      margin: auto;
      /* border: 1px solid green; */
    }
   }
   
  /* media query  footer suraj end*/