@font-face {
    font-family: "cera-black";
    src: url("../fonts/ceraRoundPro-Black.otf") format("opentype");
}
@font-face {
    font-family: "cera-bold";
    src: url("../fonts/ceraRoundPro-Bold.otf") format("opentype");
}
@font-face {
    font-family: "cera-Light";
    src: url("../fonts/ceraRoundPro-Light.otf") format("opentype");
}
@font-face {
    font-family: "cera-Medium";
    src: url("../fonts/ceraRoundPro-Medium.otf") format("opentype");
}
@font-face {
    font-family: "cera-Regular";
    src: url("../fonts/ceraRoundPro-Regular.otf") format("opentype");
}
@font-face {
    font-family: "cera-Thin";
    src: url("../fonts/ceraRoundPro-Thin.otf") format("opentype");
}
*{
    margin: 0;
    padding: 0;
    font-family: "cera-Regular";
    box-sizing: border-box;
}

.g-recaptcha{
	padding-top: 17px;
}

.header{
    padding: 0.6rem 0;
}
.hp-book{
	padding-top: 2.5rem;
}
.bg-sec{
    background-color: #a086ff33;
}
.text-black1{
	font-size: 1rem;
}
.text-orange1{
	font-size: 2.25rem;
}
.draco{
    z-index: 9;
    left: -9%;
    top: -4%;
    position: absolute;
}
.dragen{
    z-index: 9;
    right: -20%;
    top: -25%;
    position: absolute;
}
.viewcart-left{
    width: 22%;
    max-width: 22%;
}
body{
    font-family: "cera-Regular";
}
.hello-para{
    position: absolute;
    top: 24%;
    left: 0%;
    right: 0%;
}
.hello-content{
    position: relative;
}
.hello-para h4{
    font-size: 2.4rem;
}
.hp-book{
    background-image: url(../images/book-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.hp-book-header h2{
    font-family: "cera-black";
    font-size: 2.5rem;
}
.hp-book-container .hp-book-box .hp-book-box-header{
    text-align: center;
    color: #5126C7;
}
.hp-book-box-header h3{
    font-family: "cera-black";
    font-size: 1.8rem;
}
.hp-book-box-amount h4,.hello-para h4,.hp-footer-head h2{
    font-family: "cera-bold";
}
.hp-book-box-container{
    border-bottom: 1px dashed #1717184D
}
.hp-book-box-btn button.selected{
    background-color: #5126C7;
    box-shadow: 5px 4px 6px 0px #6B47EA inset;
    color: #fff;
}
.hp-book-box-container:last-child{
    border-bottom: 0px dashed #1717184D;
    padding-top: 0rem !important;
}
.hp-book-box-btn button{
/*    padding: 9px 70px;*/
padding: 12px 70px !important;
font-family: "cera-Medium";
border: 1px solid #5126C7;
display: block;
border-radius: 100px;
color: #5126C7;
font-size: 16px;
font-weight: 700;
}
.hp-address p{
    font-family: "cera-Regular";
    color: #121212;
}
.hp-address{
    border-bottom:1px dashed #12121233;
}
.hp-address:last-child{
    border-bottom: 0;
}
.hp-address:last-child .hp-add-text-box:first-child{
    border-right:1px dashed #12121233;
}

/* calender */

.heading-visit h1 {
    font-family: "cera-bold";
    font-size: 2.5rem;
}
.cal-child-1{
	margin-right: 4rem;
}
.adv-seekers {
    position: relative;
}
.counter-wrapper{
    background-color: #f8f8f8;
    border-radius: 10px;

}
.counter-wrapper h2{
    font-family: 'cera-Medium';
}
.adv-seekers::after {
    position: absolute;
    content: "";
    width: 80%;
    height: 1px;
    border-bottom: 2px dashed #FFFFFF80;
    bottom: -35%;
}

.face_vector {
    margin-top: 6rem;
    max-width: 17rem;
    right: -1rem;
}
.counter {
    display: flex;
    background-color: white;
    border-radius: 10px;
    /* justify-content: center; */
}

#increment-btn,
#decrement-btn {
    /* border-radius: 10px; */
    font-size: 40px;
    color: black;
    margin: 0px 0;
    background-color: transparent;
    border: none;
}
#increment-btn,
#decrement-btn,
#counter-value{
    width: calc((100% / 3));
    font-family: 'cera-Medium';
}
#decrement-btn,
#counter-value {
    border-right: 1px dashed #121212;
}

