/********** Template CSS **********/



:root {

    --primary: #303841;

    --light: #eeeeee;

    --dark: #00e0ff;

}







.fw-medium {



    font-weight: 500 !important;



}







.fw-semi-bold {



    font-weight: 600 !important;



}







.back-to-top {



    position: fixed;



    display: none;



    right: 45px;



    bottom: 45px;



    z-index: 1;



}











/*** Spinner ***/



#spinner {



    opacity: 0;



    visibility: hidden;



    transition: opacity .5s ease-out, visibility 0s linear .5s;



    z-index: 99999;



}







#spinner.show {



    transition: opacity .5s ease-out, visibility 0s linear 0s;



    visibility: visible;



    opacity: 1;



}











/*** Button ***/



.btn {



    font-weight: 500;



    text-transform: uppercase;



    transition: .5s;



}







.btn.btn-primary,



.btn.btn-secondary {



    color: #FFFFFF;



}







.btn-square {



    width: 38px;



    height: 38px;



}







.btn-sm-square {



    width: 32px;



    height: 32px;



}







.btn-lg-square {



    width: 48px;



    height: 48px;



}







.btn-square,



.btn-sm-square,



.btn-lg-square {



    padding: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    font-weight: normal;



    border-radius: 2px;



}











/*** Navbar ***/



.navbar-dark .navbar-nav .nav-link {



    margin-right: 30px;



    padding: 10px 0;



    color: var(--primary);



    font-size: 15px;



    text-transform: uppercase;



    outline: none;



}







.navbar-dark .navbar-nav .nav-link:hover,



.navbar-dark .navbar-nav .nav-link.active {



    color: var(--dark);



}







@media (max-width: 991.98px) {



    .navbar-dark .navbar-nav .nav-link  {



        margin-right: 0;



        padding: 10px 0;



    }



}











/*** Header ***/



.carousel-caption {



    top: 0;



    left: 0;



    right: 0;



    bottom: 0;



    /* background: rgba(15, 23, 43, .7); */



    z-index: 1;



}







.carousel-control-prev,



.carousel-control-next {



    width: 10%;



}







.carousel-control-prev-icon,



.carousel-control-next-icon {



    width: 3rem;



    height: 3rem;



}







@media (max-width: 768px) {



    #header-carousel .carousel-item {



        position: relative;



        min-height: 450px;



    }



    



    #header-carousel .carousel-item img {



        position: absolute;



        width: 100%;



        height: 100%;



        object-fit: cover;



    }



}







.page-header {



    background-position: center center;



    background-repeat: no-repeat;



    background-size: cover;



}







.page-header-inner {



    background: rgba(15, 23, 43, .7);



}







.breadcrumb-item + .breadcrumb-item::before {



    color: var(--light);



}







.booking {



    position: relative;



    margin-top: -100px !important;



    z-index: 1;



}











/*** Section Title ***/



.section-title {



    position: relative;



    display: inline-block;



    color: var(--dark);



}







.section-title::before {



    position: absolute;



    content: "";



    width: 20px;



    height: 2px;



    top: 50%;



    left: -25px;



    margin-top: -1px;



    background: #fff;



}







.section-title::after {



    position: absolute;



    content: "";



    width: 20px;



    height: 2px;



    top: 50%;



    right: -25px;



    margin-top: -1px;



    background: #fff;



}







.section-title.text-start::before,



.section-title.text-end::after {



    display: none;



}











/*** Service ***/



.service-item {



    height: 320px;



    padding: 30px;



    display: flex;



    flex-direction: column;



    justify-content: center;



    text-align: center;



    background: #FFFFFF;



    box-shadow: 0 0 45px rgba(0, 0, 0, .08);



    transition: .5s;



}







.service-item:hover {



    background: var(--primary);



}







.service-item .service-icon {



    margin: 0 auto 30px auto;



    width: 65px;



    height: 65px;



    transition: .5s;



}







.service-item i,



.service-item h5,



.service-item p {



    transition: .5s;



}







.service-item:hover i,



