body {
  background: #ffffff;
  margin: 0;
  padding: 0;
  font-family: "Readex Pro", sans-serif;
  font-weight: 400;
  font-size:14px;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: "Readex Pro", sans-serif;
/*  font-weight: 700 !important;*/
  /*margin-bottom: 1.5vw;*/
  margin-bottom: 1em;
}
.templates p {
  font-size: 14px;
}
.line {
  display: flex;
  align-items: center;
  gap: 20px;
}
#contactform_error {
  display: block;
  margin: 15px 0;
  color: red;
}
#customform_error{
    display: block;
  margin: 15px 0;
  color: red;
}
.line:before,
.line:after {
  content: "";
  height: 1px;
  background: #cccccc;
  flex: 1 1;
}
.hero-banner {
  position: relative;
  width: 100%;
  background: #130665;
  background: -moz-linear-gradient(-45deg, #130665 0%, #36166d 100%);
  background: -webkit-linear-gradient(-45deg, #130665 0%, #36166d 100%);
  background: linear-gradient(-45deg, #130665 0%, #36166d 100%);
  isolation: isolate;
}
.hero-banner:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(template-bg.jpg) no-repeat;
  background-size: 100%;
  mix-blend-mode: color-burn;
  z-index: -1;
}
.logo {
  max-width: clamp(80px, 11vw, 160px);
  width: 100%;
  margin-bottom: clamp(10px, 1.5vw, 30px);
}
#preloader {
  background: #ffffff url(loading.gif) no-repeat center center;
  background-size: 5%;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
}
.img-box {
  position: relative;
  font-weight:400;
  padding: clamp(10px, 2vw, 30px);
  color: #ffffff;
  text-align: center;
}
.img-box a {
  color: #ffffff;
  text-decoration: none;
  display: block;
}
.img-box a > img {
  aspect-ratio: 3/4;
  height: 240px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  margin-top: 10px;
  border-radius: clamp(10px, 3vw, 20px);
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.img-box:hover img {
  margin-top: 0px;
}
.img-box:before {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0 0 100px 0;
  background: linear-gradient(to top left, #f8acff 0%, #696eff 154%);
  transform: translate3d(0px, 0px, 0);
  filter: blur(0px);
  transition: opacity 0.3s;
  border-radius: clamp(10px, 3vw, 20px);
}
/* 
  * Prevents issues when the parent creates a 
  * stacking context. (For example, using the transform
  * property )
  */
.img-box::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
}

.button-box {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: end;
  height: 76px;
  gap: 10px;
}

.modal {
  background: rgb(12 0 87 / 80%);
}
.modal-dialog {
  max-width: 700px;
}
.fancybox-content {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}
.modal-content {
  border-radius: 30px;
  text-align: center;
  background: url("template-bg.jpg") no-repeat;
  background-size: 100%;
}
.f-modal .modal-content img {
  aspect-ratio: 3/4;
  height: 230px;
  width: 100%;
  max-width: 180px;
  object-fit: cover;
  object-position: top;
  border-radius: clamp(10px, 3vw, 20px);
  box-shadow: 0 0 16px rgb(0 0 0 / 15%);
  margin-bottom: 20px;
}
.modal-body {
  padding: 4vw;
}

.custom-img {
  max-width: 200px;
  position: relative;
  isolation: isolate;
  padding-left: 30px;
  padding-top: 30px;
}
.custom-img img {
  aspect-ratio: 3/4;
  height: 230px;
  width: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: clamp(10px, 3vw, 20px);
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
}
.custom-img:before {
  content: "";
  position: absolute;
  inset: 0 clamp(10px, 3vw, 20px) clamp(10px, 3vw, 20px) 0;
  background: linear-gradient(to top left, #f8acff 0%, #696eff 154%);
  border-radius: clamp(10px, 3vw, 20px);
  z-index: -1;
  opacity: 0.5;
}
.btn-close {
  position: absolute;
  right: 15px;
  top: 20px;
  background-size: 40%;
  border: 1px solid #7f7f7f;
  border-radius: 100%;
  padding: 8px;
  z-index: 1;
}
#contactform_success1 {
  display: grid;
  place-content: center;
  padding-top: 40px;
}
#customform_success1 {
  display: grid;
  place-content: center;
  padding-top: 40px;
}
#okButton {
  margin: 21px auto;
}
.btn {
  min-width: 120px;
  border-radius: 100px;
  padding: 10px;
	font-size:14px;
}
.btn-success {
  background: #41c445;
  border-color: #41c445;
  box-shadow: 0 10px 15px rgb(65 197 70 / 50%);
}
.btn-success:hover {
  background: #28ad2c;
  border-color: #28ad2c;
}
.btn-primary {
  background: #4825db;
  border-color: #4825db;
  box-shadow: 0 10px 15px rgb(72 37 219 / 50%);
}
.btn-primary:hover {
  background: #3f20c1;
  border-color: #3f20c1;
}
.btn-danger {
  background: #ef3441;
  border-color: #ef3441;
  box-shadow: 0 10px 15px rgb(239 52 65 / 50%);
}
.btn-danger:hover {
  background: #e02c38;
  border-color: #e02c38;
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  text-transform: capitalize;
}