.calender-container{
    display: flex;
}

#counter-value {
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-slot {
    margin-top: 100px;
}

.time-slot h1 {
    font-family: 'cera-Regular';
    /* margin-left: 30px; */
}

.slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.slots-btn {
    width: calc((100% - 5%) / 3);
    padding: 15px 10px;
    text-align: center;
    margin-bottom: 10px;
    background-color: #EAEAEA;
    color: #12121280;
    border-radius: 8px;
    cursor: pointer;
}
.slots-btn:hover{
    color:#000;
    background: #fff;
}
.slots-btn.disabled-parent {
    color: #12121280;
    cursor: not-allowed;
}
.slots-btn.selected{
    color: #000;
    background: #fff;
}
.slots-btn button {
    font-weight: 700;
    font-size: 15px;
    font-family: "cera-Regular";
    border: none;
    background: none;
}
button.disabled-slot{
    cursor: not-allowed;
}
.cal-parent {
    background-color: #631EF9;
    border: none;
    border-radius: 24px;
    font-family: "cera-Regular";
}

.days,.today {
    background-color: transparent;
    border: 1px solid #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0px;
    font-family: 'cera-Regular';
    width: calc((100% - 10px) / 2);
}
.today{
    background-color: #fff;
}

.days span {
    font-weight: 700;
    font-size: 20px;
}

.today h1 {
    font-family: 'cera-Regular';
}

#dispalyNextDate1,
#dispalyNextDate2,
#dispalyNextDate3 {
    font-family: 'cera-Regular';
    color: #ffffff;
    text-align: center;
    font-size: 12px;
}

.right-arrow button {
    background: none;
    border: none;
}

.month-display {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    align-items: center;
}

.cal-img-wrap {
    background-color: #FFD489;
    border-radius: 8px;
    border: 1px solid #121212;
    padding: 10px;
}

.month-display h1 {
    font-size: 30px;
    font-family: 'cera-Regular';
    font-weight: 900;
    color: #ffffff;

}

.ui-datepicker .ui-datepicker-header {
    background-color: #EEE9FE;
    padding: 1rem 0;
}

.container-calender {
    /* margin: 80px auto; */
    /* width: 400px;
    height: 320px; */
    /* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
    font-family: 'Roboto';
    border-radius: 8px 8px 0px 0px;
    /* background-color: red; */
    color: black;
}

.ui-datepicker-header {
    background-color: #2196f3;
    color: black;
    text-align: center;
    font-family: 'Roboto';
    padding: 10px;
    border-radius: 8px 8px 0px 0px;
}

.ui-datepicker-inline {
    width: 90% !important;
    margin: 1rem auto !important;
    border-radius: 22px;
}
.ui-widget-content{
    background: transparent;
}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 25%;
    width: 1.8em;
    height: 1.8em;
}

.ui-datepicker td {
    border: none;
    padding: 0px;
}

.ui-state-default {
    border: none !important;
    background: #EEE9FE !important;
    font-weight: normal;
    color: #454545;
    text-align: center;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none;
}

tbody {
    background-color: #EEE9FE;
}

.ui-datepicker td a {

    /* padding: .3em .2em; */
    text-align: center !important;
    text-decoration: none;
    padding: 20px 0;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    text-align: center !important;
    padding: 10px 0 !important;
}

.ui-datepicker table {
    margin: 0 !important;
}



.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    color: blue !important;
}

.ui-widget-header .ui-state-highlight,
a.ui-state-default.ui-state-active {
    color: #F4731C !important;
    background-image: url(../images/date-active.png) !important;
/*    background-size: 50% !important;*/
background-position: center !important;
background-repeat: no-repeat !important;
}
.container-calender p {
    font-size: 1.2rem;
    color: #F55815;
    text-align: center;
    padding-bottom: 1rem;
    font-family: 'cera-Medium';
}
.viewcart{
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    border: 1px solid #121212;
    border-bottom: 0px;
    /*padding: 1rem 1.5rem 0.5rem 1.5rem !important;*/
}
.btn-check1{
    padding: 2px 25px;
    font-weight: 700;
    border-radius: 2.5rem;
    box-shadow: 5px 4px 6px 0px #6B47EA inset;
    background-color: #5126C7;
    display: flex;
    align-items: center;
}