.service-item:hover h5,



.service-item:hover p {



    color: var(--dark) !important;



}











/*** Youtube Video ***/



.video {



    position: relative;



    height: 100%;



    min-height: 500px;



    background-position: center center;



    background-repeat: no-repeat;



    background-size: cover;



}







.video .btn-play {



    position: absolute;



    z-index: 3;



    top: 50%;



    left: 50%;



    transform: translateX(-50%) translateY(-50%);



    box-sizing: content-box;



    display: block;



    width: 32px;



    height: 44px;



    border-radius: 50%;



    border: none;



    outline: none;



    padding: 18px 20px 18px 28px;



}







.video .btn-play:before {



    content: "";



    position: absolute;



    z-index: 0;



    left: 50%;



    top: 50%;



    transform: translateX(-50%) translateY(-50%);



    display: block;



    width: 100px;



    height: 100px;



    background: var(--primary);



    border-radius: 50%;



    animation: pulse-border 1500ms ease-out infinite;



}







.video .btn-play:after {



    content: "";



    position: absolute;



    z-index: 1;



    left: 50%;



    top: 50%;



    transform: translateX(-50%) translateY(-50%);



    display: block;



    width: 100px;



    height: 100px;



    background: var(--primary);



    border-radius: 50%;



    transition: all 200ms;



}







.video .btn-play img {



    position: relative;



    z-index: 3;



    max-width: 100%;



    width: auto;



    height: auto;



}







.video .btn-play span {



    display: block;



    position: relative;



    z-index: 3;



    width: 0;



    height: 0;



    border-left: 32px solid var(--dark);



    border-top: 22px solid transparent;



    border-bottom: 22px solid transparent;



}







@keyframes pulse-border {



    0% {



        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);



        opacity: 1;



    }







    100% {



        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);



        opacity: 0;



    }



}







#videoModal {



    z-index: 99999;



}







#videoModal .modal-dialog {



    position: relative;



    max-width: 800px;



    margin: 60px auto 0 auto;



}







#videoModal .modal-body {



    position: relative;



    padding: 0px;



}







#videoModal .close {



    position: absolute;



    width: 30px;



    height: 30px;



    right: 0px;



    top: -30px;



    z-index: 999;



    font-size: 30px;



    font-weight: normal;



    color: #FFFFFF;



    background: #000000;



    opacity: 1;



}











/*** Testimonial ***/



.testimonial {



    background: linear-gradient(rgba(15, 23, 43, .7), rgba(15, 23, 43, .7)), url();



    background-position: center center;



    background-repeat: no-repeat;



    background-size: cover;



}







.testimonial-carousel {



    padding-left: 65px;



    padding-right: 65px;



}







.testimonial-carousel .testimonial-item {



    padding: 30px;



}







.testimonial-carousel .owl-nav {



    position: absolute;



    width: 100%;



    height: 40px;



    top: calc(50% - 20px);



    left: 0;



    display: flex;



    justify-content: space-between;



    z-index: 1;



}







.testimonial-carousel .owl-nav .owl-prev,



.testimonial-carousel .owl-nav .owl-next {



    position: relative;



    width: 40px;



    height: 40px;



    display: flex;



    align-items: center;



    justify-content: center;



    color: #FFFFFF;



    background: var(--primary);



    border-radius: 2px;



    font-size: 18px;



    transition: .5s;



}







.testimonial-carousel .owl-nav .owl-prev:hover,



.testimonial-carousel .owl-nav .owl-next:hover {



    color: var(--primary);



    background: #FFFFFF;



}











/*** Team ***/



.team-item,



.team-item .bg-primary,



.team-item .bg-primary i {



    transition: .5s;



}







.team-item:hover {



    border-color: var(--secondary) !important;



}







.team-item:hover .bg-primary {



    background: var(--secondary) !important;



}







.team-item:hover .bg-primary i {



    color: var(--secondary) !important;



}











/*** Footer ***/



.newsletter {



    position: relative;



    z-index: 1;



}







