.detailspageSection{
    height: 500px;
    position: relative;
}
.detailsbanner{
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.detailsbanner img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.bannerpkgDetail{
  
   bottom: 0;
   width: 100%;
   padding: .5rem 0;
   /* background-color: #0a6487b9; */
   background-color: #0D2434;
   display: flex;
   align-items: center;
   justify-content: space-around;
   color: #fff;
}

#detailClick{
    font-size:1.1rem;
}

#detailLocation{
    font-size:1.1rem;
     text-transform: uppercase;
}
.bannerpkgDetail h1{
    font-size: 2.2rem;
    text-shadow: 2px 2px #000;
}
.priceBox h3{
    font-size: 1.7rem;
    text-shadow: 2px 2px #000;
}

.detailsbanner form{
    position: absolute;
    top: 15%;
    right: 2rem;
    width: 40%;
}
.detailsbanner form input{
    display: block;
    border: none;
    outline: none;
    width: 96%;
    margin: 1.5rem 0;
    background-color: transparent;
    border-bottom: 2px solid #fff;
    padding: 2%;
    color: #fff;
    font-weight: 500;
}
.detailsbanner form input::placeholder{
    color: #fff;
}
.detailsbanner form textarea{
    width: 96%;
    height: 15vh;
    padding: 2%;
    margin: 1rem 0;
    background-color: transparent;
    display: block;
    border: none;
    outline: none;
    border-bottom: 2px solid #fff;
    color: #fff;
    font-weight: 500;
}
.detailsbanner form textarea::placeholder{
    color: #fff;
}
.detailsbanner form button{
    width: 200px;
    padding: .7rem 0;
    text-align: center;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    outline: none;
    margin-top: 1rem;
    font-weight: 500;
    font-size: 1rem;
}
.detailsbanner form button:hover{
    background-color: #0f5e9c;
}

.overBack{
   padding: 3%;
}
.otherdiv{
    width: 40%;
    
    
}
.overviewbox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom:4rem;
    padding:2rem 1rem 2rem 1rem;
}

.mySwiper{
    width: 100%;
    height: auto;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border: 2px solid #FFF;
}
.overviewbox .overviewimage img{
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}
.controollerGimgs{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}
.controollerGimgs i{
    font-size: 1.5rem;
    color: #fff;
    padding: .5rem;
}
.controollerGimgs i:hover{
    background-color: rgba(0, 0, 0, 0.8);
}
.overview{
    width: 60%;
     height: 300px;
    overflow-y: scroll; 
   border:5px solid #fff;
    padding-left: 1.5rem;
    padding-right:.5rem;
    text-align: justify;
    /* border-bottom:1px solid #eee; */
}
.overview::-webkit-scrollbar{
   width:8px;
   background-color:#0D2434;
}

.overview::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.overview::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.overview li{
    margin-left: 1rem !important;
}
.inclutionExclutionBox{
    display: flex;
    justify-content: center;
    /* background-color:#0D2434; */
    gap: 1.5rem;
    margin-top:2rem;
    border-radius: 20px;
    /* box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.25), 0px 0px 0px 1px rgba(9, 30, 66, 0.08); */
}
.inclutionExclutionBox ul{
    list-style: none;
    width: calc(100%/3);
    padding:2rem;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 20px;
    background-color: #f8f8f8;
    /* margin-top:1rem; */
    
}

/* .inclutionExclutionBox ul:nth-child(1){
    border-right:1px solid #999;
}
.inclutionExclutionBox ul:nth-child(2){
     border-right:1px solid #999;
} */