/* .ui-datepicker-prev:after {
    content: "<";
    font-size: 2rem;
    float: left;
    margin-left: 10px;
    cursor: pointer;
}


.ui-datepicker-next:after {
    content: ">";
    float: right;
    font-size: 2rem;
    margin-right: 10px;
    cursor: pointer;
} */

.ui-datepicker-calendar th {
    font-size: 16px !important;
    font-family: 'cera-bold';
    font-weight: 900 !important;
    background-color: #fff;
    color: #000000;
}

.ui-datepicker-calendar {
    text-align: center;
    margin: 0 auto;
    padding: 8px;
}

.ui-datepicker-title {
    padding: 0px;
}

.ui-datepicker {
    width: 17em;
    padding: 0 !important;
    display: none;
}

.ui-datepicker-month,
.ui-datepicker-year {
    font-size: 20px;
    font-family: 'cera-Regular';

}

.ui-datepicker-calendar td {
    padding: 4px 0px;

}

.ui-datepicker-calendar .ui-state-default {
    text-decoration: none;
    color: black;
    font-size: 16px !important;
    font-family: 'cera-Medium' !important;
    font-weight: 900 !important;
}

.ui-datepicker-calendar .ui-state-active {
    color: #2196f3;
}
.pb-5{
    padding-bottom: 0.5rem !important;
}
.pt-5{
    padding-top: 0rem !important;
}
.px-4 {
    padding-right: 3.5rem !important;
    padding-left: 3.5rem !important;
}
.p-3 {
    padding: 1rem 0 !important;
}
.viewcart-right{
    padding: 0 !important;
    max-width: 10%;
}
.viewcart-right-user{
    max-width: unset !important;
}
.week-days{
    gap: 10px !important;
}
.days {
    display: flex;
    align-items: center;
    justify-content: center;
   /*flex-grow: 1;*/
}
.right-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
}
.arrow-right {
    display: block;
    max-height: 100%;
}
.days-top{
    gap: 10px;
}
.viewcart-container{
    padding: 0 3.5rem !important;
}
.proceed-form::before,
.proceed-form::after {
    content: "";
    position: absolute;
    width: 11%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

/* Left image */
.proceed-form::before {
    background-image: url("https://booking-hp.dvio.global/images/left.png");
   bottom: -22%;
    left: -11%;
}

/* Right image */
.proceed-form::after {
    background-image: url("https://booking-hp.dvio.global/images/right.png");
   top: -19%;
    right: -11%;
}
/* -------------------MEDIA QUERY----------------------- */

/* Default: show fish vector */
.fish_vector {
    position: absolute;
    bottom: -5%;
    left: 1%;
    display: block; /* ensure visible on desktop */
}

/* Hide on mobile */
@media screen and (max-width: 1024px) {
    .fish_vector {
        display: none !important;
    }
}
#coupon-code::placeholder {
    color: black;
}
.proceed-form input{
    border: 1px solid #1717184D;
    background-color: #EFEAFF;
    border-radius: 45px;
    line-height: 2.4rem;
}
.coupen-code input{
    background-color: #FFB400;
}
.proceed-form{
    position: relative;
    padding: 2rem;
    width: 39%;
    z-index: 999;
}
.btn-pay{
    box-shadow: 5px 4px 6px 0px #6B47EA inset;
    background: #5126C7;
}
.thank-you-msg h4,.thank-you-msg span{
    font-family: 'cera-bold';
}
.thank-you-msg span{
    color: #FFB400;
}
.timer{
    border: 1px solid #9C18D4;
    background-color: #F7F0FF;
    border-radius: 10px;
}
.hp-book-box-btn button:hover{
    background-color: #5126C7;
    box-shadow: 5px 4px 6px 0px #6B47EA inset;
    color: #fff;
}
.days{
    width: calc((100% - 10px) / 3);
    padding: 5px 2rem;
}
.proceed-form .left{
    left: -17.91%;
}
.proceed-form .right{
    right: -20%;
}
.iti{
    display: block !important;
    margin-bottom: 1rem;
}
#phone_no-error{
    position: absolute;
}

