* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap');


:root {
    --darkblue: #0e1e2c;
    --darkblue2: #132738;
    --lightbg: #f5f5f5;
    --ligthbg2: #F4F8FB;
    --linkcolor: #0a66c2;
    --bordercolor: #DBE1E5;
    --cardbg: #fff;
    --textcolorlight: #595959;
    --textcolordark: #212221;
    --cardinnerborder: #CFDDFF;
    --cardinnerbg: #cfddff33;
    --fontfamily: 'Muli', sans-serif;
    --btncolor: #F27838;
}

body {
    font-family: var(--fontfamily);

}

/* tour price filter sec */

.btn-outline{
    padding: 5px 10px !important;
    font-size: 14px !important;
    color: #000;
    margin: 0 5px 5px 0px;
    border: 1px solid var(--bordercolor) !important;
}
.btn-check:checked+.btn{
    background-color: #000 !important;
    color: #fff !important;
}
.hide{
    display: none !important;
    opacity: 1;
    animation: hideData 2s linear;
}

@keyframes hideData {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
 

}
.showtour{
    display: block !important;
    animation: showData 2s linear;
    opacity: 1;
}
@keyframes showData {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
#not-found{
    margin: 30px auto;
    text-align: center;
}
#not-found img{
    height: 300px;
}

#not-found h2{
    font-size:32px;
    font-weight: 900;
}

#not-found p{
    margin: 20px auto;
    max-width: 800px;
    color: var(--textcolorlight);
}
#all-tour {
    background-color: var(--ligthbg2);
    padding: 30px 10px;
}

.input-div{
    margin: 0 0 20px 0;
    position: relative;
}
.input-div i{
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 25px;
}

.input-div input{
    padding: 10px 20px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--bordercolor);
}
.input-div input:focus{
    outline: none;
    border: 1px solid var(--darkblue);
}


.tour-inner-sec {
    max-width: 1320px;
    margin: 20px auto;
}

.tour-inner-sec h2 {
    font-weight: bolder;
    
}

/* tour filter sec */
.tour-filter-card {
    margin-top: 25px;
    position: relative;
}
#all-tour .row
{
    --bs-gutter-x: 0rem !important;
}

.tout-filter-sec {
    padding: 20px;
    background-color: #fff;
    border: 1px solid var(--bordercolor);
    border-radius: 10px;
    position: sticky;
    top: 20px;

}
.offcanvas{
    z-index: 9999 !important;
    height: 1000px !important;

}
.offcanvas::-webkit-scrollbar
{
    display: none;
}
#filter-data{
    overflow: scroll !important;
    height: 100% !important;
}
#filter-data button{
    margin: 20px 0 0 0 ;
    padding: 7px 20px;
    border-radius:5px;
    background-color: var(--darkblue);
    color: #fff;
    border: none;
}
.filter-head h4 {
    font-size: 17px;
    font-weight: 900;
    color: var(--textcolorlight);
}

.filter-head i {
    margin-right: 5px;
    color: #000;
}

.filter-btn-sec h5 {
    margin: 20px 0px 15px 0px;
    font-size: 18px;
    font-weight: bold;
}

.filter-btn-sec .form-check {
    margin: 0 0 10px 0;

}

.filter-btn-sec label {
    color: var(--textcolorlight);
}

.filter-btn-sec h6 {
    color: var(--textcolorlight);
}

/* tour main sec */

.tour-main {

    margin: 0px 20px;
}
.con-filter-btn-sec{
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.con-filter-btn-sec p{
    width: fit-content !important;
}
.con-filter-btn-sec i{
    margin-right: 3px;
    font-size: 18px;
}

#mob-filter-btn{
    display: none;
}
.main-tour-list {
    display: grid;
    grid-template-columns: max-content 1fr min-content;
    grid-gap: 30px;
    gap: 30px;
    height: 100%;

    padding: 10px;
    border-radius: 20px;
    border: 1px solid var(--bordercolor);
    background-color: #fff;
    margin-bottom: 20px;
    align-items: stretch;
}

.main-tour-list h4 {
    font-size: 24px;
    font-weight: 900;
}