.inclutionExclutionBox ul li{
    display: flex;
    align-items: center;
    color: #474747;
    /*justify-content: center;*/
    font-size:.9rem;
    padding:.5rem;
}
.inclutionExclutionBox ul h3{
    color: #717171;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.inclutionExclutionBox .inclution li i{
    text-align: center;
    border-radius: 50%;
    font-size: 1.2rem;
    margin-right: .5rem;
}
.inclutionExclutionBox .exclution li i{
    text-align: center;
    font-size: 1.2rem;
    margin-right: .5rem;
}
.inclutionExclutionBox .policy li i{
    font-size: .9rem;
    margin-right: .5rem;
}
.amiGalleryBack{
    background-image: url(../image/benner_7.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.amenitiesbox h2{
    margin-bottom: 1rem;
    text-align: center;
    font-size: 2rem;
    padding: .5rem 0;
    color: #000;
    padding-top: 2rem;
}
.amenities{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding:1.5rem;
}
.amenities li{
    display: block;
    text-align: center;
    width: 150px;
    margin: 1rem;
    margin-left: 0;
}
.amenities li i{
    font-size: 2.5rem;
}
.amenities li img{
    width:40px;
    height:40px;
}
.amenities li p{
    color: #0d2434;
    margin-top: .5rem;
    font-weight:500;
}

/* gallery Start */
.galleryContainer{
    margin-top: 2rem;
    padding-bottom: 2rem;
}
.galleryContainer h2{
    margin-bottom: 1rem;
    text-align: center;
    font-size: 2rem;
    padding: .5rem 0;
    color: #000;
}
.galleryContainer .innergallery{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.galleryContainer .innergallery .imagegallery{
    width: 300px;
    height: 200px;
    overflow: hidden;
    margin: .7rem;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 1px rgba(209, 213, 219,1);
}
.galleryContainer .innergallery .imagegallery img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: .5s;
}
.galleryContainer .innergallery .imagegallery img:hover{
    transform: scale(1.2);
}
.popupimageslider {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popupimageslider img {
    width: 70%;
    height: auto;
}
.crosX{
    font-size: 2rem;
    color: #fff;
    position: absolute;
    top: 2rem;
    right: 2rem;
}
.controller {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: 90%;
    display: flex;
    justify-content: space-between;
}

#prevButton {
    left: 10px;
}

#nextButton {
    right: 10px;
}

/* FAQ start */
.faqcontaner{
    display: flex;
    justify-content: space-between;
}
.faqcontaner h2{
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 2rem;
    padding: .5rem 0;
    color: #000;
}
.innerfaqbox{
    width: 55%;
    padding: 4%;
    /* background-image: url(../image/paper-flower-2.jpg); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.innerfaqbox .faq{
margin-bottom: 1.5rem;
}
.innerfaqbox .faq .faqHeading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #999;
    padding: .5rem;
    color: #7c5454;

}
.innerfaqbox .faq .faqHeading h3{
    font-weight: 500;
    font-size: 1rem !important;
    color: #7c5454;
}
.innerfaqbox .faq .faqHeading .faqarow{
   transform: rotate(90deg);
}
.innerfaqbox .faq p{
    margin-top: .5rem;
    display: none;
    color: #7c5454;
}
.faqcontaner .indexContactbox{
    width: 50%;text-align: center;
    height: fit-content;
    padding-top: 7%;
}
.faqcontaner .indexContactbox h2{
    font-size: 4.2rem;
    width: 80%;
    margin-top: 2rem;
    color: #0D2434;
    margin: auto;
}
.faqcontaner .indexContactbox p{
    font-size: 1.2rem;
    color: #7c5454;
    margin-bottom: 1rem;
    
}
.faqcontaner .indexContactbox img{
    rotate: -20deg;
    margin-left: 2rem;
    width:100%;
}
.contactFormBox{
    width: 45%;
    height: fit-content;
    padding: 4%;
    background-color: #F3E745;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
}
.contactFormBox form{
    width: 100%;
}
.contactFormBox form input{
    display: block;
    border: none;
    outline: none;
    width: 100%;
    margin: 1.5rem 0;
    background-color: transparent;
    border-bottom: 2px solid #000000;
    padding: 2%;
    color: #000000;
    font-weight: 500;
}
.contactFormBox form input::placeholder{
    color: #000000;
}
.contactFormBox form #activity{
    display: block;
    border: none;
    outline: none;
    width: 100%;
    margin: 1.5rem 0;
    background-color: transparent;
    border-bottom: 2px solid #000000;
    padding: 2%;
    color: #000000;
    font-weight: 500;
    font-size: .9rem;
}
.contactFormBox form #activity option{
   background-color: #fff;
    font-size: .9rem;
}
.contactFormBox form textarea{
    width: 100%;
    padding: 2%;
    padding-bottom: 0;
    margin: 1rem 0;
    background-color: transparent;
    display: block;
    border: none;
    outline: none;
    border-bottom: 2px solid #000000;
    color: #000000;
    font-weight: 500;
}
.contactFormBox form textarea::placeholder{
    color: #000000;
}
.contactFormBox form button{
    width: 200px;
    padding: .7rem 0;
    text-align: center;
    background-color: #0D2434;
    color: #fff;
    border: 1px solid #fff;
    outline: none;
    margin-top: 1rem;
    font-weight: 500;
    font-size: 1rem;
}
.contactFormBox form button:hover{
    background-color: #0f5e9c;
}

@media(max-width:950px){
    .bannerpkgDetail h1{
        font-size: 2rem;
        padding-right: .5rem;
    }
    .overviewbox{
        display: block;
    }
    .otherdiv{
        width: 100%;
    }
    .mySwiper{
        width: 100%;
        height: 300px;
        overflow: hidden;
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    .overviewbox .overviewimage img{
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
    .overview{
        width: 100%;
        padding: .5rem;
        padding-top: 0;
        margin: auto;
        text-align: justify;
    }
    .overview::-webkit-scrollbar{
       display: none;
     }
    .overview table{
        width: auto;
    }
    .overview h2{
        margin:.5rem 0rem;
    }
    .overview p{
        margin-bottom: 1rem;
        font-size: .9rem;
    }
    .overview p:last-child{
        margin-bottom: 0;
    }
    .inclutionExclutionBox{
        padding: 0;
    }
    
}
@media(max-width:750px){
    .bannerpkgDetail{
        /*background-color:unset;*/
        /*display: block;*/
        flex-wrap:wrap;
       text-align: center;
     }
     .bannerpkgDetail h1{
        padding: .5rem;
        width:100%;
     }
     #detailLocation{
        margin: .5rem 0;
     }
     #detailClick{
        margin: .5rem 0;
     }
     .inclutionExclutionBox{
       flex-wrap: wrap; 
    }
    .inclutionExclutionBox ul{
        width: 100%;
        margin: 0;
    }
    .amenities li{
        margin: .5rem;
    }
    .amenities li i{
        font-size: 1.8rem;
    }
    .faqcontaner{
        display: block;
    }
    .innerfaqbox{
        width: 100%;
    }
    .contactFormBox{
        width: 100%;
    }
    
    .faqcontaner .indexContactbox{
        width:100%;
    }
    .faqcontaner .indexContactbox img{
        display:none;
        
    }
    
    .contactFormBox form input{
        width: 100%;
    }
    .contactFormBox form textarea{
        width: 100%;
    }
}
@media(max-width:600px){
    .detailspageSection{
        height: 300px;
    }
    .detailsbanner{
        height: 300px;
    }
    .detailsbanner img{
        height: 300px;
    }
    .inclutionExclutionBox ul{
        padding:1rem;    
    }
    .inclutionExclutionBox ul h3{
        margin: 0;
    }
    .galleryContainer .innergallery .imagegallery{
        width: 200px;
        height: 170px;
        margin: .3rem;
    }
    .galleryContainer .innergallery .imagegallery img{
        width: 100%;
        height: 170px;
    }
}
@media(max-width:500px){
    h2{
        font-size: 1.5rem !important;
    }
    p{
        font-size: .8rem !important;
    }
    .bannerpkgDetail h1{
        font-size: 1.8rem;
        padding-right: .5rem;
    }
    .priceBox{
        display: flex;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
    }
    .priceBox h3{
        font-size: 1.3rem;
        margin: .3rem 0;
        margin-right: .5rem;
    }
}
@media(max-width:450px){
    .galleryContainer .innergallery .imagegallery{
        width: 100px;
        height: 100px;
        margin: .3rem;
    }
    .galleryContainer .innergallery .imagegallery img{
        width: 100%;
        height: 100px;
    }
}
@media(max-width:350px){
    .amenities li{
        display: block;
        text-align: center;
        width: 100px;
        margin: .3rem;
    }
    .contactFormBox form button{
        width: auto;
        padding:.5rem;
    }
}