@media screen and (min-width: 2560px) and (max-width: 3840px) {
    .dragen {
        right: -9%;
    }
    .draco {
        left: 2%;
    }
}
@media screen and (min-width: 2000px) and (max-width: 2499px) {
    .dragen {
        z-index: 9;
        right: -3%;
        top: -33%;
    }
    .draco {
        z-index: 9;
        left: 6%;
        top: 3%;
    }

}
@media screen and (min-width: 1600px) and (max-width: 1999px) {
    .dragen {
        right: -10%;
        top: -34%;
    }
    .draco {
        left: -1%;
        top: -4%;
    }
    .hp-book-header h2 {
        font-size: 3rem;
    }
    .hp-book-box-header h3 {
        font-size: 2.1rem;
    }
    .text-black1 {
        font-size: 1.5rem;
    }
    .text-orange1 {
        font-size: 2.2rem;
    }
    .select-btn{
        font-size: 1.2rem;
    }
    .hello-para h4 {
        font-size: 2.8rem;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1280px){
    .dragen {
        right: -36%;
    }
    .draco {
        left: -31%
    }
  /*  .days{
        width: calc((100% - 20px) / 3);
        padding: 0 0.5rem;
    }*/
    .days {
        display: flex;
        align-items: center;
        justify-content: center;
        /*flex-grow: 1;*/
    }

    .right-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .arrow-right {
        display: block;
        max-height: 100%;
    }

    .dragen {
        top: -19%;
        right: -28%;
    }
    .draco{
        left: -20%;
        top: 5%;
    }
    .heading-visit h1 {
        line-height: 1.2;
    }
    .heading-visit  a img{
        max-width: 50px;
        max-height: 50px;
    }
    img.-rotate-12{
        max-width: 80%;
    }
    .viewcart-left {
     width: 100%;
     max-width: 23% !important;
 }
 .btn-check1 {
    padding: 2px 20px;
}
.today{
    width: 23% !important;
}
.week-days{
    gap: 8px !important;
}
.days-top {
 gap: 5px !important
}
.proceed-form .left{
    left: -21.5%;
}
.proceed-form .right{
    right: -24%;
}
.viewcart-right {
    max-width: 30% !important;
}
}
@media (min-width: 1024px) {
.heading-visit{
   margin: 2rem;
}
.slots {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}

.slots-btn {
  flex: 1 1 calc(33.33% - 16px);
  max-width: calc(33.33% - 1px);
  padding: 0px 0px !important;
}

.slots-btn button {
  width: 100%;
  height: 60px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.px-4 {
    padding-right: 2.5rem !important;
    padding-left: 2.5rem !important;
}
.time-slot {
        width: 85%;
  }
  .viewcart-left {
    width: 100%;
    max-width: 26% !important;
}


}
@media screen and (min-width:1025px) and (max-width:1150px) {
 .dragen {
        position: unset;
    }
    .dragon_png {
        position: absolute;
        left: 53%;
        bottom: -33%;
    }
    .draco {
        left: -31%;
    }
    .ui-datepicker-inline {
        width: 100% !important;
    }
    .days {
        width: calc((100% - 20px) / 3);
        padding: 0 2rem;
    }
    .adv-seekers::after {
        width: 100%;
    }
    .ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        background-size: 55%;
    }
    .proceed-form {
        width: 50%;
    }
    .fish_vector {
        bottom: -5%;
        left: 0%;
    }
    img.-rotate-12 {
        max-width: 65%;
    }
    .text-orange1 {
        font-size: 1.15rem !important;
    }
    .hp-text-orange1 {
        font-size: 1.8rem !important; /* Renamed from .hp-book-box-amount .text-orange1 */
    }
    .hello-para {
        left: -15%;
    }
    .face_vector {
        margin-top: 4.5rem;
        max-width: 15rem;
        right: -6rem;
    }
    .face_vector img{
        width: 100%;
        max-width: 85%;
    }
    .counter-wrapper {
    width: 55% !important;
}
.hp-book-box-btn button {
    padding: 12px 60px !important;
}
.text-orange1 {
    font-size: 2rem !important;
}
    .viewcart-container {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    .viewcart-left {
        width: 100%;
        max-width: 23%;
    }
    .viewcart-right {
        padding: 0 !important;
        max-width: 30%;
    }
    .slots-btn {
        padding: 0px 0px !important; /* Converted px to rem for consistency */
    }
    #calendar {
        padding: 0 1.5rem !important; /* Optimized padding shorthand */
    }
    .slots-btn button {
    font-size: 13px !important;
}
}
@media screen and (min-width:992px) and (max-width:1024px) {
    .dragen {
        position: unset;
    }
    .dragon_png {
        position: absolute;
        left: 53%;
        bottom: -33%;
    }
    .draco {
        left: -31%;
    }
    .ui-datepicker-inline {
        width: 100% !important;
    }
    .days {
        width: calc((100% - 20px) / 3);
        padding: 0 2rem;
    }
    .adv-seekers::after {
        width: 100%;
    }
    .ui-state-highlight,
    .ui-widget-content .ui-state-highlight,
    .ui-widget-header .ui-state-highlight {
        background-size: 55%;
    }
    .proceed-form {
        width: 50%;
    }
    .fish_vector {
        bottom: -5%;
        left: 0%;
    }
    img.-rotate-12 {
        max-width: 65%;
    }
    .text-orange1 {
        font-size: 1.15rem !important;
    }
    .hp-text-orange1 {
        font-size: 1.8rem !important; /* Renamed from .hp-book-box-amount .text-orange1 */
    }
    .hello-para {
        left: -15%;
    }
    .face_vector {
        margin-top: 8rem;
        max-width: 15rem;
        right: -2rem;
    }
    .viewcart-container {
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    .viewcart-left {
        width: 100%;
        max-width: 24%;
    }
    .viewcart-right {
        padding: 0 !important;
        max-width: 18%;
    }
    .slots-btn {
        /*padding: 15px 8px !important;*/ /* Converted px to rem for consistency */
    }
    #calendar {
        padding: 0 1.5rem !important; /* Optimized padding shorthand */
    }
    .slots-btn button {
    font-size: 14px !important;
}
.week-days {
        margin: 0 0px 0px 0px;
        gap: 12px !important;
    }
}


@media screen and (min-width:769px) and (max-width:991px) {
    .view-amount{
        margin-left: 1rem;
    }
    .heading-visit h1 {
        line-height: 1.2;
    }
    .heading-visit  a img{
        max-width: 50px;
        max-height: 50px;
    }
    div#children-input-error {
        margin-top: 12px;
        text-align: center;
    }
    .calender-container {
        display: block;
    }
    .cal-child-1 {
        margin-right: 0;
    }
    .face_vector{
        position: relative;
        margin: 0 auto;
        right: 0;
    }
  /*  .ui-widget-header .ui-state-highlight, a.ui-state-default.ui-state-active {
        background-size: 48% !important;
    }*/
    .counter-wrapper{
        margin: 0 auto;
        width: 50%;
    }
    img.dragon_png {
        max-width: 65%;
    }
    .dragen {
        top: 52%;
        right: -11%;
    }
    img.draco_png {
        max-width: 68%;
    }
    .draco{
        left: 15%;
        top: 64%;
    }
    .ui-datepicker-inline{
        width: 100% !important;
    }
    .days{
        width: calc((100% - 20px) / 3);
        padding: 0 2rem;
    }
    .adv-seekers::after{
        width: 100%;
    }
    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
        background-size: 55%;
    }
    .proceed-form {
        width: 85%;
    }
    .fish_vector{
        display: flex;
        justify-content: center;
        position: relative;
    }
    .viewcart-left{
        width: fit-content;;
    }
    .viewcart {
        flex-direction: column;
    }
    .viewcart-left{
        max-width: 38%;
        width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
    }
    .viewcart-right {
        padding: 0 !important;
        margin: 0 auto;
        max-width: unset !important;
        padding-bottom: 1rem !important;
    }
    .today{
        margin-left: 1.5rem !important;
    }
    .viewcart-container{
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    .proceed-form .right {
        right: -16%;
    }
    .week-days {
        gap: 15px !important;
    }
    #calendar{
        padding: 0 1.275rem 0 1.5rem !important;
    }
}
@media screen and (min-width: 569px) and (max-width: 768px) {
    .viewcart {
        flex-direction: column;
    }
    .viewcart-left{
        max-width: 38%;
        width: 100%;
        margin: 0 auto;
        padding: 1rem 0;
    }
    .viewcart-right {
        padding: 0 !important;
        margin: 0 auto;
        max-width: unset !important;
        padding-bottom: 1rem !important;
    }
    .view-amount{
        margin-left: 1rem;
    }
    .fish_vector{
        display: flex;
        justify-content: center;
        position: relative;
    }
    .heading-visit h1 {
        line-height: 1.2;
    }
    .proceed-form {
        width: 70%;
    }
    .heading-visit  a img{
        max-width: 50px;
        max-height: 50px;
    }
    div#children-input-error {
        margin-top: 12px;
        text-align: center;
    }
    .calender-container {
        display: block;
    }
    .cal-child-1 {
        margin-right: 0;
    }
    .counter-wrapper{
        margin: 0 auto;
        width: 50%;
    }
    .counter-wrapper h2{
	width: 55%;
    }
    img.dragon_png {
        position: absolute;
        bottom: -47%;
        left: 52%;
        max-width: 55%;
    }
    .dragen {
        position: unset !important;
    }
    .say-hello-sec{
        display: block;
    }
    img.draco_png {
        max-width: 68%;
    }
    .draco{
        left: 15%;
        top: 64%;
    }
    .face_vector{
        position: relative;
        margin: 0 auto;
        right: 0;
    }
    .today{
        margin-left: 1.5rem !important;
    }
    .viewcart-container{
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }
    .proceed-form .right {
        right: -23%;
    }
    .proceed-form .left {
        left: -20.7%;
    }
}
@media screen and (min-width: 320px) and (max-width: 568px) {
    .fish_vector{
        position: relative;
        left: 0;
              /* display: none; */
    }
    div#children-input-error {
        margin-top: 12px;
        text-align: center;
    }
    .calender-container {
        display: block;
    }
    img.dragon_png {
/*      max-width: 42%;*/
max-width: 80%;
position: absolute;
left: 33%;
bottom: -104%;
}
.dragen {
        /*top: 58%;
        right: -98%;*/
        position: unset !important;
    }
    img.draco_png {
        max-width: 50%;
    }
    .draco{
        left: -10%;
        top: 75%;
    }
    .viewcart-left{
        padding: 1rem 0;
        max-width: unset;
        margin: 0 auto;
        width: -webkit-fill-available;
    }
    .face_vector{
        margin: 0 auto;
        position: relative;
    }
    .hp-book-header h2{
      font-size: 1.8rem;
  }
  .hello-para h4 {
    font-size: 1.4rem;
}
.hp-book-box-header h3{
  font-size: 1.5rem;
}
.text-orange1 {
   font-size: 1.3rem;
}
.hp-book-box-btn button {
   padding: 5px 30px !important;
}
.calender-wrapper {
    flex-direction: column;
}

