/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Scrolling Ticker css
06. About Us css
07. Our Products css
08. Why Choose Us css 
09. We Offer css
10. Our Benefits css
11. Intro Video css
12. Premium Ingredient css
13. Sale Now css
14. Our Testimonials css
15. Our FAQs css
16. Our Blog css
17. Footer css
18. About Us Page css
19. Blog Archive css
20. Blog Single css
21. Features Page css
22. Testimonials Page css
23. FAQs Page css
24. Contact Us Page css
25. 404 Error Page css
26. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

/* #681500
#f05124
#f7911e
#f58220
#ffffff */
:root {
	/* --primary-color: #206746;
	--secondary-color: #F4F9F0; */
	--primary-color: #681500;
	--secondary-color: #f05124;
	--tertiary-color: #f7911e;
	--quaternary-color: #f58220;
	--text-color: #000000;
	--bg-color: #FFFFFF;
	/* --accent-color: #9BCE71;
	--accent-secondary-color: #83B757; */
	--accent-color: #681500;
	--accent-secondary-color: #f05124;
	--white-color: #FFFFFF;
	--divider-color: #2067461A;
	--dark-divider-color: #FFFFFF1A;
	--error-color: rgb(230, 87, 87);
	--default-font: "Mona Sans", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body {
	position: relative;
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1em;
	color: var(--text-color);
	background: var(--bg-color);
}

::-webkit-scrollbar-track {
	background-color: var(--secondary-color);
	border-left: 1px solid var(--secondary-color);
}

::-webkit-scrollbar {
	width: 7px;
	background-color: var(--secondary-color);
}

::-webkit-scrollbar-thumb {
	background: var(--accent-color);
}

::selection {
	color: var(--primary-color);
	background-color: var(--secondary-color);
	filter: invert(1);
}

p {
	line-height: 1.6em;
	margin-bottom: 1.57em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 600;
	line-height: 1.2em;
	color: var(--primary-color);
}

figure {
	margin: 0;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	outline: 0;
}

a:focus {
	text-decoration: none;
	outline: 0;
}

html,
body {
	width: 100%;
	overflow-x: clip;
}

.container {
	/* max-width: 1300px; */
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
	z-index: 1;
}

.image-anime {
	position: relative;
	overflow: hidden;
}

.image-anime:after {
	content: "";
	position: absolute;
	width: 250%;
	height: 0%;
	left: 50%;
	top: 50%;
	background-color: rgba(255, 255, 255, .3);
	transform: translate(-50%, -50%) rotate(-45deg);
	z-index: 1;
}

.image-anime:hover:after {
	height: 250%;
	transition: all 600ms linear;
	background-color: transparent;
}

.reveal {
	position: relative;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	visibility: hidden;
	overflow: hidden;
}

.reveal img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-transform-origin: left;
	transform-origin: left;
}

.row {
	margin-right: -15px;
	margin-left: -15px;
}

.row>* {
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters {
	margin-right: 0px;
	margin-left: 0px;
}

.row.no-gutters>* {
	padding-right: 0px;
	padding-left: 0px;
}

.btn-default {
	position: relative;
	display: inline-block;
	border-radius: 10px;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--white-color);
	border: none;
	padding: 18px 50px 18px 20px;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
	z-index: 0;
}

input[type=submit].btn-default {
	background: var(--secondary-color);
}

input[type=submit].btn-default:disabled {
	opacity: 0.6;
}

.btn-default::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	height: 22px;
	width: 22px;
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transition: all 0.4s ease-in-out;
}

.btn-default::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -15%;
	right: 0;
	width: 0;
	height: 106%;
	background: var(--primary-color);
	transform: skew(30deg);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover:after {
	width: 100%;
	transform: skew(0deg);
	left: 0;
}

.btn-default.btn-highlighted:hover {
	color: var(--primary-color);
}

input.btn-default.btn-highlighted:hover {
	background: #fff;
}

.btn-default.btn-highlighted:hover:before {
	background-image: url('../images/arrow-primary.svg');
}

.btn-default.btn-highlighted::after {
	background: var(--white-color);
}

.readmore-btn {
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	text-transform: capitalize;
	color: var(--primary-color);
	padding-right: 28px;
	transition: all 0.3s ease-in-out;
}

.readmore-btn:hover {
	color: var(--accent-color);
}

.readmore-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 3px;
	transform: translateY(-50%);
	background: url('../images/arrow-primary.svg') no-repeat;
	background-position: right center;
	background-size: cover;
	width: 20px;
	height: 20px;
	transition: all 0.3s ease-in-out;
}

.readmore-btn:hover::before {
	right: 0;
}