.t-type
{
    font-size: 12px;
    padding: 3px 6px;
    /* background-color: var(--); */
    border-radius: 5px;
    color: var(--darkblue);
    margin-right: 5px;
    color: var(--linkcolor);
    /*border: 1px solid var(--linkcolor);*/
}

.t-category{
    font-size: 12px;
    padding: 3px 6px;
    /*background-color: var(--linkcolor);*/
    border-radius: 5px;
    color: var(--lightbg);
    margin-right: 5px;
}
.t-id{
    font-size: 12px;
    padding: 2px 6px;
    
    border-radius: 5px;
    color: var(--darkblue);
    margin-right: 5px;
    border: 1px solid var(--darkblue);
} 

.main-tour-list p {
    font-size: 15px;
}

.main-tour-list img {
    width: 280px;
    min-height: 260px;
    object-fit: cover;
    border-radius: 10px;
    height: 100%;
}

.main-tour-list h4 {
    font-size: 19px;
    font-weight: bolder;
    margin-bottom: 6px;
    margin-top: 15px;
}

.main-tour-price {
    max-width: 210px;
    width: 210px;
    height: 100%;
    margin: auto 0px;
    background-color: var(--cardinnerbg);
    border: 1px solid var(--bordercolor);
    padding: 15px 15px;
    border-radius: 10px;
}

.main-tour-price h5 {
    font-size: 18px;
    font-weight: 900;
    margin: 5px 0px !important;
}

.main-tour-price h3 {
    margin: 4px 0px;
    font-weight: 900;
}

.main-tour-price a {
    font-size: 18px;
    font-weight: bolder;
    text-decoration: none;
}

.main-tour-price h2 span {
    font-size: 16px;
    color: var(--textcolorlight);
}

.main-tour-price h2 {
    font-size: 21px;
    margin-top: 20px;
    color: var(--darkblue);
}

.main-tour-list h6 {
    font-size: 14px;
    margin-top: 5px;
    color: var(--darkblue);
}

.main-tour-price p {
    color: var(--textcolorlight);
    font-size: 15px;
}

.main-tour-price button {

    width: 100%;
    background-color: transparent;
    border: 1px solid #000;
    padding: 5px 10px;
    border-radius: 5px;
}

.main-tour-price button a {
    font-size: 16px;
    text-decoration: none;
    color: #000;
    font-weight: 900;
}

/* .main-tour-list .tour-desc{
    margin: 0px 0px 15px 0px;
    color: var(--textcolordark);
    text-align: justify;
    font-size: 15px;
} */

.all-inclusive i {
    font-size: 26px;
    margin: 5px 20px 20px 0px !important;


}

.main-tour-list i {

    margin-right: 8px;
    color: var(--textcolordark);

}



/* responsive */

@media (max-width:1250px) {
    .main-tour-list {

        grid-template-columns: 1fr 1fr;
        padding: 20px;
        gap: 15px !important;
    }
  .main-tour-list img{
    height: 100% !important;

   
        width: 100% !important;
  }
  .main-tour-list div:first-child{
    
grid-column: span 2;  }
  .main-tour-price{
    max-width: 100%;
    width: 100%;
  } 
  .main-tour-list h4{
    margin-top: 0px !important;
  }
}

@media (max-width:670px)
{
    .main-tour-list {

        grid-template-columns: 1fr;
        padding: 10px;
    }
    .main-tour-list div:first-child{
    
        grid-column: span 1;  }
        .tour-main {
            margin: 0px 0px;
        }
}

@media(max-width:991px)
{
    #mob-filter-btn{
        display: inline-block;
    }
    #filter-data-sec
    {
        display: none;
    }
    .tour-inner-sec {
        max-width: 1320px;
        margin: 10px auto 20px auto;
    }
    .tour-page-title{
        display: none;
    }
    #all-tour {
        background-color: var(--ligthbg2);
        padding: 10px 10px 30px 10px;
    }
    .tour-filter-card{
        margin: 0px !important;
    }
    #filter-data::-webkit-scrollbar{
        display: none;
    }
}