.text-danger {
  color: #ef3441 !important;
}
.text-success {
  color: #52c453 !important;
}
.text-anim {
  color: #696eff;
  -webkit-animation: changeColor 80s ease-in infinite;
  animation: changeColor 5s ease-in infinite;
}
@-webkit-keyframes changeColor {
  0% {
    color: #696eff;
  }
  50% {
    color: #f8acff;
  }
  100% {
    color: #696eff;
  }
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  border: 1px solid #000000;
  -webkit-text-fill-color: #000000;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3rem + 2px);
}
.form-floating > label {
  padding: 1rem 0.75rem;
}
.form-floating > .form-select {
  padding-top: 1rem;
  padding-bottom: 0;
}
.form-control:focus {
  outline: none;
  box-shadow: none;
}
.form-floating > label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card {
  border-radius: clamp(20px, 3vw, 40px);
  border: 0;
}
.card p{margin-bottom:0;}
.card .card-body {
  padding: 5vw;
}

.pattern {
  --s: 60px; /* control the size */
  --c: #ede9f1;
  --_g: conic-gradient(var(--c) 25%, #0000 0) 0 0;
  background: var(--_g) / calc(2 * var(--s)) calc(var(--s) / 9.5),
    var(--_g) / calc(var(--s) / 9.5) calc(2 * var(--s)),
    repeating-conic-gradient(#0000 0 25%, var(--c) 0 50%) var(--s) 0 /
      calc(2 * var(--s)) calc(2 * var(--s)),
    radial-gradient(50% 50%, #e0dae7 98%, var(--c)) 0 0 / var(--s) var(--s);
}

.thankyou-box {
  max-width: 600px;
  width: 100%;
  position: absolute;
  margin: -50px auto;
  left: 0;
  right: 0;
  background: url(template-bg.jpg) no-repeat;
  background-size: cover;
  display: none;
}
.accordion-button{padding:0;}
.accordion-button::after {display:none;}
.accordion-button { display: block;}

.qr-box{position: absolute; right: 5vw; top: 5vw; text-align:center; font-size:clamp(12px, 2vw, 18px);}
.qr-box img{width: clamp(6em, 2vw, 8em);}
.qr-box h4,.qr-box .h4{margin-block:10px; font-size: 1.5em;}
.qr-box .info-box{margin-block: 10px; position: relative;}
.qr-box .info-box a{text-decoration: none; color: #ffffff; font-size: 1em; display: block; margin: 10px;  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;}
.qr-box .info-box a i{border: 1px solid #fff; border-radius: 50%; padding: 4px; font-size: 1em; vertical-align: bottom; margin-right: 5px;  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;}
.qr-box .info-box a:hover{color: #ee3441;}
.qr-box .info-box a:hover i{background-color: #ee3441; border-color: #ee3441; color:#ffffff;}

.home-package .card hr{opacity:1; width:100%; height:2px;}

.list{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}
.list li {
    
    display: flex;
    column-gap: 10px;
    justify-content: center;
	 margin-bottom:10px;
 /*   font-weight: 700; */
}
.list li:before{
    font-family: 'Line Awesome Free';
    display: flex;
    content: '\f00c';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.list h6{font-weight:700;margin-bottom: 0; font-size: 14px;}

.blackcheck{column-count:1; column-gap:10px;}
.blackcheck li:before{color:#000;}
.faqbox .accordion-button{padding:1rem;}
.faqbox .accordion-flush .accordion-item .accordion-button {
    border-radius: 0;
    background: none;
    color: #e8c8ff;
    padding-inline: 0;
	font-size:14px;
}
.faqbox .accordion-item {
    background:none!important;
    border:0;
    color: #fff;
}
.faqbox .accordion-body {
    padding: 1rem 0;
    font-size: 14px!important;
}
.faqbox .accordion-button{box-shadow:none; border-bottom:1px solid;}
.clientslider img{margin:20px auto; max-width: 100px; border-radius: 100px;}
.clientslider h6{font-weight:700;}

.clientslider .slick-arrow{position: absolute; top: 50%; transform: translate(0, -50%); font-size:20px; border:0;background:rgba(211, 211, 211, .4); cursor: pointer; padding:10px; border-radius:100%; z-index:9; color:#fff;}
.clientslider .las.la-arrow-left, .clientslider .las.la-arrow-right{align-items: center; display: flex; justify-content:center; color: #2a53e9; background:#d8d4e9;}
.clientslider .slick-slide{position: relative;}
.clientslider .las.la-arrow-left{left:-50px;}
.clientslider .las.la-arrow-right{right:-50px;}


.package150 {
            display: none; /* Initially hidden */
            border: 1px solid #ccc;
            padding: 15px;
            margin-top: 10px;
            background-color: #f9f9f9;
        }




@media (max-width: 991.98px) {
  #preloader {
    background-size: 15%;
  }
  .ls{
	display: none;
  }

 
}
@media (max-width: 768px) {
    .qr-box{position:static;}
    .qr-box img{position: absolute; right: 5vw; top: 5vw;}
    .qr-box .info-box a{display: inline-block; margin: 5px;}
}
  @media (max-width: 575px) {
	.ls{display: none;}
  }