@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
body {
  font-family: 'Karla', sans-serif;
  background-color: #f2f3f8; }
  
.navbar{
	background:#f7f7f7;
	border-bottom:2px solid rgba(0,0,0,0.1);
}
.nav-link{
	text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    transition: 0.3s ease;
}
.web-logo{
	max-height:50px;
}
.hero {
    background: url(../img/hero-bg.jpg);
    background-size: cover;
    background-position: center center;
    padding: 20px 0;
    min-height: calc(100vh - 150px);
}
.hero-column{
	min-height:80vh;
}
.hero-content{
	background:#fff;
	border-radius: 15px;
    box-shadow: 0 0 25px 5px rgba(0,0,0,0.1);
	padding: 50px 20px;
}
.booking-options{
	min-height: 150px;
    margin-bottom: 40px;
    border-radius: 15px;
    box-shadow: 0 0 25px 5px rgba(0,0,0,0.1);
    padding: 30px 10px;
}
.booking-options:last-child{
	margin-bottom:0;
}
.booking-options h4{
	font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 30px;
}
.ribbon-block{
	position:relative;
}
.ribbon {
	position: absolute;
    right: -15px;
    top: -34px;
    z-index: 1;
    overflow: hidden;
    width: 155px;
    height: 155px;
    text-align: right;
}
.ribbon span {
    font-size: 0.8rem;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    line-height: 32px;
    transform: rotate(45deg);
    width: 165px;
    display: block;
    background: #79a70a;
    background: linear-gradient(#9bc90d 0%, #79a70a 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 31px;
    right: -34px;
}

.ribbon span::before {
   content: '';
   position: absolute; 
   left: 0px; top: 100%;
   z-index: -1;
   border-left: 3px solid #79A70A;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}
.ribbon span::after {
   content: '';
   position: absolute; 
   right: 0%; top: 100%;
   z-index: -1;
   border-right: 3px solid #79A70A;
   border-left: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-top: 3px solid #79A70A;
}

.red span {
  background: linear-gradient(#f70505 0%, #8f0808 100%);
}
.red span::before {
  border-left-color: #8f0808;
  border-top-color: #8f0808;
}
.red span::after {
  border-right-color: #8f0808;
  border-top-color: #8f0808;
}
.footer{
	padding:5px 10px;
}

.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 50px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 50px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
  font-size:32px;
  color: #aaa;
}
.step-name{
	text-transform: uppercase;
    font-size: 18px;
	text-align: center;
}
.stepper-item.active {
  font-weight: bold;
}
.stepper-item.active .step-counter {
	color: #fff;
	background:#007bff;
}
.stepper-item.completed .step-counter {
  background-color: #acd4ff;
  color: #333;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #acd4ff;
  width: 100%;
  top: 50px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}
.hsrp-form{
	background:#fff;
	border-radius: 15px;
    box-shadow: 0 0 25px 5px rgba(0,0,0,0.1);
	padding: 50px 50px;
}
.form-group label{
	margin-bottom:10px;
	font-weight:700;
}
.form-control, .form-select{
    padding: 15px;
    min-height: 50px;
    max-width: 550px;
    border-radius: 4px;
    border: solid 1px #ddd;
	margin-bottom:00px;
	min-width: 100%;
}
.captcha{
	background:url('../img/captcha-bg.png');
	background-size:cover;
	background-position:center center;
    font-size: 28px;
    padding: 6px 15px !important;
}
.captcha::placeholder{
	color:#0d6efd !important;
	font-weight:700;
}
.captcha-refresh{
	font-weight:700;
	margin-top: 5px;
    border: 1px solid #ebebeb;
}
.form-btn{
	font-size: 22px;
    padding: 10px;
}
.phone{
	max-width:60% !important;
	min-width:60% !important;
	display:inline-block;
}
.sendotp{
	width: 39% !important;
    display: inline-block;
    padding: 14px 0;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    border: 1px solid #ddd;
    background: #ebebeb;
}
.hsrp-form .delivery-option.form-check-input[type=radio] {
    border-radius: 50%;
    height: 35px;
    width: 35px;
    margin-bottom: 10px;
}
.order-disp{
	background:#fff;
	border-radius: 15px;
    box-shadow: 0 0 25px 5px rgba(0,0,0,0.1);
	padding: 5px 5px 5px 5px;
}
.order-title{
	text-align: center;
    text-transform: uppercase;
    color: #fff;
    background: #000;
    margin-bottom: 30px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 20px;
}
.card-title {
    padding: 20px 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: #012970;
    font-family: "Poppins", sans-serif;
}
.img-title-btn{
	padding: 20px;
    border: 1px solid #ebebeb;
}
.delete-img-btn{
    top: 45px;
    left: 5px;
	position: relative;
	z-index: 9;
}

.filepond--root .filepond--drop-label {
    min-height: 288px !important;
    height: 288px !important;
    background: #ebebeb;
}
.filepond--credits{
	display:none !important;
}
.image-upload-preview{
	height:390px;
	border:2px solid #ebebeb;
	padding:20px;
}
.filepond--drop-label.filepond--drop-label label {
    display: block;
    margin: 0;
    padding: 0.5em;
    font-size: 20px;
    text-transform: uppercase;
	cursor:pointer;
}
.filepond--drop-label i{
	font-size:70px !important;
	color: #ccc;
}