/* Root style START */
:root {
	--cus_Orange: #eb4d2b;
	--cus_Blue: #36b7bb;
	--cus_Light_Grey: #eaeaea;
	--cus_Black_text: #4d494b;
	--cus_White: #ffffff;
	--font-family: "Montserrat", serif;

	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-semi-bold: 500;
	--font-weight-bold: 600;

}

.cus_Orange {
	color: var(--cus_Orange) !important;
}

.cus_Blue {
	color: var(--cus_Blue) !important;
}

.cus_Light_Grey {
	color: var(--cus_Light_Grey) !important;
}

.cus_Black_text {
	color: var(--cus_Black_text) !important;
}

.cus_bg_Orange {
	background-color: var(--cus_Orange) !important;
}

.cus_bg_Blue {
	background-color: var(--cus_Blue) !important;
}

.cus_bg_Light_Grey {
	background-color: var(--cus_Light_Grey) !important;
}

.cus_bg_Black_text {
	background-color: var(--cus_Black_text) !important;
}

/* Root style END */

/* Custom bootstrap classes START */

.c-bottom-10 {
	bottom: 10% !important
}


/* Placeholder and input text color changes */
::placeholder,
.find_form_input {
	color: #6c777d !important;
	font-weight: bold;
}

.required_dot:after {
	content: " *";
	color: red;
}

img.footer_brand {
	width: 80px;
	max-width: 80px;
	margin-right: 5px;
	margin-bottom: 10px;
}



/* Custom bootstrap classes END */

/* Banner style START */
.cus-app-banner-img-div img {
	width: 55%;
	height: auto;
	background-repeat: no-repeat;
}
.cus-app-banner-background .container-fluid {
	padding: 20px 20px 0;
}
.cus-app-banner-img-div {
	display: flex;
	justify-content: center;
}

@media only screen and (max-width: 991px) {
	.cus-app-banner-img-div img {
		content: url('../img/landing/oiyaa-mobile-brand.png');
	}
	.cus-app-banner-background .container-fluid {
		padding: 40px 10px;
	}
	.cus-app-banner-img-div {
		padding: 15px 0;
	}
	.cus-app-banner-img-div img {
		width: 35%;
		height: auto;
	}
}

@media only screen and (min-width: 50px) and (max-width: 425px) {
	.cus-app-banner-img-div img {
		width: 55%;
	}

}
/* Banner style END */

/* Form Error Message */
span.form_Error,
span.error,
label.error {
	color: white !important;
	font-size: 15px;
	font-weight: 500;
}

.red_form_Error {
	color: red !important;
}

.cus-error-r {
	color: #fe403e !important;
}


.li_price_list {
	right: 0px;
	top: 0;
	font-weight: 400;
	position: absolute;
}



fieldset,
label {
	margin: 0;
	padding: 0;
}

.swal2-icon.swal2-icon-show,
.swal2-icon-content {
	overflow: hidden;
}

/****** Style Star Rating Widget *****/
.rating {
	border: none;
	float: left;
}

.rating>input {
	display: none;
}

.rating>label:before {
	margin: 5px;
	font-size: 1.25em;
	font-family: FontAwesome;
	display: inline-block;
	content: "\f005";
}

.rating>.half:before {
	content: "\f089";
	position: absolute;
}

.rating>label {
	color: #ddd;
	float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
	color: #FFD700;
}

/* hover previous stars in list */

.rating>input:checked+label:hover,
/* hover current star when changing rating */
.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,
/* lighten current selection */
.rating>input:checked~label:hover~label {
	color: #FFED85;
}


[contentEditable="true"]:empty:not(:focus):before {
	content: attr(placeholder)
}


.cus_line_divider {
	font-size: larger;
	display: flex;
	align-items: center;
	color: white;
	font-weight: bolder;
	cursor: default;
	width: 40%;
}

.cus_line_divider::before,
.cus_line_divider::after {
	flex: 1;
	content: '';
	padding: 1px 0px;
	background-color: white;
	margin: 0px 5px;
}

.w-100-px {
	width: 100px;
}