.footer {



    position: relative;



    /* margin-top: -110px; */



    padding-top: 50px;



}







.footer .btn.btn-social {



    margin-right: 5px;



    width: 35px;



    height: 35px;



    display: flex;



    align-items: center;



    justify-content: center;



    /* color: var(--light); */



    border: 1px solid #FFFFFF;



    border-radius: 35px;



    transition: .3s;



}







.footer .btn.btn-social:hover {



    color: var(--primary);



}







.footer .btn.btn-link {



    display: block;



    margin-bottom: 5px;



    padding: 0;



    text-align: left;



    color: #FFFFFF;



    font-size: 15px;



    font-weight: normal;



    text-transform: capitalize;



    transition: .3s;



}







.footer .btn.btn-link::before {



    position: relative;



    content: "\f105";



    font-family: "Font Awesome 5 Free";



    font-weight: 900;



    margin-right: 10px;



}







.footer .btn.btn-link:hover {



    letter-spacing: 1px;



    box-shadow: none;



}







.footer .copyright {



    padding: 25px 0;



    font-size: 15px;



    border-top: 1px solid rgba(256, 256, 256, .1);



}







.footer .copyright a {



    color: var(--dark);



}







.footer .footer-menu a {



    margin-right: 15px;



    padding-right: 15px;



    border-right: 1px solid rgba(255, 255, 255, .3);



}







.footer .footer-menu a:last-child {



    margin-right: 0;



    padding-right: 0;



    border-right: none;



}







.select2{width:100% !important;}

