@charset "utf-8";
:root {
  --white: #fff;
  --green: #8bc641;
  --grey: #c9c9c9;
  --black: #55595f;
  --orange: #faa523;
  --blue: #709ad0;
  --purple: #c24e9c;
}
body {font-family: "Heebo";text-align: inherit;}
body * {direction: rtl;}
h1,h2,h3,h4,h5,h6,p,ul,li {list-style: none;padding: 0px;margin: 0px;}
.slick-initialized .slick-slide {outline: medium none !important;}
a {text-decoration: none !important;transition: 0.5s ease all;-webkit-transition: 0.5s ease all;-moz-transition: 0.5s ease all;outline: none !important; color: var(--black);}
button {outline: none;background: transparent;border: none;transition: 0.5s ease all;-webkit-transition: 0.5s ease all;-moz-transition: 0.5s ease all;}
i {font-style: normal;}
.form-control{outline: none !important; box-shadow: none !important;height: 50px; border: 0.5px solid #707070;font-size: 15px; line-height: 18px; color: var(--black);-webkit-appearance: none;
    -moz-aapearance: none;    position: relative;}
.form-control:focus{border-color: var(--grey);}
.boxs {display: block;float: left;width: 100%;position: relative;}
.dnone{display: none !important;}
img { max-width: 100%;}
.container {max-width: 1000px;}
.main {background: url(../images/calendar_bg.jpg) no-repeat center center;background-size: cover;padding: 40px 0px; min-height: 100vh;}
.main_in {background: var(--white);box-shadow: 3px 3px 6px #00000029;border-radius: 6px;}
.main_head {padding: 10px 25px;}
.head_text h1 {font-size: 22px;color: var(--black);line-height: 32px;    text-align: center;
    margin-top: -70px;
    padding-bottom: 39px;}
.step_list li{width: 60px; font-size: 14px; line-height: 13px; color: var(--black); text-align: center;font-weight: normal; margin-left: 5px; display: inline-block;}
.step_list li .circle{ width: 50px;height: 50px;background: var(--grey);font-size: 20px;line-height: 29px;font-weight: 500; color: var(--white);border-radius: 50%;display: flex;align-items: center;justify-content: center; position: relative; margin: 0px auto 5px;}
.step_list li .circle::before{content: ""; position: absolute; width: 20px; height: 1px; background: var(--grey);left:-19px;}
.step_list li.current .circle{background: var(--green);}
.step_list li:last-child .circle::before{display: none;}

.green_strip{background: var(--green); height: 50px; text-align: center;}
.green_strip span{font-size: 20px;line-height: 29px;font-weight: 500; color: var(--white); margin: 0px 10px;}
.green_strip a{font-size: 20px; color:var(--white);line-height: 29px;}
.green_strip a:hover{color: var(--orange);}
.calendar {padding: 20px 25px;overflow: hidden;}
.calendar table{width:100%; border-spacing:0;}
.calendar table th{font-size: 18px; color: var(--black); line-height: 27px;font-weight: normal;    width: 14.29%;}
.calendar table td{width: 14.29%; border:1px solid var(--grey); cursor: pointer;}
.calendar table td span{font-size: 30px; line-height: 44px; font-weight: 500; color: var(--black);margin: 10px 10px; display: block;width: 45px;height: 45px; border-radius: 50%;  display: flex; align-items: center; justify-content: center;  transition: 0.5s ease all;-webkit-transition: 0.5s ease all;-moz-transition: 0.5s ease all;}
.calendar table td.pdate span{opacity: 0.20;}
.calendar table td i.dtitle{font-size: 15px; line-height: 22px; display: block; width: 100%; text-align: center; color: var(--white);}
.calendar table td span.today, .calendar table td.cdate:hover span{background: var(--purple);color:var(--white);transition: 0.5s ease all;-webkit-transition: 0.5s ease all;-moz-transition: 0.5s ease all;}
.calendar table td.pdate i.dtitle{visibility: hidden;}
.orange_title{background: var(--orange);}
.green_title{background: var(--green);}
.red_title{background: var(--red);}
.purple_title{background: var(--purple);}
.greendark_title{background: #016435;}
.blue_title{background: var(--blue);}
.indicatior{border-top:2px solid var(--grey); display: none;}
.indicatior li{display: inline-flex; align-items: center; font-size: 13px; line-height: 13px; color: var(--black); margin: 10px;}
.indicatior li span{width: 9px;height: 9px; border-radius: 50%; display: block; margin-left: 5px;}

.purchase_btn{padding: 150px 0px;}
.purchase_btn a{font-size: 24px; line-height: 35px;font-weight: bold; color: var(--white);border-radius: 4px; padding: 15px 60px; width: 40%; margin: 20px auto; display: block;    text-align: center;} 
.purchase_btn a:hover{background: var(--green);}

.club{padding:30px 50px;}
.club ul{display: flex; flex-wrap: wrap;} 
.club li {width: 166px; height: 100px; display: inline-block; position: relative; margin: 10px 4px;transition: 0.5s ease all;-webkit-transition: 0.5s ease all;-moz-transition: 0.5s ease all;}
.radiobtn{ position: absolute; width: 0px; height: 0px;}
.club li label{border: 1px solid #C9C9C9;border-radius: 4px; padding: 0px 10px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: 0.5s ease all;
-webkit-transition: 0.5s ease all;-moz-transition: 0.5s ease all; position: relative;}
.club li label::after{content: ""; position: absolute; width: 101%; height: 101%; border:4px solid transparent; transition: 0.5s ease all;-webkit-transition: 0.5s ease all;-moz-transition: 0.5s ease all;    border-radius: 4px;}
.radiobtn:checked + .radiolabel::after{border-color: var(--purple); transition: 0.5s ease all;-webkit-transition: 0.5s ease all;-moz-transition: 0.5s ease all;}

.return_btn{text-align: center; padding: 10px 0px;}
.return_btn button{font-size: 20px; line-height: 29px; font-weight: bold;border-radius: 4px; padding: 10px 30px; color: var(--white);}
.return_btn button:hover{background: var(--green);}
.club_pay{text-align: center; padding: 40px 10px; max-width: 30%; margin: 0px auto 100px;}
.club_pay legend{font-size: 15px; line-height: 18px; color: var(--black); font-weight: bold;}
.club_pay .form-group {margin: 50px 0px 30px;}
.club_pay label{font-size: 15px; line-height: 18px; color: var(--black);}
.club_pay .form-control{outline: none; box-shadow: none; height: 50px; border: 0.5px solid #707070;font-size: 15px; line-height: 18px; color: var(--black);}
.green_strip2{padding: 0px 50px;}
.green_strip2 a{font-size: 14px; line-height: 21px; font-weight: normal;}
.green_strip2 a i{margin-right: 10px;}
.card_type {padding: 30px 35px;overflow: hidden;}
.card_type_in ul{border-bottom: 1px solid var(--grey); padding: 15px 0px 15px 20px;}
.card_type_in li{font-size: 17px;line-height: 18px;color:var(--black);display: inline-block;margin: 20px;}
.card_type_head li{font-weight: bold;}
.card_type_in1{padding: 15px 0px;}
.order_btn{text-align: left; margin: 30px 0px 100px;} 
.order_btn a{font-size: 20px; line-height: 29px; font-weight: bold;border-radius: 4px; color: var(--white);padding: 10px 100px;}
.order_btn a:hover{background: var(--green);}
.modal-dialog{width: 400px; display: flex; align-items: center; justify-content: center; margin: 40px auto;}
.modal-content{background: var(--white); padding: 20px 25px; box-shadow: 3px 3px 6px #00000029; border-radius: 6px;}
.close_mod{text-align: left;}
.close_mod button:hover{color: var(--orange) !important;}

.modaltext{padding: 50px 20px 100px 20px; text-align: center;}
.modaltext h5{font-size: 24px; line-height: 35px; color: var(--green); font-weight: bold;}
.modaltext p{font-size: 17px; line-height: 24px; color: var(--black);}
.card_list li,.card_list2 li{width: 15%;}
.card_list li:first-child, .card_list2 li:first-child{width: 57%;}
.card_list li:last-child, .card_list2 li:last-child{width: 5%;}
.quantity .form-control{width: 21px;height: 21px; border: 1px solid #C9C9C9; border-radius: 0px;font-size: 20px;line-height: 21px;color: var(--black); padding: 0px; text-align: center;display: flex;align-items: center;justify-content: center;}
.quantity button{font-size: 20px;line-height: 21px;width: 21px;color: var(--black);}

.card_list h6{font-size: 17px;line-height: 18px;color: var(--green);border-bottom: 1px solid var(--grey); padding: 15px 0px 15px 20px; }
.imppoint p{font-size: 17px; line-height: 25px; color: var(--black); padding: 15px 0px;}
.imppoint p:last-child{padding-right: 20px;}

.card_rht h5{font-size: 20px; line-height: 18px; color: var(--black); font-weight: bold; padding-top: 30px;}
.card_rht p{font-size: 17px; line-height: 18px; color: var(--black); padding-top: 20px;}
.card_rht .row{margin-right: -5px;margin-left: -5px;}
.card_rht .col-md-3{padding:0px 5px;}
.card_rht  button{font-size: 20px;line-height: 29px;color: var(--orange);width: 100%;height: 50px;border:1px solid var(--orange);border-radius: 4px;font-weight: bold;}
.card_rht  button:hover{ background: var(--orange); color: var(--white);}
.card_lft p{font-size: 17px; line-height: 25px; font-weight: bold;}
.card_lft p .price{font-size: 36px; line-height: 53px;}
.card_lft p sub{font-size: 15px; line-height: 18px; }
.card_lft a{font-size: 20px;line-height: 29px;color: var(--white);width: 100%;height: 50px;border:1px solid var(--orange);border-radius: 4px;background: var(--orange);margin-top: 20px;margin-bottom: 15px;text-align: center;display: block;padding: 10px 0px;font-weight: bold;}
.card_lft a:hover{background: var(--white); color: var(--orange);}

.details{padding: 25px 100px;overflow: hidden;}
.details label{font-size: 17px; line-height: 18px; color: var(--black);}
.check_input{position: relative;}
.checking{position: absolute; width: 0px; height: 0px;}
.check_input span{width: 20px;height: 20px;border: 0.30000001192092896px solid #707070; display: inline-block; margin-left: 10px; position: relative;}
.check_input label{display: flex; align-items: center;}
/* .check_input span::before{content: url(../images/tick.png); position: absolute; top:0px; right: 0px;} */
.checking:checked + label span::before{content: url(../images/tick.png); position: absolute; top:0px; right: 0px;}
.details button {font-size: 20px; line-height: 29px; color: var(--white); max-width: 100%; padding: 10px; 
display: block;width: 100%;float: left;margin-bottom: 20px;font-weight: bold; border-radius: 4px;}
.details button:hover{background: var(--green);}
.final_step{max-width: 600px; margin: 0px auto;}
.final_step_in{background: var(--white);box-shadow: 3px 3px 6px #00000029;border-radius: 6px; padding: 5px 0px;}
.final_step_in .modaltext{padding: 50px 20px 50px 20px;}
.final_step_in .modaltext p{padding: 10px 0px;}
.final_step_in .modaltext p span{display: block;color: var(--orange);font-weight: bold;}


.details label a{    display: inline-block;
    margin-right: 5px;
    text-decoration: underline !important;    color: var(--black);}
.details label a:hover{    color: var(--blue);}
.droparrow::after{content:url(../images/downarrow.png);position: absolute; top:17px; left:10px}


/*animation*/

@-webkit-keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInleft {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}


[data-animation] {
  opacity: 0;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

.animations-disabled, .animations-disabled [data-animation] {
  -webkit-animation: none !important;
          animation: none !important;
  opacity: 1 !important;
}

.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}

.slideInDown {
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown;
}

.slideInLeft {
  -webkit-animation-name: slideInleft;
          animation-name: slideInleft;
}

.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight;
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}


.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

.form-control::placeholder{visibility: hidden;}