.mouse-cursor-pointer {
	cursor: pointer;
}

.mouse-cursor-not-allowed {
	cursor: not-allowed;
}

button:disabled {
	cursor: not-allowed;
	pointer-events: all !important;
}

.overflow-X-hidden {
	overflow-x: hidden;
}

.overflow-Y-hidden {
	overflow-y: hidden;
}

.sticky-bottom {
	position: sticky;
	left: 0;
	bottom: 0;
}

.inline-li {
	display: inline;
}

.table-border-right {
	border-right: 1px solid black;
	border-right-width: 1px;
}

.txt-box-p {
	padding: 9px 10px !important;
}

.cart_btn_width {
	border-radius: 50% !important;
	border: none;
	height: 30px;
	width: 30px;
}

.save_btn_2 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.cms_container {
	max-width: 1500px;
	width: 100%;
	padding: 30px 150px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 2px solid #e5e9e9;
	background: #fff;
	box-shadow: 0 0 20px 1px #ebe5e4;
}

.rounded-image {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	object-fit: cover;
	margin: 5px;
}

.visit-rounded-image {
	max-width: 100%;
	height: 100px;
	object-fit: cover;
	margin: 5px;
}

/* Use flexbox to align the images horizontally and allow wrapping */
.image-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
}

/* Add a wrapper for each image to control spacing */
.image-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Style for the text below the image */
.image-text {
	margin-top: 5px;
}

.visit_cart_box {
	border: 2px solid #c1baba;
	padding: 10px 15px;
	border-radius: 20px;
	margin: 10px 0px;
}

.visit_border-bottom {
	border-bottom: 1px solid #d9d4d4;
	/* 1px solid black border at the bottom */
	width: 50%;
	/* Adjust the width as needed */
	margin: 0 auto;
	/* Center the element horizontally */
}

.bg_dark {
	background: black;
}

.solid_border {
	border: 2px solid #d9d4d4;
}



.gift_container {
	width: 80%;
	padding: 10px 30px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 2px solid #e5e9e9;
	background: #fff;
	box-shadow: 0 0 20px 1px #ebe5e4;
	position: relative;
	border-radius: 5%;
}

.gift_txt_box {
	border-radius: 30px;
	font-weight: bold;
}

/* Left-align the label */
.gift_container label {
	text-align: left;
	width: 100%;
	/* To make it take up the full width */
	display: block;
	/* Ensures it's on a new line */
	margin-bottom: 10px;
	/* Adjust this for spacing */
	font-weight: bold;
}

.gift_container_col {
	width: 65%;
	padding: 50px 0px;
}

.gift_label {
	font-size: medium;
	font-weight: 600;
	padding: 0px 10px;
}

.gift-col-box {
	padding-bottom: 15px;
}

.delete_container {
	width: 50%;
	padding: 4.5rem 30px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 2px solid #e5e9e9;
	background: #fff;
	box-shadow: 0 0 20px 1px #ebe5e4;
	position: relative;
	border-radius: 5%;
}

.input_Invalid {
	background-color: rgb(241, 193, 203) !important;
}

.input_Valid {
	background-color: white !important;
}


.coupon_div {
	align-items: center;
	padding: 10px 10px 10px 35px;
	border: 2px dashed #5d8f73;
}


.coupon_p {
	margin: 0px !important;
	font-size: medium;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
}

.coupon_span_right {
	float: right;
	color: red;
	font-size: small;
}

.coupon_span_left {
	float: left;
	color: green;
}


.Gift_bal_contain {
	padding: 15px 10px 15px 10px;
}

.giftCard-bal-Box {
    padding: 10px 30px;
    height: 285px;
    min-height: 285px;
    margin-top: 20px;
    margin-bottom: 5px;
    border: 2px solid #e5e9e9;
    background: #fff;
    box-shadow: 0 0 20px 1px #ebe5e4;
    position: relative;
    border-radius: 5%;
}

.giftCard-bal-Coupon {
	padding: 10px 10px 10px 35px;
	border: 2px dashed #683434;
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 15px 0px;
	opacity: 1;
	border-radius: 10%;
	font-size: x-large;
}

