/* @font-face {
    font-family: 'MontserratVariableFont_wght';
    src: url('../css/fonts/MontserratVariableFont_wght.eot');
    src: url('../css/fonts/MontserratVariableFont_wght.eot') format('embedded-opentype'),
         url('../css/fonts/MontserratVariableFont_wght.woff2') format('woff2'),
         url('../css/fonts/MontserratVariableFont_wght.woff') format('woff'),
         url('../css/fonts/MontserratVariableFont_wght.ttf') format('truetype'),
         url('../css/fonts/MontserratVariableFont_wght.svg#MontserratVariableFont_wght') format('svg');
} */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*COMMON CSS==================================================*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
html {
  font-size: 10px;width: 100%;height: 100%;overflow-x: hidden;
}
body {
  height: 100%;width: 100%; font-family: "Montserrat", serif; color: #000000;font-size: 1.6rem; background-image: url(../images/bg.png);
  /* background: repeating-linear-gradient(-45deg, black,black 15px,white 15px, white 30px ); */
  height: 100vh; 
  margin: 0;
}
body, html, div, p, span, ul, li, ol, a, img, label, form, iframe, i, h1, h2, h3, h4, h5, h6 {
  margin: 0px;padding: 0px;outline: 0px;border: 0px;text-decoration: none;list-style-type: none;
}
/*--------------------*/
a {
 -webkit-transition: all ease-in-out 0.3s;-o-transition: all ease-in-out 0.3s;transition: all ease-in-out 0.3s;display: inline-block;
}
h1,h2,h3,h4,h5,h6 {
  display: inline-block;width: 100%;font-weight: 400;color:#000000; line-height: normal;margin-bottom: 0rem;padding: 0 15px;width: 100%;
} 
h1{ font-size: 8.8rem; line-height: 1.2;padding: 15px;}
h2{font-size: 3.2rem;}
h3{font-size: 2.4rem;line-height: 2.8rem;}
h4{font-size: 2rem;}
h5{font-size: 1.8rem;line-height: 3rem;}
h6{font-size: 1.4rem;}
p{margin-bottom: 2rem;padding: 0;font-size: 1.6rem;width: 100%; line-height: 3rem;text-transform: none;text-align: justify;}
a{display: inline-block; cursor: pointer;}
/*--------------------*/
/*SCROLL BAR CSS===================================*/
:root{
  scrollbar-color: #EF258A transparent !important;
  scrollbar-width: thin !important;
}
::-webkit-scrollbar {
  width: 5px;height: 1px;
}
::-webkit-scrollbar-track {
  background: #c7c8ca;
}
::-webkit-scrollbar-thumb {
  background: #EF258A;padding: 0px 0px;
}
/* form */
/* 
.form-wrap{width: 100%; display: flex; flex-flow: row wrap;justify-content: space-between;}
.form-list{width: 100%; display: flex; flex-flow: row wrap; margin: 0; padding: 0;    align-items: flex-start;
}
.form-list label{display: none;}
.form-list li{ display: flex;flex-flow:wrap;  margin: 0 5px 10px; padding: 0;} */
label {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 2rem;
  color: #344054;
  font-weight: 500;
  margin-bottom: 5px;
  text-transform: uppercase;
}
button {
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
input[type='text'],
div.select-box,
div.select-box select,
input[type='password'],
input[type='email'],
input[type='search'],
input[type='number'],
textarea {
  width: 100%;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #101828;
  padding: 6px 15px;
  resize: none;
  background-color: #ffffff;
  -webkit-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
  outline: none;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  border: 0px solid #D0D5DD;
  border-radius: 5px;
  margin: 0;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transform: scale(1);
  -webkit-transform: scale(1);
}
input[type='text']+p,
div.select-box+p,
input[type='password']+p,
input[type='email']+p,
input[type='number']+p,
textarea+p {
  margin: 6px 0 0;
}
input[type='search'] {
  padding-left: 45px;
  /* background-image: url(../images/icons/search-icon.svg); */
  background-size: 20px;
  background-position: 15px center;
  background-repeat: no-repeat;
}
::placeholder {
  color: #667085;
  opacity: 1;
}
::-ms-input-placeholder {
  color: #667085;
}
/* .disabled {
  cursor: not-allowed;
  opacity: .7;
  border-color: #EAECF0;
  color: #667085;
} */
.disabled em {
  border-color: #D0D5DD;
}
/*SELECT BOX CSS==================================================*/
div.select-box {
  padding: 0 !important;
  border: 0 !important;
}
div.select-box select {
  appearance: none;
  position: relative;
  z-index: 2;
      background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
div.select-box::after {
  content: '';
  aspect-ratio: 1;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(0%);
  background-image: url(../images/down-arrow.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px;
  z-index: 1;
}
textarea {
  height: 120px;
}
input:-webkit-autofill {
  -webkit-text-fill-color: #667085 !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: #EF258A;
}
form {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background-color: #d9d6cc;
  border-radius: 12px;
}
form h3{ width: 100%; text-align: center; padding: 10px 0; border-top-right-radius: 10px;border-top-left-radius:10px; letter-spacing: 5px; font-size: 16px; margin: 0; text-transform: uppercase; color: #ffffff; background-color: #fb7010;}
ul.form-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative;
  gap: 0 20px;
  padding: 0 25px;
}
ul.form-list>li {
  margin-bottom: 15px;
  width: 100%;
  position: relative;
  transition: all ease-in-out 0.3s;
}
ul.form-list li.col50{width: calc(50% - 10px);height: 80px;}
ul.form-list li.gender ul{background-color: #c6c6c6; padding: 5px 15px;border-radius: 5px;}
div.grp-wrap > ul li.gender ul{background-color: #c6c6c6; padding: 5px 0 5px 8px;border-radius: 5px;}
div.grp-wrap > ul li.gender ul li{margin: 0; padding-right: 5px;}

.form-title{width: 100%;padding: 0 25px;margin-top: 25px;}
.form-title h4{width: 100%;margin: 0 0 0px;padding: 6px;display: flex;align-items: center;justify-content: space-between;position: relative;background-color: #9e9e9e;height: 50px;color: #ffffff;padding: 0 15px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
form h4{font-size: 1.8rem;}

.wrap-form.info-form{padding: 0 25px;}
.info-form ul.form-list{border: 2px solid #9e9e9e;padding:10px; padding-bottom: 0;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}

/*--------------------*/
/* file upload ---- */
div.mx-file-upload {
 float: left;
    min-width: 100px;
    width: 100%;
    padding: 4px;
    border: 1px solid #edeff4;
    background: #f5f5f5;
    height: 50px;
    border-radius: 5px;
}
div.mx-file-upload div.drop {
  float: right;
  width: 42px;
  height: 42px;
  text-align: center;
  vertical-align: middle;
  transition: all ease-in-out 0.3s;
  -webkit-transition: all ease-in-out 0.3s;
  background-color: #EF258A;
  border-radius: 5px;
}
div.mx-file-upload div.drop:hover {background-color: #000;}
div.mx-file-upload div.drop a {
 float: left;
    width: 100%;
    height: 100%;
    color: transparent !important;
    line-height: 200px;
    padding: 4px;
    cursor: pointer;
    background-image: url(../images/ico-upload-file.png);
    background-repeat: no-repeat;
    background-size: 26px;
    background-position: center center;
    overflow: hidden;
}
div.mx-file-upload div.drop input {
  display: none;
}
div.mx-file-upload ul {
    float: left;
    height: 100%;
    width: calc(100% - 64px);
}
div.mx-file-upload ul li,div.grp-wrap > ul li div.mx-file-upload ul li
 {
    float: left;
    width: 42px;
    height: 42px;
    margin: 0px 6px 8px 0px;
    padding: 0;
    position: relative;
}
a.del.rs {
    width: 15px;
    height: 15px;
    right: -7px;
    top: -7px;
}
a.del.rl, a.del.rs {
    border-radius: 100%;
    -webkit-border-radius: 100%;
    position: absolute;
}
div.mx-file-upload ul li a {
    float: left;
    width: 100%;
    height: 40px;
    overflow: hidden;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border: 1px solid #790000;
}
div.mx-file-upload ul li a img{width: 100%; height: 100%; object-fit: cover;}
/*ERROR MESSAGE==================================================*/
p.e,
label.error {
  width: 100%;
  margin: 2px 0 0 0 !important;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1.4rem;
  color: #B42318;
  text-align: left !important;
  text-transform: none;
  float: left;
}
img {
  vertical-align: middle;
}
.img-box {
  width: 100%;
  background-color: #ffffff;
}
.img-box img {
  max-width: 100%;
}
/*COMMON CSS ENDS====================================*/
button {
  -webkit-transition: all ease-in-out 0.3s;
  -o-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.btn,
a.btn,.btn.btn-primary {
  padding: 10px 15px;
  /* margin-top: 10px; */
  background-color: #EF258A;
  text-align: center;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 500;
  width: 100%;
  font-family: "Inter", sans-serif;
  border-radius: 8px;
  box-shadow: 0px 1.2px 2.41px 0px rgba(16, 24, 40, 0.051);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
}
.btn-light {
  padding: 10px 15px;
  background-color: #F9F5FF;
  text-align: center;
  color: #6941C6;
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 500;
  width: 100%;
  font-family: "Inter", sans-serif;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0px 1.2px 2.41px 0px rgba(16, 24, 40, 0.051);
}
.btn-outline {
  padding: 10px 15px;
  text-align: center;
  color: #344054;
  background-color: #FFFFFF;
  font-size: 1.6rem;
  line-height: 2.6rem;
  font-weight: 500;
  width: 100%;
  font-family: "Inter", sans-serif;
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0px 1px 2px 0px #1018280D;
}
.btn svg path {
  transition: all 0.3s ease 0s;
}
button:hover,
.btn-light:hover,
.btn:hover,
.btn-outline:hover,
a.btn:hover {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
.btn:hover svg path {
  stroke: #344054;
}
.disable {
  opacity: .6;
  cursor: not-allowed;
}
/*MX SCROLLBAR CSS==================================================*/
::-webkit-scrollbar {
  width: 2px;
  height: 1px;
}
::-webkit-scrollbar-track {
  background: #D0D5DD;
}
::-webkit-scrollbar-thumb {
  background: #EF258A;
  padding: 0px 0px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(16, 24, 40, 0.051);
  background: #D0D5DD;
}
/*MX SCROLLBAR CSS==================================================*/

/*PROGRESS BAR==================================================*/
div.mxdialog,
div#mxloader {position: fixed;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-y: auto;
  scrollbar-width: thin;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10011;
  background: rgba(0, 0, 0, 0.75);}
div#mxloader {display: block;z-index: 99;}
div#mxmsg {display: none;min-height: 30px;min-width: 100%;padding: 10px;text-align: center;vertical-align: middle;font-size: 2.0rem;color: #ee3c2d;background-color: #FFF;}
div.progress {display: block;width: 100%;height: 1px;margin: 0;padding: 0;position: absolute;top: 50%;background: rgba(0, 0, 0, 0.50);display: none;}
.spinner {width: 100%;height: 100%;background-image: url(../images/loader.gif);background-repeat: no-repeat;background-position: center;font-size: 1.8rem;line-height: 1.8rem;text-align: right;vertical-align: top;color: #dc0000;padding: 3px;}
.spinner div {display: none;}

fieldset { float:left; width:calc(100% - 30px); margin-left:15px; border:2px solid #dcdcdc; padding:15px;}
fieldset legend{ font-size:1.8rem;}
fieldset legend h3{ font-size:100%}


/*MXDIALOG CSS==================================================*/

div#mxalert,
div.mxdialog,
div.mxpopup {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 49999 !important;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  background-color: rgba(52, 64, 84, 0.7);
  backdrop-filter: blur(16px)
}
div#mxalert div.body,
div.mxdialog div.body,
div.mxpopup div.body {
  max-width: 600px;
  padding: 20px;
  background: #FFFFFF;
  box-shadow: 0px 8px 8px -4px #10182808;
  box-shadow: 0px 20px 24px -4px #10182814;
  border: 0;
  border-radius: 12px;
  text-align: center;
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.mxdialog h2 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 2.6rem;
  margin-bottom: 5px;
}
div.mxdialog div.body>p {
  padding: 0 15px 10px;
}
div.mxdialog div.content {
  max-height: 60vh;
  padding: 15px;
  overflow: auto;
}
div.mxdialog.alert-popup div.body {
  width: 600px;
}
div.mxdialog.alert-popup div.content {
  text-align: center;
}
div.mxdialog div.content .mx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 30px;
}
div.mxdialog div.content .mx-btn .btn {
  margin: 0;
}
div.mxdialog.alert-popup div.content p {
  line-height: 2rem;
  text-align: left;
}
.mx-list {
  display: flex;
  flex-flow: row wrap;
  gap: 16px;
}
div.mxdialog .popup-heding {
  padding: 0;
}
/*CUSTOM RADIO AND CHECKBOX CSS==================================================*/
i.rdo,
i.chk {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  vertical-align: top;
  min-width: 14px;
  min-height: 14px;
  position: relative;
  font-style: normal;
  position: relative;
  z-index: 1;
  cursor: pointer;
  -webkit-user-select: none;
  text-transform: none !important;
  line-height: 2.4rem;
  padding: 0;
  padding-left: 28px;
  color: #1D2939;
  border-radius: 0px;
  font-size: 14px;
}
i.rdo input,
i.chk input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}

i.rdo em,
i.chk em {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  z-index: 0;
  font-style: normal;
  border-radius: 0px;
  border: 1px solid #111111;
}
i.rdo em:after,
i.chk em:after {
  content: '';
  position: absolute;
  display: none;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-color: #EF258A;
}
i.chk input:checked~em,
i.rdo input:checked~em {
  border-color: #EF258A;
  background: #F9F5FF;
}
i.chk input:checked~em:after {
  display: block;
}
i.rdo input:checked~em:after {
  display: block;
  background-color: #EF258A;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
i.rdo input[type='radio']~em {
  border-radius: 100%;
  -webkit-border-radius: 100%;
}
i.rdo input[type='radio']~em:after {
  top: 4px;
  left: 4px;
}
a.add:after{width:1px; height:15px; margin-top:-7.5px; margin-left:-1px;background-color:#ffffff;}
a.add:before{width:15px; height:1px; margin-top:-1px; margin-left:-7.5px;background-color:#ffffff;}
a.add:hover:after, a.add:hover:before{transform:rotate(180deg);}
/* Add Row css */
.wrap-form{width: 100%; position: relative;}
.wrap-form h4{ width: auto;  margin: 0; color: #fff;}
div.grp-wrap{width:100%; margin:0; padding:15px 25px 0; position:relative;}
div.add-grp{ width:100%; margin:0; padding:6px;display: flex;align-items: center;justify-content: space-between; position: relative;background-color: #9e9e9e;height: 50px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
div.add-grp h4{margin: 0;color: #ffffff;letter-spacing: 3px;font-size: 18px;}
div.add-grp a.add{top: 50%;transform: translate(0,-50%);background-color: #fff; font-weight: 500; width: 80px; background-image: url(../images/add.png); background-repeat: no-repeat; background-size: 100%; border-radius: 5px;}
.dlemem-wrap{width: 75%;display: flex;align-items: center;justify-content: space-between;position: absolute;top: 26px;left: 30px;z-index: 1;}
.dleMem{background: #ffffff;border-radius: 5px;width: 100px;font-size: 13px;height: 30px;display: flex;align-items: center;justify-content: center;
  color: #5c5c5c; font-weight: bold; text-transform: uppercase;}



div.add-grp a.add:after, div.add-grp a.add:before{background-color: #000;}
div.add-grp+ul{border-top: 0;border-top-left-radius: 0 !important;border-top-right-radius: 0 !important;}
div.grp-wrap > ul{ width:100%; display:flex; justify-content:flex-start; align-items:flex-start; flex-flow:row wrap; margin:0 0 10px 0; padding-top:16px; padding-left:12px; position:relative;border: 2px solid #9e9e9e;border-radius: 10px;}
div.grp-wrap > ul:last-child{margin-bottom: 0;}
div.grp-wrap > ul li{ width:100%; margin-bottom:8px; padding:0px 12px 0 0;}
div.grp-wrap > ul li.col33{width: 33.33%; height: auto;}
div.grp-wrap > ul li ul.mx-list li{width: auto;}
div.grp-wrap > ul li.del-grp{/* position:absolute; */ right:0px; top:5px; padding:0; width:25px;}
.del-grp a.del{top: 5px;}
.hide-lable label {display: none;}

.btn-wrap{width: 100%;display: flex;padding: 20px 25px 5px;justify-content: flex-end;align-items: center;}
.btn-wrap a{background: #ef258a;color: #fff;padding: 12px 20px;border-radius: 6px;font-size: 14px;font-weight: bold; text-align: center;}
.btn-wrap a:hover{background-color: #000000;}

.btn-wrap form{text-align: center;}

.card .btn-wrap{padding: 20px 5px 5px;}
.card .btn-wrap a{margin: 0 5px;}
/*----------*/
a.close,
a.del,
a.add {
  width: 30px;
  height: 30px;
  text-align: center;
  position: absolute;
  right: 15px;
  top: 15px;
  border: 0;
  background-color: #EF258A;
  transition: all ease-in-out 0.3s;
}
a.close:hover,
a.del:hover,
a.add:hover {
  background-color: #000000;
}
a.close:before,
a.del:before {
  transform: rotate(45deg);
}
a.close:after,
a.del:after {
  transform: rotate(-45deg);
}
a.add:before,
a.add:after,
a.close:before,
a.close:after,
a.del:before,
a.del:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all ease-in-out 0.3s;
  width: 2px;
  border-radius: 2px;
  height: 14px;
  margin-left: -1px;
  margin-top: -7px;
  background: #ffffff;
}
a.close:hover:before,
a.del:hover:before {
  transform: rotate(-45deg);
}
a.close:hover:after,
a.del:hover:after {
  transform: rotate(45deg);
}
a.add:after{width:2px; height:14px; margin-top:-17x; /* margin-left:-1px; */margin-left:23px;}
a.add:before{width:14px; height:2px; margin-top:-1px; /* margin-left:-7px; */ margin-left:17px;}
a.add:hover:after, a.add:hover:before{transform:rotate(180deg);}
/* Btn */
.button{width: 100%;height: 46px;text-align: center;background-color: #EF258A;color: #fff;line-height: 46px;display: inline-block;text-transform: uppercase;letter-spacing: 3px;font-size: 18px;}
.button:hover,.button.active{background-color:#000000}
/* Heambeger menu ----- */
header{ width: 100%;padding: 0 70px 0 70px; margin: 0; position: absolute; top: 70px; left: 0; z-index: 2;}
.header-wrap {display: flex;justify-content: space-between;flex-flow: row wrap;}
.hamburger {width: 30px;height: 30px;position: relative;z-index: 2;overflow: hidden;display: none;}
.hamburger span {width: 30px;height: 2.5px;position: absolute;top: 50%;left: 50%;border-radius: 2px;transform: translate(-50%, -50%);background-color: #414141;-webkit-transition: all 0.3s ease-in;-moz-animation: all 0.3s ease-in;transition: all 0.3s ease-in;}
.hamburger span:nth-of-type(2) {top: calc(50% - 9px);}
.hamburger span:nth-of-type(3) {top: calc(50% + 9px);}
.hamburger.active span:nth-of-type(1) {display: none;}
.hamburger.active span:nth-of-type(2) {top: 50%;transform: translate(-50%, 0%) rotate(45deg);}
.hamburger.active span:nth-of-type(3) {top: 50%;transform: translate(-50%, 0%) rotate(-45deg);}
/* -------- */
header nav {flex: 1;-webkit-transition: all .5s ease-in;-moz-animation: all .5s ease-in;transition: all .5s ease-in; display: none;}
header nav ul {justify-content: flex-end;display: flex;align-items: center;justify-content: flex-end;gap: 100px; padding-top: 15px;}
header nav ul li a{font-size: 12px; color: #EF258A; letter-spacing: 3px;}
header nav ul li a:hover{color: #000000;}
.logo{width: 95px; }
.logo-wrap{display: flex;align-items: center;gap: 20px;}
.brand-name-header{display: flex;align-items: center;}
.brand-name-header span{font-size: 1.8rem;font-weight: 700;color: #ef268b;text-transform: uppercase;letter-spacing: 1px;}
.ico-wrap{width: auto;display: flex; }
.ico-wrap a{width: 25px; display: inline-block; margin: 0 12px;}
.ico-wrap a img{max-width: 100%;}
/* Main Css strat =====================================*/
.desk-only{display: inline-block;}
.mob-only{display: none;}
.wrapper{max-width: 1200px;margin: 0 auto;position: relative;}
.container {width: 100%; min-height: 100%; height: auto; display: flex; flex-flow: row wrap; margin: 0; padding: 20px; position: relative;}
img{max-width: 100%;}
section{width: 100%; /* height: calc(100vh - 40px); */ display: flex; flex-flow: row wrap; align-items: center; justify-content: center; margin: 0; padding: 100px 0 40px; background-color:#F7F4E8 ;/*  background-image: url(../images/plan-bg.png); background-repeat: no-repeat; background-size: cover; */ position: relative; }
.welcome{background-image: url(../images/bg-2.png);background-position: center center; background-repeat: no-repeat;background-size: cover;}
.wel-logo{width: 230px;}
.img-box{width: 100%; }
.img-box img{max-width: 100%; }
.ng-content{width: 100%; display: flex;  justify-content: space-between;  position: relative; padding: 95px 70px 0 70px;}
.ng-content form{overflow: hidden;}
.ng-content .img-box{width: 35%;background: #f7f4e8;/* animation: up-down 4s linear 1.7s infinite; */animation: fromLeft 1s ease 0.1s forwards;}
.ng-content .data{width: 55%; padding-right: 0px;animation: fromRight 0.9s ease 0.1s forwards;}
.ng-content p{ text-align: justify; margin-bottom:30px;}
.row-reverse{flex-direction: row-reverse; padding-left: 180px; align-items: center;}


.info-wrap,.tc-wrap{width: 50%; animation: fromLeft 1s ease 0.1s forwards;}
.dashboard.page-active .info-wrap{opacity: 1;animation: fromLeft 1s ease 0.1s forwards;}
/* .info-wrap.active{width: 50%;animation: fromLeft 1s ease 0.1s forwards;} */
.content { min-height:350px; }

.dashboard .content p { font-size: 1.4rem; line-height: 2rem; text-align: justify; margin-bottom: 10px;}
.content ul{width: 100%; display: flex; flex-flow: row wrap;}
.content ul li{width: 50%; padding: 0 30px; margin-bottom: 10px; }
.content ul li p{ margin: 0;}
.dashboard .content a{color: #414141;}




.btn-list{width: 100%; display: flex; flex-flow: row wrap;  gap: 20px;}
.btn-list li{width:calc(50% - 10px); background-color: #F36F21; border-radius: 40px; border:3px solid #000; text-align: center;}
.btn-list li a{padding: 12px 0; color: #000; letter-spacing: 5px; font-size: 15px; display: block; font-weight: 600;}
.ng-content .data a.button{margin-top: 25px;}
.btn-list li.rsvp{width: 100%;}
.btn-list li.rsvp{background-color:#EF258A ;}
.btn-list li.rsvp a{color: #ffffff; font-size: 20px;}
.btn-list li:hover,.btn-list li.active{background-color: #000; border-color: #fff;}
.btn-list li a:hover,.btn-list li.active a{color: #ffffff;}
/* form css */
/* Pin */
.welcome .card{display: flex;align-items: center;justify-content: center;padding: 15px;/* background-image: url(../images/welcome-bg.png); */animation: fadeIn 0.5s ease-in 0s forwards; background: repeating-linear-gradient(-45deg,#ef258a ,#ef258a 15px,#fd7010 15px,#fd7010 30px );text-align: center;}
.welcome .card .data{background-color: #F9F6EA;padding: 50px;width: 500px;max-width: 100%;box-sizing: border-box;}
.welcome .card-logo{width: 140px;margin-top: -130px;}
.welcome .brand-name{padding: 20px 0 0 0;margin: 0;}
.welcome .brand-name h1{font-size: 3.2rem;font-weight: 700;color: #ef268b;text-transform: uppercase;letter-spacing: 2px;padding: 0 15px;}
.welcome .heading{text-transform: uppercase;letter-spacing: 3px;padding: 30px 0;font-size: 22px;margin: 0;}
.welcome .heading h2{font-size: 2.6rem;}
.welcome .heading p:not(.e){margin: 0;padding-top: 15px;}
.welcome ul.form-list{padding: 0 0;margin-bottom: 15px;}
.welcome ul.form-list.pin-list{display: flex;gap: 20px;}
.welcome ul.form-list.pin-list li{width: 70px;}
.welcome ul.form-list label{display: none;}
.welcome ul.form-list input{border: 1px solid #000000;text-align: center;width: 100%;height: 40px;}
.welcome.email ul.form-list input{width: 100%;text-align: left;}
.welcome.email ul.form-list li{width: 100%;}
.welcome form{background-color: transparent;margin: 0;}

.thankyou p{font-size: 1.4rem; line-height: 1.8rem; margin-bottom: 10px; letter-spacing: normal;}

/* DASHBORAD --------- */
.dashboard{background-color: #F7F4E8;padding-bottom: 20px; background-image: url(../images/dashboard-bg.png);background-repeat: no-repeat;
    background-position: right 150px; padding-left: 60px;background-size: 35%;flex-direction: column;
    align-items: flex-start;}
 .dashboard > p{width: 50%;line-height: 2.5rem;margin: 0;padding-top: 100px;padding-left: 25px;}   
.dashboard h1{text-align: center;padding: 15px 0;text-transform: uppercase;font-size: 32px;line-height: 40px;color: #ef268b;font-weight: 700;}
.dashboard .card{box-shadow: rgba(100, 100, 111, 0.2) 0px 3px 29px 0px;display: flex;align-items: center;justify-content: space-between;flex-direction: row;padding: 10px;background: #ffffff;height: auto;border-radius: 10px;}
.dashboard .card p{font-size: 16px;line-height: 24px;/* min-height: 50px; */}
.dashboard .card h4{font-size:18px;line-height: 20px;padding: 0; font-weight: 600; margin: 0;}
.dashboard .card .data{padding-right: 15px; flex: 1; display: flex; align-items: center;justify-content: space-between;padding-left: 30px;}
.dashboard .card .data p,.dashboard .card .data h4{width: auto; margin: 0;}
.remark {max-width: 600px;margin: auto;}
.remark .card{margin: 0 auto;width: 100%;}
.dashboard-list .img-box{width: 40px;height: 40px;border-radius: 50%;overflow: hidden;/* background-color: #FB6F11; */padding: 10px;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.remark .img-box{width: 100px;height: 100px;border-radius: 15px;padding: 25px;overflow: hidden;background-color: #FB6F11;}

.dashboard-list{ width: 50%;  display: flex;flex-flow: row wrap;padding: 35px 15px 15px;align-items: center;justify-content: flex-start;}
.dashboard-list li{width: 100% ;padding: 10px;}
.dashboard .btn-wrap{display: flex;align-items: center;justify-content: center;gap: 30px;margin: 0 auto 30px auto;max-width: 300px;}
.btn{background-color: #444444;color: #ffffff;border-color: #414141;text-transform: uppercase;}
.btn:hover{background-color: #ef258a;border-color: #ef258a;color: #ffffff;}
.tour{text-decoration: underline;margin: auto;color: #000000;font-size: 18px;line-height: 24px; display: none;}
.tour:hover{color: #ef258a;}
.dashboard .text-center{margin-bottom: 20px;text-align: center;}

/* popup buttons ---- */
.mx-btn {gap: 30px;}
.mx-btn .btn{background-color: #444444;color: #ffffff;border-color: #414141;text-transform: uppercase;}
.mx-btn .btn:hover{background-color: #ef258a;border-color: #ef258a;color: #ffffff !important;}

.foot{width: 50%;padding: 15px;}
.register{overflow: hidden;}
div.mxdialog div.content{min-height: auto;}




/* t&C */
ul.tc-list{position: absolute;right: 30px;display: flex;bottom: 40px;}
ul.tc-list li{margin: 0 10px;}
ul.tc-list li a{font-size: 12px; color: #ef258a; font-weight: bold;}


.dashboard .tc-wrap h1{font-size: 24px; margin-bottom: 30px; padding: 0; line-height: normal;}
.tc-wrap p{ font-size: 14px; line-height: normal;}
.tc-wrap ol{width: 100%; display: block;}
.tc-wrap ol > li{list-style: decimal;}
.tc-wrap ol > li ul li{list-style: disc;}
.tc-wrap ol > li h5 {font-size: 1.6rem; font-weight: bold; margin-bottom: 20px;}
.tc-wrap ol li ol,.tc-wrap ol > li ul {padding-left: 40px;}
.tc-wrap ol li ol li p,.tc-wrap ol li ul li p {margin-bottom: 10px; }

.tc-wrap ol > li{margin-bottom: 30px;}
.tc-wrap ol li ol li{margin-bottom: 0;}

.dashboard.contact{justify-content: flex-start;}

/* booking  page*/


.booking{width: 100%;background-color: #F7F4E8; padding: 180px 60px 20px;flex-direction: column;align-items: flex-start;justify-content: flex-start; }
.booking-main{width: 100%; border:1px solid #ef258a;padding: 0px; border-radius: 10px;}

.tab-list{width: 100%; display: flex; justify-content: center; }
.tab-list li a{ letter-spacing: 2px; display: inline-block;  background-color: #D9D9D9; padding: 10px 20px; color: #000;width: 140px;text-align: center;margin: 0 5px 0 0; text-transform: uppercase; font-weight: bold; font-size: 14px; border-radius: 5px;}
.tab-list li a:hover,.tab-list li a.active{background-color: #ef258a; color: #fff;}

.tab-wrap{width: 100%; text-align: center; padding-top: 50px;}
.tab-wrap .tab-list{justify-content: center;}
.tab-wrap .tab-list li a{width: 200px;}

.booking form{background-color: transparent; border-radius: 0; padding-bottom: 10px;}

.canter-list{width: 100%; padding: 0; display: flex; flex-flow: row wrap; padding-top: 40px;}
.canter-list > li{width: 100%; display: flex;flex-flow: row wrap;}
.canter-list > li .data-wrap{width: 100%; display: flex;flex-flow: row wrap;align-items: center;justify-content: space-between; margin-bottom: 60px; padding: 0 60px 0px 0; border-bottom: 2px dashed #ef258a; position: relative;}
.canter-list > li .data-wrap:last-child{border:0; margin: 0;}


.vehicle-time{width: 100%;display: block;text-align: center;padding: 0 30px;margin: 30px 0;}
.vehicle-time h2{width: auto;display: inline-block;padding: 0px 0 30px;text-align: center;font-weight: bold; position: relative;text-transform: uppercase;
    font-size: 24px;}
.vehicle-time h2::after{content: "";  width: 300px; height: 77px; display: inline-block; position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%); background-image: url(../images/head-bg.png); background-repeat: no-repeat; background-position: center; background-size: contain;}

.vehicle-time h2 span{width: 100%;display: block;font-weight: 500;font-size: 16px;margin-top: 5px}

.canter-list li .img-box{width: 40%; background-color: #f7f4e8; text-align: center;}
.canter-list li .img-box img{width: 300px; max-width: 100%;}
.canter-list li .img-box h4{width: 100%;text-align: center;margin-bottom: 40px;text-transform: uppercase;font-weight: bold; display: none;}


.canter-list li .card{display: flex;align-items: center;justify-content: center;padding: 10px;/* background-image: url(../images/welcome-bg.png); */animation: fadeIn 0.5s ease-in 0s forwards; background: repeating-linear-gradient(-45deg,#ef258a ,#ef258a 15px,#fd7010 15px,#fd7010 30px );text-align: center;}
.canter-list li .data{background-color: #ffffff;padding: 20px;width: 580px;text-align: left; display: flex; flex-flow: row wrap; height: 290px; overflow: auto;}



.locate{width: 580px;position: absolute;top: 0;right: 70px;display: flex;align-items: center;justify-content: center;}
.locate li{padding: 0 10px; font-size: 12px; line-height: 15px; text-transform: capitalize;display: flex;align-items: center;}
.locate li span{width: 10px; height: 10px; display: inline-block; margin-right: 10px;background-color: #1171bb;}
.locate li.my-book span{background-color:#49b409 ;}
.locate li.booked span{background-color:#ef268b ; color: #fff; font-size: 6px; font-weight: bold; text-align: center;line-height: 10px;}


.mum-list{width: 50%;border:1px dashed #ef268b}
.mum-list.left-panel{ flex: 1;}
.mum-list.right-panel{ border-left: 0;}
.mum-list h5{text-align: center; padding: 5px; background-color: #ef268b; color: #fff; font-weight: bold;font-size: 1.6rem;line-height: 2rem;}
.mum-list ul{padding: 10px; }
.mum-list ul{padding: 10px;}
.mum-list ul.tbl-form label{display: none;}
.mum-list ul li ul.mx-list{gap: 0; padding: 0;}
.mum-list ul li{width: 100%; padding-bottom: 2px;}
.mum-list ol{padding: 10px; list-style: decimal; padding-left: 35px; }
.mum-list ol li{ font-size: 14px; font-style: normal;list-style: decimal; padding-bottom: 10px;}

.mum-list i.chk em {width: 17px; height: 17px;}
.mum-list i.chk em:after {left:5px}

.chk.disabled em{background: #c7c9c6;border-color: #c7c9c6;}
.chk.disabled input{cursor: not-allowed;}
.chk.disabled {color: #afafaf;}

.canter-list ul.form-list{padding: 0;}
.canter-list ul.form-list label{text-align: left; width: 100%; text-transform: none;}
.canter-list input[type='text'],.canter-list div.select-box select{padding: 10px 15px;}

.booking .btn-wrap{justify-content: center;}
.booking .btn-wrap .btn{width: 300px;}
.canter-list h6{font-weight: bold; margin-bottom: 15px; text-align: center;}
.person-list{width: 100%; padding: 15px; border-radius: 5px; background-color:#EFEEEE; margin-bottom: 20px;}
.person-list ol{width: 100%; display: flex;flex-flow: row wrap;}
.person-list ol li{ width: calc(50% - 10px);font-size: 12px;margin: 0 5px 8px;padding: 5px;background-color: #fd700f;border-radius: 4px;padding-right: 35px;color: #fff; position: relative;}
.person-list ol li a{width: 15px;height: 15px;background: #fff;display: flex;align-items: center;justify-content: center;border-radius: 100%;padding: 5px;position: absolute;right: 5px;top: 5px;}

/* my booking */
.tbl-wrap{width: 100%;}
.tbl-wrap h4{width: 100%;text-align: center;color: #ffffff;background: #f053a1;padding: 10px;text-transform: uppercase;font-weight: bold; }
.tbl-list{width: 100%;border-collapse: collapse; background-color: #ffffff;margin-bottom:20px;}

th,td{padding: 10px 20px; text-align: center; font-size: 14px; border:1px solid #414141; width: 1%;}
th{background-color: #d9d9d9; color: #000; }
.left{text-align: left;}
.right{text-align: right;}
.tbl-list.total .head{width: 80%;}
.tbl-list.total .value{width: 20%;}

/* popup */

.mxdialog form{background-color: transparent; border-radius: 0;}
.mxdialog .content ul{  padding: 15px; border-radius: 4px;overflow: auto;align-content: flex-start;}
.mxdialog .content ul li{width: 100%; padding: 0; font-size: 14px;cursor: pointer;padding: 5px 10px; margin: 0;}

div.mxdialog.person-login-popup div.select-box select{border: 1px solid #cecece;}
div.mxdialog.person-login-popup .btn{width: 180px;font-size: 14px;padding: 5px;height: 40px;}
div.mxdialog.person-login-popup .cta-wrap{width: 100%; text-align: center;}


/* temp */
.set-booked{width: 235px;height: 512px;position: absolute;top: 70px;left: 206px;padding-top: 95px;}
.cabin li ul{ width: 100%; display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;}
.cabin > li{ padding: 0 10px; margin-bottom: 24px;}
.cabin li ul li{display: flex;position: relative; width: 25%;}
.cabin li ul li:nth-child(2) {margin-right: 17px;}
.cabin li ul li a{width: 50px;height: 46px;display: inline-block;background-image: url(../images/canter-set.png);background-position: center center;background-repeat: no-repeat;background-size: cover;}
/* .cabin li ul li a:hover, */.cabin li ul li a.active{background-image: url(../images/booked.png);}
.cabin li ul li a.booked{background-image: url(../images/booked-2.png);}
/* temp jeep */

.set-booked.jeep{width: 240px;height: 570px;position: absolute;top: 70px;left:206px;padding-top: 32px; display: flex;/* transform: rotate(180deg); */}


.jeep .cabin li ul li a{width:60px;height: 56px;display: inline-block;}
.jeep .cabin li ul li a{background-image: url(../images/jeep-set.png);background-position: center center;background-repeat: no-repeat;background-size: cover;}
/* .jeep .cabin li ul li a:hover, */.jeep .cabin li ul li a.active{background-image: url(../images/booked-jeep.png)}
.jeep .cabin li ul li a.booked{background-image: url(../images/booked-jeep2.png);}
.jeep .cabin {height: 440px; width: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
.jeep .cabin li {padding: 0 0px;margin-bottom: 5px;}
.jeep .cabin li ul li{width: 50%; justify-content: center; margin: 0; margin-top: 8px;}
.jeep .cabin li ul li:nth-child(2) {margin-right: 0;}


/* accord */
.accordion-list{width: 100%; margin-top: 0px; padding: 0 30px;}
ul.accordion-list > li {margin-bottom: 0px;border-bottom: 1px solid #3C4246;background-color: #f77f2d; margin: 0 0 10px; border-radius: 5px;}
ul.accordion-list > li:last-child{border: 0;}
ul.accordion-list li.booked-accordian{background-color: #ef258a;}
ul.accordion-list li.jeep-blocked{background-color: #000000;}
.accordion-title {position: relative;cursor: pointer;padding: 10px;}
.accordion-title h5 {font-size: 1.8rem;line-height: 2.4rem; color: #ffffff; font-weight: bold;}
.accordion-title i {position: absolute;right: 10px;top: 50%;transform: translate(0, -50%);width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;}
.accordion-title i::after {content: '';width: 12px;height: 12px;display: inline-block;background-size: 100%;background-image: url(../images/arrow-down.png);background-repeat: no-repeat;}
.accordion-content{width: 100%; background-color: #F7F4E8; padding: 40px 0; position: relative;}

ul.accordion-list > li.overlay .accordion-content::before{content: ""; display: inline-block; width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); position: absolute; top:0;left: 0;z-index: 1;cursor: not-allowed;}





@keyframes fromLeft {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(10px);
  }
}
@keyframes fromRight {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
 .dashboard {
        padding-top: 180px;
    }


@media (min-width: 2400px) {
  .set-booked,.set-booked.jeep{left: 303px;}
}

@media screen and (max-width:1700px) {
.set-booked{left: 160px;}

}
@media screen and (max-width:1600px) {
  header nav ul{gap: 80px;}
  .dashboard{padding-left: 60px;} 
  .info-wrap,.tc-wrap {width: 60%;}
  .logo{width: 60px;}

/* temp */
  .set-booked{left: 144px;}
  .set-booked.jeep{left: 144px;}
} 
@media screen and (max-width: 1550px) {
.set-booked,.set-booked.jeep {left: 130px;}
}

@media(max-width: 1500px) {
  

  .dashboard h1{padding:  0 40px;font-size: 30px;line-height: 38px;}

  header nav ul{gap: 50px;}

  .remark .img-box{width: 90px;height: 90px;padding: 20px;}



  .dashboard .card p {font-size: 15px;line-height: 22px;}


  /* sanket */

  .welcome .heading h2 {font-size: 2rem;}
  .welcome .card .data {padding: 35px;}
  .welcome .card{padding: 10px;}
  .welcome .card-logo {width: 110px;margin-top: -118px;}
  .welcome .brand-name h1{font-size: 2.4rem;}
  .welcome .heading{padding: 25px 0;}
  .container{padding: 15px;}

  /* temp */
  .set-booked{left: 120px;}
  .set-booked.jeep{left:120px}
}
@media(max-width: 1440px) {
/* temp */
  .set-booked{left: 112px;}
  .set-booked.jeep {left: 113px;}
}
@media(max-width: 1400px) {
  .dashboard{padding-top: 150px;}

  /* temp */
  .set-booked {left: 100px;}
  .set-booked.jeep {left: 100px;}
}
@media(max-width: 1360px) {
  header{padding: 0 90px 0 75px;}
  .remark .img-box{width: 80px;height: 80px;padding: 15px;}
  i.rdo, i.chk{font-size: 14px;}
  div.grp-wrap > ul li.gender ul{padding: 5px 0 5px 5px;}
  div.grp-wrap > ul li.gender ul li{padding-right: 0;}
.canter-list > li .data-wrap{padding: 0 40px 0 0;}
 /* temp */
  .set-booked {left: 82px;}
  .set-booked.jeep {left: 83px;}
  

}

@media(max-width: 1200px) {
.dashboard{background-position: center 95%;padding: 190px 60px 0;
            padding-bottom: 400px;}
.info-wrap,.tc-wrap {width: 100%;}


.canter-list li .img-box{margin-bottom: 40px; width: 100%;}

.locate{right: auto; width: 100%; margin-bottom: 30px; position: relative;}
/* temp */
.set-booked.jeep{width: 190px;height: 560px;left: 50%;transform: translate(-50%) rotate(0deg);}

.set-booked{padding-top: 145px;width: 210px; left: 50%;transform: translateX(-50%);}
.canter-list li .card,.canter-list li .data{width: 100%;}
.canter-list > li .data-wrap{padding-right: 0;}
.cabin > li{padding: 0;}
.cabin li ul li:nth-child(2) {margin-right: 10px;}
.jeep .cabin {height: 485px;}
}

  


@media(max-width: 1023px) {
  header{padding: 0 50px;}

  header .row{align-items:center;justify-content: space-between;}
  /* .hamburger{display: block;} */
  body:has(.hamburger.active){background-color: red;overflow: hidden;}
  header nav{position: fixed;right:-100% ;width: 100%;background-color: #ffffff;padding: 20px;}
  header nav ul{flex-direction: column;}
  header nav ul li{width: 100%;text-align: left;}
  header nav.open{right: 0;top: 0;height: 100vh;}
  .header-wrap{justify-content: space-between;}
  .logo{width: 70px;}
  header .navbar-nav{justify-content: flex-start;}
  header nav ul{gap: 30px;}
  .dashboard h1{padding:  0 30px;}
  .remark .card{width: 70%;}
  .container {padding: 10px;}
  .dashboard{padding: 190px 40px 0;background-size: 55%; justify-content: flex-start; }
  .dashboard-list{width: 100%;}
  .foot{width: 100%;}
.ng-content{flex-flow: row wrap;}
.ng-content .data,.ng-content .img-box{width: 100%;}
.ng-content .img-box{order: 2; padding-top: 40px; text-align: center;}
.ng-content{padding: 80px 40px 0 40px;}
.ng-content .data{padding-right: 0;}
.ng-content .img-box img{width: 300px;}
.dashboard > p{width: 100%;padding:100px 25px 0;}
.content ul li p{font-size: 1.4rem;}
.canter-list > li .data-wrap{justify-content: center; padding: 0 0px 0px 0;}


/* temp */

.set-booked {width: 282px;padding-top:165px;}
.cabin > li{padding: 0 33px;margin-bottom: 18px;}
/* .cabin li ul li a {width: 40px;height: 40px;display: inline-block;} */






}
@media(max-width: 767px) {
.desk-only{display: none;}
.mob-only{display: inline-block;}
  div#mxalert div.body, div.mxdialog div.body, div.mxpopup div.body{max-width: 90%; }
  div.mxdialog.alert-popup div.body {width: 90%;}
  div.mxdialog.alert-popup div.content{font-size: 13px;}
   header {padding: 0 30px;top: 30px;}
   .brand-name-header span{font-size: 1.4rem;letter-spacing: 0.5px;}
  .button{height: 40px; line-height: 42px;}
  .remark .card{width: 100%;margin: 0;}
  .remark {padding: 20px 20px 0 20px;width: 100%;}
  .dashboard{padding: 170px 15px 400px; background-size: 85%;}
  .dashboard-list{padding: 30px 0 0;}
  .dashboard-list li{width: 50% ;}
  .dashboard .card p{font-size: 13px;}  
  .dashboard .card h4{font-size: 16px;}
  .dashboard .card .data{padding-left: 12px;}
  .welcome .card{width: 90%;}
  .welcome .heading h2 {font-size: 1.4rem; font-weight: 400;}
  .welcome .brand-name h1{font-size: 1.8rem;letter-spacing: 1px;}
.welcome .card-logo {width: 95px; margin-top: -100px;}
.ng-content{padding: 80px 15px 0 15px;}
.form-title.form-title{padding: 0 15px; margin-bottom: 0px;}
.form-title{margin-top: 15px;}
div.grp-wrap{padding: 15px 15px 0;}
.wrap-form h4{left: 15px; font-size: 1.3rem;}
form h3{font-size: 14px;}
ul.form-list li.col50 { width: calc(100% - 0px); height: auto; }
.welcome .card .data {padding: 20px;}
.welcome ul.form-list.pin-list{gap:0}
.welcome ul.form-list.pin-list li {width: 55px;}
div.grp-wrap > ul li.col33 {width: 100%; height: auto;}
.ng-content .img-box img { width: 240px;}
.welcome .heading p:not(.e) {padding-top: 5px;font-size: 1.4rem;line-height: 2rem;letter-spacing: 2px;}
.dashboard > p {width: 100%;padding: 70px 15px 0;}
.btn-list li{width: 100%;}
.form-title h4{height: 40px; font-size: 1.4rem;}
form h4 {font-size: 1.6rem;}
.welcome {background-image: url(../images/bg-mob.png);background-position: center center;background-repeat: no-repeat;background-size: cover;}
.content ul li{width: 100%; padding: 0 15px;}

div.add-grp a.add{background-image: none; width: 30px;}
a.add:after{margin-left:-1px}
a.add:before{  margin-left:-7px }
.wrap-form.info-form{padding: 0 15px;}

.content {min-height: 350px;}


.btn-wrap a{width: 100%;}
.btn-wrap{padding: 15px 15px 0px;}

.dleMem{width: 30px; height: 30px; line-height: 200px; overflow: hidden; background-image: url(../images/trash.png); background-repeat: no-repeat; background-size: 18px; background-position: center;} 
.dlemem-wrap h4{padding-left: 0;}
.dlemem-wrap{top: 25px; width: 69%;}
.button{font-size: 14px;}
.btn-list li a{letter-spacing: 3px;font-size: 14px;}
.btn-list li.rsvp a {font-size: 16px;}

.btn-wrap a{font-size: 14px;}

.tc-wrap ol{padding: 0 20px;}
.tc-wrap ol > li h5{font-size: 1.3rem;}
.tc-wrap ol li ol, .tc-wrap ol > li ul {padding-left: 15px;}
.dashboard .tc-wrap h1{font-size: 20px;}
ul.tc-list{bottom: 15px;}
.dashboard.tc{background-image: none;  padding: 170px 15px 20px;}
.tc-wrap ol > li h5,.tc-wrap ul > li h5{padding: 0; line-height: normal;}

/* table */
.booking{padding: 180px 20px 20px;}
.tbl-list{background-color: transparent;margin-bottom: 20px;}
.tbl-list th{display: none;}
.tbl-list td{display: block;float: left;width: 100%;text-align: left;position: relative;white-space: unset;font-size: 14px; background-color: #ffffff;/* border-bottom: 0; */}
/* .tbl-list td:last-child{border-bottom: 1px solid #000;} */
.tbl-list td:not(:last-child){border-bottom: 0}
.tbl-list td:before {content: attr(title);float: left;width: 50%;font-weight: 400;white-space: pre-wrap; font-weight: bold; font-size: 14px;}
.tbl-wrap h4{font-size: 16px;}
.tbl-list tr{margin-bottom: 10px; float: left; width: 100%;}
.tbl-list tr:last-child{margin: 0;}
.tbl-list.total .head{width: 50%;border-right: 0;border-bottom: 1px solid #000;}
.tbl-list.total .value{width: 50%;}

/* booking */
.tab-list li a{width: 120px; font-size: 12px;}
.tab-wrap .tab-list li a {width: 140px;}
.canter-list li .img-box,.canter-list li .data,.canter-list li .card{width: 100%;}
.canter-list > li .data-wrap{padding: 0 0px 0px 0px; margin-bottom: 30px;}
.canter-list li .img-box img {width: 210px;max-width: 100%;}
.canter-list{padding-top: 30px;}




.person-list ol li {width: 100%;margin: 0 0px 8px;padding-right: 0px;color: #fff;position: relative;}
.booking-main{padding-bottom: 30px;}


/* temp */
.cabin li ul li a { width: 33px; height: 33px;}
.cabin > li{margin-bottom: 16px;}
/* .set-booked{padding-top: 146px;width: 210px; left: 50%;transform: translateX(-50%);} */
.set-booked {left: 50%;width: 210px;padding-top: 95px;}
.cabin li ul li:nth-child(2) {margin-right: 16px;}
.cabin > li{padding: 0 31px;}

.set-booked.jeep {width: 170px;height: 410px;}
.jeep .cabin li ul li a {width: 40px;height: 36px;}
 /* .jeep .cabin li ul li a {width: 50px;height: 46px;} */
 .jeep .cabin{height: 325px;}
/* user -list */

.mum-list{width: 100%;}
.canter-list li .data{height: auto; padding: 15px;}
.mum-list.right-panel { border-left:1px dashed #ef268b;;}
.mum-list h5{font-size: 1.4rem;line-height: 1.8rem;}

.accordion-list{padding: 0 15px;}
.vehicle-time h2{font-size: 18px;}
.vehicle-time h2::after{width: 200px; height: 51px;}
.vehicle-time h2{padding: 0 0 25px;}
.accordion-title h5{font-size: 1.6rem; line-height: 2.2rem;}

/* Refund form mobile optimization - MUST come after general .welcome rules */
section.welcome{overflow-x: hidden !important; max-width: 100vw !important;}
.welcome .card.form2{width: 95% !important; max-width: 100%; margin: 0 auto !important;}
.welcome .card.form2 .data{padding: 15px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;}
.welcome .card.form2 .heading h2{font-size: 1.6rem !important; margin-bottom: 10px; font-weight: 400;}
.welcome .card.form2 .heading p.e{font-size: 12px; line-height: 1.4;}
.welcome .card.form2 ul.form-list{padding: 0 !important; margin-bottom: 10px; display: flex !important; flex-direction: column !important;}
.welcome .card.form2 ul.form-list li{margin-bottom: 12px; width: 100% !important; height: auto !important; display: block !important;}
.welcome .card.form2 ul.form-list li label{display: block !important; width: 100%; font-size: 13px; margin-bottom: 5px; color: #000; text-align: left;}
.welcome .card.form2 input[type='text'],
.welcome .card.form2 input[type='email']{font-size: 14px !important; padding: 10px !important; height: 42px !important; border-radius: 4px; width: 100% !important; display: block !important; border: 1px solid #000 !important; background: #fff !important; box-sizing: border-box !important;}
.welcome .card.form2 .submit-refund{width: 100%; font-size: 14px; height: 44px; line-height: 44px; padding: 0 15px; margin-top: 10px; display: block !important; box-sizing: border-box !important;}
.welcome .card.form2 .card-logo{width: 80px !important; margin-top: -80px !important;}

/* Success popup mobile optimization */
.mxdialog.success-popup div.body{width: 90%; max-width: 90%; padding: 25px 15px;}
.mxdialog.success-popup h2{font-size: 1.8rem; margin-bottom: 15px;}
.mxdialog.success-popup div.content{font-size: 13px; line-height: 1.6; padding: 10px 0;}
.mxdialog.success-popup div.content p{margin-bottom: 15px;}
.mxdialog.success-popup .button{width: 100%; height: 42px; line-height: 42px; font-size: 14px; margin-top: 10px;}

}
@media(max-width: 600px) {
  .dashboard-list li{width: 100% ;}

  /* Refund form - smaller tablets/large phones */
  .welcome .card.form2 .heading h2{font-size: 1.4rem !important;}
  .welcome .card.form2 .card-logo{width: 70px !important; margin-top: -70px !important;}
  .welcome .card.form2 ul.form-list li label{font-size: 12px;}
  .welcome .card.form2 input[type='text'], .welcome .card.form2 input[type='email']{font-size: 13px !important; padding: 9px !important;}
}

@media(max-width: 520px) {
  /* Fix for screens below 517px - override fixed 500px width */
  .container{padding: 10px !important;}
  section.welcome{width: 100% !important;}
  .welcome .card{width: 100% !important; padding: 5px !important; margin: 0 !important;}
  .welcome .card .data{width: 100% !important; max-width: 100% !important; padding: 20px !important; box-sizing: border-box !important;}
  .welcome .card-logo{width: 70px !important; margin-top: -75px !important;}
  .welcome .heading{padding: 15px 0 !important;}
  .welcome .heading h2{font-size: 1.4rem !important;}
  .welcome ul.form-list:not(.pin-list){width: 100% !important;}
  .welcome ul.form-list:not(.pin-list) li{width: 100% !important;}
  .welcome ul.form-list:not(.pin-list) input{width: 100% !important; box-sizing: border-box !important;}
  .welcome .button{width: 100% !important; box-sizing: border-box !important; padding-left: 10px !important; padding-right: 10px !important;}

  /* Keep PIN list horizontal */
  .welcome ul.form-list.pin-list{display: flex !important; flex-direction: row !important; gap: 5px !important; justify-content: center !important;}
  .welcome ul.form-list.pin-list li{width: 50px !important; height: auto !important;}
}

@media(max-width: 414px) {
  .tab-list li a { width: 100px;font-size: 12px;}
  .locate li{padding: 0 5px; font-size: 10px;}

  /* Refund form - very small phones */
  .welcome .card.form2{width: 98% !important;}
  .welcome .card.form2 .data{padding: 12px !important; width: 100% !important;}
  .welcome .card.form2 .heading h2{font-size: 1.2rem !important; margin-bottom: 8px;}
  .welcome .card.form2 .heading p.e{font-size: 11px;}
  .welcome .card.form2 .card-logo{width: 60px !important; margin-top: -60px !important;}
  .welcome .card.form2 ul.form-list li label{font-size: 11px;}
  .welcome .card.form2 input[type='text'], .welcome .card.form2 input[type='email']{font-size: 12px !important; padding: 8px !important; height: 40px !important;}
  .welcome .card.form2 .submit-refund{font-size: 13px !important; height: 42px !important; line-height: 42px !important; letter-spacing: 2px;}
  .mxdialog.success-popup h2{font-size: 1.5rem;}
  .mxdialog.success-popup div.content{font-size: 12px;}
}