.cal-child-1,
.cal-child-2 {
    width: 100%;
}

.days-top {
    margin-left: 0;
    flex-direction: column;
}

#dispalyNextDate1,
#dispalyNextDate2,
#dispalyNextDate3 {
    font-size: 12px;
    max-width: 100%;
    margin: 2px 11px;
}

.today {
    width: 100%;
    width: 100%;
    max-width: 90%;
    margin: 0 auto 10px auto;
}

 /*   .today h1 {
        padding: 10px 0px 0px 0px;
    }*/

    .week-days {
        display: flex;
        width: 100%;
        margin: 0 0px 0px 20px;
        gap: 20px !important;
    }

    .right-arrow {
        width: 100%;
        padding: 0px 0;
/*        justify-content: unset !important;*/
    }

    #calendar {
        padding: 20px 10px 20px 10px !important;
    }

    .counter-wrapper {
        width: 65%;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    #increment-btn,
    #decrement-btn {
        background-color: white;
    }

    #increment-btn {
        border-radius: 0px 10px 10px 0px;
    }
    .container-calender p{
        font-size: 0.9rem;
    }

    #decrement-btn {
        border-radius: 10px 0px 0px 10px;
    }

    .cal-child-2 h2 {
        width: 100%;
        text-align: center;
    }

    .cal-child-2 h1 {
        font-size: 28px;
        text-align: center;
    }

    .cal-child-2 {

        margin: 50px 0 0 0px;
    }

    .adv-seekers::after {
        width: 100%;
        bottom: -29%;
        left: 0%;
    }

    .heading-visit h1 {
        width: 78%;
        font-size: 25px;
        margin-left: 20px;
        line-height: 1.2;
    }

    #counter-value {
        background-color: white;
    }

    .slots {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 50px;
    }

    .slots-btn {
        width: calc((100% - 5%) / 2);
    }

    .time-slot h1 {
        font-size: 18px;
        margin-bottom: 20px;
        text-align: center;
    }

    .slots-btn button {
        font-size: 19px;
    }

    /*
    .ui-datepicker table {
        margin: 0 !important;
        width: 60% !important;
    }

    .ui-datepicker-title {
        padding: 0px;
        width: 100% !important;
    } */
    .ui-datepicker .ui-datepicker-header {
        background-color: #C3E1DB;
        width: 100% !important;
    }

    .ui-datepicker-inline,
    .ui-datepicker,
    .ui-widget,
    .ui-widget-content,
    .ui-helper-clearfix,
    .ui-corner-all {
        width: 100% !important;
    }

    .ui-datepicker-inline,
    .ui-datepicker,
    .ui-widget,
    .ui-widget-content,
    .ui-helper-clearfix,
    .ui-corner-all {
        margin: 0 !important;
    }
    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
        background-size: 85%;
    }

    .ui-datepicker .ui-datepicker-header {
        margin-left: 0px !important;
    }

    .ui-datepicker .ui-datepicker-prev {
        top: 25% !important;
        left: 0% !important;
    }

    .ui-datepicker .ui-datepicker-next {
        top: 25% !important;
        right: 0% !important;
    }
    a.ui-corner-all{
        width: 10% !important;
    }
    .proceed-form {
        padding: 1.5rem 1rem;
        width: 100%;
    }
    .proceed-form .left {
        left: -32.91%;
    }
    .proceed-form .right {
        right: -38%;
    }
    .btn-check1{
        padding: 2px 20px;
    }
    p.view-amount{
        margin: 0 1rem;
    }
    .days{
        padding: 5px 0;
    }
  /*  .right-arrow{
        padding: 2px 1px;
    }*/
    .viewcart-right{
        padding: 0.5rem 0 1rem 0 !important;
        margin: 0 auto;
        max-width: unset;
    }
    .heading-visit  a img{
        max-width: 50px;
        max-height: 50px;
    }
    .px-4 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    .say-hello-sec{
        display: block !important;
    }
    .hp-book-box-container{
        padding-top: 1rem !important;
    }

/*    .days-top {
       gap: 5px !important
        align-items: stretch !important;
    }
.days
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.right-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}
.arrow-right {
    display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        flex-grow: 1;
        max-height: 100%;
}
    .right-arrow button {
        width: 100%;
        display: flex;
        justify-content: center;
    }*/
    .viewcart {
        flex-direction: column;
    }
    .viewcart-container{
        padding: 0 !important;
    }
    .proceed-form::after {
    right: -10%;
}
.proceed-form::before, .proceed-form::after {
    width: 10%;
}
.proceed-form::before {
    left: -10%;
}
.proceed-form img{
    width: 100%;
    max-width: 15% !important;
    right: -1rem !important;
    top: -4rem !important;
}
.recaptcha-container {
  transform: scale(0.85); /* Adjust the scale to fit smaller screens */
  transform-origin: 0 0;   /* Scale from top-left */
}

}
@media screen and (min-width: 1920px) {
	.proceed-form {
    		width: 46%;
   		margin: 10rem;
    	}
}