.giftCard-bal-price {
	margin: 15px 0px;
	opacity: 1;
}

.giftCard-bal-price-text {
	font-weight: bold;
    font-size: large;
    color: #4a0404;
	word-wrap: break-word;
}

.giftCard-bal-price-head {
	font-weight: bold;
	font-size: larger;
	margin: 0;
}

.subscription-bal-Box {
	padding: 10px 30px;
	min-height: 210px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 2px solid #e5e9e9;
	background: #fff;
	box-shadow: 0 0 20px 1px #ebe5e4;
	position: relative;
	border-radius: 5%;
}

.subscription-bal-Coupon {
	padding: 10px 10px 10px 35px;
	border: 2px dashed #683434;
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: 15px 0px;
	opacity: 1;
	border-radius: 10%;
	font-size: x-large;
}


.subscription-bal-price-text {
	font-weight: normal;
	color: #4a0404;
	float: right;
	font-size: medium;
}

.subscription-bal-price-head {
	font-weight: bold;
	font-size: medium;
	margin: 0;
}

.subscription-container {
	width: 70%;
}

/* Subscription model design start */

.sub-background {
	padding: 0 25px 25px;
	position: relative;
	width: 100%;
	box-sizing: inherit;
	box-sizing: border-box;
	border-radius: 50px;
}

.sub-container {
	margin: 0 auto;
	padding: 50px 0 0;
	max-width: 1960px;
	width: 100%;
}

.sub-panel {
	background-color: #fff;
	border-radius: 10px;
	padding: 15px 25px;
	position: relative;
	width: 100%;
	z-index: 10;
}

.sub-pricing-table {
	display: flex;
	flex-direction: column;
}

.sub-pricing-table * {
	text-align: center;
	text-transform: uppercase;
}

.sub-pricing-plan {
	border: 2px solid #e1f1ff;
	border-right: 2px solid #e1f1ff;
	box-shadow: 12px -10px 13px -6px rgba(0, 0, 0, 0.08), 15px 4px 10px 3px rgba(0, 0, 0, 0.09), 20px 13px 20px 7px rgba(0, 0, 0, 0.02);
	padding: 25px;
}


.sub-pricing-img {
	margin-bottom: 25px;
	max-width: 100%;
}

.sub-pricing-header {
	color: #888;
	font-weight: 600;
	letter-spacing: 1px;
}

p.sub-pricing-subheader {
	color: #888;
	font-weight: 600;
	letter-spacing: 1px;
}

.sub-pricing-features {
	color: #33b6bc;
	font-weight: 600;
	letter-spacing: 1px;
	margin: 50px 0 25px;
}

.sub-pricing-features-item {
	border-top: 1px solid #33b6bc;
	font-size: 12px;
	line-height: 1.5;
	padding: 15px 0;
}

.sub-pricing-features-item:last-child {
	border-bottom: 1px solid #e1f1ff;
}

.sub-pricing-price {
	color: #33b6bc;
	display: block;
	font-size: 32px;
	font-weight: 700;
}

.sub-pricing-button {
	border: 1px solid #9dd1ff;
	border-radius: 10px;
	color: #348EFE;
	display: inline-block;
	margin: 25px 0;
	padding: 15px 35px;
	text-decoration: none;
	transition: all 150ms ease-in-out;
}

.sub-pricing-button:hover,
.sub-pricing-button:focus {
	background-color: #e1f1ff;
}

.sub-pricing-button.is-featured {
	background-color: #48aaff;
	color: #fff;
}

.sub-pricing-button.is-featured:hover,
.sub-pricing-button.is-featured:active {
	background-color: #269aff;
}

.sub-pricing-plan:first-child {
	border-left: 0.2px solid #e1f1ff;
}

.cus_cartInfo {
    display: flex;
    flex-direction: column;
    padding: 5px 0px;
}

.cus_cartInfo span.cus_round {
    background-color: white;
    border-radius: 100px;
    display: flex;
    max-width: 35px;
    max-height: 35px;
    min-width: 35px;
    min-height: 35px;
    font-size: medium;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
    color: black;
}