.cb-cursor:before {
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
}

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading {
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container {
	margin: 40px auto;
}

.loading {
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading {
	transition: all 0.5s ease-in-out;
}

#loading-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.section-row {
	margin-bottom: 30px;
}

.section-row .section-title {
	margin-bottom: 0;
}

.section-title.section-title-center {
	width: 100%;
	max-width: 860px;
	text-align: center;
	margin: 0 auto;
}

.section-title {
	margin-bottom: 40px;
}

.section-title h3 {
	display: inline-block;
	position: relative;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3em;
	text-transform: capitalize;
	color: #ffffff;
	border: 1px solid var(--divider-color);
	background-color: var(--quaternary-color);
	background-image: url('../images/icon-sub-heading.svg');
	background-repeat: no-repeat;
	background-position: left 15px center;
	background-size: 18px auto;
	border-radius: 10px;
	padding: 8px 15px 8px 40px;
	margin-bottom: 10px;
}

.section-title h1 {
	font-size: 56px;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title h2 {
	font-size: 46px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 0;
	cursor: none;
}

.section-title p {
	margin-top: 20px;
	margin-bottom: 0;
}

.section-title-content p {
	margin: 0;
}

.section-btn {
	text-align: right;
}

.section-content-btn .section-btn {
	text-align: left;
	margin-top: 30px;
}

.dark-section {
	background-color: var(--primary-color);
}

.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title-content p,
.dark-section .section-title p {
	color: var(--white-color);
}

.dark-section .section-title h3 {
	background-color: var(--dark-divider-color);
	border-color: var(--dark-divider-color);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	color: var(--white-color);
}

.help-block.with-errors ul {
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li {
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/*** 	   03. Header css		  ***/
/************************************/

header.main-header {
	position: fixed;
	top: 0;
	width: 100%;
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
/* 	background: var(--primary); */
}

header.main-header .header-sticky {
	position: relative;
	top: 0;
	z-index: 100;
}

header.main-header .header-sticky.hide {
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	border-radius: 0;
}

header.main-header .header-sticky.active {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
	transform: translateY(0);
	background: var(--primary-color);
	border-bottom: 1px solid var(--dark-divider-color);
}

.navbar {
	padding: 20px 0;
	align-items: center;
	transition: 0.3s;
}

.navbar-brand {
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper {
	flex: 1;
	text-align: center;
	margin: 0 20px;
}

.main-menu .nav-menu-wrapper>ul {
	align-items: center;
	display: inline-flex;
}

.main-menu ul li {
	margin: 0 5px;
	position: relative;
}

.main-menu ul li a {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.1em;
	padding: 15px 10px !important;
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu>a:after {
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
	display: inline-block;
	transition: 0.3s;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus {
	color: var(--secondary-color);
}

.main-menu ul li:hover a:after {
	rotate: 180deg;
}

.main-menu ul li a:focus-visible {
	box-shadow: none;
}

.main-menu ul ul {
	visibility: hidden;
	opacity: 0;
	transform: scale(1, 0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 235px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu:first-child ul {
	width: 235px;
}

.main-menu ul ul ul {
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul li:hover>ul {
	visibility: visible;
	opacity: 1;
	transform: scale(1, 1);
	padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu>a:after {
	content: '\f105';
	float: right;
}

.main-menu ul ul li {
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a {
	color: var(--white-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus {
	color: var(--primary-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.main-menu ul li.highlighted-menu {
	display: none;
}

.responsive-menu,
.navbar-toggle {
	display: none;
}

.responsive-menu {
	top: 0;
	position: relative;
}

.slicknav_btn {
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 6px;
}

.slicknav_icon .slicknav_icon-bar {
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child {
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child {
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1) {
	transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2) {
	opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3) {
	transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu {
	position: absolute;
	width: 100%;
	padding: 0;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
}

.slicknav_menu ul {
	margin: 5px 0;
}

.slicknav_menu ul ul {
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a {
	position: relative;
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	padding: 8px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover {
	background-color: transparent;
	color: var(--primary-color);
}

.slicknav_menu ul ul li a {
	padding: 8px 20px 8px 30px;
}

.slicknav_arrow {
	font-size: 0 !important;
}

.slicknav_arrow:after {
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease-out;
}

.slicknav_open>a .slicknav_arrow:after {
	transform: translateY(-50%) rotate(-180deg);
/* 	color: var(--primary-color); */
}

/************************************/
/***        04. Hero css	      ***/
/************************************/

.hero {
	position: relative;
	background: var(--primary-color);
	padding: 245px 0 130px;
}

.hero .container {
	position: relative;
	z-index: 2;
}

.hero.hero-video .hero-bg-video::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(1deg, rgba(0, 0, 0, 0.00) 20.46%, #000 99.49%), linear-gradient(179deg, rgba(0, 0, 0, 0.00) 0.44%, #000 119.12%);
	width: 100%;
	height: 100%;
	z-index: 0;
}

.hero.hero-video .hero-bg-video {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.hero.hero-video .hero-bg-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout {
	background: none;
	padding: 0;
}

.hero.hero-slider-layout .hero-slide {
	position: relative;
	padding: 245px 0 130px;
}

.hero.hero-slider-layout .hero-slide::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(1deg, rgba(0, 0, 0, 0.00) 20.46%, #000 99.49%), linear-gradient(179deg, rgba(0, 0, 0, 0.00) 0.44%, #000 119.12%);
	width: 100%;
	height: 100%;
	z-index: 2;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.hero.hero-slider-layout .hero-slide .hero-slider-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero.hero-slider-layout .hero-pagination {
	position: absolute;
	bottom: 30px;
	text-align: center;
	z-index: 2;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: var(--dark-divider-color);
	opacity: 1;
	transition: all 0.3s ease-in-out;
	margin: 0 5px;
}

.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active {
	background-color: var(--accent-color);
}

.hero-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
}

.video-play-button {
	display: inline-flex;
	align-items: center;
}

.video-play-button p {
	font-weight: 700;
	text-transform: capitalize;
	color: var(--primary-color);
	margin: 0 0 0 15px;
}

.video-play-button a {
	position: relative;
	height: 50px;
	width: 50px;
	background: var(--white-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	transition: all 0.3s ease-in-out;
}

.video-play-button a:hover {
	background: var(--accent-color);
}

.video-play-button a i {
	font-size: 18px;
	color: var(--accent-color);
	margin-left: 2px;
	transition: all 0.3s ease-in-out;
}

.video-play-button a:hover i {
	color: var(--white-color);
}

.video-play-button p {
	color: var(--white-color);
	font-weight: 600;
}

.review-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 50px;
	margin-top: 50px;
}

.review-images {
	display: inline-flex;
	align-items: center;
}

.review-image {
	position: relative;
	display: inline-block;
	margin-left: -14px;
	z-index: 1;
}

.review-image:first-child {
	margin: 0;
}

.review-image figure {
	display: block;
	border: 1px solid var(--white-color);
	border-radius: 50%;
}

.review-image img {
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}

.review-image.add-more {
	width: 50px;
	height: 50px;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border: 1px solid var(--bg-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

.review-image.add-more:hover {
	background-position: right center;
}

.review-image.add-more i {
	font-size: 22px;
	color: var(--primary-color);
}

.satisfy-client-content {
	width: 68%;
}

.satisfy-client-content p {
	color: var(--white-color);
	margin: 0;
}

.hero-image img {
	width: 100%;
	aspect-ratio: 1 / 0.79;
	object-fit: cover;
}

/************************************/
/*** 	05. Scrolling Ticker css  ***/
/************************************/

.our-scrolling-ticker {
	background: var(--accent-color);
	padding: 18px 0;
}

.scrolling-ticker-box {
	--gap: 30px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content {
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 20s linear infinite;
}

.scrolling-content span {
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--white-color);
}

.scrolling-content span img {
	width: 20px;
	margin-right: 25px;
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}

/************************************/
/*** 	   06. About Us css 	  ***/
/************************************/

.about-us {
	padding: 100px 0;
}

.about-image-box {
	position: relative;
}

.about-image {
	margin-bottom: 20px;
}

.about-image figure {
	display: block;
	border-radius: 20px;
}

.about-image figure img {
	width: 100%;
	aspect-ratio: 1 / 0.578;
	object-fit: cover;
	border-radius: 20px;
	object-position: center right;
}

.contact-us-circle {
	position: absolute;
	top: calc(50% - 20px);
	left: 50%;
	transform: translate(-50%, 0%);
	z-index: 1;
}

.contact-us-circle a {
	display: block;
	/* border: 10px solid var(--secondary-color); */
	border-radius: 50%;
}

.contact-us-circle a img {
	width: 100%;
	max-width: 126px;
/* 	border-radius: 50%; */
/* 	animation: infiniterotate 20s infinite linear; */
}

@keyframes infiniterotate {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}

.contact-us-circle a:hover img {
	animation-play-state: paused;
}

.about-image-item-box {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.about-image-item,
.about-image-item-box .about-image {
	width: calc(50% - 10px);
}

.about-image-item {
	background: var(--secondary-color);
	border-radius: 20px;
	align-content: center;
	padding: 30px;
}

.about-image-item .icon-box {
	margin-bottom: 45px;
}

.about-image-item .icon-box img {
	width: 100%;
	max-width: 50px;
	filter: grayscale(1) brightness(100);
}

.about-image-item-content h2 {
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 15px;
	color: #ffffff;
}

.about-image-item-content h3 {
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
}

.about-image-item-box .about-image {
	margin-bottom: 0;
}

.about-image-item-box .about-image figure {
	height: 100%;
}

.about-image-item-box .about-image img {
	height: 100%;
	aspect-ratio: 1 / 0.79;
}

.about-us-content {
	margin-left: 15px;
}

.about-us-body {
	border-left: 2px solid var(--divider-color);
	padding-left: 40px;
}

.about-body-item {
	position: relative;
	margin-bottom: 30px;
}

.about-body-item:last-child {
	margin-bottom: 0;
}

.about-body-item:before {
	content: '';
	position: absolute;
	top: auto;
	left: -43px;
	bottom: -20px;
	width: 4px;
	height: 0;
	background: var(--primary-color);
	border-radius: 10px;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.about-body-item.active:before,
.about-body-item:hover:before {
	top: -20px;
	height: calc(100% + 35px);
}

.about-body-item:first-child.active:before,
.about-body-item:first-child:hover:before {
	top: 0;
}

.about-body-item:last-child:before {
	bottom: 0;
}

.about-body-item:first-child.active:before,
.about-body-item:first-child:hover:before,
.about-body-item:last-child.active:before,
.about-body-item:last-child:hover:before {
	height: calc(100% + 20px);
}

.about-body-item .icon-box {
	margin-bottom: 15px;
}

.about-body-item .icon-box img {
	width: 100%;
	max-width: 40px;
	transition: all 0.4s ease-in-out;
}

.about-body-item.active .icon-box img,
.about-body-item:hover .icon-box img {
	transform: rotateY(180deg);
}

.about-body-content h3 {
	font-size: 20px;
	line-height: 1.4em;
}

.about-body-content p {
	margin: 10px 0 0;
}

/************************************/
/*** 	 07. Our Products css 	  ***/
/************************************/

.our-products {
	background: var(--primary-color);
	padding: 60px 0;
}

.product-item {
	background: var(--white-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 16px;
}

.product-image {
	position: relative;
	text-align: center;
	margin-bottom: 20px;
}

.product-image figure {
	display: block;
}

.product-image figure img {
	width: 100%;
	border-radius: 8px;
	/* 	max-width: 242px; */
}

.product-cart-btn {
	position: absolute;
	top: 65%;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0 auto;
	transform: translateY(-50%);
	opacity: 0;
	transition: all 0.4s ease-in-out;
}

.product-item.active .product-cart-btn,
.product-item:hover .product-cart-btn {
	top: 50%;
	opacity: 1;
	z-index: 1;
}

.product-cart-btn a {
	font-size: 14px;
	font-weight: 600;
	color: var(--white-color);
	display: inline-flex;
	align-items: center;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 10px;
	padding: 12px 40px;
	transition: all 0.3s ease-in-out;
}

.product-cart-btn a:hover {
	/* color: var(--primary-color); */
	background-position: right center;
}

.product-cart-btn a img {
	max-width: 20px;
	margin-left: 10px;
}

.product-content p {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 5px;
}

.product-content h3 {
	font-size: 20px;
}

.product-content h3 a {
	color: inherit;
}

.product-rating {
	margin-top: 15px;
}

.product-rating i {
	margin-right: 1px;
	color: var(--primary-color);
}

.product-price {
	margin-top: 20px;
}

.product-price h3 {
	font-size: 22px;
}

.product-price h3 span {
	font-size: 18px;
	font-weight: 500;
	text-decoration: line-through;
	opacity: 30%;
}

.section-footer-text {
	margin-top: 30px;
	text-align: center;
}

.section-footer-text p {
	color: #ffffff;
	margin-bottom: 0;
}

.dark-section .section-footer-text p {
	color: var(--white-color);
}

.section-footer-text span {
	font-size: 14px;
	font-weight: 600;
	color: var(--white-color);
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	padding: 3px 10px;
	border-radius: 100px;
	margin-right: 10px;
	transition: all 0.3s ease-in-out;
}

.section-footer-text p:hover span {
	background-position: right center;
}

.section-footer-text p a {
	position: relative;
	font-weight: 600;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--quaternary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
	color: var(--accent-color);
}

.section-footer-text a::before {
	content: '';
	position: absolute;
	bottom: 1px;
	left: 0;
	right: 0;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	height: 1px;
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.section-footer-text p:hover span,
.section-footer-text a:hover,
.section-footer-text a:hover::before {
	background-position: right center;
}

/************************************/
/*** 	 08. Why Choose Us css 	  ***/
/************************************/

.why-choose-us {
	padding: 100px 0;
}

.why-choose-list {
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.why-choose-list ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.why-choose-list ul li {
	position: relative;
	width: calc(50% - 15px);
	color: var(--primary-color);
	line-height: 1.5em;
	padding-left: 30px;
}

.why-choose-list ul li::before {
	content: '\f14a';
	font-family: 'Font Awesome 6 Free';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 18px;
	font-weight: 900;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.why-choose-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.why-choose-experience {
	max-width: 220px;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 10px;
	text-align: center;
	transition: all 0.3s ease-in-out;
	padding: 40px;
}

.why-choose-experience:hover {
	background-position: right center;
}

.why-choose-experience h2 {
	font-size: 46px;
	color: var(--white-color);
}

.why-choose-experience p {
	color: var(--white-color);
	margin: 20px 0 0;
}

.why-choose-item-list {
	width: calc(100% - 260px);
	border-left: 1px solid var(--divider-color);
	margin-left: 40px;
	padding-left: 40px;
}

.why-choose-item {
	margin-bottom: 30px;
}

.why-choose-item:last-child {
	margin-bottom: 0;
}

.why-choose-item h3 {
	font-size: 20px;
}

.why-choose-item p {
	margin: 10px 0 0;
}

.why-choose-image {
	position: relative;
	margin-left: 10px;
	padding: 0 100px 70px 0;
}

.why-choose-img-1 figure,
.why-choose-img-2 figure {
	display: block;
	border-radius: 50%;
}

.why-choose-img-1 img,
.why-choose-img-2 img {
	width: 100%;
	border-radius: 50%;
}

.why-choose-img-2 {
	position: absolute;
	bottom: 0;
	right: 0;
}

.why-choose-img-2 figure img {
	max-width: 300px;
	border: 8px solid var(--white-color);
}

.why-choose-counter-list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
/* 	margin-top: 60px; */
	padding-top: 60px;
	padding-bottom: 60px;
}

.why-choose-counter-item {
	width: calc(25% - 22.5px);
	text-align: center;
}

.why-choose-counter-item h2 {
	font-size: 46px;
	font-weight: 700;
/* 	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%); */
	background: linear-gradient(270deg, #ffffff 0%, #efae9b 50%, #ffffff 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.4s ease-in-out;
}

.why-choose-counter-item:hover h2 {
	background-position: right center;
}

.why-choose-counter-item p {
	font-weight: 500;
/* 	color: var(--primary-color); */
	color: #ffffff;
	margin: 10px 0 0;
}

/************************************/
/*** 	   09. We Offer css 	  ***/
/************************************/

.we-offer {
	background-color: var(--secondary-color);
	padding: 100px 0;
}

.offer-item-list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 30px;
}

.offer-item {
	width: calc(25% - 22.5px);
	background: var(--white-color);
	text-align: center;
	border-radius: 20px;
	padding: 30px;
	margin-top: 90px;
}

.offer-item-image {
	max-width: 196px;
	margin: -120px auto 30px;
}

.offer-item-image figure {
	display: block;
	border-radius: 50%;
	overflow: hidden;
	border: 6px solid var(--quaternary-color);
}

.offer-item-image img {
	width: 100%;
	object-fit: cover;
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

.offer-item:hover .offer-item-image img {
	transform: scale(1.08);
}

.offer-item-content h3 {
	font-size: 20px;
}

.offer-item-content p {
	margin: 10px 0 0;
}

.offer-item-content .readmore-btn {
	margin-top: 20px;
}

/************************************/
/*** 	 10. Our Benefits css 	  ***/
/************************************/

.our-benefits {
	padding: 100px 0;
}

.benefit-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 50px;
}

.benefit-item:last-child {
	margin-bottom: 0;
}

.benefit-item .icon-box {
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.benefit-item:hover .icon-box {
	background-position: right center;
}

.benefit-item .icon-box img {
	max-width: 40px;
}

.benefit-item-content {
	width: calc(100% - 80px);
}

.benefit-item-content h3 {
	font-size: 20px;
}

.benefit-item-content p {
	margin: 10px 0 0;
}

.our-benefits-image figure {
	display: block;
}

.our-benefits-image img {
	width: 100%;
	object-fit: cover;
}

.our-benefits .section-footer-text {
	margin-top: 60px;
}

/************************************/
/*** 	   11. Intro Video css 	  ***/
/************************************/

.intro-video .container-fluid {
	padding: 0;
}

.intro-video-box {
	position: relative;
}

.intro-video-box,
.intro-video-box video {
	width: 100%;
	height: 750px;
}

.intro-video-box video {
	object-fit: cover;
	filter: brightness(0.8);
}

.video-play-button.bg-effect {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	flex-direction: column;
}

.video-play-button.bg-effect a:before,
.video-play-button.bg-effect a:after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--white-color);
	opacity: 40%;
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button.bg-effect a:after {
	animation-delay: .3s;
}

@keyframes border-zooming {
	100% {
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button.bg-effect p {
	margin: 30px 0 0;
}

/************************************/
/***  12. Premium Ingredient css  ***/
/************************************/

.premium-ingredients {
	padding: 100px 0;
}

.ingredients-body h3 {
	font-size: 20px;
}

.ingredients-body ul {
	list-style: disc;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	background: var(--primary-color);
	border-radius: 20px;
	padding: 30px 30px 30px 50px;
	margin: 20px 0 0;
}

.ingredients-body ul li {
	color: #ffffff;
	width: calc(50% - 20px);
	font-weight: 500;
	line-height: 1.5em;
}

.ingredients-body ul li::marker {
	/* color: var(--accent-color); */
}

.ingredients-image-box {
	display: flex;
	align-items: center;
	margin-left: 15px;
}

.our-ingredients-image figure {
	display: block;
	border-radius: 20px;
}

.our-ingredients-image img {
	width: 100%;
	aspect-ratio: 1 / 1.34;
	object-fit: cover;
	border-radius: 20px;
}

.ingredient-item-list {
	position: relative;
	max-width: 62%;
	background: var(--primary-color);
	border-radius: 20px;
	padding: 40px;
	margin-left: -140px;
	z-index: 1;
}

.ingredient-item {
	display: flex;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.ingredient-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.ingredient-item .icon-box {
	background: linear-gradient(270deg, var(--tertiary-color) 0%, var(--secondary-color) 50%, var(--quaternary-color) 100%);
	background-size: 200% auto;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.ingredient-item:hover .icon-box {
	background-position: right center;
}

.ingredient-item .icon-box img {
	max-width: 30px;
}

.ingredient-item-content {
	width: calc(100% - 70px);
}

.ingredient-item-content h3 {
	color: #ffffff;
	font-size: 20px;
}

.ingredient-item-content p {
	color: #ffffff;
	margin: 10px 0 0;
}

.premium-ingredient-item-list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-top: 1px solid var(--divider-color);
	margin-top: 80px;
	padding-top: 80px;
}

.premium-ingredient-item {
	width: calc(25% - 22.5px);
}

.premium-ingredient-item .icon-box {
	margin-bottom: 30px;
}

.premium-ingredient-item .icon-box img {
	max-width: 40px;
	transition: all 0.3s ease-in-out;
}

.premium-ingredient-item:hover .icon-box img {
	transform: rotateY(180deg);
	filter: brightness(0) invert(0);
}

.premium-ingredient-item-content h3 {
	font-size: 20px;
}

.premium-ingredient-item-content p {
	margin: 10px 0 0;
}

/************************************/
/*** 	   13. Sale Now css 	  ***/
/************************************/

.sale-now {
	position: relative;
	background: var(--secondary-color) url('../images/sale-now-bg-image.png') no-repeat;
	padding: 100px 0;
	overflow: hidden;
}

.sale-now::before {
	content: '';
	position: absolute;
	display: block;
/* 	width: 480px;
	height: 525px;
	bottom: -110px;
	left: -100px;
	background-image: url('../images/sale-now-bg-img-1.png'); */
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #00000073;
}

.sale-now::after {
/* 	content: ''; */
	position: absolute;
	display: block;
	width: 454px;
	height: 385px;
	bottom: -30px;
	right: -110px;
	background-image: url('../images/sale-now-bg-img-2.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.sale-now-box .section-title {
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
}

.sale-now-box .section-title p {
	max-width: 85%;
	margin-left: auto;
	margin-right: auto;
}

.special-saving-content-body {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 60px;
	width: 100%;
	max-width: 950px;
	margin: 60px auto 0;
	z-index: 1;
}

.special-saving-content-body .countdown-text {
	position: relative;
	width: calc(25% - 45px);
	background: var(--white-color);
	border-radius: 20px;
	text-align: center;
	padding: 30px;
}

.special-saving-content-body .countdown-text::before {
	content: ':';
	position: absolute;
	top: 50%;
	right: -35px;
	transform: translateY(-80%);
	font-size: 46px;
	font-weight: 700;
	color: var(--white-color);
	opacity: 50%;
}

.special-saving-content-body .countdown-text:last-child:before {
	display: none;
}

.countdown-text h3 {
	font-size: 56px;
	line-height: 1em;
	font-weight: 700;
}

.countdown-text p {
	color: var(--primary-color);
	font-weight: 500;
	margin: 10px 0 0;
}

.sale-now-image-1 {
	position: absolute;
	left: 0;
	bottom: 0;
}

/************************************/
/***   14. Our Testimonials css	  ***/
/************************************/

.our-testimonials {
	padding: 100px 0;
}

.testimonial-slider,
.product-slider,
.stores-slider {
	overflow: hidden;
}

.testimonial-slider .swiper-wrapper,
.product-slider .swiper-wrapper,
.stores-slider .swiper-wrapper {
	cursor: none;
}

.testimonial-item {
	position: relative;
	background: var(--secondary-color);
	border-radius: 20px;
	margin-top: 30px;
	padding: 40px;
}

.testimonial-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	transform: scale(0);
	border-radius: 20px;
	width: 100%;
	height: 100%;
	z-index: 0;
	transition: all 0.5s ease-in-out;
	opacity: 0;
}

.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-item::before {
	opacity: 1;
	transform: scale(1);
}

.testimonial-quote,
.testimonial-rating,
.testimonial-content,
.author-info {
	position: relative;
	z-index: 1;
}

.testimonial-quote {
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border-radius: 50%;
	border: 4px solid var(--white-color);
	margin: -70px 0 30px;
}

.testimonial-quote img {
	max-width: 26px;
}

.testimonial-rating i {
	color: #ffffff;
	margin-right: 2px;
	transition: all 0.4s ease-in-out;
}

.testimonial-content {
	margin-top: 30px;
}

.testimonial-content p {
	color: #ffffff;
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

.author-info {
	display: flex;
	align-items: center;
	border-top: 1px solid var(--divider-color);
	margin-top: 20px;
	padding-top: 20px;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider .swiper-slide.swiper-slide-active .author-info {
	border-color: var(--dark-divider-color);
}

.author-info .author-image {
	margin-right: 15px;
}

.author-info .author-image figure {
	border-radius: 50%;
}

.author-info .author-image img {
	max-width: 60px;
	border-radius: 50%;
}

.author-info .author-content h3 {
	font-size: 20px;
	text-transform: capitalize;
	transition: all 0.4s ease-in-out;
	color: #ffffff;
}

.author-info .author-content p {
	margin: 5px 0 0;
	color: #ffffff;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-rating i,
.testimonial-slider .swiper-slide.swiper-slide-active .testimonial-content p,
.testimonial-slider .swiper-slide.swiper-slide-active .author-info .author-content h3,
.testimonial-slider .swiper-slide.swiper-slide-active .author-info .author-content p {
	color: var(--white-color);
}

.testimonial-pagination,
.product-pagination,
.stores-pagination {
	position: relative;
	text-align: center;
	margin-top: 40px;
}

.sw-dot-default.style-small .swiper-pagination-bullet::before {
	content: unset;
}

.testimonial-pagination .swiper-pagination-bullet,
.product-pagination .swiper-pagination-bullet,
.stores-pagination .swiper-pagination-bullet,
.sw-dot-default.style-small .swiper-pagination-bullet {
	height: 10px;
	width: 10px;
	background: var(--tertiary-color);
	border: 1px solid var(--quaternary-color);
	opacity: 1;
	margin: 0 3px;
	transition: all 0.4s ease-in-out;
}

.testimonial-pagination .swiper-pagination-bullet-active,
.product-pagination .swiper-pagination-bullet-active,
.stores-pagination .swiper-pagination-bullet-active,
.sw-dot-default.style-small .swiper-pagination-bullet-active {
	width: 30px;
	background: var(--tertiary-color);
	border-radius: 12px;
}

/************************************/
/*** 	   15. Our FAQs css 	  ***/
/************************************/

.our-faqs {
	background: var(--primary-color);
	padding: 100px 0;
}

.faq-accordion .accordion-item {
	position: relative;
	background: var(--secondary-color);
	border: none;
	border-radius: 20px;
	margin-bottom: 30px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item:last-child {
	margin-bottom: 0;
}

.faq-accordion .accordion-header .accordion-button {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.222em;
	background: linear-gradient(270deg, var(--secondary-color) 0.26%, var(--quaternary-color) 99.99%);
	color: var(--white-color);
	padding: 20px 74px 20px 24px;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-header .accordion-button.collapsed {
	background: var(--white-color);
	color: var(--primary-color);
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
	content: '\2b';
	font-family: "FontAwesome";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 40px;
	height: 40px;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--white-color);
	border-radius: 50%;
	color: var(--primary-color);
	transform: translateY(-50%) rotate(45deg);
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button.collapsed::after {
	color: var(--white-color);
	background: linear-gradient(270deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	transform: translateY(-50%) rotate(0deg);
}

.faq-accordion .accordion-item .accordion-body {
	background-color: var(--white-color);
	padding: 20px 75px 20px 20px;
}

.faq-accordion .accordion-item .accordion-body p {
	color: var(--text-color);
}

.faq-accordion .accordion-item .accordion-body p:last-child {
	margin: 0;
}

.faqs-image {
	position: relative;
	margin-left: 20px;
}

.faqs-img figure {
	display: block;
	border-radius: 20px;
}

.faqs-img img {
	width: 100%;
	aspect-ratio: 1 / 1.324;
	object-fit: cover;
	border-radius: 20px;
}

.faq-cta-box {
	position: absolute;
	left: 40px;
	bottom: 40px;
	width: 100%;
	max-width: 230px;
	background: var(--dark-divider-color);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border-radius: 20px;
	padding: 20px;
	z-index: 2;
}

.review-content {
	margin-top: 20px;
}

.review-content p {
	font-weight: 500;
	color: var(--white-color);
}

.review-content p:last-child {
	margin-bottom: 0;
}

.review-content h3 {
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.review-content h3:last-child {
	margin-bottom: 0;
}

/************************************/
/*** 	   16. Our Blog css 	  ***/
/************************************/

.our-blog {
	padding: 100px 0 70px;
}

.post-item {
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.post-featured-image,
.post-item-content {
	margin-bottom: 20px;
}

.post-featured-image a {
	cursor: none;
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.post-featured-image figure {
	display: block;
}

.post-featured-image img {
/* 	aspect-ratio: 1 / 0.744; */
	object-fit: cover;
	border-radius: 20px;
	transition: all 0.5s ease-in-out;
}

.post-item:hover .post-featured-image img {
	transform: scale(1.1);
}

.post-item-content h2 {
	font-size: 20px;
	line-height: 1.4em;
}

.post-item-content h2 a {
	color: inherit;
}

/************************************/
/*** 	    17. Footer css  	  ***/
/************************************/

.main-footer {
	padding: 100px 0 0;
}

.footer-logo img {
	width: 100%;
	max-width: 150px;
}

.about-footer-content {
	margin-top: 25px;
}

.about-footer-content p {
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-social-links {
	margin-top: 30px;
}

.footer-social-links h3 {
	font-size: 18px;
	color: var(--white-color);
	margin-bottom: 20px;
}

.footer-social-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-social-links ul li {
	display: inline-block;
	border-radius: 50%;
	margin-right: 10px;
}

.footer-social-links ul li:last-child {
	margin-right: 0;
}

.footer-social-links ul li a {
	background: transparent;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.footer-social-links ul li:hover a {
	background: var(--accent-color);
}

.footer-social-links ul li a i {
	font-size: 20px;
	color: var(--white-color);
}

.footer-links-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	margin-left: 30px;
}

.footer-links {
	max-width: 40%;
}

.footer-links h3 {
	font-size: 20px;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 20px;
}

.footer-links p {
	color: var(--white-color);
	margin-bottom: 20px;
}

.footer-links p:last-child {
	margin-bottom: 0;
}

.footer-links ul {
	list-style: disc;
	margin: 0;
	padding-left: 20px;
}

.footer-links ul li {
	color: var(--white-color);
	line-height: 1.5em;
	text-transform: capitalize;
	margin-bottom: 15px;
	transition: all 0.3s ease-in-out;
}

.footer-links ul li:last-child {
	margin-bottom: 0;
}

.footer-links ul li:hover {
	color: var(--secondary-color);
}

.footer-links ul li::marker {
	color: var(--quaternary-color);
}

.footer-links ul li a {
	color: inherit;
}

.footer-contact-list {
	border-top: 1px solid var(--dark-divider-color);
	padding-top: 20px;
}

.footer-contact-item {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.footer-contact-item:last-child {
	margin-bottom: 0;
}

.footer-contact-item .icon-box {
	position: relative;
	width: 40px;
	height: 40px;
	border: 1px solid var(--dark-divider-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
}

.footer-contact-item .icon-box:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--accent-color);
	border-radius: 50%;
	height: 100%;
	width: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.footer-contact-item:hover .icon-box::before {
	transform: scale(1);
}

.footer-contact-item .icon-box img {
	position: relative;
	width: 100%;
	max-width: 20px;
	z-index: 1;
}

.footer-contact-content {
	width: calc(100% - 55px);
}

.footer-contact-content p {
	font-weight: 500;
	color: var(--white-color);
	margin: 0;
}

.footer-contact-content p a {
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-contact-content p a:hover {
	color: var(--secondary-color);
}

.footer-copyright {
	background: var(--tertiary-color);
	padding: 20px 0;
	margin: 100px 0 0;
}

.footer-copyright a {
	color: var(--primary-color);
	transition: 0.3s;
}

.footer-copyright a:hover {
	color: #ffffff;
}

.footer-copyright-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.footer-copyright-text p {
	font-weight: 500;
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-privacy-policy ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-privacy-policy ul li {
	font-weight: 500;
	color: var(--white-color);
	display: inline-block;
	border-right: 1px solid var(--dark-divider-color);
	margin-right: 15px;
	padding-right: 15px;
}

.footer-privacy-policy ul li:last-child {
	padding: 0;
	margin: 0;
	border: none;
}

.footer-privacy-policy ul li a {
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.footer-privacy-policy ul li a:hover {
	color: var(--accent-color);
}

/************************************/
/*** 	 18. About Us Page css 	  ***/
/************************************/

.page-header {
	background-color: var(--quaternary-color);
	padding: 165px 0 50px;
}

.page-header-box {
	text-align: center;
}

.page-header-box h1 {
	display: inline-block;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.1em;
	color: var(--white-color);
	margin-bottom: 10px;
	cursor: none;
}

.page-header-box ol {
	margin: 0;
	padding: 0;
	justify-content: center;
}

.page-header-box ol li.breadcrumb-item {
	font-size: 16px;
	text-transform: capitalize;
	line-height: normal;
	color: var(--white-color);
}

.page-header-box ol li.breadcrumb-item a {
	color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
	color: var(--white-color);
}

#breadcrumb, #breadcrumb a {
	color: #ffffff;
}

.our-approach {
	background-color: var(--primary-color);
	padding: 100px 0;
}

.our-apporach-image figure {
	display: block;
	border-radius: 20px;
}

.our-apporach-image img {
	width: 100%;
	aspect-ratio: 1 / 0.942;
	object-fit: cover;
	border-radius: 20px;
}

.our-apporach-content {
	margin-left: 20px;
}

.mission-vision-item {
	background-color: var(--white-color);
	border-radius: 20px;
	margin-bottom: 40px;
	padding: 40px;
}

.mission-vision-item:last-child {
	margin-bottom: 0;
}

.mission-vision-content {
	margin-bottom: 30px;
}

.mission-vision-content h3 {
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.mission-vision-content p {
	margin: 0;
}

.mission-vision-list ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mission-vision-list ul li {
	position: relative;
	width: calc(50% - 15px);
	color: var(--primary-color);
	line-height: 1.5em;
	padding-left: 25px;
}

.mission-vision-list ul li::before {
	content: '\f14a';
	font-family: 'Font Awesome 6 Free';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 18px;
	font-weight: 900;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.quality-promise {
	padding: 100px 0;
}

.quality-promise-image {
	position: relative;
}

.company-experience-box {
	position: absolute;
	top: 40px;
	left: 20px;
	width: 230px;
	background-color: var(--primary-color);
	border-radius: 20px;
	padding: 25px;
	overflow: hidden;
	z-index: 1;
}

.company-experience-box:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border-radius: 999px 999px 0 0;
	transition: all 0.4s ease-in-out;
}

.company-experience-box:hover:before {
	height: 100%;
	border-radius: 0;
}

.company-experience-box .icon-box {
	position: relative;
	margin-bottom: 25px;
	z-index: 1;
}

.company-experience-box .icon-box img {
	width: 100%;
	max-width: 50px;
}

.company-experience-content h3 {
	position: relative;
	color: var(--white-color);
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
	z-index: 1;
}

.quality-promise-img img {
	/* aspect-ratio: 1 / 0.94;
	object-fit: cover; */
/* 	border-radius: 50%; */
	border-radius: 20px;
}

.quality-promise-content {
	margin-left: 15px;
}

.quality-promise-body {
	margin-bottom: 40px;
}

.quality-promise-body-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 40px;
}

.quality-promise-body-item:last-child {
	margin-bottom: 0;
}

.quality-promise-body-item .icon-box {
	background: linear-gradient(270deg, var(--primary-color) 0%, var(--tertiary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.quality-promise-body-item:hover .icon-box {
	background-position: right center;
}

.quality-promise-body-item .icon-box img {
	max-width: 38px;
}

.quality-promise-body-content {
	width: calc(100% - 80px);
}

.quality-promise-body-content h3 {
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.quality-promise-body-content p {
	margin: 0;
}

.true-taste {
	background-color: var(--primary-color);
	padding: 100px 0;
}

.true-taste-body-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.true-taste-body-item .icon-box {
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.true-taste-body-item:hover .icon-box {
	background-position: right center;
}

.true-taste-body-item .icon-box img {
	max-width: 30px;
}

.true-taste-body-content {
	width: calc(100% - 80px);
}

.true-taste-body-content h3 {
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.true-taste-body-content p {
	margin: 0;
}

.true-taste-counter-list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 40px;
}

.true-taste-counter-item {
	width: calc(50% - 15px);
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 30px;
}

.true-taste-counter-item h2 {
	font-size: 46px;
	margin-bottom: 20px;
}

.true-taste-counter-item p {
	margin: 0;
}

.true-taste-image-box {
	position: relative;
	margin-left: 20px;
}

.true-taste-img figure {
	display: block;
	border-radius: 20px;
}

.true-taste-img img {
	width: 100%;
	aspect-ratio: 1 / 1.186;
	object-fit: cover;
	border-radius: 20px;
}

.true-taste-image-box .faq-cta-box {
	max-width: 260px;
}

.true-taste-image-box .faq-cta-box .review-image img {
	max-width: 44px;
}

.true-taste-image-box .faq-cta-box .review-image.add-more {
	width: 44px;
	height: 44px;
}

.our-journey {
	padding: 100px 0;
}

.our-journey .section-title.section-title-center {
	max-width: 635px;
}

.journey-item-list {
	display: flex;
	flex-wrap: wrap;
	/* align-items: end; */
	gap: 30px;
}

.journey-item {
	width: calc(25% - 22.5px);
	display: flex;
	justify-content: space-between;
	gap: 10px;
	background: var(--quaternary-color);
	border-radius: 20px;
	padding: 30px;
	transition: all 0.4s ease-in-out;
}

.journey-item:hover {
	background: var(--accent-color);
}

.journey-title {
	transform: rotate(-180deg);
	writing-mode: vertical-rl;
}

.journey-title p {
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.journey-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: end;
	gap: 20px;
}

.journey-content .icon-box img {
	width: 100%;
	max-width: 60px;
	filter: brightness(0);
	transition: all 0.3s ease-in-out;
}

.journey-item:hover .journey-content .icon-box img {
	filter: brightness(0) invert(1);
	transform: rotateY(180deg);
}

.journey-counter h2 {
	font-size: 46px;
	font-weight: 700;
	transition: all 0.3s ease-in-out;
}

.journey-item:hover .journey-title p,
.journey-item:hover .journey-counter h2 {
	color: var(--white-color);
}

.journey-list {
	margin-top: 40px;
}

.journey-list ul {
	display: flex;
	flex-wrap: wrap;
	/* justify-content: space-between; */
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.journey-list ul li {
	position: relative;
	color: #ffffff;
	background: var(--quaternary-color);
	border-radius: 50px;
	padding: 20px 20px 20px 40px;
}

.journey-list ul li::before {
	content: '';
	position: absolute;
	left: 20px;
	top: 25px;
	background: #ffffff;
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

/************************************/
/*** 	 19. Blog Archive css 	  ***/
/************************************/

.page-blog {
	padding: 100px 0;
}

.page-pagination {
	margin-top: 30px;
	text-align: center;
}

.page-pagination ul, .page-pagination div.pagination {
	justify-content: center;
	padding: 0;
	margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span,
.page-pagination div.pagination .page-numbers {
	display: flex;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	background: var(--secondary-color);
	color: var(--primary-color);
	border-radius: 10px;
/* 	width: 40px;
	height: 40px; */
	margin: 0 5px;
	padding: 10px 12px;
	font-weight: 700;
	line-height: 1em;
	transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a,
.page-pagination ul li a:hover,
.page-pagination div.pagination .page-numbers:hover,
.page-pagination div.pagination .page-numbers.current {
	background: var(--accent-color);
	color: var(--white-color);
}

/************************************/
/*** 	   20. Blog Single css 	  ***/
/************************************/

.page-single-post {
	padding: 100px 0;
}

.post-single-meta {
	margin-top: 10px;
}

.post-single-meta ol li {
	font-size: 18px;
	color: var(--white-color);
	margin-right: 15px;
}

.post-single-meta ol li:last-child {
	margin-right: 0;
}

.post-single-meta ol li i {
	font-size: 18px;
	color: var(--white-color);
	margin-right: 5px;
}

.post-image {
	position: relative;
	margin-bottom: 30px;
}

.post-image figure {
	display: block;
	border-radius: 20px;
	overflow: hidden;
}

.post-image img {
	width: 100%;
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 20px;
}

.post-content {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry {
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.post-entry:after {
	content: '';
	display: block;
	clear: both;
}

.post-entry a {
	color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6 {
	font-weight: 600;
	line-height: 1.2em;
	margin: 0 0 0.435em;
}

.post-entry h1 {
	font-size: 56px;
	font-weight: 700;
}

.post-entry h2 {
	font-size: 38px;
	font-weight: 700;
}

.post-entry h3 {
	font-size: 32px;
}

.post-entry h4 {
	font-size: 28px;
}

.post-entry h5 {
	font-size: 24px;
}

.post-entry h6 {
	font-size: 20px;
}

.post-entry p {
	margin-bottom: 20px;
}

.post-entry p:last-child {
	margin-bottom: 0;
}

.post-entry p strong {
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol {
	margin: 0 0 30px;
}

.post-entry ul {
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ol li,
.post-entry ul li {
	position: relative;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--text-color);
	margin-bottom: 15px;
}

.post-entry ul li:last-child {
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul {
	margin-top: 20px;
	margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child {
	margin-bottom: 0;
}

.post-entry blockquote {
	background: url('../images/icon-blockquote.svg'), var(--primary-color);
	background-repeat: no-repeat;
	background-position: 30px 30px;
	background-size: 45px;
	border-radius: 20px;
	padding: 30px 30px 30px 90px;
	margin-bottom: 30px;
}

.post-entry blockquote p {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--white-color);
}

.post-entry blockquote p:last-child {
	margin-bottom: 0;
}

.tag-links {
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.post-tags .tag-links a {
	display: inline-block;
	font-style: normal;
	font-size: 16px;
	font-weight: 700;
	text-transform: capitalize;
	line-height: 1em;
	background: var(--accent-color);
	color: var(--white-color);
	border-radius: 100px;
	padding: 12px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover {
	background: var(--primary-color);
}

.post-social-sharing {
	text-align: right;
}

.post-social-sharing ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.post-social-sharing ul li {
	display: inline-block;
	margin-right: 10px;
}

.post-social-sharing ul li:last-child {
	margin-right: 0;
}

.post-social-sharing ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--accent-color);
	color: var(--white-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a {
	background: var(--primary-color);
}

.post-social-sharing ul li a i {
	font-size: 18px;
	color: inherit;
}

/************************************/
/*** 	 21. Features Page css 	  ***/
/************************************/

.page-features {
	padding: 100px 0 70px;
}

.features-item {
	position: relative;
	background: var(--tertiary-color);
	border-radius: 20px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	overflow: hidden;
}

.features-item::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(270deg, var(--secondary-color) 0%, var(--tertiary-color) 100%);
	border-radius: 500px 500px 0 0;
	height: 0;
	width: 100%;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.features-item.active::before,
.features-item:hover::before {
	height: 100%;
	border-radius: 0;
}

.features-item .icon-box,
.features-item-content {
	position: relative;
	z-index: 1;
}

.features-item .icon-box {
	margin-bottom: 20px;
}

.features-item .icon-box img {
	max-width: 60px;
/* 	filter: brightness(0); */
	transition: all 0.4s ease-in-out;
}

.features-item:hover .icon-box img,
.features-item.active .icon-box img {
	filter: brightness(0) invert(1);
}

.features-item-content h3 {
	font-size: 20px;
	/* color: #ffffff; */
	transition: all 0.4s ease-in-out;
}

.features-item-content p {
	margin: 15px 0 0;
	/* color: #ffffff; */
	transition: all 0.4s ease-in-out;
}

.features-item:hover .features-item-content h3,
.features-item.active .features-item-content h3,
.features-item:hover .features-item-content p,
.features-item.active .features-item-content p {
	color: var(--white-color);
}

/************************************/
/***  22. Testimonials Page css	  ***/
/************************************/

.page-testimonials {
	padding: 100px 0 70px;
}

.page-testimonials .testimonial-item {
	height: calc(100% - 60px);
	margin-bottom: 30px;
}

.page-testimonials .testimonial-item.active::before,
.page-testimonials .testimonial-item:hover::before {
	opacity: 1;
	transform: scale(1);
}

.page-testimonials .testimonial-item.active .author-info {
	border-color: var(--dark-divider-color);
}

.page-testimonials .testimonial-item.active .testimonial-rating i,
.page-testimonials .testimonial-item:hover .testimonial-rating i,
.page-testimonials .testimonial-item.active .testimonial-content p,
.page-testimonials .testimonial-item:hover .testimonial-content p,
.page-testimonials .testimonial-item.active .author-info .author-content h3,
.page-testimonials .testimonial-item:hover .author-info .author-content h3,
.page-testimonials .testimonial-item.active .author-info .author-content p,
.page-testimonials .testimonial-item:hover .author-info .author-content p {
	color: var(--white-color);
}

/************************************/
/*** 	   23. FAQs Page css 	  ***/
/************************************/

.page-faqs {
	padding: 100px 0;
}

.page-single-sidebar {
	position: sticky;
	top: 20px;
	margin-right: 15px;
}

.page-catagory-list {
	background: var(--secondary-color);
	border-radius: 20px;
	margin-bottom: 60px;
	padding: 40px;
}

.page-catagory-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.page-catagory-list ul li {
	line-height: 1.5em;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.page-catagory-list ul li:last-child {
	margin: 0;
	padding: 0;
	border-bottom: none;
}

.page-catagory-list ul li a {
	position: relative;
	display: block;
	text-transform: capitalize;
	color: inherit;
	padding-right: 30px;
	transition: all 0.3s ease-in-out;
}

.page-catagory-list ul li a:hover {
	color: var(--primary-color);
}

.page-catagory-list ul li a::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%) rotate(-45deg);
	background: url('../images/arrow-primary.svg') no-repeat;
	background-position: center center;
	background-size: cover;
	width: 20px;
	height: 20px;
	transition: all 0.3s ease-in-out;
}

.page-catagory-list ul li a:hover::before {
	transform: translateY(-50%) rotate(0);
}

.sidebar-cta-box {
	background: var(--primary-color);
	border-radius: 20px;
	padding: 40px;
}

.sidebar-cta-logo {
	margin-bottom: 40px;
}

.sidebar-cta-logo img {
	width: 100%;
	max-width: 173px;
}

.sidebar-cta-content p {
	font-size: 18px;
	color: var(--white-color);
	margin-bottom: 0;
}

.sidebar-cta-body {
	background: var(--dark-divider-color);
	border-radius: 20px;
	padding: 20px;
	margin-top: 30px;
}

.sidebar-cta-contact-item {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.sidebar-cta-contact-item:last-child {
	margin-bottom: 0;
}

.sidebar-cta-contact-item .icon-box {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--accent-color);
	border-radius: 50%;
	margin-right: 10px;
}

.sidebar-cta-contact-item .icon-box img {
	max-width: 20px;
}

.sidebar-cta-contact-content {
	width: calc(100% - 50px);
}

.sidebar-cta-contact-content p {
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	margin-bottom: 0;
}

.sidebar-cta-contact-content p a {
	color: inherit;
	transition: all 0.3s ease-in-out;
}

.sidebar-cta-contact-content p a:hover {
	color: var(--accent-color);
}

.page-faqs-catagery .page-single-faqs {
	margin-bottom: 60px;
}

.page-faqs-catagery .page-single-faqs:last-child {
	margin-bottom: 0;
}

.page-faqs-catagery .faq-accordion .accordion-header .accordion-button.collapsed,
.page-faqs-catagery .faq-accordion .accordion-item .accordion-body {
	background: var(--secondary-color);
}

/************************************/
/***   24. Contact Us Page css 	  ***/
/************************************/

.page-contact-us {
	padding: 100px 0;
}

.contact-info-list {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 100px;
}

.contact-info-item {
	position: relative;
	width: calc(25% - 22.5px);
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
	overflow: hidden;
}

.contact-info-item::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border-radius: 999px 999px 0 0;
	width: 100%;
	height: 0;
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.contact-info-item.active::before,
.contact-info-item:hover::before {
	border-radius: 0;
	height: 100%;
}

.contact-info-item .icon-box,
.contact-info-content {
	position: relative;
	z-index: 1;
	color: #ffffff;
}

.contact-info-item .icon-box {
	position: relative;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

.contact-info-item .icon-box::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--primary-color);
	border-radius: 50%;
	height: 100%;
	width: 100%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .icon-box::before {
	transform: scale(1);
}

.contact-info-item .icon-box img {
	position: relative;
	width: 100%;
	max-width: 25px;
	z-index: 1;
}

.contact-info-content h3 {
	font-size: 20px;
	margin-bottom: 10px;
	color: #ffffff;
	transition: all 0.4s ease-in-out;
}

.contact-info-content p {
	margin-bottom: 2px;
	transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .contact-info-content h3,
.contact-info-item:hover .contact-info-content p {
	color: var(--white-color);
}

.contact-info-content p:last-child {
	margin-bottom: 0;
}

.contact-info-content p a {
	color: inherit;
}

.google-map-iframe,
.contact-form {
	width: 50%;
}

.google-map-iframe iframe {
	width: 100%;
	height: 100%;
	/* filter: grayscale(1); */
	transition: all 0.3s ease-in-out;
}

/* .google-map-iframe iframe:hover {
filter: grayscale(0);
} */

.conatct-us-form {
	display: flex;
	flex-wrap: wrap;
	border-radius: 20px;
	overflow: hidden;
}

.contact-form {
	padding: 40px;
}

.contact-form .form-control {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--white-color);
	background-color: var(--dark-divider-color);
	border: none;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 10px;
	padding: 18px 20px;
	outline: none;
	box-shadow: none;
}

.contact-form .form-control::placeholder {
	color: var(--white-color);
}

.contact-form .btn-default {
	width: 100%;
	padding: 17px;
}

.contact-form .btn-default::before {
	display: none;
}

/************************************/
/*** 	25. 404 Error Page css 	  ***/
/************************************/

.error-page {
	padding: 100px 0;
}

.error-page-image {
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img {
	width: 100%;
	max-width: 45%;
}

.error-page-content {
	text-align: center;
}

.error-page-content-body p,
.error-page-content .section-title {
	margin-bottom: 20px;
}

/************************************/
/*** 	  26. Responsive css 	  ***/
/************************************/

@media only screen and (max-width: 991px) {

	.btn-default {
		padding: 14px 45px 14px 15px;
	}

	.btn-default::before {
		right: 15px;
	}

	.btn-default.btn-border {
		padding: 15px 45px 15px 15px;
	}

	.navbar {
		padding: 15px 0;
	}

	.slicknav_nav li,
	.slicknav_nav ul {
		display: block;
	}

	.responsive-menu,
	.navbar-toggle {
		display: block;
	}

	.header-btn {
		display: none;
	}

	.section-row {
		margin-bottom: 20px;
	}

	.section-title.section-title-center {
		max-width: 100%;
	}

	.section-title {
		margin-bottom: 30px;
	}

	.section-title h3 {
		margin-bottom: 10px;
	}

	.section-title h1 {
		font-size: 42px;
	}

	.section-title h2 {
		font-size: 36px;
	}

	.section-title p {
		margin-top: 10px;
	}

	.section-title-content {
		margin-top: 15px;
	}

	.section-btn {
		text-align: left;
		margin-top: 15px;
	}

	.section-content-btn .section-btn {
		margin-top: 15px;
	}

	.hero {
		padding: 130px 0 0px;
	}

	.hero.hero-slider-layout .hero-slide {
		padding: 140px 0 50px;
	}

	.hero-content {
		margin-bottom: 30px;
	}

	.hero-body {
		gap: 15px 20px;
	}

	.review-box {
		padding-top: 30px;
		margin-top: 30px;
	}

	.hero-image {
		max-width: 75%;
		margin: 0 auto;
	}

	.our-scrolling-ticker {
		padding: 12px 0;
	}

	.scrolling-ticker-box {
		--gap: 20px;
	}

	.scrolling-content span {
		font-size: 16px;
	}

	.scrolling-content span img {
		width: 16px;
		margin-right: 20px;
	}

	.about-us {
		padding: 50px 0;
	}

	.about-image-box {
		margin-bottom: 30px;
	}

	.contact-us-circle {
		top: calc(50% - 10px);
	}

	.about-image-item {
		padding: 20px;
	}

	.about-image-item .icon-box {
		margin-bottom: 30px;
	}

	.about-image-item-content h2 {
		font-size: 36px;
	}

	.about-image-item-content h3 {
		font-size: 18px;
	}

	.about-us-content {
		margin: 0;
	}

	.about-us-body {
		padding-left: 30px;
	}

	.about-body-item {
		margin-bottom: 20px;
	}

	.about-body-item:before {
		left: -33px;
	}

	.about-body-content p {
		margin: 5px 0 0;
	}

	.our-products {
		padding: 50px 0;
	}

	.product-item {
		padding: 10px;
	}

	.product-image {
		margin-bottom: 30px;
	}

	.product-image figure img {
		max-width: 210px;
	}

	.product-cart-btn a {
		padding: 10px 24px;
	}

	.product-cart-btn a img {
		max-width: 18px;
	}

	.product-rating {
		margin-top: 10px;
	}

	.product-price {
		margin-top: 15px;
	}

	.product-price h3 {
		font-size: 20px;
	}

	.section-footer-text {
		margin-top: 10px;
	}

	.why-choose-us {
		padding: 50px 0;
	}

	.why-choose-content {
		margin-bottom: 30px;
	}

	.why-choose-list {
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.why-choose-list ul li {
		padding-left: 25px;
	}

	.why-choose-experience {
		max-width: 180px;
		padding: 30px;
	}

	.why-choose-experience h2 {
		font-size: 36px;
	}

	.why-choose-experience p {
		margin-top: 15px;
	}

	.why-choose-item-list {
		width: calc(100% - 210px);
		margin-left: 30px;
		padding-left: 30px;
	}

	.why-choose-item {
		margin-bottom: 20px;
	}

	.why-choose-item p {
		margin: 5px 0 0;
	}

	.why-choose-image {
		max-width: 550px;
		margin: 0 auto;
		padding: 0 80px 50px 0;
	}

	.why-choose-img-2 figure img {
		max-width: 260px;
	}

	.why-choose-counter-list {
		gap: 20px;
		margin-top: 30px;
		padding-top: 30px;
	}

	.why-choose-counter-item {
		width: calc(25% - 15px);
	}

	.why-choose-counter-item h2 {
		font-size: 36px;
	}

	.why-choose-counter-item p {
		font-size: 14px;
		margin-top: 5px;
	}

	.we-offer {
		padding: 50px 0;
	}

	.offer-item {
		width: calc(50% - 15px);
		padding: 20px;
		margin-top: 75px;
	}

	.offer-item-image {
		max-width: 160px;
		margin: -100px auto 20px;
	}

	.offer-item-content .readmore-btn {
		margin-top: 15px;
	}

	.our-benefits {
		padding: 50px 0;
	}

	.benefit-item {
		margin-bottom: 30px;
	}

	.benefit-item .icon-box {
		height: 45px;
		width: 45px;
		margin-right: 15px;
	}

	.benefit-item .icon-box img {
		max-width: 22px;
	}

	.benefit-item-content {
		width: calc(100% - 60px);
	}

	.benefit-item-content h3 {
		font-size: 18px;
	}

	.benefit-item-content p {
		margin-top: 5px;
	}

	.our-benefits-image {
		margin: 30px auto 0;
		max-width: 70%;
	}

	.our-benefits .section-footer-text {
		margin-top: 30px;
	}

	.intro-video-box,
	.intro-video-box video {
		height: 500px;
	}

	.premium-ingredients {
		padding: 50px 0;
	}

	.our-ingredients-content {
		margin-bottom: 30px;
	}

	.ingredients-body ul {
		gap: 15px 40px;
		padding: 20px 20px 20px 40px;
		margin: 15px 0 0;
	}

	.ingredients-image-box {
		margin: 0;
	}

	.ingredient-item-list {
		padding: 30px;
	}

	.ingredient-item {
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.premium-ingredient-item-list {
		margin-top: 40px;
		padding-top: 40px;
	}

	.premium-ingredient-item {
		width: calc(50% - 15px);
	}

	.premium-ingredient-item .icon-box {
		margin-bottom: 20px;
	}

	.premium-ingredient-item-content p {
		margin: 5px 0 0;
	}

	.sale-now {
		padding: 50px 0;
	}

	.sale-now::before,
	.sale-now:after {
		opacity: 40%;
	}

	.sale-now::before {
		width: 315px;
		height: 350px;
	}

	.sale-now::after {
		width: 360px;
		height: 240px;
	}

	.special-saving-content-body {
		margin-top: 40px;
	}

	.special-saving-content-body .countdown-text {
		padding: 20px;
	}

	.countdown-text h3 {
		font-size: 42px;
	}

	.our-testimonials {
		padding: 50px 0;
	}

	.testimonial-item {
		padding: 30px;
	}

	.testimonial-quote {
		margin: -60px 0 20px;
	}

	.testimonial-content {
		margin-top: 20px;
	}

	.author-info {
		margin-top: 15px;
		padding-top: 15px;
	}

	.testimonial-pagination,
	.product-pagination,
	.stores-pagination {
		margin-top: 30px;
	}

	.our-faqs {
		padding: 50px 0;
	}

	.faqs-content {
		margin-bottom: 30px;
	}

	.faq-accordion .accordion-item {
		border-radius: 14px;
		margin-bottom: 20px;
	}

	.faq-accordion .accordion-header .accordion-button,
	.faq-accordion .accordion-item .accordion-body {
		padding: 15px 50px 15px 15px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after {
		right: 15px;
		width: 30px;
		height: 30px;
		font-size: 16px;
	}

	.faqs-image {
		margin: 0;
	}

	.faqs-img img {
		aspect-ratio: 1 / 0.62;
	}

	.faq-cta-box {
		left: 30px;
		bottom: 30px;
	}

	.our-blog {
		padding: 50px 0 20px;
	}

	.post-featured-image,
	.post-item-content {
		margin-bottom: 15px;
	}

	.main-footer {
		padding: 50px 0 0;
	}

	.about-footer {
		margin-bottom: 40px;
	}

	.about-footer-content {
		margin-top: 15px;
	}

	.footer-social-links {
		margin-top: 20px;
	}

	.footer-social-links h3 {
		margin-bottom: 10px;
	}

	.footer-links-box {
		margin: 0;
	}

	.footer-links h3,
	.footer-links p {
		margin-bottom: 15px;
	}

	.footer-links ul li {
		margin-bottom: 10px;
	}

	.footer-contact-list {
		padding-top: 15px;
	}

	.footer-contact-item {
		margin-bottom: 15px;
	}

	.footer-copyright {
		padding: 15px 0;
		margin: 50px 0 0;
	}

	.page-header {
		padding: 115px 0 0px;
	}

	.page-header-box h1 {
		font-size: 42px;
	}

	.our-approach {
		padding: 50px 0;
	}

	.our-apporach-image {
		margin-bottom: 30px;
	}

	.our-apporach-content {
		margin-left: 0;
	}

	.mission-vision-item {
		margin-bottom: 30px;
		padding: 30px;
	}

	.mission-vision-content {
		margin-bottom: 20px;
	}

	.mission-vision-list ul {
		gap: 10px 30px;
	}

	.quality-promise {
		padding: 50px 0;
	}

	.quality-promise-image {
		max-width: 80%;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.company-experience-box {
		top: 20px;
		width: 190px;
		padding: 20px;
	}

	.company-experience-box .icon-box {
		margin-bottom: 20px;
	}

	.company-experience-box .icon-box img {
		max-width: 40px;
	}

	.quality-promise-content {
		margin-left: 0;
	}

	.quality-promise-body {
		margin-bottom: 30px;
	}

	.quality-promise-body-item {
		margin-bottom: 30px;
	}

	.quality-promise-body-item .icon-box {
		height: 45px;
		width: 45px;
		margin-right: 15px;
	}

	.quality-promise-body-item .icon-box img {
		max-width: 22px;
	}

	.quality-promise-body-content {
		width: calc(100% - 60px);
	}

	.quality-promise-body-content h3 {
		margin-bottom: 5px;
	}

	.true-taste {
		padding: 50px 0;
	}

	.true-taste-content {
		margin-bottom: 30px;
	}

	.true-taste-body-item .icon-box {
		height: 45px;
		width: 45px;
		margin-right: 15px;
	}

	.true-taste-body-item .icon-box img {
		max-width: 22px;
	}

	.true-taste-body-content {
		width: calc(100% - 60px);
	}

	.true-taste-body-content h3 {
		margin-bottom: 5px;
	}

	.true-taste-counter-list {
		margin-top: 30px;
	}

	.true-taste-counter-item {
		padding: 20px;
	}

	.true-taste-counter-item h2 {
		font-size: 36px;
		margin-bottom: 10px;
	}

	.true-taste-image-box {
		margin-left: 0;
	}

	.true-taste-img img {
		aspect-ratio: 1 / 0.8;
	}

	.our-journey {
		padding: 50px 0;
	}

	.our-journey .section-title.section-title-center {
		max-width: 100%;
	}

	.journey-item-list {
		gap: 20px;
	}

	.journey-item {
		width: calc(25% - 15px);
		padding: 20px;
	}

	.journey-counter h2 {
		font-size: 36px;
	}

	.journey-list {
		margin-top: 30px;
	}

	.journey-list ul {
		gap: 20px;
	}

	.journey-list ul li {
		width: calc(50% - 10px);
		padding: 10px 15px 10px 30px;
	}

	.journey-list ul li::before {
		left: 15px;
		top: 16px;
	}

	.page-blog {
		padding: 50px 0;
	}

	.page-pagination {
		margin-top: 10px;
	}

	.page-single-post {
		padding: 50px 0;
	}

	.post-single-meta {
		margin-top: 5px;
	}

	.post-single-meta ol li {
		font-size: 16px;
	}

	.post-single-meta ol li i {
		font-size: 16px;
	}

	.post-image {
		margin-bottom: 20px;
	}

	.post-entry h1,
	.post-entry h2,
	.post-entry h3,
	.post-entry h4,
	.post-entry h5,
	.post-entry h6 {
		margin: 0 0 0.417em;
	}

	.post-entry h2 {
		font-size: 30px;
	}

	.post-entry p {
		margin-bottom: 15px;
	}

	.post-entry ol li,
	.post-entry ul li {
		margin-bottom: 10px;
	}

	.post-entry blockquote {
		background-position: 20px 20px;
		background-size: 40px;
		padding: 20px 20px 20px 70px;
		margin-bottom: 20px;
	}

	.post-entry blockquote p {
		font-size: 18px;
	}

	.post-tags {
		margin-bottom: 20px;
	}

	.post-tags .tag-links a {
		padding: 12px 15px;
	}

	.post-social-sharing ul {
		text-align: left;
	}

	.page-features {
		padding: 50px 0 20px;
	}

	.features-item {
		padding: 30px;
	}

	.features-item .icon-box {
		margin-bottom: 15px;
	}

	.features-item-content p {
		margin: 10px 0 0;
	}

	.page-testimonials {
		padding: 50px 0 20px;
	}

	.page-faqs {
		padding: 50px 0;
	}

	.page-single-sidebar {
		position: initial;
		margin: 0 0 30px;
	}

	.page-catagory-list {
		padding: 30px;
		margin-bottom: 30px;
	}

	.page-catagory-list ul li {
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.sidebar-cta-box {
		padding: 30px;
	}

	.sidebar-cta-logo {
		margin-bottom: 20px;
	}

	.sidebar-cta-body {
		margin-top: 20px;
	}

	.page-faqs-catagery .page-single-faqs {
		margin-bottom: 40px;
	}

	.page-contact-us {
		padding: 50px 0;
	}

	.contact-info-list {
		margin-bottom: 50px;
	}

	.contact-info-item {
		width: calc(50% - 15px);
		padding: 20px;
	}

	.contact-info-item .icon-box {
		margin-bottom: 20px;
	}

	.conatct-us-form {
		flex-direction: column-reverse;
	}

	.google-map-iframe,
	.contact-form {
		width: 100%;
	}

	.google-map-iframe iframe {
		height: 450px;
	}

	.contact-form {
		padding: 30px;
	}

	.contact-form form .form-control {
		padding: 12px 15px;
	}

	.contact-form form .btn-default {
		padding: 14px;
	}

	.error-page {
		padding: 50px 0;
	}

	.error-page-image {
		margin-bottom: 20px;
	}

	.error-page-image img {
		max-width: 80%;
	}

	.error-page-content-body p,
	.error-page-content .section-title {
		margin-bottom: 15px;
	}
}

@media only screen and (max-width: 767px) {

	.section-row {
		margin-bottom: 20px;
	}

	.section-title h1 {
		font-size: 28px;
	}

	.section-title h2 {
		font-size: 26px;
	}

	.section-title p {
		margin-top: 10px;
	}

	.section-title-content {
		margin-top: 10px;
	}

	.satisfy-client-content {
		width: 100%;
	}

	.scrolling-ticker-box {
		gap: 15px;
	}

	.scrolling-content span {
		font-size: 14px;
	}

	.scrolling-content span img {
		width: 14px;
	}

	.hero-image {
		max-width: 100%;
	}

	.contact-us-circle {
		top: calc(50% - 35px);
	}

	.contact-us-circle a {
		border-width: 5px;
	}

	.contact-us-circle a img {
		max-width: 100px;
	}

	.about-image-item .icon-box {
		margin-bottom: 20px;
	}

	.about-image-item .icon-box img {
		max-width: 40px;
	}

	.about-image-item-content h2 {
		font-size: 26px;
		margin-bottom: 10px;
	}

	.about-image-item-content h3 {
		font-size: 14px;
	}

	.about-us-body {
		padding-left: 20px;
	}

	.about-body-item:before {
		left: -23px;
	}

	.about-body-item .icon-box img {
		max-width: 34px;
	}

	.about-body-content h3 {
		font-size: 18px;
	}

	.product-image {
		margin-bottom: 20px;
	}

	.product-content h3,
	.product-price h3 {
		font-size: 18px;
	}

	.product-price h3 span {
		font-size: 16px;
	}

	.why-choose-list {
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.why-choose-list ul {
		gap: 10px;
	}

	.why-choose-list ul li {
		width: 100%;
	}

	.why-choose-body {
		display: block;
	}

	.why-choose-experience {
		max-width: 100%;
		padding: 15px;
	}

	.why-choose-experience p {
		margin-top: 10px;
	}

	.why-choose-item-list {
		width: 100%;
		border-top: 1px solid var(--divider-color);
		margin: 20px 0 0;
		padding: 20px 0 0;
		border-left: none;
	}

	.why-choose-item h3 {
		font-size: 18px;
	}

	.why-choose-img-2 figure img {
		max-width: 200px;
	}

	.why-choose-counter-list {
		margin-top: 20px;
		padding-top: 20px;
	}

	.why-choose-counter-item {
		width: calc(50% - 10px);
	}

	.why-choose-counter-item h2 {
		font-size: 26px;
	}

	.offer-item {
		width: 100%;
	}

	.offer-item-image {
		margin-bottom: 15px;
	}

	.offer-item-content h3 {
		font-size: 18px;
	}

	.benefit-item {
		margin-bottom: 20px;
	}

	.our-benefits-image {
		margin: 30px auto;
		max-width: 100%;
	}

	.intro-video-box,
	.intro-video-box video {
		height: 350px;
	}

	.ingredients-body h3 {
		font-size: 18px;
	}

	.ingredients-body ul {
		gap: 10px;
		padding: 15px 15px 15px 35px;
	}

	.ingredients-body ul li {
		width: 100%;
	}

	.ingredients-image-box {
		display: block;
	}

	.our-ingredients-image img {
		aspect-ratio: 1 / 0.65;
	}

	.ingredient-item-list {
		max-width: 100%;
		padding: 20px;
		margin: 20px 0 0;
	}

	.ingredient-item {
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.ingredient-item .icon-box {
		margin-right: 10px;
	}

	.ingredient-item-content {
		width: calc(100% - 60px);
	}

	.ingredient-item-content h3 {
		font-size: 18px;
	}

	.premium-ingredient-item-list {
		gap: 20px;
		margin-top: 30px;
		padding-top: 30px;
	}

	.premium-ingredient-item {
		width: 100%;
	}

	.premium-ingredient-item .icon-box {
		margin-bottom: 15px;
	}

	.premium-ingredient-item-content h3 {
		font-size: 18px;
	}

	.sale-now-box .section-title p {
		max-width: 100%;
	}

	.special-saving-content-body {
		gap: 20px;
		margin-top: 30px;
	}

	.special-saving-content-body .countdown-text {
		width: calc(25% - 15px);
		padding: 15px 10px;
		border-radius: 12px;
	}

	.special-saving-content-body .countdown-text::before {
		right: -14px;
		font-size: 30px;
	}

	.countdown-text h3 {
		font-size: 28px;
	}

	.countdown-text p {
		font-size: 14px;
		margin-top: 5px;
	}

	.testimonial-item {
		padding: 20px;
	}

	.testimonial-quote {
		margin: -50px 0 15px;
	}

	.testimonial-content {
		margin-top: 15px;
	}

	.author-info .author-image img {
		max-width: 50px;
	}

	.author-info .author-content h3 {
		font-size: 18px;
	}

	.faq-accordion .accordion-header .accordion-button {
		font-size: 16px;
	}

	.faq-accordion .accordion-item .accordion-body {
		padding: 15px;
	}

	.faq-accordion .accordion-item .accordion-body p {
		font-size: 14px;
	}

	.faqs-img img {
		aspect-ratio: 1 / 1.02;
	}

	.faq-cta-box {
		left: 20px;
		bottom: 20px;
		padding: 15px;
	}

	.review-content {
		margin-top: 15px;
	}

	.review-content h3 {
		font-size: 18px;
	}

	.post-item-content h2 {
		font-size: 18px;
	}

	.about-footer {
		margin-bottom: 30px;
	}

	.footer-links {
		max-width: 55%;
	}

	.footer-links.footer-contact-links {
		max-width: 100%;
	}

	.footer-links h3 {
		font-size: 18px;
	}

	.footer-contact-item {
		margin-bottom: 10px;
	}

	.footer-copyright {
		margin: 30px 0 0;
	}

	.footer-copyright-box {
		gap: 10px;
		flex-direction: column;
	}

	.page-header-box h1 {
		font-size: 28px;
	}

	.mission-vision-item {
		padding: 20px;
	}

	.mission-vision-content h3 {
		font-size: 18px;
	}

	.mission-vision-list ul li {
		width: 100%;
	}

	.quality-promise-image {
		max-width: 100%;
	}

	.company-experience-box {
		width: 145px;
		padding: 15px;
	}

	.company-experience-box .icon-box {
		margin-bottom: 15px;
	}

	.company-experience-content h3 {
		font-size: 18px;
	}

	.quality-promise-body-content h3 {
		font-size: 18px;
	}

	.true-taste-body-content h3 {
		font-size: 18px;
	}

	.true-taste-counter-list {
		gap: 20px;
	}

	.true-taste-counter-item {
		width: calc(50% - 10px);
		padding: 15px;
	}

	.true-taste-counter-item h2 {
		font-size: 26px;
	}

	.journey-item {
		width: calc(50% - 10px);
	}

	.journey-counter h2 {
		font-size: 26px;
	}

	.journey-list ul {
		gap: 15px;
	}

	.journey-list ul li {
		width: 100%;
	}

	.post-image img {
		aspect-ratio: 1 / 0.7;
	}

	.post-entry blockquote {
		background-position: 15px 15px;
		padding: 60px 15px 15px 15px;
	}

	.post-entry blockquote p {
		font-size: 16px;
	}

	.post-entry h2 {
		font-size: 26px;
	}

	.tag-links {
		font-size: 18px;
	}

	.features-item {
		padding: 30px;
	}

	.features-item-content h3 {
		font-size: 18px;
	}

	.page-catagory-list {
		padding: 20px;
	}

	.sidebar-cta-box {
		padding: 20px;
	}

	.sidebar-cta-contact-item {
		margin-bottom: 15px;
	}

	.sidebar-cta-contact-content p {
		font-size: 16px;
	}

	.contact-info-list {
		gap: 20px;
	}

	.contact-info-item {
		width: 100%;
	}

	.contact-info-item .icon-box {
		margin-bottom: 15px;
	}

	.contact-info-content h3 {
		font-size: 18px;
	}

	.contact-form {
		padding: 20px;
	}

	.google-map-iframe iframe {
		height: 350px;
	}
}

/* .stores-slider a {
display: flex;
align-items: center;
justify-content: center;
}

.stores-slider img {
border-radius: 50%;
background-color: #ffffff;
} */

.available-store {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: fit-content;
}

.available-store img {
	width: 65px;
	border-radius: 50%;
	background-color: #ffffff;
	transition: 0.5s;
}

.available-store a:hover img {
	transform: scale(1.1);
}


.legacy-section {
	font-family: var(--default-font);
	background-color: var(--bg-color);
	color: var(--text-color);
	padding: 100px 0;
}

/* Timeline vertical center spine */
@media (min-width: 768px) {
	.timeline-container::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 2px;
		background: var(--divider-color);
		transform: translateX(-50%);
	}

	.structure-half {
		width: 45%;
	}
}

/* Mobile defaults */
@media (max-width: 767.98px) {
	.structure-half {
		width: 100%;
	}
	.timeline-content {
		text-align: left !important;
	}
}

/* Timeline Center Node Dots */
.timeline-badge {
	width: 20px;
	height: 20px;
	z-index: 2;
	background-color: var(--white-color);
	border: 4px solid var(--secondary-color);
	transition: all 0.3s ease-in-out;
}

.timeline-date {
	color: var(--primary-color);
}

/* Custom Card Styling & Hover Effects */
.timeline-content.card {
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	background: var(--white-color);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:hover .timeline-content.card {
	transform: translateY(-5px);
	box-shadow: 0 1rem 3rem rgba(104, 21, 0, 0.075) !important; /* uses primary color transparency */
}

.timeline-item:hover .timeline-badge {
	background-color: var(--tertiary-color);
	transform: scale(1.2);
}

.wpcf7 form .wpcf7-response-output {
	margin: 0 !important;
}

.wpcf7-response-output {
	color: #ffffff !important;
}


/************************************/
/***   27. WooCommerce css        ***/
/************************************/

/* ---- Cart Icon in Header ---- */
.header-contact-btn {
	display: flex;
	align-items: center;
	gap: 16px;
}

.bhavo-cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	border: none;
	color: var(--white-color);
	font-size: 18px;
	text-decoration: none;
	overflow: hidden;
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.bhavo-cart-icon::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: -15%;
	right: 0;
	width: 0;
	height: 106%;
	background: var(--white-color);
	transform: skew(30deg);
	transition: all 0.4s ease-in-out;
	z-index: -1;
}

.bhavo-cart-icon:hover {
	color: var(--primary-color);
}

.bhavo-cart-icon:hover::after {
	width: 130%;
	transform: skew(0deg);
	left: -10%;
}

.bhavo-cart-icon .fa-bag-shopping {
	position: relative;
	z-index: 1;
	font-size: 17px;
}

.bhavo-cart-wrapper {
	position: relative;
	display: inline-flex;
}

.bhavo-cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	background-color: var(--secondary-color);
	color: var(--white-color);
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0 3px;
	pointer-events: none;
	transition: transform 0.3s ease;
}

.bhavo-cart-count:empty {
	display: none;
}

.bhavo-cart-icon:hover .bhavo-cart-count {
	transform: scale(1.1);
}

/* ---- Coming Soon Badge ---- */
.bhavo-coming-soon-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
}

.bhavo-coming-soon-badge span {
	display: inline-block;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: var(--white-color);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 30px;
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(104, 21, 0, 0.25);
}

.bhavo-coming-soon-badge.inline-badge {
	position: static;
	display: inline-block;
	margin-bottom: 12px;
}

.bhavo-coming-soon-badge.inline-badge span {
	font-size: 13px;
	padding: 6px 18px;
}

/* Card product must be relative for badge positioning */
.card-product {
	position: relative;
}

/* ---- Coming Soon Button (disabled state) ---- */
.btn-add-to-card.btn-coming-soon {
	cursor: not-allowed;
	opacity: 0.65;
	pointer-events: none;
	background-color: var(--primary-color);
	color: var(--white-color);
}

/* ---- Single Product Page: Add to Cart ---- */
.bhavo-single-atc,
.bhavo-single-coming-soon {
	margin-top: 24px;
}

.bhavo-cart-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.bhavo-qty-wrap label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.bhavo-qty-controls {
	display: flex;
	align-items: center;
	border: 2px solid var(--primary-color);
	border-radius: 8px;
	overflow: hidden;
	width: fit-content;
}

.bhavo-qty-btn {
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bhavo-qty-btn:hover {
	background-color: var(--primary-color);
	color: var(--white-color);
}

.bhavo-qty-input {
	width: 60px;
	height: 40px;
	border: none;
	border-left: 2px solid var(--primary-color);
	border-right: 2px solid var(--primary-color);
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
	-moz-appearance: textfield;
}

.bhavo-qty-input::-webkit-inner-spin-button,
.bhavo-qty-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
}

.bhavo-atc-submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	cursor: pointer;
	border: none;
	font-size: 15px;
}

/* ---- WooCommerce Page Layout ---- */
.bhavo-wc-page {
	padding: 60px 0;
}

/* ---- WooCommerce Cart Page ---- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	width: 100%;
}

/* Cart table */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 40px;
}

.woocommerce table.shop_table th {
	background-color: var(--primary-color);
	color: var(--white-color);
	padding: 14px 18px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border: none;
}

.woocommerce table.shop_table td {
	padding: 16px 18px;
	border-bottom: 1px solid rgba(104, 21, 0, 0.1);
	vertical-align: middle;
	color: var(--text-color);
}

.woocommerce table.shop_table .product-name a {
	color: var(--primary-color);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.3s;
}

.woocommerce table.shop_table .product-name a:hover {
	color: var(--secondary-color);
}

.woocommerce table.shop_table img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
}

/* Cart totals */
.woocommerce-cart .cart-collaterals {
	margin-top: 30px;
}

.woocommerce .cart_totals,
.woocommerce-page .cart_totals {
	background: #fdf5f0;
	border-radius: 12px;
	padding: 30px;
	border: 1px solid rgba(104, 21, 0, 0.12);
}

.woocommerce .cart_totals h2,
.woocommerce-page .cart_totals h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 20px;
}

.woocommerce .cart_totals table th {
	background: none;
	color: var(--text-color);
	font-weight: 600;
	padding: 10px 0;
	border-bottom: 1px solid rgba(104, 21, 0, 0.1);
}

.woocommerce .cart_totals table td {
	padding: 10px 0;
	border-bottom: 1px solid rgba(104, 21, 0, 0.1);
}

/* Cart buttons */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	padding: 16px 30px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: var(--white-color);
	text-align: center;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: all 0.3s ease;
	margin-top: 16px;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(104, 21, 0, 0.3);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--primary-color);
	color: var(--white-color);
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--secondary-color);
	color: var(--white-color);
}

/* Quantity inputs in cart */
.woocommerce .quantity .qty {
	width: 65px;
	height: 40px;
	border: 2px solid var(--primary-color);
	border-radius: 6px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	padding: 0 8px;
}

/* Remove item */
.woocommerce table.cart a.remove {
	color: var(--secondary-color) !important;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s;
}

.woocommerce table.cart a.remove:hover {
	color: var(--primary-color) !important;
	background: none;
}

/* ---- Checkout Page ---- */
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.woocommerce-checkout .form-row {
	box-sizing: border-box !important;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 -10px;
}
.woocommerce-checkout .form-row {
	padding: 0 10px;
	width: 100%;
}
.woocommerce-checkout .form-row.form-row-first,
.woocommerce-checkout .form-row.form-row-last {
	width: 50%;
}

.woocommerce-checkout .form-row {
	margin-bottom: 16px;
}

.woocommerce-checkout .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--primary-color);
	margin-bottom: 6px;
}

.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid rgba(104, 21, 0, 0.2);
	border-radius: 8px;
	font-size: 15px;
	color: var(--text-color);
	background: #ffffff;
	transition: border-color 0.3s, box-shadow 0.3s;
	outline: none;
	-webkit-appearance: none;
}

/* Custom dropdown arrow for selects since we removed native appearance */
.woocommerce-checkout .form-row select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23681500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	padding-right: 40px;
}

.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(104, 21, 0, 0.1);
}

/* Style required asterisks */
.woocommerce-checkout .form-row label abbr.required {
	color: #e65757;
	text-decoration: none;
	border: none;
	font-weight: 700;
}

/* Wrap Billing, Shipping, and Additional Fields in beautiful cards */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background: #ffffff;
	padding: 30px;
	border-radius: 12px;
	border: 1px solid rgba(104, 21, 0, 0.08);
	box-shadow: 0 4px 12px rgba(104, 21, 0, 0.03);
	margin-bottom: 30px;
}

/* Section headings in checkout */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	padding-bottom: 12px;
	border-bottom: 2px solid rgba(104, 21, 0, 0.15);
	margin-bottom: 24px;
	margin-top: 0;
}

.woocommerce-checkout .footer-links h3 {
	color: var(--white-color);
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 20px;
}

/* Special styling for "Ship to a different address" checkbox heading */
.woocommerce-checkout h3#ship-to-different-address {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 10px;
}
.woocommerce-checkout h3#ship-to-different-address label {
	display: flex !important;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	font-size: 18px;
}
.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--primary-color);
	cursor: pointer;
}

/* Order review box */
.woocommerce-checkout form.checkout #order_review {
    background: #fdf5f0;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid rgba(104, 21, 0, 0.12);
    box-shadow: 0 8px 24px rgba(104, 21, 0, 0.05);
    margin-top: 40px;
}

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-checkout-review-order-table th {
	background-color: var(--primary-color);
	color: var(--white-color);
	padding: 12px 16px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.woocommerce-checkout-review-order-table td {
	padding: 14px 16px;
	border-bottom: 1px solid rgba(104, 21, 0, 0.1);
}

/* Payment section */
#payment {
	background: transparent;
	padding: 0;
	margin-top: 25px;
	border: none;
}

#payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

#payment ul.payment_methods li {
	padding: 14px 16px;
	border-radius: 8px;
	border: 2px solid rgba(104, 21, 0, 0.12);
	margin-bottom: 10px;
	transition: border-color 0.2s;
}

#payment ul.payment_methods li:hover {
	border-color: var(--primary-color);
}

#payment ul.payment_methods li label {
	font-weight: 600;
	color: var(--text-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
}

#place_order {
	display: block;
	width: 100%;
	padding: 18px 30px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: var(--white-color);
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: all 0.3s ease;
	margin-top: 20px;
}

#place_order:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(104, 21, 0, 0.35);
}

/* ---- My Account Page ---- */
.woocommerce-MyAccount-navigation {
	margin-bottom: 30px;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.woocommerce-MyAccount-navigation ul li a {
	display: inline-block;
	padding: 10px 20px;
	border: 2px solid var(--primary-color);
	border-radius: 6px;
	color: var(--primary-color);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: all 0.3s;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
	background-color: var(--primary-color);
	color: var(--white-color);
}

/* WC notices */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	border-radius: 8px;
	padding: 14px 20px;
	margin-bottom: 20px;
	font-size: 14px;
	border-left: 4px solid var(--primary-color);
	background: #fdf5f0;
	color: var(--text-color);
}

.woocommerce-error {
	border-left-color: #e65757;
	background: #fff5f5;
}

.woocommerce-info {
	border-left-color: var(--tertiary-color);
}

/* Added to cart notification */
.woocommerce-message a.button {
	margin-right: 10px;
	background-color: var(--primary-color);
}

/* ---- WooCommerce order received / thank you ---- */
.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-size: 24px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 20px;
}

.woocommerce ul.order_details {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 30px;
}

.woocommerce ul.order_details li {
	background: #fdf5f0;
	padding: 16px 20px;
	border-radius: 8px;
	font-weight: 600;
	border: 1px solid rgba(104, 21, 0, 0.12);
	font-size: 14px;
}

.woocommerce ul.order_details li strong {
	display: block;
	color: var(--primary-color);
	font-size: 18px;
	margin-top: 4px;
}

/* Beautiful Modern Checkout cols layout */
@media (min-width: 992px) {
	.woocommerce-checkout form.checkout {
		display: flex;
		flex-wrap: wrap;
		gap: 40px;
		align-items: flex-start;
	}
	
	.woocommerce-checkout form.checkout .col2-set {
		width: 58%;
		flex: 0 0 58%;
		display: block !important;
	}
	
	.woocommerce-checkout form.checkout .col2-set .col-1,
	.woocommerce-checkout form.checkout .col2-set .col-2 {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	
	.woocommerce-checkout form.checkout #order_review_heading {
		display: none;
	}
	
	.woocommerce-checkout form.checkout #order_review {
		width: 38%;
		flex: 0 0 38%;
		position: sticky;
		top: 120px;
		margin-top: 0;
	}
}

@media (max-width: 768px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
	}

	.woocommerce-MyAccount-navigation ul li a {
		width: 100%;
		text-align: center;
	}
}



/* ---- WooCommerce Add to Cart / View Cart Animation Overrides ---- */

/* Hide default WooCommerce view cart appended link */
a.added_to_cart.wc-forward {
    display: none !important;
}

/* BULLETPROOF Button Lockdown: Prevent WooCommerce from ever changing the shape, size, or layout */
.woocommerce a.button.btn-add-to-card,
.woocommerce a.button.btn-add-to-card.loading,
.woocommerce a.button.btn-add-to-card.added,
.btn-add-to-card,
.btn-add-to-card.loading,
.btn-add-to-card.added,
.btn-add-to-card.active {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--primary) !important;
    transform: none !important;
    transition: background-color 0.3s ease, color 0.3s ease !important; /* Stops width/height animations instantly */
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* Completely kill WC spinner and checkmark */
.woocommerce a.button.btn-add-to-card.loading::after,
.woocommerce a.button.btn-add-to-card.added::after,
.woocommerce a.button.btn-add-to-card.loading::before,
.woocommerce a.button.btn-add-to-card.added::before,
.btn-add-to-card.loading::after,
.btn-add-to-card.added::after,
.btn-add-to-card.loading::before,
.btn-add-to-card.added::before {
    display: none !important;
    content: none !important;
}

/* Force 'hover out' text animation on the 'added' button even if user is still hovering, BUT keep the button's background/colors intact! */
.btn-add-to-card.added:hover .text.text-1 {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.btn-add-to-card.added:hover .text.text-2 {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(100%) !important;
}

/* Override theme JS which adds .active class on click so it retains hover colors */
.woocommerce a.button.btn-add-to-card.active,
.btn-add-to-card.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* ---- Custom Cart Quantity +/- Buttons ---- */

/* Hide WooCommerce default update cart button since we auto-update on quantity change */
button[name="update_cart"] {
    display: none !important;
}

/* Completely collapse the empty actions row to remove extra space and lines */
.woocommerce-cart-form table.shop_table td.actions {
    padding: 0 !important;
    border: none !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    visibility: hidden !important;
}
.woocommerce-cart-form table.shop_table tr:has(> td.actions) {
    border: none !important;
    height: 0 !important;
}

/* Remove bottom border from the last product item for a clean finish */
.woocommerce-cart-form table.shop_table tr.cart_item:last-of-type td {
    border-bottom: none !important;
}

/* Style the custom +/- buttons wrapper */
.bhavo-wc-qty-wrapper {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(104, 21, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    height: 40px;
    max-width: 110px;
}
.bhavo-wc-qty-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 18px;
    width: 35px;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.bhavo-wc-qty-btn:hover {
    background: var(--primary);
    color: #fff;
}
.bhavo-wc-qty-wrapper input.qty {
    border: none !important;
    text-align: center !important;
    width: 40px !important;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    -moz-appearance: textfield;
    font-size: 16px;
    color: var(--body-color);
}
.bhavo-wc-qty-wrapper input.qty:focus {
    outline: none !important;
    box-shadow: none !important;
}
.bhavo-wc-qty-wrapper input.qty::-webkit-outer-spin-button,
.bhavo-wc-qty-wrapper input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- WooCommerce Cart Page: 2-Column Layout (Desktop) ---- */
@media (min-width: 992px) {
    /* Use :has() to target the container regardless of body classes, plus fallback body classes */
    body.woocommerce-cart .woocommerce,
    .bhavo-wc-page .woocommerce,
    .woocommerce:has(.woocommerce-cart-form) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }
    
    .woocommerce-notices-wrapper,
    .woocommerce-before-cart {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .woocommerce-cart-form {
        width: 62% !important;
        flex: 0 0 62% !important;
        padding-right: 30px !important; 
        margin-bottom: 40px !important;
        max-height: 550px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        
        /* Hide scrollbar for Firefox */
        scrollbar-width: none !important;
        /* Hide scrollbar for IE/Edge */
        -ms-overflow-style: none !important;
    }
    
    /* Hide scrollbar for Chrome, Safari and Edge */
    .woocommerce-cart-form::-webkit-scrollbar {
        display: none !important;
    }

    .woocommerce-cart-form table.shop_table thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    .cart-collaterals {
        width: 35% !important;
        flex: 0 0 35% !important;
        margin-top: 0 !important;
        position: sticky !important;
        top: 120px !important; 
    }
    
    .cart-collaterals .cart_totals {
        float: none !important;
        width: 100% !important;
    }
}

/* Stack on Tablet and Mobile */
@media (max-width: 991px) {
    .cart-collaterals .cart_totals {
        float: none !important;
        width: 100% !important;
        margin-top: 40px !important;
    }
}

/* Hide default cart table coupon field (we use JS to place it above checkout) */
.woocommerce-cart-form .coupon,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-coupon { 
    display: none !important; 
}

/* ---- Prevent Mobile Screen Overflow & Fix Cart Layout ---- */
@media (max-width: 767px) {
    /* 1. Transform Cart Table into a Stacked Card Layout */
    .woocommerce-cart-form table.shop_table, 
    .woocommerce-cart-form table.shop_table tbody, 
    .woocommerce-cart-form table.shop_table tr, 
    .woocommerce-cart-form table.shop_table td {
        display: block !important;
        width: 100% !important;
    }
    
    .woocommerce-cart-form table.shop_table thead {
        display: none !important;
    }
    
    /* Each cart item becomes a 'Card' */
    .woocommerce-cart-form table.shop_table tr.cart_item {
        border: 1px solid rgba(104, 21, 0, 0.1) !important;
        border-radius: 12px;
        margin-bottom: 20px;
        padding: 20px 15px !important;
        position: relative;
        background: #fff;
    }
    
    /* Align mobile labels on left, values on right */
    .woocommerce-cart-form table.shop_table td {
        text-align: right !important;
        padding: 10px 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
    
    /* Inject column headers as labels via WooCommerce data-title */
    .woocommerce-cart-form table.shop_table td::before {
        content: attr(data-title);
        font-weight: 700;
        color: var(--primary);
        text-transform: uppercase;
        font-size: 12px;
    }
    
    /* Special Handling: Delete Button (Top Right) */
    .woocommerce-cart-form table.shop_table td.product-remove {
        position: absolute !important;
        top: 10px;
        right: 15px;
        width: auto !important;
        padding: 0 !important;
        z-index: 10;
        justify-content: flex-end !important;
    }
    .woocommerce-cart-form table.shop_table td.product-remove::before {
        display: none !important;
    }
    
    /* Special Handling: Product Image (Centered) */
    .woocommerce-cart-form table.shop_table td.product-thumbnail {
        justify-content: center !important;
        padding-bottom: 15px !important;
        padding-top: 0 !important;
    }
    .woocommerce-cart-form table.shop_table td.product-thumbnail::before {
        display: none !important;
    }
    .woocommerce-cart-form table.shop_table td.product-thumbnail img {
        width: 90px !important;
        max-width: 90px !important;
        height: auto !important;
        border-radius: 8px;
    }

    /* Keep actions row normal */
    .woocommerce-cart-form table.shop_table tr:last-child {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
    }
    
    /* 2. Ensure totals box doesn't push off-screen */
    .cart-collaterals,
    .cart-collaterals .cart_totals {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 3. Stack the custom coupon field so it fits nicely on small phones */
    .bhavo-custom-coupon > div {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    #bhavo_coupon_code,
    #bhavo_apply_coupon {
        width: 100% !important;
        flex: none !important;
    }
}

/* ---- Custom Centered Button (No Arrow) ---- */
.btn-default.btn-centered {
    padding: 15px 30px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-default.btn-centered::before {
    display: none !important;
}

/* Ensure WooCommerce checkout button doesn't override our theme classes */
.woocommerce a.button.checkout-button.btn-default {
    background-color: transparent !important;
    color: var(--white-color) !important;
    display: flex !important;
    margin-top: 20px !important;
    transform: none !important;
    top: 0 !important;
}
.woocommerce a.button.checkout-button.btn-default:hover {
    color: var(--primary-color) !important;
    transform: none !important;
    top: 0 !important;
}
.woocommerce a.button.checkout-button.btn-default::after {
    background: var(--primary-color);
}
.woocommerce a.button.checkout-button.btn-default.btn-highlighted::after {
    background: var(--white-color);
}
.woocommerce a.button.checkout-button.btn-default.btn-highlighted {
    background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%) !important;
}

/* Hide redundant 'View Cart' button inside success messages when already on the Cart page */
.woocommerce-cart .woocommerce-message .button.wc-forward,
.woocommerce-cart .woocommerce-message a.button {
    display: none !important;
}

/* =========================================================
   27. WooCommerce Thank You / Order Received Page
   ========================================================= */

/* Fix layout squish caused by checkout flex container overriding */
.woocommerce-checkout.woocommerce-order-received .woocommerce-order {
    width: 100% !important;
    display: block !important;
}

.bhavo-thankyou-wrap {
    padding: 20px 0 60px;
    max-width: 850px;
    margin: 0 auto;
}

.bhavo-order-box {
    animation: bhavo_fadeUp 0.6s ease forwards;
}

@keyframes bhavo_fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Success checkmark pulse */
.bhavo-order-success .fa-circle-check {
    animation: bhavo_check_pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes bhavo_check_pop {
    0%   { transform: scale(0); opacity: 0; }
    80%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Order summary card */
.bhavo-order-summary h3 {
    display: flex;
    align-items: center;
}

/* WooCommerce order overview list — reset WC defaults */
.bhavo-thankyou-wrap .woocommerce-order-overview {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bhavo-thankyou-wrap .woocommerce-order-overview li {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
}

/* ---------------------------------------------------------
   Native WooCommerce Order Details Table 
   --------------------------------------------------------- */
.bhavo-thankyou-wrap h2 {
    font-size: 26px;
    color: var(--primary-color);
    margin: 50px 0 25px;
    font-weight: 700;
}

.bhavo-thankyou-wrap .woocommerce-table--order-details {
    width: 100%;
    margin: 0 auto 40px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(104,21,0,0.12);
    border-radius: 12px;
    overflow: hidden;
}
.bhavo-thankyou-wrap .woocommerce-table--order-details thead th {
    background: var(--primary-color);
    color: #fff;
    padding: 18px 25px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}
.bhavo-thankyou-wrap .woocommerce-table--order-details tbody td,
.bhavo-thankyou-wrap .woocommerce-table--order-details tfoot th,
.bhavo-thankyou-wrap .woocommerce-table--order-details tfoot td {
    padding: 16px 25px;
    border-bottom: 1px solid rgba(104,21,0,0.08);
    color: var(--body-color);
    background: #fff;
}
.bhavo-thankyou-wrap .woocommerce-table--order-details tfoot tr:last-child th,
.bhavo-thankyou-wrap .woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    color: var(--primary-color);
    background: #fdf5f0;
}
.bhavo-thankyou-wrap .woocommerce-table--order-details .wc-item-meta {
    font-size: 13px;
    margin-top: 8px;
    color: #777;
}

/* ---------------------------------------------------------
   Native WooCommerce Addresses Section 
   --------------------------------------------------------- */
.bhavo-thankyou-wrap .woocommerce-customer-details {
    margin: 0 auto 30px;
}

.bhavo-thankyou-wrap .woocommerce-customer-details .col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.bhavo-thankyou-wrap .woocommerce-customer-details .col2-set .col-1,
.bhavo-thankyou-wrap .woocommerce-customer-details .col2-set .col-2 {
    flex: 1 1 calc(50% - 15px);
    width: 100% !important; /* Override checkout float widths */
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bhavo-thankyou-wrap .woocommerce-customer-details address {
    background: #fdf5f0;
    border: 1px solid rgba(104,21,0,0.12);
    border-radius: 12px;
    padding: 25px;
    font-style: normal;
    color: var(--body-color);
    line-height: 1.8;
    height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .bhavo-thankyou-wrap .woocommerce-customer-details .col2-set .col-1,
    .bhavo-thankyou-wrap .woocommerce-customer-details .col2-set .col-2 {
        flex: 1 1 100%;
    }
    .bhavo-thankyou-wrap .woocommerce-table--order-details thead th,
    .bhavo-thankyou-wrap .woocommerce-table--order-details tbody td,
    .bhavo-thankyou-wrap .woocommerce-table--order-details tfoot th,
    .bhavo-thankyou-wrap .woocommerce-table--order-details tfoot td {
        padding: 15px;
    }
}
@media (max-width: 600px) {
    .bhavo-order-summary {
        padding: 20px !important;
    }
    .bhavo-thankyou-wrap .bhavo-order-box {
        padding: 30px 10px !important;
    }
    .bhavo-order-actions {
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* =========================================================
   28. WooCommerce Checkout — Inline Field Error Messages
   ========================================================= */

/* Inline error span injected below each invalid input */
.bhavo-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background-color: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #fee2e2;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.05);
    animation: bhavoErrorFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.bhavo-field-error::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23dc2626' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.bhavo-field-error strong {
    font-weight: 700;
    color: #7f1d1d;
}

@keyframes bhavoErrorFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Red border on the input/select of an invalid form-row */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid input[type="text"],
.woocommerce-checkout .form-row.woocommerce-invalid input[type="email"],
.woocommerce-checkout .form-row.woocommerce-invalid input[type="tel"],
.woocommerce-checkout .form-row.woocommerce-invalid input[type="number"],
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12) !important;
}

/* Hide the floating WooCommerce error notice on checkout
   (JS will show errors inline; this is a CSS safety net) */
.woocommerce-checkout .woocommerce-NoticeGroup-checkout:not([style*="display"]) ul.woocommerce-error {
    /* keep visible until JS kicks in */
}

/* Hide WooCommerce core native inline error text to prevent duplicates 
   with our custom styled .bhavo-field-error */
.bhavo-order-summary h3 {
    display: flex;
    align-items: center;
}

/* WooCommerce order overview list — reset WC defaults */
.bhavo-thankyou-wrap .woocommerce-order-overview {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.bhavo-thankyou-wrap .woocommerce-order-overview li {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
}

/* ---------------------------------------------------------
   Native WooCommerce Order Details Table 
   --------------------------------------------------------- */
.bhavo-thankyou-wrap h2 {
    font-size: 26px;
    color: var(--primary-color);
    margin: 50px 0 25px;
    font-weight: 700;
}

.bhavo-thankyou-wrap .woocommerce-table--order-details {
    width: 100%;
    margin: 0 auto 40px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(104,21,0,0.12);
    border-radius: 12px;
    overflow: hidden;
}
.bhavo-thankyou-wrap .woocommerce-table--order-details thead th {
    background: var(--primary-color);
    color: #fff;
    padding: 18px 25px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
}
.bhavo-thankyou-wrap .woocommerce-table--order-details tbody td,
.bhavo-thankyou-wrap .woocommerce-table--order-details tfoot th,
.bhavo-thankyou-wrap .woocommerce-table--order-details tfoot td {
    padding: 16px 25px;
    border-bottom: 1px solid rgba(104,21,0,0.08);
    color: var(--body-color);
    background: #fff;
}
.bhavo-thankyou-wrap .woocommerce-table--order-details tfoot tr:last-child th,
.bhavo-thankyou-wrap .woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    color: var(--primary-color);
    background: #fdf5f0;
}
.bhavo-thankyou-wrap .woocommerce-table--order-details .wc-item-meta {
    font-size: 13px;
    margin-top: 8px;
    color: #777;
}

/* ---------------------------------------------------------
   Native WooCommerce Addresses Section 
   --------------------------------------------------------- */
.bhavo-thankyou-wrap .woocommerce-customer-details {
    margin: 0 auto 30px;
}

.bhavo-thankyou-wrap .woocommerce-customer-details .col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.bhavo-thankyou-wrap .woocommerce-customer-details .col2-set .col-1,
.bhavo-thankyou-wrap .woocommerce-customer-details .col2-set .col-2 {
    flex: 1 1 calc(50% - 15px);
    width: 100% !important; /* Override checkout float widths */
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bhavo-thankyou-wrap .woocommerce-customer-details address {
    background: #fdf5f0;
    border: 1px solid rgba(104,21,0,0.12);
    border-radius: 12px;
    padding: 25px;
    font-style: normal;
    color: var(--body-color);
    line-height: 1.8;
    height: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .bhavo-thankyou-wrap .woocommerce-customer-details .col2-set .col-1,
    .bhavo-thankyou-wrap .woocommerce-customer-details .col2-set .col-2 {
        flex: 1 1 100%;
    }
    .bhavo-thankyou-wrap .woocommerce-table--order-details thead th,
    .bhavo-thankyou-wrap .woocommerce-table--order-details tbody td,
    .bhavo-thankyou-wrap .woocommerce-table--order-details tfoot th,
    .bhavo-thankyou-wrap .woocommerce-table--order-details tfoot td {
        padding: 15px;
    }
}
@media (max-width: 600px) {
    .bhavo-order-summary {
        padding: 20px !important;
    }
    .bhavo-thankyou-wrap .bhavo-order-box {
        padding: 30px 10px !important;
    }
    .bhavo-order-actions {
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* =========================================================
   28. WooCommerce Checkout — Inline Field Error Messages
   ========================================================= */

/* Inline error span injected below each invalid input */
.bhavo-field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background-color: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #fee2e2;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.05);
    animation: bhavoErrorFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.bhavo-field-error::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23dc2626' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.bhavo-field-error strong {
    font-weight: 700;
    color: #7f1d1d;
}

@keyframes bhavoErrorFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Red border on the input/select of an invalid form-row */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid input[type="text"],
.woocommerce-checkout .form-row.woocommerce-invalid input[type="email"],
.woocommerce-checkout .form-row.woocommerce-invalid input[type="tel"],
.woocommerce-checkout .form-row.woocommerce-invalid input[type="number"],
.woocommerce-checkout .form-row.woocommerce-invalid select {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.12) !important;
}

/* Hide the floating WooCommerce error notice on checkout
   (JS will show errors inline; this is a CSS safety net) */
.woocommerce-checkout .woocommerce-NoticeGroup-checkout:not([style*="display"]) ul.woocommerce-error {
    /* keep visible until JS kicks in */
}

/* Hide WooCommerce core native inline error text to prevent duplicates 
   with our custom styled .bhavo-field-error */
p.checkout-inline-error-message,
.woocommerce-checkout .form-row .checkout-inline-error-message {
    display: none !important;
}

/* Hide ugly Razorpay success notice on the order-pay page */
#msg-razorpay-success {
    display: none !important;
}

/* Hide default WooCommerce order details and customer addresses 
   so only the top custom order summary is displayed */
.bhavo-thankyou-wrap section.woocommerce-order-details,
.bhavo-thankyou-wrap section.woocommerce-customer-details {
    display: none !important;
}

/* -------------------------------------------------------- */
/*  Order Pay (Receipt) Page Styling                        */
/* -------------------------------------------------------- */
body.woocommerce-order-pay .woocommerce {
    display: block !important;
    width: 100% !important;
    max-width: 700px;
    margin: 40px auto;
    padding: 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    text-align: center;
}

body.woocommerce-order-pay .woocommerce::before {
    content: "\f023"; /* FontAwesome lock icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
    font-size: 40px;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

body.woocommerce-order-pay .woocommerce > .woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    background: #fdf5f0;
    border: 1px solid rgba(104, 21, 0, 0.12);
    border-radius: 12px;
    padding: 25px 15px;
    margin-bottom: 35px;
    list-style: none;
    text-align: left;
}

body.woocommerce-order-pay .woocommerce > .woocommerce-order-overview li {
    flex: 1 1 25%;
    border: none;
    border-right: 1px solid rgba(104, 21, 0, 0.08);
    margin: 0;
    padding: 0 15px;
    font-size: 14px;
    color: var(--body-color);
}
@media (max-width: 768px) {
    body.woocommerce-order-pay .woocommerce > .woocommerce-order-overview li {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid rgba(104, 21, 0, 0.08);
        padding: 15px 0;
    }
    body.woocommerce-order-pay .woocommerce > .woocommerce-order-overview li:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    body.woocommerce-order-pay .woocommerce > .woocommerce-order-overview li:first-child {
        padding-top: 0;
    }
}
body.woocommerce-order-pay .woocommerce > .woocommerce-order-overview li:last-child {
    border-right: none;
}
body.woocommerce-order-pay .woocommerce > .woocommerce-order-overview li strong {
    display: block;
    margin-top: 8px;
    font-size: 17px;
    color: var(--primary-color);
}

body.woocommerce-order-pay .woocommerce > p {
    font-size: 16px;
    color: var(--body-color);
    margin-bottom: 30px;
    line-height: 1.6;
}

body.woocommerce-order-pay .woocommerce #btn-razorpay {
    background: var(--primary-color);
    color: #fff;
    padding: 16px 45px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 15px;
    display: inline-block;
}
body.woocommerce-order-pay .woocommerce #btn-razorpay:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(240, 81, 36, 0.25);
}

body.woocommerce-order-pay .woocommerce #btn-razorpay-cancel {
    background: transparent;
    color: var(--primary-color);
    padding: 14px 25px;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}
body.woocommerce-order-pay .woocommerce #btn-razorpay-cancel:hover {
    background: #fff0eb;
}


/* =========================================================
   29. Native WordPress Sub-Menu Fix
   ========================================================= */

/* Ensure the parent item establishes a relative positioning context */
.nav-menu-wrapper .navbar-nav .menu-item-has-children {
    position: relative;
}

/* Base styles for the dropdown container */
.nav-menu-wrapper .navbar-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: var(--primary-color, #F05124);
    box-shadow: 0px 10px 25px 0px rgba(43, 52, 74, 0.12);
    border-radius: 12px;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    
    /* Animation defaults */
    transform: translateY(10px) scale(0.95);
    transform-origin: top;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 999;
}

/* Hover state to show the dropdown */
.nav-menu-wrapper .navbar-nav .menu-item-has-children:hover > .sub-menu {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Link styles inside the dropdown */
.nav-menu-wrapper .navbar-nav .sub-menu .menu-item {
    margin: 0;
    padding: 0;
}

.nav-menu-wrapper .navbar-nav .sub-menu .menu-item a {
    color: var(--white, #fff);
    padding: 12px 24px;
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Hover state for links */
.nav-menu-wrapper .navbar-nav .sub-menu .menu-item a:hover {
    color: var(--white, #fff);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Support deeper nesting if needed */
.nav-menu-wrapper .navbar-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}


/* Invisible bridge to prevent hover loss between nav item and dropdown */
.nav-menu-wrapper .navbar-nav .sub-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}