.select2-container .select2-selection--single, .select2-container .select2-selection--multiple{height: 36px;border: 1px solid #d1d3e2;border-radius: 6px;padding: 0 6px;}

.select2-container--default .select2-selection--single .select2-selection__rendered,.select2-container--default .select2-selection--multiple .select2-selection__rendered{line-height: 36px;font-size: 13px;color: #414141;padding: 0;text-transform: uppercase;}

.select2-container--default .select2-selection--single .select2-selection__arrow,.select2-container--default .select2-selection--multiple .select2-selection__arrow{height: 36px;}

.select2-container--default .select2-search--dropdown .select2-search__field{border: 1px solid #d1d3e2;font-size: 13px;color: #414141;border-radius: 2px;}

.select2-container--default.select2-container--focus .select2-selection--multiple{border: 1px solid #d1d3e2;}

.select2-container--default .select2-search--inline .select2-search__field{color:#414141; margin: 0;}

.select2-dropdown{border: none; border-radius: 0 0 3px 3px; box-shadow: rgba(0,0,0,0.3) 0 2px 5px; overflow: hidden;}

.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option[aria-selected=true]{background: var(--primary); color: #fff;}

.select2-results__option{font-size: 13px;letter-spacing: 0.2px;}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar{width: 5px;height: 5px;background-color: #f0f3fb;}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb{background-color: #dde5f9;}

.select2-container .select2-selection--multiple{height: auto;min-height: 36px;line-height: 36px;display: flex;padding: 4px;}

.select2-container--default .select2-selection--multiple .select2-selection__rendered{display: flex;flex-wrap: wrap; color: #fff;}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li{line-height: 24px;margin: 2px;padding: 0;overflow: hidden;font-size: 12px;position: relative;}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{width: 18px;padding: 0 4px;margin: 0;color: #fff;background: rgba(0,0,0,0.2);text-align: center;font-size: 13px;font-weight: 600;position: absolute;top: 0;left: 0;height: 100%;}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color: #fff;background: rgba(255,255,255,0.2);}

.select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice{background-color: #375dce;border:none;padding-left: 24px;padding-right:6px;}



.logo-holder{max-height: 83px;max-width: 135px;margin-left: 35px !important;}

.logo-holder-small{max-height: 80px;max-width: 90px;}

.logo-holder img, .logo-holder-small img{width: 100%;height: 100%;}



.cardTypeUl {display: flex;padding: 10px;border: 2px solid #ddd;background-color: #ddd;border-radius: 5px;align-items: stretch;

    justify-content: space-between;flex-flow: wrap;}

.cardTypeUl .cardTypeImg {display: block;flex: 0 1 auto;list-style-type: none;opacity: 1;margin-bottom: 5px;}

.cardTypeUl .cardTypeImg img { width: 50px;}

.cardTypeUl .cardTypeImg.de-active {opacity: 0.2;}



.pagination{}

.pagination .page-number{margin: auto;margin-left: 0;font-size: 14px;}

.pagination > li:nth-child(2) .page-link{border-radius: 6px 0 0 6px;}

.pagination .page-item .page-link{font-size: 14px;font-weight: 600;color: var(--primary)}

.pagination .page-item.active .page-link{color: #fff}



.room-item{

    position: relative;

}



.room-item .desc{

    font-size: 15px;

}



.counterHolder{

    position: absolute;

    top: 6px;

    background-color: #fff;

    right: 0px;

    border-radius: 20px;

    opacity: 0.8;

    margin: 0 10px;

}

.counterHolder:hover{

    opacity: 1;

}



.qty .count {

    color: #000;

    display: inline-block;

    vertical-align: top;

    font-size: 20px;

    font-weight: 700;

    line-height: 32px;

    min-width: 30px;

    text-align: center;

    background-color: #fff;

    outline : 0px

}

.qty .plusCss {

    cursor: pointer;

    vertical-align: top;

    color: #000000;

    font: 20px/1 Arial,sans-serif;

    text-align: center;

    float: right;

    padding: 7px 15px;

    border-top-right-radius: 20px;

    border-bottom-right-radius: 20px;

}

.qty .minusCss {

    cursor: pointer;

    vertical-align: top;

    color: #000000;

    font: 20px/1 Arial,sans-serif;

    text-align: center;

    background-clip: padding-box;

    float: left;

    padding: 7px 15px;

    border-top-left-radius: 20px;

    border-bottom-left-radius: 20px;

}

.qty .addMore{

    cursor: pointer;

    color: #000000;

    font: 16px/1 Arial,sans-serif;

    float: right;

    padding: 7px 15px;

    border-radius: 20px;

}

.qty .addMore:hover{

    background-color: var(--primary) !important;

    color: #fff;

}



.qty .addMore:hover span{

    display: none;

}



.qty .addMore:hover::before{

    content: "Add to cart";

}



.qty div {

    text-align: center;

}

.qty .minusCss:hover{

    background-color: var(--primary) !important;

}

.qty .plusCss:hover{

    background-color: var(--primary) !important;

}

/*Prevent text selection*/

.qty span{

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}

.qty input{  

    border: 0;

    width: 2%;

}

.qty input::-webkit-outer-spin-button,

.qty input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

.qty input:disabled{

    background-color:white;

}



.headerSection{

    /* position: fixed; */

    z-index: 2;   

    border-bottom: 1px solid rgba(45, 194, 189, 0.1)

}



.page-item.active .page-link {

    z-index: 1 !important;        

}



.cartPage{

    height: 100vh;

    position: fixed;

    z-index: 3;

    background-color: #fff;

    right: 0;

    border-left: 1px solid #ddd;

    overflow-y: auto;

}



.cartPage .cart-image{

    width: 100px;

}



.navbar-toggler.checkoutMobileBtn{

    background-color: var(--primary);

    padding: 8px 5px;

}



.cartHeader{

    background-color: var(--dark);

    position: sticky;

    top: 0;

    z-index: 1;

}



.cartHeader, .cartBody{

    padding-bottom: 20px;

}



.cartBody .cartProduct{

    height: 110px;

}



.cartHeader, .cartBody .row{

    border-radius: 3px;

    opacity: 0.9;

}



.detailsArea .cartFooter{

    position: sticky;

    bottom: 10px;

    height: 50px;

}



.detailsArea .cartFooter a{

    height: 100%;

}



.detailsArea .cartFooter a .goToSpan{

    position: absolute; 

    padding: 10px;

    left: 0;

}



.detailsArea .cartFooter a .checkoutPirce{

    position: absolute;

    padding: 7px 12px;

    height: 35px;

    border-radius: 5px;

    margin: 2px 10px;

    right: 0;

}



.detailsArea .priceHolder {

    /* position: absolute; */

    /* bottom: -20px;

    right: 25px; */

}



.detailsArea .counterHolder{

    margin: 0 0 0 45px;

    border: 1px solid var(--primary);

    top: 0;

    /* border-top-right-radius: 0px;

    border-bottom-left-radius: 0px; */

}



/* .detailsArea .counterHolder .qty .plusCss{

    border-top-right-radius: 0px;

}

.detailsArea .counterHolder .qty .minusCss{

    border-bottom-left-radius: 0px;

} */



.checkout-image-holder img{

    width: 50%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    height: 80%;

}



.checkout-image-holder p{

    position: absolute;

    bottom: 0;

    padding: 0 0 17px 0;

    margin: 0px;

    left: 0;

    font-size: 18px;

    color: #000000;

    height: 10%;

}



#checkoutForm .foodDetails .row{

    border-bottom: 1px solid #ddd;

    padding: 0 0 10px 0;

}



.mobileBtn{position: absolute;right: 80px;top: 15px; font-size: 12px;}

.custom-toggler {position: absolute; right: 20px; top: 10px}

.custom-toggler i{font-size: 30px}

.contact-text{font-size: 15px;}





/* .cs-modal .modal-header button {

    margin: 0 auto;

    padding: 0px 12px;

    font-size: 25px;

    border-radius: 20px;

    background: var(--primary);

    color: #fff;

}



.cs-modal .modal-body img {

    height: 100%;

    width: 100%;

}



.cs-modal .modal-body h2 {

    margin-top: 15px;

    margin-bottom: 15px;

}



.cs-modal .modal-body .download-content {

    font-size: 14px;

}



.custom-control-label:before{

    background: var(--primary);

    border: none;

} */



.custom-radio .custom-control-input:checked~.custom-control-label::before,

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {

    background: var(--dark);

    border: none;

}



.custom-radio .custom-control-input:focus~.custom-control-label::before,

.custom-checkbox .custom-control-input:focus~.custom-control-label::before {

    box-shadow: none;

    border: none;

}



/* .cs-modal .modal-body .download-content button {

    display: inline-block;

    padding: 8px 15px;

    background: var(--primary);

    border-radius: 30px;

    color: #fff;

    cursor: pointer;

    border: none;

}



.cs-modal .modal-body .download-content button:hover {

    color: var(--primary);

    background: var(--dark);

}



.cs-modal .modal-body .download-content button i {

    margin-right: 5px;

} */



.port-slider-nav .slick-track {

    padding: 30px 0 15px 0;

}



.port-slider-nav .slick-center img {

    -ms-transform: scale(1.2);

    -webkit-transform: scale(1.2);

    transform: scale(1.2);

}



.port-slider-nav .slick-track img {

    height: 100%;

    width: 85%;

}



.port-slider .slick-track img {

    height: 100%;

    width: 100%;

}



.toast{opacity:1 !important;background-color:#272838 !important;border-radius:0 !important;border:0;border-left:6px solid #14151E;z-index:0;}

.toast .toast-progress{height:100%;background-color:#14151E;z-index:-1;opacity:0.2;}

.toast .toast-title{font-size:16px;font-weight:600;font-family:'Lato', sans-serif;}

.toast .toast-message{font-size:13px;font-weight:300;font-family:'Lato', sans-serif;}

.toast.toast-success{border-color:var(--primary);}

.toast.toast-success .toast-progress{background-color: #fff;background-image: linear-gradient( 45.8deg, rgba(175,104,254,1) 9.3%, rgba(101,223,255,1) 75.1% );}

.toast.toast-danger,.toast.toast-error{border-color:#E21717;}

.toast.toast-danger .toast-progress,.toast.toast-error .toast-progress{background-color:#ddd!important;}

.toast.toast-warning{border-color:var(--primary);}

.toast.toast-warning .toast-progress{background-color:var(--primary);}

.toast.toast-info{border-color:#2196f3;}

.toast.toast-info .toast-progress{background-color:#2196f3;}

.toast.toast-default{border-color:#2196f3;}

.toast.toast-default .toast-progress{background-color:#2196f3;opacity:0.4;}

.toast-close-button{display:none;}



.main-order-area {
    margin: 0 auto;
    width: 720px;
}

.subtotalbtn {float: right; padding: 0 !important;}



.paid-btn{

    padding: 5px 15px;

    background-color: var(--dark);

    color: #fff;

    font-weight: bold;

}



.order-details-area.text-right {

    float: right;

    padding: 0;

}



.order-details-area{

    padding-top: 25px;

}



.order-details-area ul{

    list-style-type: none;

    padding: 0;

}

.order-details-area ul li{
    padding: 15px 0;
    border-bottom: 1px solid #d8d8d8;
}

.order-details-area ul li span{

    float: right;

}



.order-details-area h4{

    color : var(--primary);

}



.details-holder{
    display: flex;
    border-radius: 5px;
    height : 75px
}

.details-holder div{
    width: 100%;
    font-size: 14px;
}

.details-holder .image-holder img{
    height: 100%;
    width: 135px;
    border-radius: 4px;
}

.last-li{

    font-weight: bold;

    float: right;

}



.details-holder .price-holder , .name-holder{

    padding-top: 25px;

    text-align: right;

}



.order-details-holder{

    border: 1px solid #ced4da;

    border-radius: 5px;

    padding: 15px 30px;

}



.port-slider .slick-track{

    height: 600px !important;

}



.port-slider-nav .slick-track{

    height: 170px !important;

}

.img-fluid{
    aspect-ratio: 16/10;
}

.img-ratio-banner{
    aspect-ratio: 16/9;
}

/* ARIF Start */

.photo_area {
    /* width: 101px;
    height: 101px; */
    position: relative;
    margin: auto;
}


.profileImag {
    /* width: 101px;
    height: 101px; */
    position: relative;
    margin: 0px auto;
    /* border: 5px solid #ebebeb;
    border-radius: 100px; */
    overflow: hidden;
}

.fancyLoader {
    padding: 0px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    left: 0px;
    z-index: 0;
    overflow-y: hidden !important;
    position: absolute;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(15px) !important;
}

#referrence_image, #target_image {
    width: 100%;
}

.photo_area input[type="file"] {
    visibility: hidden;
}

.photo_area label {
    width: 22px;
    height: 22px;
    background-color: #e5e5e5;
    text-align: center;
    border-radius: 100px;
    color: #000;
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    right: 3px;
    bottom: 7px;
    font-size: 14px;
    padding-left: 2px;
    cursor: pointer;
    z-index: 99;
}

.bounding-box {
    position: absolute;
    border: 2px solid yellow;
}
.bounding-box-1 {
    position: absolute;
    border: 2px solid red;
}
.bounding-box-2 {
    position: absolute;
    border: 2px solid green;
}
.bounding-box-doc {
    position: absolute;
    border: 2px solid yellow;
    min-width:50px;
}
.btn-absolute {
    position: absolute;
    top: 2%;
}
.checkout-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 19px;
}
.checkout-span {
    font-size: 18px; 
    font-weight: 600
}
.image-rooms img {
    width: 78px;
    height: 60px;
    float: left;
    border-radius: 5px;
    margin-right: 15px;
}
.checkout-para {
    margin-bottom: 8px;
}
@media (min-width: 240px) and (max-width: 500px) {
    .txtroom {
        text-align: left!important;
        margin-top: 10px;
    }
    .guest_info_laptop, .payment_info_laptop {
        display: none;
    }
    .guest_info_mobile, .payment_info_mobile {
        display: inline-block!important;
    }
}
.greenBoldPara {
    font-size: 17px;
    font-weight: 600;
    color: green;
    letter-spacing: 0.4px;
}
.cmsg {
    font-size: 30px;
    font-weight: 600;
}