.cus_cartInfo span.cus_span {
    background-color: #dbdbdb;
	padding: 10px 10px 10px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: small;
    margin: 5px 0px;
    width: 300px;
    display: flex;
    align-items: center;
    color: black;
}

.cus_cartInfo span.cus_span.btn_red {
    background-color: #ff4040;
	color: white;
}

.cus-hNav-dropdown {
	position: relative;
	display: inline-block;
}
.cus-hNav-dropdown-content ul {
	padding: 0px 1rem;
}
.cus-hNav-dropdown-content ul li {
	padding: 4px;
}
.cus-hNav-dropdown-content ul a:hover {
	font-weight: bold !important;
	color: black;
	font-size: 15px !important;
}
.cus-hNav-dropdown-content ul a {
	padding: 0px 5px !important;
	background: unset;
	text-decoration: none;
	color: rgba(0, 0, 0, .55);
	font-weight: 700 !important;
	font-size: 14px !important;
}
.cus-hNav-dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	padding: unset;
	border-radius: 10px;
	z-index: 1;
}

/* Show dropdown on hover for larger screens */
@media (min-width: 1200px) {
	.cus-hNav-dropdown:hover .cus-hNav-dropdown-content {
	  display: block;
	  position: fixed;
	}
  }
  
  /* Show dropdown on click for smaller screens */
  @media (max-width: 1199px) {
	.cus-hNav-dropdown.active .cus-hNav-dropdown-content {
	  display: block;
	  position: fixed;
	}
  }



@media (min-width: 900px) {

	.sub-pricing-table {
		flex-direction: row;
	}

	.sub-pricing-plan {
		flex-basis: 100%;
		padding: 25px 50px;
	}

}

@media (max-width: 767.98px) {

	.sub-pricing-table {
		display: flex;
		flex-direction: column;
	}

	.sub-pricing-plan:first-child {
		border-left: 2px solid #e1f1ff;
	}

	.sub-background {
		padding: 0px;
		border-radius: 0px;
	}

	.sub-container {
		padding: 0px;
	}

	.sub-panel {
		border-radius: 0px;
		padding: 0px;
	}
}


/* Subscription model design end */

@media (min-width: 767px) and (max-width: 1050px)  {
    .cus-col-md-10 {
        width: 100%;
        padding: 5px 5px;
    }
}

@media (min-width: 767px) and (max-width: 960px)  {
    .cus-col-md-9 {
        width: 100%;
        padding: 5px 5px;
    }
}


@media only screen and (min-width: 150px) and (max-width: 1199px) {
	.cus-nav-sub-li{
		margin-bottom: 10px;
		display: flex;
	}
}

@media only screen and (min-width: 200px) and (max-width: 1199px) {
    .nav-mobile-collapse {
        background-color: white;
        position: relative;
        top: 10%;
        right: 0;
        z-index: 1000;
        width: 100%;
        padding: 13px 13px;
    }
}


.call-back-container {
	width: 80%;
	padding: 10px 30px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 2px solid #e5e9e9;
	background: #fff;
	box-shadow: 0 0 20px 1px #ebe5e4;
	position: relative;
	border-radius: 5%;
}

.sub-call-back-container {
	width: 65%;
	padding: 10px 0px 20px 0px;
}

@media (min-width: 761px) and (max-width: 996px) {
	.call-back-container {
		width: 100% !important;
		padding: 10px 10px !important;
	}

	.sub-call-back-container {
		width: 80%;
	}
}

@media (min-width: 150px) and (max-width: 760px) {
	.call-back-container {
		width: 100% !important;
		padding: 10px 10px !important;
	}

	.sub-call-back-container {
		width: 100%;
	}
}

.cus-hr-separator {
	display: flex;
	align-items: center;
	text-align: center;
  }
  
  .cus-hr-separator::before,
  .cus-hr-separator::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #000;
  }
  
  .cus-hr-separator:not(:empty)::before {
	margin-right: .25em;
  }
  
  .cus-hr-separator:not(:empty)::after {
	margin-left: .25em;
  }



