/* //----- Popoup about */
.popup-wrap {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)); /* تدرج لوني */
    backdrop-filter: blur(5px); /* تأثير الضبابية */
    z-index: 998;
}

.popup-box {
    scrollbar-width: thin;
    scrollbar-color: #b3b1b1 #f1f1f1;
    max-height: 90%;
    overflow: auto;
    /* width: 400px; */
    padding: 70px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    background: #fff;
    text-align: center;
    z-index: 3;

    h2 {
        color: #1a1a1a;
    }

    h3 {
        color: #888;
    }

    .close-btn {
        width: 35px;
        height: 35px;
        display: inline-block;
        position: absolute;
        top: 10px;
        right: 10px;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        border-radius: 1000px;
        /* background: #363636; */
        font-weight: bold;
        text-decoration: none;
        color: #000000;
        line-height: 190%;

        &:hover {
            /* -webkit-transform: rotate(180deg);
            transform: rotate(180deg); */
        }
    }
}

.transform-in,
.transform-out {
    display: block;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

.transform-in {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.transform-out {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
}


@media only screen and (max-width: 767px) {
    .popup-box {
        max-height: 50%;
        padding: 50px 10px 10px 10px;
        overflow: auto;
        width: 90%;
    }

    .popup-box {
        & .close-btn {
            width: 23px;
            height: 23px;
        }
    }
}



/* //----- Popoup spiceal offer */
.popup_wrap_form_booking {
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8); /* لون أسود شفاف */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)); /* تدرج لوني للخلفية */
    backdrop-filter: blur(5px); /* تأثير الضبابية */
    z-index: 998;
}
.popup_box_form_booking {
    scrollbar-width: thin;
    scrollbar-color: #b3b1b1 #f1f1f1;
    max-height: 90%;
    overflow: auto;
    width: 70%;
    padding: 70px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    background: #fff;
    text-align: center;
    z-index: 999;
    /* height: 70%; */
    overflow: auto;
    

    h2 {
        color: #1a1a1a;
    }

    h3 {
        color: #888;
    }

    .close-btn {
        width: 35px;
        height: 35px;
        display: inline-block;
        position: absolute;
        top: 10px;
        right: 10px;
        -webkit-transition: all ease 0.5s;
        transition: all ease 0.5s;
        border-radius: 1000px;
        /* background: #363636; */
        font-weight: bold;
        text-decoration: none;
        color: #000000;
        line-height: 190%;

        &:hover {
            /* -webkit-transform: rotate(180deg);
            transform: rotate(180deg); */
        }
    }
}

.transform-in,
.transform-out {
    display: block;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

.transform-in {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.transform-out {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);
}

@media only screen and (max-width: 767px) {

    .popup_box_form_booking {
        padding: 55px 15px 12px 15px;
    }
}