/* Animations and  designs */

@keyframes animationFramesTwo {
	0% {
		transform: translate(0px, 0px) rotate(0deg) scale(1);
	}

	20% {
		transform: translate(73px, -1px) rotate(36deg) scale(0.9);
	}

	40% {
		transform: translate(141px, 72px) rotate(72deg) scale(1);
	}

	60% {
		transform: translate(83px, 122px) rotate(108deg) scale(1.2);
	}

	80% {
		transform: translate(-40px, 72px) rotate(144deg) scale(1.1);
	}

	100% {
		transform: translate(0px, 0px) rotate(0deg) scale(1);
	}
}

@keyframes animationFramesZoomIN {
	0% {
		transform: translate(0px, 0px) rotate(0deg) scale(1);
		opacity: 2.5;
	}

	20% {
		transform: translate(73px, -1px) rotate(36deg) scale(0.9);
		opacity: 2;
	}

	40% {
		transform: translate(141px, 72px) rotate(72deg) scale(1);
		opacity: 1.5;
	}

	60% {
		transform: translate(83px, 122px) rotate(108deg) scale(1.2);
		opacity: 1;
	}

	80% {
		transform: translate(-40px, 72px) rotate(144deg) scale(1.1);
		opacity: 0.5;
	}

	100% {
		transform: translate(0px, 0px) rotate(0deg) scale(1);
		opacity: 0;
	}
}

@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	50% {
		opacity: 1;
	}
}

.card-design-top-left::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	/* Adjust the width as needed */
	height: 100px;
	/* Adjust the height as needed */
	background: url('../img/shape/bg-wave2.png') no-repeat;
	background-size: cover;
	transform: rotate(90deg);
}

.card-design-top-right::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	/* Adjust the width as needed */
	height: 100px;
	/* Adjust the height as needed */
	background: url('../img/shape/bg-wave2r.png') no-repeat;
	background-size: cover;
	transform: rotate(270deg);
}

.card-design-bottom-left::before {
	content: '';
	position: absolute;
	width: 100px;
	/* Adjust the width as needed */
	height: 100px;
	/* Adjust the height as needed */
	background: url('../img/shape/bg-wave2.png') no-repeat;
	background-size: cover;
	transform: rotate(360deg);
	bottom: 0;
	left: 0;
}

.card-design-bottom-right::before {
	content: '';
	position: absolute;
	width: 100px;
	/* Adjust the width as needed */
	height: 100px;
	/* Adjust the height as needed */
	background: url('../img/shape/bg-wave2r.png') no-repeat;
	background-size: cover;
	transform: rotate(0deg);
	bottom: 0;
	right: 0;
}

.coupon-top-right::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	/* Adjust the width as needed */
	height: 100px;
	/* Adjust the height as needed */
	background: url('../img/shape/bg-wave2r.png') no-repeat;
	background-size: cover;
	transform: rotate(270deg);
}

.top-right-Mov-anime-shape1 {
	position: absolute;
	right: 50px;
	top: 20px;
	animation: animationFramesTwo 30s alternate infinite linear;
	width: 100px;
	height: 100px;
	background: url('../img/shape/shape1.png') no-repeat;
	background-size: cover;
}

.bottom-left-ZoomIN-anime-shape1 {
	position: absolute;
	left: 80px;
	bottom: 0px;
	animation: zoomIn 5s alternate infinite linear;
	width: 100px;
	height: 100px;
	background: url('../img/shape/shape1.png') no-repeat;
	background-size: cover;
}

.top-left-Mov-anime-shape10 {
	position: absolute;
	left: 50px;
	top: 20px;
	animation: animationFramesTwo 30s alternate infinite linear;
	width: 100px;
	height: 100px;
	background: url('../img/shape/shape10.png') no-repeat;
}

.top-left-Mov-anime-shape2 {
	position: absolute;
	left: 20px;
	top: 20px;
	animation: animationFramesZoomIN 50s alternate infinite linear;
	width: 100px;
	height: 100px;
	background: url('../img/shape/shape2.png') no-repeat;
}
