/* ===================================================================
    Author          : Akshar Webtech Theme
    Version         : 1.0
* ================================================================= */

@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Albert+Sans:wght@400;500;600&display=swap');

:root {
	--primary-color: #ff890f;
	--secondary-color: #121a1d;
	--dark-color: #1F2933;
	--text-color: #4B5563;
	--heading-font: 'DM Sans', sans-serif;
	--body-font: 'Albert Sans', sans-serif;
	--base-color: #1F2933;
	--white-color: #ffffff;
}

body {
	font-family: var(--body-font);
	color: var(--text-color);
	font-size: 17px;
	line-height: 28px;
	font-weight: 400;
	margin: 0;
	padding: 0;
	/* overflow-x: hidden; */
	max-width: 100vw;
	width: 100%;
}

html {
	max-width: 100vw;
	width: 100%;
	/* overflow-x: hidden; */
}

html,
body {
	height: 100%;
	scroll-behavior: smooth;
	max-width: 100vw;
	/* overflow-x: hidden; */
	overflow-x: hidden;
	overflow-x: clip;
}

a {
	text-decoration: none;
	color: var(--primary-color);
	transition: all 0.5s ease-in-out 0s;
	-moz-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
}

a:hover {
	color: var(--secondary-color);
	text-decoration: none;
}

a:focus {
	outline: none;
	text-decoration: none;
	color: var(--text-color);
}

:focus {
	outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 15px 0;
	padding: 0;
	font-family: var(--heading-font);
	font-weight: 700;
	color: var(--dark-color);
}

h1 {
	font-size: 42px;

}

h2 {
	font-size: 36px;

}

h3 {
	font-size: 30px;

}

h4 {
	font-size: 24px;

}

h5 {
	font-size: 18px;

}

h6 {
	font-size: 16px;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
	text-decoration: none;
	font-size: inherit;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
	text-decoration: none;
}

p {
	margin: 0 0 20px 0;
	line-height: 25px;
	color: var(--text-color);
	font-family: var(--body-font);
}

ul,
ol {
	margin: 0;
}

section {
	padding: 50px 0;
	width: 100%;
	box-sizing: border-box;
}

.bg-color-1 {
	background: radial-gradient(circle at 15% 20%, rgba(167, 139, 250, 0.25) 0%, transparent 30%), radial-gradient(circle at 85% 15%, rgba(96, 165, 250, 0.20) 0%, transparent 28%), radial-gradient(circle at 20% 80%, rgba(196, 181, 253, 0.22) 0%, transparent 30%), linear-gradient(135deg, #f8f7ff 0%, #eef2ff 45%, #f0f9ff 100%);
}

.bg-color-2 {
	background: radial-gradient(circle at 18% 25%, rgba(45, 212, 191, 0.20) 0%, transparent 28%), radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.18) 0%, transparent 30%), radial-gradient(circle at 50% 85%, rgba(167, 243, 208, 0.22) 0%, transparent 30%), linear-gradient(135deg, #f0fdfa 0%, #ecfeff 45%, #f7fffb 100%);
}

.bg-color-3 {
	background: radial-gradient(circle at 18% 22%, rgba(244, 114, 182, 0.18) 0%, transparent 28%), radial-gradient(circle at 82% 20%, rgba(192, 132, 252, 0.18) 0%, transparent 28%), radial-gradient(circle at 30% 82%, rgba(216, 180, 254, 0.20) 0%, transparent 30%), linear-gradient(135deg, #fff7fb 0%, #fdf2f8 45%, #f5f3ff 100%);
}

.bg-color-4 {
	background: radial-gradient(circle at 15% 18%, rgba(56, 189, 248, 0.18) 0%, transparent 28%), radial-gradient(circle at 85% 20%, rgba(96, 165, 250, 0.16) 0%, transparent 28%), radial-gradient(circle at 50% 85%, rgba(186, 230, 253, 0.22) 0%, transparent 30%), linear-gradient(135deg, #f8fcff 0%, #f0f9ff 45%, #eff6ff 100%);
}

.bg-color-5 {
	background: radial-gradient(circle at 15% 20%, rgba(251, 146, 60, 0.18) 0%, transparent 28%), radial-gradient(circle at 85% 18%, rgba(253, 186, 116, 0.18) 0%, transparent 28%), radial-gradient(circle at 35% 85%, rgba(255, 237, 213, 0.25) 0%, transparent 30%), linear-gradient(135deg, #fffaf5 0%, #fff7ed 45%, #fffbf5 100%);
}

.bg-color-6 {
	background: radial-gradient(circle at 18% 20%, rgba(196, 181, 253, 0.22) 0%, transparent 28%), radial-gradient(circle at 82% 18%, rgba(110, 231, 183, 0.18) 0%, transparent 28%), radial-gradient(circle at 50% 85%, rgba(233, 213, 255, 0.22) 0%, transparent 30%), linear-gradient(135deg, #faf8ff 0%, #f5f3ff 45%, #f0fdf4 100%);
}

.bg-color-7 {
	background: radial-gradient(circle at 18% 20%, rgba(34, 211, 238, 0.18) 0%, transparent 28%), radial-gradient(circle at 82% 18%, rgba(125, 211, 252, 0.18) 0%, transparent 28%), radial-gradient(circle at 50% 85%, rgba(207, 250, 254, 0.24) 0%, transparent 30%), linear-gradient(135deg, #f7feff 0%, #ecfeff 45%, #f0f9ff 100%);
}

.bg-color-8 {
	background: radial-gradient(circle at 18% 20%, rgba(250, 204, 21, 0.15) 0%, transparent 28%), radial-gradient(circle at 82% 18%, rgba(251, 191, 36, 0.15) 0%, transparent 28%), radial-gradient(circle at 40% 85%, rgba(254, 243, 199, 0.24) 0%, transparent 30%), linear-gradient(135deg, #fffdf7 0%, #fffbeb 45%, #fffef8 100%);
}

.bg-color-9 {
	background: radial-gradient(circle at 18% 20%, rgba(251, 113, 133, 0.16) 0%, transparent 28%), radial-gradient(circle at 82% 18%, rgba(253, 186, 116, 0.16) 0%, transparent 28%), radial-gradient(circle at 35% 85%, rgba(255, 228, 230, 0.24) 0%, transparent 30%), linear-gradient(135deg, #fff8f8 0%, #fff7ed 45%, #fffaf5 100%);
}

.bg-color-10 {
	background: radial-gradient(circle at 18% 20%, rgba(228, 228, 231, 0.40) 0%, transparent 28%), radial-gradient(circle at 82% 18%, rgba(212, 212, 216, 0.35) 0%, transparent 28%), radial-gradient(circle at 50% 85%, rgba(244, 244, 245, 0.50) 0%, transparent 30%), linear-gradient(135deg, #ffffff 0%, #fafafa 45%, #f4f4f5 100%);
}

.bg-color-11 {
	background: linear-gradient(145deg, #fff9ef 0%, var(--white-color) 100%);
}

.bg-color-12 {
	background: linear-gradient(145deg, #eef7ff 0%, var(--white-color) 100%);
}

.bg-color-13 {
	background: linear-gradient(145deg, #f7f3ff 0%, var(--white-color) 100%);
}

.bg-color-14 {
	background: linear-gradient(145deg, #eefcf6 0%, var(--white-color) 100%);
}

.bg-color-15 {
	background: linear-gradient(145deg, #fff3e8 0%, var(--white-color) 100%);
}

.bg-color-16 {
	background: linear-gradient(145deg, #f0f7ff 0%, var(--white-color) 100%);
}

/* ===============================
   HEADER
================================ */

.navbar {
	padding: 0;
}

.navbar-collapse {
	flex-grow: 0;
}

.nav-link {
	color: var(--dark-color);
	font-weight: 900;
	padding-top: 30px;
	padding-bottom: 30px;
}

.nav-link:hover {
	color: var(--primary-color);
}

.nav-item:not(:first-child) {
	margin-left: 3rem;
}

.nav-link.active {
	font-weight: 700;
	color: var(--primary-color);
}

.form-control:focus {
	color: var(--text-color);
	background-color: var(--white-color);
	border-color: var(--primary-color);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(255, 137, 15, 0.11);
}

.top-contact {
	display: flex;
	align-items: center;
	gap: 20px;
}

.top-contact a {
	color: var(--white-color);
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}

.top-contact a i {
	color: var(--secondary-color);
	font-weight: 600;
}

.top-contact .cntct-col:not(:last-child) {
	margin-right: 20px;
}

.top-contact a:hover {
	color: var(--secondary-color);
}

.top-social {
	display: flex;
	align-items: center;
	gap: 12px;
}

.top-social a {
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.25);
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 13px;
	transition: .3s;
}

.top-social a:hover {
	background: var(--white-color);
	color: var(--secondary-color);
}

img {
	max-width: 100%;
	width: 100%;
	height: auto;
}

.title {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-bottom: 25px;
}

.title .section-title {
	position: relative;
	color: var(--secondary-color);
	font-size: 17px;
	font-weight: 400;
	text-transform: uppercase;

}

.title .section-title::before {
	position: relative;
	display: block;
	margin-bottom: 5px;
	width: 100px;
	height: 3px;
	background: var(--primary-color);
	content: "";
	margin-top: 15px;
}

.title h2 {
	font-size: 50px;
	margin-top: 15px;
	color: var(--dark-color);
}

/* =====================
   HOME SLIDER
===================== */

.slider-section {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.home-slider .slider-bg {
	min-height: 100vh;
	min-height: 100svh;
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: center;
}

.home-slider .slider-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1;
}

.home-slider .slide-text {
	position: relative;
	z-index: 2;
	width: 100%;
	color: var(--white-color);
	text-align: left;
}

.home-slider .slider-text {
	font-size: 70px;
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 30px;
	color: var(--white-color);
}

.home-slider .btn {
	padding: 14px 38px;
	border-radius: 30px;
	font-size: 16px;
}

.btn-primary-red {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-primary-red:hover {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
}

.navbar-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.navbar-brand img {
	width: 115px;
	max-width: 100%;
}

.cust-list-group {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cust-list-group li {
	position: relative;
	padding: 7px 0;
	padding-left: 25px;
}

.cust-list-group li::before {
	content: "\f058";
	font-family: "Font Awesome 7 Free";
	position: absolute;
	font-weight: bold;
	color: var(--primary-color);
	font-size: 20px;
	top: 5px;
	left: 0;
}

header {
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 10;
}

.cmpny-quality-section {
	position: relative;
	z-index: 2;
	height: 580px;
	padding: 0;
	margin-top: -150px;
}

.cmpny-quality-section::before {
	width: 100%;
	height: 100%;
	position: absolute;
	content: "";
	background: url(../images/points-bg.png) no-repeat left top;
	background-size: 100% 100%;
}

.trust-box {
	transform: translateY(80px);
}

.cmpny-qlty-inr-col {
	display: flex;
	justify-content: center;
	text-align: center;
	align-items: center;
	height: 100%;
	background: var(--white-color);
	flex-direction: column;
	padding: 20px;
	padding-top: 80px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	position: relative;
	transition: all 0.4s ease;
}

.cmpny-icon {
	width: 130px;
	height: 130px;
	background: var(--primary-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	right: 0;
	top: -65px;
	margin: auto;
	transition: all 0.4s ease;
}

.cmpny-qlty-inr-col:hover .cmpny-icon {
	background: var(--secondary-color);
}

.cmpny-qlty-inr-col:hover {
	box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.5);
	transform: translateY(-15px);
}

.cmpny-icon img {
	width: 80px;
}

.cmpny-qlty-inr-col h3 {
	font-weight: 500;
	font-size: 25px;
}

.cmpny-qlty-inr-col p {
	margin: 15px 0 25px;
}

.points-hihglight-text {
	display: block;
	text-align: center;
	color: var(--white-color);
	position: relative;
	z-index: 2;
}

.points-hihglight-text strong {
	font-weight: 700;
}

.inr-high-text {
	margin-top: 10%;
}

.product-section {
	background: url(../images/prdct-bg.jpg) no-repeat center / cover;
}

.title-center {
	text-align: center;
}

.title.title-center .section-title::before {
	margin-left: auto;
	margin-right: auto;
}

.title-right {
	text-align: right;
}

.title.title-right .section-title::before {
	margin-left: auto;
}

/* ===============================
   PRODUCT SECTION
================================ */

.product-box {
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	transition: all 0.4s ease;
}

.product-box img {
	transition: all 0.4s ease;
}

.prdct-slider {
	margin: 30px 0;
}

.prdct-slider .owl-item .product-box {
	transform: scale(0.7);
	opacity: 0.5;
}

.prdct-slider .owl-item.active.center .product-box {
	transform: scale(1);
	opacity: 1;
}

.product-box .model-no {
	color: var(--primary-color);
}

.product-box h4 {
	color: var(--base-color);
}

.prdct-slider .owl-item.active.center .product-box h4 {
	color: var(--primary-color);
}

.nav-vert-center .owl-nav {
	position: absolute;
	height: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	top: 0;
	bottom: 0;
	margin: auto;
}

.owl-prev>div,
.owl-next>div {
	font-size: 70px;
	color: var(--text-color);
	width: 60px;
	height: 60px;
	border: #aaa solid thin;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.4s ease;
}

.owl-prev>div::before {
	right: -18px;
	position: relative;
}

.owl-next>div::before {
	left: -18px;
	position: relative;
}

.owl-prev:hover>div,
.owl-next:hover>div {
	color: var(--primary-color);
	border-color: var(--primary-color);
}

/* ===============================
   PRODUCT CATEGORY SECTION
================================ */

.category-box {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.ctrgy-dtl {
	width: 70%;
	position: relative;
	overflow: hidden;
	padding: 20px;
	z-index: 1;
}

.category-box::before {
	position: absolute;
	bottom: 18%;
	left: 0;
	width: 70%;
	height: 100%;
	content: "";
	background: url(../images/gradient-line.png) repeat-x bottom left;
	background-size: auto 100%;
	z-index: -1;
	transform: skewY(-10deg);
}

.ctgry-no {
	font-weight: 300;
	color: var(--primary-color);
	font-size: 50px;
	margin-bottom: 20px;
}

.ctrgy-img {
	float: left;
	width: 420px;
	max-width: 100%;
}

.owl-nav {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.owl-nav button {
	margin: 10px 15px;
}

.implement-text-col {
	display: flex;
}

.implement-img {
	width: 50%;
}

.implement-dlt {
	width: 40%;
	padding: 30px;
	z-index: 2;
	position: relative;
	background: var(--white-color);
}

.text-col-1 {
	flex-direction: row-reverse;
}

.text-col-1 .implement-dlt {
	text-align: right;
	border-right: 5px var(--primary-color) solid;
	margin-top: 80px;
	margin-right: -80px;
}

.text-col-2 .implement-dlt {
	border-left: 5px var(--primary-color) solid;
	margin-bottom: 80px;
	margin-left: -80px;
}

.implement-text-col.text-col-1 {
	align-items: flex-start;
}

.implement-text-col.text-col-2 {
	align-items: flex-end;
	margin-top: -150px;
}

.parallax-section {
	width: 100%;
	position: relative;
	background: url(../images/service-details.jpg) no-repeat fixed;
	background-size: cover;
	z-index: 1;
	margin-top: 50px;
}

.parallax-section::before {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: -1;
	content: "";
}

.parallax-text h2 {
	color: var(--white-color);
}

.interesting-facts {
	margin-top: 40px;
	padding-top: 50px;
	border-top: rgba(255, 255, 255, 0.3) solid thin;
}

.flex-direction-column {
	flex-direction: column;
}

.facts-count,
.facts-text {
	color: var(--white-color);
}

.facts-col {
	display: flex;
	justify-content: center;
	align-items: center;
}

.facts-count {
	font-size: 45px;
	font-weight: 600;
	margin-right: 15px;
}

/* ===============================
   WHY US SECTION
================================ */

.why-us-right-text {
	font-weight: 700;
	font-size: 35px;
}

.why-us-right-text span {
	color: var(--primary-color);
	display: block;
	width: 100%;
}

.choose-us-title {
	display: flex;
	justify-content: center;
	align-items: center;
}

.why-us-right-text {
	margin-bottom: 25px;
}

.brdr-right {
	border-left: #ccc solid thin;
}

.why-us-box {
	position: relative;
	display: flex;
	justify-content: flex-start;
	width: 70%;
	padding-left: 150px;
}

.why-us-box h4 {
	font-size: 21px;
}

.choose-us-icon {
	width: 110px;
	height: 110px;
	background: var(--primary-color);
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	border: #f5f5f5 solid 7px;
}

.choose-us-icon img {
	width: 80%;
}

/* ===============================
   SCROLL TO TOP BUTTON
================================ */

#scroll {
	position: fixed;
	right: 20px;
	bottom: 50px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	background-color: var(--primary-color);
	text-indent: -9999px;
	display: none;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	z-index: 9999;
}

#scroll span {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -12px;
	height: 0;
	width: 0;
	border: 8px solid transparent;
	border-bottom-color: var(--white-color);
}

#scroll:hover {
	background-color: var(--secondary-color);
	opacity: 1;
	filter: "alpha(opacity=100)";
	-ms-filter: "alpha(opacity=100)";
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

/* ===============================
   BREADSCRUMB
================================ */

.breadcrumb {
	display: block;
	color: var(--text-color);
}

.breadcrumb-item a {
	color: var(--text-color);
}

.breadcrumb-item.active {
	color: var(--primary-color);
}

.owl-item.current {
	opacity: 1;
}

.owl-item.current::after {
	position: absolute;
	left: 0;
	margin: auto;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 2px;
	background: var(--primary-color);
	content: "";
}

.owl-thumb-item img {
	width: auto;
	height: auto;
	object-position: center;
	max-width: 100%;
	max-height: 100%;
}

.owl-thumbs {
	border-top: #ccc solid thin;
	padding: 15px 0 0;
	margin-top: 15px;
}

.owl-thumbs .owl-prev>div,
.owl-thumbs .owl-next>div {
	width: 30px;
	height: 30px;
}

.owl-thumbs .owl-prev>div,
.owl-thumbs .owl-next>div {
	font-size: 40px;
}

.owl-thumbs .owl-next>div::before {
	left: -8px;
}

.owl-thumbs .owl-prev>div::before {
	right: -8px;
}

.owl-thumbs img {
	width: 100%;
	background: var(--white-color);
	padding: 10px;
	border-radius: 10px;
	opacity: 0.5;
}

.owl-thumbs .current img {
	opacity: 1;
	border: 2px solid var(--primary-color);
}

.owl-thumbs .owl-item {
	padding: 6px;
	border-radius: 10px;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.4s ease;
}

.owl-thumbs .owl-item img {
	border-radius: 8px;
	background: var(--white-color);
	border: none !important;
}

.owl-thumbs .owl-item.current {
	opacity: 1;
	border: 2px solid var(--primary-color);
}

.btn-text {
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
}

.btn-sm {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
}

/* =========================
   FOOTER
========================= */

.site-footer {
	background: var(--dark-color);
	color: var(--white-color);
}

.ftr-1 {
	padding: 60px 0 0px;
}

.footer-logo {
	max-width: 215px;
	filter: brightness(0) invert(1);
}

.ftr-content p {
	color: var(--white-color);
	font-size: 15px;
	line-height: 24px;
}

.ftr-cntct-row {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 18px;
}

.ftr-icon {
	width: 42px;
	height: 42px;
	min-width: 42px;
	background: var(--primary-color);
	color: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.ftr-cntct-text {
	color: var(--white-color);
	font-size: 15px;
	line-height: 22px;
}

.ftr-cntct-text a {
	color: var(--white-color);
}

.ftr-cntct-text a:hover {
	color: var(--secondary-color);
}

.ftr-nav {
	padding: 25px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.ftr-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.ftr-nav ul li {
	margin: 5px 15px;
}

.ftr-nav ul a {
	color: var(--white-color);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .5px;
	transition: .3s;
}

.ftr-nav ul a:hover {
	color: var(--secondary-color);
}

.ftr-2 {
	padding: 25px 0;
}

.ftr-logo-cpyright {
	text-align: center;
}

.ftr-copyright {
	font-size: 13px;
	color: var(--white-color);
}

.ftr-copyright span {
	color: var(--secondary-color);
	font-weight: 600;
}

.footer-col-title {
	font-size: 20px;
	margin-bottom: 15px;
	color: var(--white-color);
}

/* =========================
   FOOTER SOCIAL ICON AND NEWSLETTER
========================= */

.social-icons a {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--white-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	margin-right: 8px;
	transition: .3s;
	font-size: 14px;
}

.social-icons a:hover {
	background: var(--secondary-color);
	color: var(--secondary-color);
}

.newsletter-title {
	font-size: 20px;
	margin-bottom: 10px;
	color: var(--white-color);
}

.newsletter-form {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/* =========================
   PAGE LOADER
========================= */

#page-loader {
	position: fixed;
	inset: 0;
	background: var(--white-color);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader-content {
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.loader-logo {
	width: 140px;
	max-width: 70%;
	margin-bottom: 10px;
	object-fit: contain;
}

.progress-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--dark-color);
	letter-spacing: 1px;
	margin-bottom: 12px;
}

.progress-bar-wrap {
	width: 100%;
	height: 3px;
	background: #e5e7eb;
}

.progress-bar-fill {
	width: 0%;
	height: 100%;
	background: var(--primary-color);
	transition: width .2s linear;
}

#page-loader.fade-out {
	opacity: 0;
	visibility: hidden;
	transition: all .6s ease;
}

/* =========================
   TOP HEADER BAR
========================= */

.header-top {
	background: var(--primary-color);
	padding: 10px 0;
	font-size: 16px;
}

.top-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menu-bar-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid var(--primary-color);
	background: var(--white-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	transition: .3s;
	margin-left: 15px;
}

.menu-bar-btn span {
	width: 18px;
	height: 2px;
	background: var(--primary-color);
	display: block;
	transition: .3s;
}

.menu-bar-btn:hover {
	background: var(--primary-color);
}

.menu-bar-btn:hover span {
	background: var(--white-color);
}

/* =========================
   SIDEBAR
========================= */

.sidebar-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.75);
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s ease;
}

.sidebar {
	position: fixed;
	top: 0;
	right: -500px;
	width: 360px;
	height: 100%;
	height: 100dvh;
	max-height: 100%;
	background: var(--white-color);
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
	transition: .4s ease;
	z-index: 999;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
}

.sidebar.active {
	right: 0;
}

.sidebar-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* Lock body scroll when sidebar is active */
body.sidebar-open {
	overflow: hidden !important;
	padding-right: var(--scrollbar-width, 0) !important;
}

html[style*="overflow: hidden"] {
	overflow: hidden !important;
}

.sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid #eee;
}

.sidebar-logo img {
	max-width: 140px;
}

.close-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 18px;
	cursor: pointer;
}

.sidebar-content {
	padding: 25px;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
	width: 100%;
	box-sizing: border-box;
}

.sidebar-content h3 {
	font-size: 26px;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.sidebar-content p {
	font-size: 15px;
	color: var(--text-color);
	margin-bottom: 20px;
}

.sidebar-menu {
	list-style: none;
	padding: 0;
	margin: 25px 0;
}

.sidebar-menu li {
	border-bottom: 1px solid #eee;
}

.sidebar-menu li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	color: var(--text-color);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}

.sidebar-menu li a span {
	font-size: 18px;
	color: var(--primary-color);
}

.sidebar-menu .has-sub {
	border-bottom: 1px solid #eee;
}

.accordion-btn {
	width: 100%;
	background: none;
	border: none;
	padding: 12px 0;
	font-size: 16px;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	color: var(--text-color);
}

.accordion-btn .icon {
	font-size: 20px;
	color: var(--primary-color);
	transition: 0.3s;
}

.sub-menu {
	list-style: none;
	padding-left: 15px;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.has-sub.active .sub-menu {
	max-height: 900px;
	overflow-y: auto;
	overflow-x: hidden;
}

.has-sub.active .accordion-btn .icon {
	transform: rotate(45deg);
}

.sub-menu li a {
	display: block;
	padding: 8px 0;
	font-size: 14px;
	color: var(--text-color);
	text-decoration: none;
}

.sub-menu li a:hover {
	color: var(--primary-color);
}

.sidebar-social {
	display: flex;
	gap: 10px;
	margin-bottom: 25px;
}

.sidebar-social a {
	width: 36px;
	height: 36px;
	border: 1px solid #ddd;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	transition: .3s;
}

.sidebar-social a:hover {
	background: var(--primary-color);
	color: var(--white-color);
}

.sidebar-contact {
	margin-top: 15px;
}

.contact-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 15px;
}

.contact-row i {
	width: 36px;
	height: 36px;
	background: var(--primary-color);
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 14px;
	min-width: 36px;
}

.sidebar .sidebar-menu {
	display: none;
}

/* =========================
   SLIDER TEXT HIGHLIGHT
========================= */

.slider-text {
	font-size: 85px;
	font-weight: 900;
	color: var(--white-color);
}

.text-highlight {
	color: var(--primary-color);
}

.slider-text-highlight {
	background-color: var(--primary-color);
	color: var(--white-color);
	width: fit-content;
	padding: 0px 20px;
	font-weight: 900 !important;
}

.typed-cursor {
	display: none !important;
}

@keyframes blink {

	0%,
	50%,
	100% {
		opacity: 1;
	}

	25%,
	75% {
		opacity: 0;
	}
}

/* =========================
   PRODUCT PAGE
========================= */

.product-page,
.related-products {
	padding: 70px 0;
	background: #faf9f4;
}

.product-card {
	background: var(--white-color);
	border-radius: 18px;
	padding: 25px;
	text-align: center;
	transition: all .4s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.product-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.product-card .product-img {
	border-radius: 18px;
	margin-bottom: 20px;
}

.product-card .product-img img {
	max-width: 100%;
	object-fit: contain;
	border-radius: 18px;
}

.product-card .price {
	color: var(--text-color);
	margin-bottom: 15px;
}

.product-card .btn {
	margin: auto auto 0;
	width: fit-content;
}

/* ===============================
   PRODUCT SINGLE PAGE
================================ */

.product-single-section {
	padding: 80px 0;
	background: #faf9f4;
}

.product-single-box {
	margin: auto;
	display: grid;
	grid-template-columns: 55% 45%;
	gap: 40px;
	background: #f6f3ea;
	padding: 40px;
	border-radius: 25px;
}

.product-gallery {
	width: 100%;
	overflow: hidden;
}

.product-main-slider img {
	width: 100%;
	background: var(--white-color);
	padding: 30px;
	border-radius: 20px;
}

.product-single-box .owl-thumbs .owl-item.current::after {
	background: none !important;
}

.rating {
	color: #ffbf00;
	font-size: 18px;
	margin-bottom: 10px;
}

.rating span {
	color: var(--text-color);
	font-size: 14px;
	margin-left: 10px;
}

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

.product-price .new {
	font-size: 28px;
	font-weight: 700;
	color: var(--primary-color);
}

.product-price .old {
	margin-left: 10px;
	color: var(--text-color);
	text-decoration: line-through;
}

.product-title {
	font-size: 42px;
	margin-bottom: 15px;
}

.product-desc {
	color: var(--text-color);
	margin-bottom: 20px;
}

.product-highlights {
	list-style: none;
	padding: 0;
	margin-bottom: 25px;
}

.product-highlights li {
	padding-left: 25px;
	position: relative;
	margin-bottom: 10px;
}

.product-highlights li::before {
	content: "✔";
	position: absolute;
	left: 0;
	color: var(--secondary-color);
}

.product-cart {
	display: flex;
	gap: 15px;
}

.product-cart input {
	width: 70px;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
	text-align: center;
}

.product-tabs {
	padding: 70px 0;
	margin-top: 60px;
}

.tabs-nav li.active {
	color: var(--secondary-color);
	border-bottom: 2px solid var(--secondary-color);
}

.tabs-nav {
	display: flex;
	gap: 30px;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 30px;
	list-style: none;
	padding: 0;
}

.tabs-nav li {
	padding: 12px 0;
	cursor: pointer;
	font-weight: 600;
	color: var(--text-color);
	position: relative;
}

.tabs-nav li.active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 3px;
	background: var(--secondary-color);
}

.tab-box {
	display: none;
}

.tab-box.active {
	display: block;
}

.review-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid #e8e8e8;
}

.review-left {
	display: flex;
	align-items: center;
	gap: 15px;
}

.review-left img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.review-info h6 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--secondary-color);
}

.review-info h6 span {
	font-weight: 400;
	color: var(--text-color);
	font-size: 13px;
}

.review-info p {
	margin: 4px 0 0;
	color: var(--text-color);
	font-size: 15px;
}

/* ===============================
   TESTIMONIAL
================================ */

.testimonial-section {
	padding: 90px 0;
	background:
		radial-gradient(circle at 15% 18%, rgba(56, 189, 248, 0.18) 0%, transparent 28%),
		radial-gradient(circle at 85% 20%, rgba(96, 165, 250, 0.16) 0%, transparent 28%),
		radial-gradient(circle at 50% 85%, rgba(186, 230, 253, 0.22) 0%, transparent 30%),
		linear-gradient(135deg, #f8fcff 0%, #f0f9ff 45%, #eff6ff 100%);
}

.testimonial-box {
	background: var(--white-color);
	padding: 40px 35px;
	border-radius: 20px;
	position: relative;
	height: 100%;
	transition: 0.3s;
}

.testimonial-box:hover {
	transform: translateY(-10px);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}

.quote-icon {
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 80px;
	color: var(--primary-color);
	font-family: serif;
}

.testimonial-text {
	font-size: 16px;
	line-height: 28px;
	color: var(--secondary-color);
	margin-bottom: 25px;
}

.testimonial-user {
	display: flex;
	align-items: center;
	gap: 15px;
}

.testimonial-user img {
	width: 60px !important;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--primary-color);
}

.testimonial-user h6 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--secondary-color);
}

.testimonial-user span {
	font-size: 13px;
	color: var(--secondary-color);
}

/* ===============================
   CONTACT PAGE
================================ */

.contact-modern-section {
	padding: 110px 0;
	background: linear-gradient(135deg, #fff6ed 0%, #f7f7fb 55%, var(--white-color) 100%);
	position: relative;
	overflow: hidden;
}

.contact-modern-section::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 137, 15, 0.16);
	top: -120px;
	right: -120px;
	animation: blobFloat1 12s ease-in-out infinite,
		blobPulse 6s ease-in-out infinite;
}

.contact-modern-section::after {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: rgba(18, 26, 29, 0.08);
	bottom: -160px;
	left: -160px;
	animation: blobFloat2 14s ease-in-out infinite,
		blobPulse 7s ease-in-out infinite;
}

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

.contact-heading {
	max-width: 760px;
	margin: 0 auto 50px;
}

.contact-left h3 {
	font-size: 36px;
	font-weight: 800;
	margin-bottom: 10px;
}

.contact-left p {
	margin-bottom: 25px;
}

.contact-info-card {
	position: relative;
	isolation: isolate;
	background: var(--white-color);
	border-radius: 20px;
	padding: 34px 30px;
	border: 1px solid rgba(18, 26, 29, 0.10);
	box-shadow: 0 14px 34px rgba(18, 26, 29, 0.09);
	height: 100%;
	overflow: hidden;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
	animation: none;
}

.contact-info-card:hover {
	transform: translateY(-3px);
	border-color: rgba(18, 26, 29, 0.18);
	box-shadow: 0 18px 36px rgba(18, 26, 29, 0.12);
}

.contact-info-card::before {
	display: none;
}

.contact-info-card::after {
	display: none;
}

.contact-info-card>* {
	position: relative;
	z-index: 2;
}

.contact-left-box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
	padding: 11px 12px;
	border-radius: 14px;
	border: 1px solid #e5ebf5;
	background: var(--white-color);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
	transition: all 0.3s ease;
}

.contact-left-box:hover {
	border-color: rgba(255, 137, 15, 0.4);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	background: rgba(255, 137, 15, 0.08);
}

.contact-left-box .icon {
	width: 42px;
	min-width: 42px;
	height: 42px;
	background: rgba(255, 137, 15, 0.14);
	color: var(--primary-color);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	box-shadow: none;
	transform: translate3d(0, 0, 0);
	transition: transform .38s cubic-bezier(.22, 1, .36, 1),
		background-color .3s ease;
}

.contact-left-box:hover .icon {
	transform: translate3d(0, -1px, 0) scale(1.04);
	background: rgba(255, 137, 15, 0.2);
	box-shadow: none;
}

.contact-left-box .text {
	flex: 1;
	min-width: 0;
}

.contact-left-box h6 {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #4a5661;
}

.contact-left-box p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--secondary-color);
}

.contact-value-link {
	color: inherit;
	text-decoration: none;
	word-break: break-word;
	transition: color .25s ease;
}

.contact-left-box:hover .contact-value-link {
	color: var(--primary-color);
}

.contact-info-card .contactus-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed rgba(18, 26, 29, 0.18);
}

.contact-info-card .contactus-social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	background: var(--white-color);
	border: 1px solid rgba(18, 26, 29, 0.16);
	box-shadow: 0 1px 2px rgba(18, 26, 29, 0.05);
	transform: translate3d(0, 0, 0);
	will-change: transform, box-shadow, border-color, background-color;
	transition: transform .36s cubic-bezier(.22, 1, .36, 1),
		background-color .3s ease,
		color .3s ease,
		border-color .3s ease,
		box-shadow .32s ease;
}

.contact-info-card .contactus-social a:hover {
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	border-color: rgba(255, 137, 15, 0.34);
	transform: translate3d(0, -3px, 0) scale(1.03);
	box-shadow: 0 9px 18px rgba(18, 26, 29, 0.14);
}

.contact-highlights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 22px;
}

.highlight-card {
	display: flex;
	gap: 10px;
	align-items: center;
	background: var(--white-color);
	border-radius: 14px;
	padding: 12px 14px;
	border: 1px solid rgba(18, 26, 29, 0.10);
	box-shadow: 0 1px 2px rgba(18, 26, 29, 0.04);
	transform: translate3d(0, 0, 0);
	will-change: transform, box-shadow, border-color;
	transition: transform .38s cubic-bezier(.22, 1, .36, 1),
		box-shadow .32s ease,
		border-color .3s ease;
}

.highlight-card:hover {
	transform: translate3d(0, -3px, 0);
	border-color: rgba(255, 137, 15, 0.28);
	box-shadow: 0 10px 20px rgba(18, 26, 29, 0.12);
}

.highlight-card i {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: var(--primary-color);
	background: rgba(255, 137, 15, 0.16);
	font-size: 16px;
	transition: transform .36s cubic-bezier(.22, 1, .36, 1),
		background-color .3s ease;
}

.highlight-card:hover i {
	transform: translate3d(0, -1px, 0) scale(1.04);
	background: rgba(255, 137, 15, 0.22);
}

.highlight-card h6 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--secondary-color);
}

.highlight-card span {
	font-size: 12px;
	color: var(--text-color);
}

.contact-form-card {
	position: relative;
	isolation: isolate;
	background: var(--white-color);
	padding: 34px 30px;
	border-radius: 20px;
	border: 1px solid rgba(18, 26, 29, 0.10);
	box-shadow: 0 14px 34px rgba(18, 26, 29, 0.09);
	height: 100%;
	overflow: hidden;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
	animation: none;
}

.contact-form-card:hover {
	transform: translateY(-3px);
	border-color: rgba(18, 26, 29, 0.18);
	box-shadow: 0 18px 36px rgba(18, 26, 29, 0.12);
}

.contact-form-card::before {
	display: none;
}

.contact-form-card::after {
	display: none;
}

.contact-form-card>* {
	position: relative;
	z-index: 2;
}

.contact-form-card .form-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 137, 15, 0.10);
	border: 1px solid rgba(255, 137, 15, 0.18);
	font-size: 12px;
	font-weight: 700;
}

.contact-form-card .form-header {
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(18, 26, 29, 0.10);
}

.form-tag {
	color: var(--primary-color);
	font-weight: 600;
	display: inline-block;
	margin-bottom: 8px;
}

.contact-form-card h3 {
	font-size: clamp(30px, 3vw, 36px);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 12px;
}

.contact-form-card .form-header p {
	margin-bottom: 0;
	color: #4f5b66;
}

.contact-form-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.contact-form-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border-radius: 999px;
	background: rgba(248, 250, 252, .9);
	border: 1px solid rgba(18, 26, 29, 0.10);
	color: var(--secondary-color);
	font-size: 12px;
	font-weight: 600;
}

.contact-form-meta i {
	color: var(--primary-color);
}

.contact-field {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--white-color);
	border: 1px solid rgba(18, 26, 29, 0.14);
	border-radius: 12px;
	padding: 0 12px;
	transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease, background .28s ease;
}

.contact-field:hover {
	transform: none;
	border-color: rgba(18, 26, 29, 0.22);
}

.contact-field:focus-within {
	background: var(--white-color);
	border-color: rgba(255, 137, 15, 0.40);
	box-shadow: 0 0 0 3px rgba(255, 137, 15, 0.11);
}

.contact-field .field-icon {
	width: 24px;
	min-width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--primary-color);
	background: rgba(255, 137, 15, 0.12);
	font-size: 11px;
}

.contact-field .form-control {
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 14px 2px !important;
	line-height: 1.4;
	color: var(--secondary-color);
}

.contact-field .form-control::placeholder {
	color: #808a95;
}

.contact-field .form-control:focus {
	outline: none;
}

.contact-field.contact-field-textarea {
	align-items: flex-start;
	padding-top: 12px;
}

.contact-field.contact-field-textarea .field-icon {
	margin-top: 4px;
}

.contact-field.contact-field-textarea .form-control {
	min-height: 130px;
	resize: vertical;
}

.contact-form-card input,
.contact-form-card textarea {
	width: 100%;
	outline: none;
}

/* .contact-form-card input:focus,
.contact-form-card textarea:focus {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
} */

.contact-form-card form .row>[class*="col-"] {
	animation: contactFieldRise .6s cubic-bezier(.22, 1, .36, 1) both;
}

.contact-form-card form .row>[class*="col-"]:nth-child(1) {
	animation-delay: .04s;
}

.contact-form-card form .row>[class*="col-"]:nth-child(2) {
	animation-delay: .08s;
}

.contact-form-card form .row>[class*="col-"]:nth-child(3) {
	animation-delay: .12s;
}

.contact-form-card form .row>[class*="col-"]:nth-child(4) {
	animation-delay: .16s;
}

.contact-form-card form .row>[class*="col-"]:nth-child(5) {
	animation-delay: .2s;
}

.contact-form-card form .row>[class*="col-"]:nth-child(6) {
	animation-delay: .24s;
}

.contact-form-card form .row>[class*="col-"]:nth-child(7) {
	animation-delay: .28s;
}

.contact-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 2px;
}

.form-note {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #4f5b66;
}

.form-note i {
	color: var(--primary-color);
}

.contact-form-card .contact-submit-btn {
	min-width: 190px;
}

@keyframes contactCardDrift {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}
}

@keyframes contactFieldRise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-map-section {
	padding: 80px 0 110px;
}

.map-heading {
	margin: 0 auto 35px;
}

.map-box {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.map-box iframe {
	width: 100%;
	height: 600px;
	border: 0;
}

.map-title {
	font-size: 42px;
	font-weight: 800;
	margin-bottom: 15px;
}

/* ===============================
   FAQ
================================ */

.faq-section {
	padding: 90px 0;
	background: #eeeeee;
}

.section-title .sub-title {
	color: var(--primary-color);
	font-weight: 600;
}

.section-title h2 {
	font-size: 40px;
	font-weight: 800;
	margin-top: 10px;
}

.faq-wrapper {
	max-width: 900px;
	margin: auto;
}

.faq-item {
	background: var(--white-color);
	border-radius: 14px;
	margin-bottom: 15px;
	overflow: hidden;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.faq-question {
	padding: 22px 25px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--text-color);
}

.faq-question:hover {
	color: var(--primary-color);
}

.faq-answer {
	display: none;
	padding: 0 25px 22px;
	color: var(--text-color);
	line-height: 26px;
}

.faq-item.active .faq-answer {
	display: block;
}

.faq-item .icon {
	font-size: 22px;
	transition: 0.3s;
}

.faq-item.active .icon {
	transform: rotate(45deg);
	color: var(--primary-color);
}

/* ===============================
   NAVBAR DROPDOWN
================================ */

.dropdown-menu {
	border-radius: 10px;
	border: none;
	padding: 10px 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.dropdown-item {
	padding: 10px 25px;
	font-weight: 500;
	color: var(--text-color);
	transition: 0.3s;
}

.dropdown-item:hover {
	background: transparent;
	color: var(--primary-color);
}

/* ===============================
   STICKY HEADER
================================ */

#site-header {
	width: 100%;
	position: relative;
	z-index: 900;
}

.header-main {
	background: var(--white-color);
	transition: all 0.35s ease;
}

.nav-item.dropdown:hover .dropdown-menu {
	display: block;
}

#site-header.sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	animation: stickyFade 0.4s ease;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

#site-header.sticky .header-top {
	display: none;
}

body.sticky-padding {
	padding-top: 90px;
}

@keyframes stickyFade {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

/* ===============================
   DROPDOWN ANIMATION
================================ */

.navbar .dropdown-menu {
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;
	margin-top: 0;
	border-radius: 10px;
}

.navbar .dropdown:hover>.dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-toggle::after {
	transition: 0.3s;
}

.dropdown:hover .dropdown-toggle::after {
	transform: rotate(180deg);
}

.navbar .dropdown:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.dropdown-menu .dropdown-item {
	position: relative;
	padding: 12px 20px;
	transition: all 0.5s ease;
}

.dropdown-menu .dropdown-item:hover {
	background: var(--primary-color);
	color: var(--white-color);
	padding-left: 28px;
}

.dropdown-menu .dropdown-item:hover::before {
	width: 8px;
}

/* ===============================
   CURSOR ANIMATION
================================ */

.cursor-dot {
	width: 10px;
	height: 10px;
	background: var(--primary-color);
	border-radius: 50%;
	position: fixed;
	z-index: 99999;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.cursor-ring {
	width: 40px;
	height: 40px;
	border: 2px solid rgba(255, 137, 15);
	border-radius: 50%;
	position: fixed;
	z-index: 99998;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: 0.15s ease-out;
}

.cursor-hover {
	transform: translate(-50%, -50%) scale(1.8);
	border-color: var(--primary-color);
}

.cursor-click {
	transform: translate(-50%, -50%) scale(0.6);
}

/* ======================
   404 PAGE
====================== */
.error-img-box {
	margin-bottom: 30px;
}

.error-img {
	max-width: 520px;
	width: 100%;
	animation: float404 4s ease-in-out infinite;
}

@keyframes float404 {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-18px);
	}

	100% {
		transform: translateY(0);
	}
}

/* =====================
   Product Category Page
===================== */
.agri-info-section {
	padding: 80px 0;
	background: var(--white-color);
}

.info-img {
	overflow: hidden;
	border-radius: 14px;
}

.info-img img {
	width: 100%;
	border-radius: 14px;
	transition: transform 0.6s ease;
}

.info-img:hover img {
	transform: scale(1.06);
}

.info-content {
	padding: 20px 30px;
}

/* =========================
   Cart Page
========================= */
.cart-wrapper {
	background: var(--white-color);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	overflow-x: auto;
}

.cart-table {
	min-width: 750px;
}

.cart-header,
.cart-row {
	display: grid;
	grid-template-columns: 2.5fr 1fr 1fr 1fr .5fr;
	align-items: center;
}

.cart-header {
	background: var(--primary-color);
	color: var(--white-color);
	padding: 15px 20px;
	font-weight: 600;
}

.cart-row {
	padding: 20px;
	border-bottom: 1px solid #eee;
}

.cart-product {
	display: flex;
	align-items: center;
	gap: 15px;
}

.cart-product img {
	width: 80px;
	border-radius: 8px;
}

.cart-product h5 {
	margin: 0;
	font-size: 17px;
}

.cart-product span {
	font-size: 14px;
	color: var(--text-color);
}

.cart-price,
.cart-total {
	font-weight: 600;
}

.cart-qty input {
	width: 65px;
	padding: 6px;
	border-radius: 5px;
	border: 1px solid #ccc;
	text-align: center;
}

.cart-remove {
	font-size: 22px;
	color: #dc2626;
	cursor: pointer;
	font-weight: bold;
}

.cart-summary-box {
	background: var(--white-color);
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.summary-row.total {
	font-size: 20px;
	font-weight: 700;
	color: var(--dark-color);
}

/* =========================
   Checkout Page
========================= */

.checkout-box {
	background: var(--white-color);
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.checkout-box input,
.coupon-field input,
.checkout-box textarea {
	width: 100%;
	border: none;
	background: #f5f5f5;
	padding: 14px 18px;
	border-radius: 10px;
	outline: none;
}

.checkout-box input:focus,
.coupon-field input:focus,
.checkout-box textarea:focus {
	background: var(--white-color);
	box-shadow: 0 0 0 2px rgba(123, 191, 0, 0.2);
}

.checkout-summary-box {
	background: var(--white-color);
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.checkout-summary-box h4 {
	margin-bottom: 20px;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
	font-size: 16px;
}

.summary-row.total {
	font-size: 20px;
	font-weight: 700;
	color: var(--dark-color);
}

/* =========================
   Checkout Coupon & Payment Method
========================= */

.coupon-box label {
	font-weight: 600;
	margin-bottom: 6px;
	display: block;
}

.coupon-field {
	display: flex;
	gap: 10px;
}

.coupon-field input {
	flex: 1;
}

.payment-option {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	cursor: pointer;
	font-weight: 500;
}

/* =========================
  Our Team Page
========================= */
.team-section {
	padding: 80px 0;
	background: #f9faf7;
}

.team-card {
	background: var(--white-color);
	border-radius: 15px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: all .4s ease;
	height: 100%;
}

.team-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.team-img {
	position: relative;
	overflow: hidden;
}

.team-img img {
	width: 100%;
	transition: all .4s ease;
}

.team-card:hover .team-img img {
	transform: scale(1.1);
}

.team-content {
	padding: 25px 20px;
}

.team-content h5 {
	margin-bottom: 5px;
	font-weight: 700;
}

.team-content span {
	display: block;
	color: var(--primary-color);
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 15px;
}

.team-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.team-link:hover {
	color: inherit;
}

/* =========================
   Team Details Page
========================= */

.team-details-section {
	padding: 80px 0;
}

.team-details-img img {
	width: 100%;
	border-radius: 18px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.team-details-content {
	padding-left: 20px;
}

.team-role {
	color: var(--secondary-color);
	font-weight: 600;
	margin-bottom: 20px;
}

.team-info-list {
	margin: 25px 0;
}

.team-info-list div {
	margin-bottom: 10px;
	font-size: 16px;
	color: var(--dark-color);
}

/* =========================
   Gallery Page
========================= */

.gallery-section {
	padding: 80px 0;
	background: #f9faf7;
}

.gallery-card {
	border-radius: 15px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.gallery-img {
	position: relative;
	overflow: hidden;
}

.gallery-img img {
	width: 100%;
	transition: 0.4s ease;
}

.gallery-card:hover .gallery-img img {
	transform: scale(1.1);
}

.gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 137, 15, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: 0.4s ease;
}

.gallery-card:hover .gallery-overlay {
	opacity: 1;
}

.gallery-icon {
	width: 50px;
	height: 50px;
	background: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	font-size: 20px;
	transition: 0.3s ease;
}

.gallery-icon:hover {
	background: var(--secondary-color);
	color: var(--white-color);
}

/* ============================
   Coming Soon Page
============================ */

.coming-soon-page header,
.coming-soon-page footer,
.coming-soon-page #scroll {
	display: none !important;
}

.coming-soon-page main {
	padding: 0 !important;
	margin: 0 !important;
}

.coming-soon-page .coming-full {
	min-height: 100vh;
	min-height: 100svh;
	margin-top: 0 !important;
}

.coming-full {
	min-height: 100vh;
	min-height: 100svh;
	background: linear-gradient(135deg, #ff890f, #081a13);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.coming-box {
	width: 90%;
	max-width: 900px;
	background: var(--primary-color);
	border-radius: 35px;
	padding: 70px 40px;
	text-align: center;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}

.coming-logo {
	max-width: 200px;
	margin-bottom: 20px;
}

.coming-sub {
	color: var(--white-color);
	letter-spacing: 3px;
	font-size: 14px;
}

.coming-title {
	color: var(--white-color);
	font-size: 56px;
	font-weight: 800;
	margin: 25px 0 40px;
}

.countdown-wrapper {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	margin-bottom: 35px;
}

.time-box {
	position: relative;
	width: 110px;
	height: 140px;
}

.time-box svg {
	width: 110px;
	height: 110px;
	transform: rotate(-90deg);
}

.time-box circle {
	fill: none;
	stroke-width: 7;
	stroke: rgba(255, 255, 255, .25);
}

.time-box circle:last-child {
	stroke: var(--secondary-color);
	stroke-dasharray: 302;
	stroke-dashoffset: 302;
	transition: .8s linear;
}

.time-number {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 30px;
	font-weight: 700;
	color: var(--white-color);
}

.time-box span {
	display: block;
	margin-top: 10px;
	color: var(--white-color);
	font-size: 13px;
	letter-spacing: 1px;
}

.coming-input {
	display: flex;
	width: 100%;
	max-width: 320px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--white-color);
	margin-bottom: 30px
}

.coming-input input {
	flex: 1;
	border: none;
	padding: 12px 15px;
	font-size: 14px;
	outline: none;
}

.coming-input button {
	background: var(--secondary-color);
	color: var(--white-color);
	width: 55px;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.coming-social a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .4);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--primary-color);
	margin: 0 6px;
	transition: .3s;
	background-color: var(--white-color);
}

.coming-social a:hover {
	color: var(--white-color);
	background: var(--secondary-color);
	border-color: var(--secondary-color);
}

/* =========================
   Our Services Page
========================= */

.service-section {
	padding: 80px 0;
	background: #f9faf7;
}

.service-card {
	background: var(--white-color);
	border-radius: 18px;
	padding: 35px 30px;
	text-align: center;
	height: 100%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: 0.4s ease;
}

.service-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.service-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: rgba(20, 83, 45, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	color: var(--primary-color);
	transition: 0.4s ease;
}

.service-card:hover .service-icon {
	background: var(--primary-color);
	color: var(--white-color);
}

.service-card h4 {
	margin-bottom: 15px;
	font-weight: 700;
}

.service-card p {
	margin: 0;
}

.service-card h4 a {
	color: var(--dark-color);
	text-decoration: none;
	transition: 0.3s ease;
}

.service-card h4 a:hover {
	color: var(--primary-color);
}

.service-link {
	display: inline-block;
	margin-top: 15px;
	font-weight: 600;
	color: var(--primary-color);
	text-decoration: none;
	transition: 0.3s ease;
}

.service-link i {
	margin-left: 6px;
	transition: 0.3s ease;
}

.service-link:hover i {
	transform: translateX(5px);
}

/* =========================
   Service Details Page
========================= */

.service-details-section {
	padding: 80px 0;
}

.service-details-img img {
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.service-details-content h2 {
	margin-bottom: 15px;
}

.service-details-content h4 {
	margin-top: 30px;
	margin-bottom: 15px;
}

.service-details-content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.service-details-content ul li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	font-weight: 500;
}

.service-details-content ul li::before {
	content: "\f058";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	color: var(--primary-color);
	position: absolute;
	left: 0;
	top: 2px;
}

/* Keep rich CMS content visible while preventing page-level horizontal scroll */
.service-details-description,
.service-content,
.blog-rich-content {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.service-details-description img,
.service-details-description video,
.service-details-description iframe,
.service-content img,
.service-content video,
.service-content iframe,
.blog-rich-content img,
.blog-rich-content video,
.blog-rich-content iframe {
	max-width: 100%;
	height: auto;
}

.service-content pre,
.blog-rich-content pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
}

.service-content table,
.blog-rich-content table {
	display: block;
	max-width: 100%;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* =====================================
   SERVICE DETAILS SIDEBAR
===================================== */
.service-sidebar {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.service-sidebar .sb-card {
	position: relative;
	border: 1px solid rgba(18, 18, 18, .08);
	border-radius: 16px;
	background: linear-gradient(165deg, #ffffff 0%, #fffaf7 100%);
	box-shadow: 0 14px 34px rgba(18, 18, 18, .08);
	overflow: hidden;
	transition: transform .42s cubic-bezier(.25, .46, .45, .94), box-shadow .42s cubic-bezier(.25, .46, .45, .94), border-color .3s ease;
}

.service-sidebar .sb-card:nth-child(2) {
	animation-delay: .8s;
}

.service-sidebar .sb-card:hover {
	transform: translateY(-7px);
	border-color: rgba(255, 88, 27, .25);
	box-shadow: 0 24px 54px rgba(18, 18, 18, .16);
}

.service-sidebar .sb-card:hover::before {
	left: 140%;
}

.service-sidebar .sbc-head {
	position: relative;
	z-index: 2;
	padding: 18px 20px;
	background: linear-gradient(135deg, var(--secondary-color), #1f2f43);
}

.service-sidebar .sbc-title {
	font-weight: 800;
	color: var(--white-color);
	font-size: 20px;
	letter-spacing: .2px;
}

.service-sidebar .sbc-subtitle {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .86);
}

.service-sidebar .toc-list {
	padding: 10px 0;
}

.service-sidebar .toc-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 18px;
	border-bottom: 1px solid rgba(18, 18, 18, .05);
	font-size: 15px;
	color: var(--text-color);
	font-weight: 600;
	transition: all .3s cubic-bezier(.25, .46, .45, .94);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	justify-content: space-between;
}

.service-sidebar .toc-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--primary-color);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform .3s ease;
}

.service-sidebar .toc-num {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 88, 27, .10);
	color: var(--primary-color);
	flex-shrink: 0;
	transition: all .3s ease;
}

.service-sidebar .toc-item:last-child {
	border: none;
}

.service-sidebar .toc-item.toc-active {
	background: rgba(255, 88, 27, .07);
	color: var(--primary-color);
}

.service-sidebar .toc-item.toc-active::before,
.service-sidebar .toc-item:hover::before {
	transform: scaleY(1);
}

.service-sidebar .toc-item:hover {
	background: rgba(255, 88, 27, .06);
	color: var(--primary-color);
	padding-left: 22px;
}

.service-sidebar .toc-item:hover .toc-num,
.service-sidebar .toc-item.toc-active .toc-num {
	background: var(--primary-color);
	color: var(--white-color);
	transform: translateX(2px) rotate(-6deg);
}

.service-sidebar .sb-contact-card {
	background: linear-gradient(160deg, #fffaf7 0%, #ffffff 55%, #fef3ec 100%);
}

.service-sidebar .contact-list {
	padding: 14px 16px 6px;
}

.service-sidebar .contact-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	margin-bottom: 10px;
	border-radius: 12px;
	border: 1px solid rgba(255, 88, 27, .14);
	background: rgba(255, 255, 255, .95);
	text-decoration: none;
	color: var(--text-color);
	transition: transform .32s cubic-bezier(.25, .46, .45, .94), border-color .3s ease, box-shadow .3s ease;
}

.service-sidebar .contact-item:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 88, 27, .34);
	box-shadow: 0 12px 24px rgba(255, 88, 27, .14);
	color: var(--text-color);
}

.service-sidebar .contact-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 15px;
	color: var(--primary-color);
	background: rgba(255, 88, 27, .1);
}

.service-sidebar .contact-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.service-sidebar .contact-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #777;
	font-weight: 700;
	margin-bottom: 3px;
}

.service-sidebar .contact-meta strong {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--secondary-color);
	word-break: break-word;
}

.service-sidebar .contact-actions {
	display: grid;
	gap: 10px;
	padding: 6px 16px 18px;
}

.service-sidebar .contact-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(18, 18, 18, .1);
	background: var(--white-color);
	color: var(--secondary-color);
	text-decoration: none;
	font-weight: 700;
	transition: transform .3s cubic-bezier(.25, .46, .45, .94), border-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.service-sidebar .contact-cta i {
	transition: transform .3s ease;
}

.service-sidebar .contact-cta:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 88, 27, .4);
	color: var(--primary-color);
}

.service-sidebar .contact-cta:hover i {
	transform: translateX(3px);
}

.service-sidebar .contact-cta-main {
	border: none;
	color: var(--white-color);
	background: #25D366;
}

.service-sidebar .contact-cta-main:hover {
	color: var(--white-color);
	box-shadow: 0 16px 28px rgba(37, 211, 102, .3);
}



/* =========================
   Blog Page
========================= */

.blog-section {
	padding: 80px 0;
}

.blog-section .article-card {
	display: flex;
	flex-direction: column;
	background: var(--white-color);
	border: 1.5px solid rgba(18, 18, 18, .08);
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(18, 18, 18, .05);
	overflow: hidden;
	transition: transform .38s cubic-bezier(.25, .46, .45, .94), box-shadow .38s cubic-bezier(.25, .46, .45, .94), border-color .3s ease;
}

.blog-section .article-card:hover {
	transform: translateY(-8px);
	border-color: rgba(255, 88, 27, .22);
	box-shadow: 0 20px 52px rgba(18, 18, 18, .13);
}

.blog-section .ac-bar {
	height: 4px;
	width: 100%;
	background: linear-gradient(90deg, var(--primary-color), rgba(255, 88, 27, .25));
}

.blog-section .ac-img {
	position: relative;
	height: 220px;
	overflow: hidden;
}

.blog-section .ac-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: brightness(.9) saturate(1.05);
	transition: transform .6s cubic-bezier(.25, .46, .45, .94), filter .4s ease;
}

.blog-section .article-card:hover .ac-img img {
	transform: scale(1.07);
	filter: brightness(1) saturate(1.1);
}

.blog-section .ac-img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 18, 18, .46) 0%, transparent 56%);
	z-index: 1;
	pointer-events: none;
}

.blog-section .ac-body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-section .ac-title {
	margin-bottom: 9px;
	font-size: 20px;
	font-weight: 800;
	color: var(--secondary-color);
	transition: color .3s ease;
}

.blog-section .article-card:hover .ac-title {
	color: var(--primary-color);
}

.blog-section .ac-excerpt {
	padding-bottom: 16px;
	font-size: 15px;
}

.blog-section .ac-divider {
	height: 1px;
	margin-bottom: 14px;
	background: rgba(18, 18, 18, .08);
}

.blog-section .ac-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.blog-section .ac-author {
	display: flex;
	align-items: center;
	gap: 9px;
}

.blog-section .ac-av {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255, 88, 27, .3);
	flex-shrink: 0;
}

.blog-section .ac-av img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-section .ac-av-name {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--secondary-color);
}

.blog-section .ac-av-date {
	font-size: 10px;
}

/* =========================
   Blog Details Page
========================= */

.blog-details-card {
	background: var(--white-color);
	padding: 45px;
	border-radius: 28px;
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
	margin-bottom: 50px;
}

.blog-meta {
	display: flex;
	gap: 20px;
	font-size: 14px;
	color: var(--text-color);
	margin: 15px;
}

.blog-meta i {
	color: var(--primary-color);
	margin-right: 5px;
}

.blog-img-fix {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
}

.blog-img-fix img {
	width: 100%;
	/* height: 420px; */
	object-fit: cover;
	display: block;
	border-radius: 24px;
	image-rendering: auto;
}

.blog-details-card .blog-date {
	position: absolute;
	left: 25px;
	bottom: 25px;
	background: linear-gradient(135deg, #F7931E, #ffb347);
	color: var(--white-color);
	padding: 12px 18px;
	border-radius: 14px;
	text-align: center;
	font-weight: 700;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.blog-details-card .blog-date span {
	font-size: 22px;
	display: block;
	line-height: 22px;
}

.blog-details-card .blog-date small {
	font-size: 13px;
}

.blog-quote {
	color: var(--white-color);
	padding: 35px;
	border-radius: 22px;
	margin: 45px 0;
	font-size: 18px;
	line-height: 30px;
	position: relative;
	border-left: 5px solid var(--primary-color);
	background: transparent;
}

.blog-quote p {
	margin: 0;
	font-size: 20px;
	font-style: italic;
	font-weight: 500;
	color: var(--text-color);
}

.blog-list {
	padding-left: 20px;
	margin-bottom: 25px;
}

.blog-list li {
	margin-bottom: 8px;
	color: var(--text-color);
	position: relative;
}

.blog-list li::marker {
	color: var(--secondary-color);
}

.blog-author-box {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background: #f5faf6;
	padding: 25px;
	border-radius: 22px;
	margin: 40px 0;
}

.blog-author-box img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--primary-color);
	flex-shrink: 0;
}

.blog-author-box h5 {
	margin-bottom: 8px;
	font-weight: 700;
}

.blog-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 30px;
	padding-top: 25px;
	border-top: 1px solid #eee;
}

.blog-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.blog-tags a {
	background: #ff890f14;
	color: var(--primary-color);
	padding: 7px 15px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	margin-right: 8px;
	text-decoration: none;
	transition: .3s;
}

.blog-tags a:hover {
	background: var(--primary-color);
	color: var(--white-color);
}

.blog-share {
	display: flex;
	align-items: center;
	gap: 10px;
}

.blog-share strong {
	font-weight: 600;
	color: var(--dark-color);
	margin-right: 5px;
}

.blog-share a {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ff890f14;
	color: var(--primary-color);
	margin-left: 5px;
	transition: .3s;
}

.blog-share a:hover {
	background: var(--secondary-color);
	color: var(--white-color);
}

.post-navigation {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}

.comments-area {
	margin-bottom: 40px;
}

.comment-box {
	display: flex;
	gap: 15px;
	background: var(--white-color);
	padding: 25px;
	border-radius: 18px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
	margin-bottom: 25px;
}

.comment-box img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--primary-color);
}

.reply-btn {
	color: var(--secondary-color);
	font-weight: 600;
	text-decoration: none;
}

.comment-form {
	background: var(--white-color);
	padding: 35px;
	border-radius: 22px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1);
}

.comment-form h4 {
	margin-bottom: 25px;
}

.blog-sidebar {
	position: sticky;
	top: 110px;
}

.sidebar-box {
	padding: 28px;
	border-radius: 26px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
	margin-bottom: 30px;
}

.sidebar-box h4 {
	font-size: 20px;
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 10px;
}

.sidebar-box h4::after {
	content: "";
	width: 50px;
	height: 3px;
	background: var(--secondary-color);
	position: absolute;
	left: 0;
	bottom: 0;
	border-radius: 2px;
}

.sidebar-search {
	display: flex;
}

.sidebar-search input,
.comment-form input,
.comment-form textarea {
	width: 100%;
	border: none;
	background: #f5f5f5;
	padding: 14px 18px;
	border-radius: 10px;
	outline: none;
}

.sidebar-search input:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	background: var(--white-color);
	box-shadow: 0 0 0 2px rgba(123, 191, 0, 0.2);
}

.sidebar-search button {
	background: var(--primary-color);
	color: var(--white-color);
	border: none;
	padding: 0 22px;
	transition: .3s;
}

.sidebar-search button:hover {
	background: var(--secondary-color);
}

.recent-post {
	display: flex;
	gap: 15px;
	margin-bottom: 18px;
	align-items: center;
}

.recent-post img {
	width: 80px;
	height: 65px;
	border-radius: 12px;
	object-fit: cover;
	flex-shrink: 0;
}

.recent-post a {
	color: var(--text-color);
	font-weight: 600;
	font-size: 15px;
	line-height: 22px;
	text-decoration: none;
	display: block;
}

.recent-post a:hover {
	color: var(--primary-color);
}

.recent-post span {
	font-size: 13px;
	color: var(--text-color);
}

.category-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.category-list li {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px dashed #ddd;
	font-weight: 500;
	color: var(--text-color);
}

.category-list li span {
	background: var(--primary-color);
	color: var(--white-color);
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 13px;
}

.sidebar-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.sidebar-gallery img {
	width: 100%;
	height: 80px;
	object-fit: cover;
	border-radius: 12px;
	cursor: pointer;
	transition: .3s;
}

.sidebar-gallery img:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tag-cloud a {
	background: #ff890f14;
	color: var(--primary-color);
	padding: 7px 14px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: .3s;
}

.tag-cloud a:hover {
	background: var(--secondary-color);
	color: var(--white-color);
}

/* =========================
   Home Page 2
========================= */
.Akshar-header {
	background: transparent;
	padding: 0;
	box-shadow: none;
	position: absolute;
	width: 100%;
	transition: all 0.3s ease;
	margin-top: 20px;
}

.Akshar-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* background-color: var(--white-color); */
	background-color: color-mix(in oklab, var(--white-color) 70%, transparent);
	border-radius: 100px;
	border: 1px solid #e5e7eb;
}

.Akshar-header .header-menu {
	display: flex;
	gap: 25px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.Akshar-header .header-menu li a {
	font-weight: 600;
	color: var(--secondary-color);
}

.Akshar-header .header-menu li a:hover {
	color: var(--primary-color);
}

.Akshar-header .header-menu .nav-item:not(:first-child) {
	margin-left: 25px;
}

.Akshar-header .header-menu li.active a {
	color: var(--primary-color);
}

.Akshar-header .header-logo img {
	height: 70px;
}

.Akshar-header .header-right {
	display: flex;
	align-items: center;
	gap: 15px;
}

.Akshar-header .header-search-modern {
	position: relative;
	display: flex;
	align-items: center;
	width: 240px;
	border-bottom: 2px solid #ddd;
	transition: all 0.3s ease;
}

.Akshar-header .header-search-modern input {
	width: 100%;
	border: none;
	outline: none;
	background: transparent;
	padding: 10px 40px 10px 0;
	font-size: 15px;
	color: var(--text-color);
}

.Akshar-header .header-search-modern input::placeholder {
	color: var(--text-color);
	font-weight: 500;
}

.Akshar-header .header-search-modern button {
	position: absolute;
	right: 0;
	background: none;
	border: none;
	font-size: 16px;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.3s ease;
}

.Akshar-header .header-search-modern:hover,
.header-search-modern:focus-within {
	border-color: var(--primary-color);
}

.Akshar-header .header-search-modern:hover button,
.Akshar-header .header-search-modern:focus-within button {
	color: var(--primary-color);
}

.Akshar-header .header-search-modern::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	transition: 0.4s ease;
}

.Akshar-header .header-search-modern:hover::after,
.Akshar-header .header-search-modern:focus-within::after {
	width: 100%;
}

.cart-btn {
	width: 42px;
	height: 42px;
	color: var(--primary-color);
	font-size: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.cart-btn:hover {
	transform: translateY(-2px);
	color: var(--secondary-color);
}

.Akshar-header.sticky {
	position: fixed;
	top: 0;
	left: 0;
	background: var(--white-color);
	width: 100%;
	z-index: 998;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.Akshar-header.sticky {
	margin-top: 0;
}

.Akshar-header.sticky .header-inner {
	border-radius: none;
	border: none;
}

/* =========================
   Home Page 2 slider details
========================= */

.Akshar-hero-slider {
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	margin: 0;
	border-radius: 0px;
	overflow: hidden;
	padding: 0;
}

.Akshar-hero-slider .hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 1;
}

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

.Akshar-hero-slider .hero-slide {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	background-size: cover;
	background-position: center;
	border-radius: 0px;
	overflow: hidden;
}

.Akshar-hero-slider .hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.Akshar-hero-slider .hero-content {
	z-index: 3;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--white-color);
	max-width: 100%;
	margin: auto;
	opacity: 0;
	transform: translateY(100px);
	transition: all 1s ease;
}

.Akshar-hero-slider .owl-item.active .hero-content {
	opacity: 1;
	transform: translateY(0);
}

.Akshar-hero-slider .owl-item.active .hero-slide {
	animation: zoomEffect 10s linear infinite;
}

@keyframes zoomEffect {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.12);
	}
}

.Akshar-hero-slider .hero-badge {
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: 6px 20px;
	border-radius: 30px;
	font-size: 13px;
	letter-spacing: 1px;
	margin-bottom: 25px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(4px);
}

.Akshar-hero-slider .hero-content h1 {
	font-size: 72px;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 35px;
	color: var(--white-color);
}

.Akshar-hero-slider .hero-title .word {
	display: inline-block;
	transform: translateY(50px);
}

.Akshar-hero-slider .hero-content .hero-description {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	margin-bottom: 35px;
	color: var(--white-color);
}

.Akshar-hero-slider .hero-badge,
.Akshar-hero-slider .hero-title,
.Akshar-hero-slider .hero-btn,
.Akshar-hero-slider .hero-description {
	opacity: 1;
	visibility: visible;
}

.Akshar-hero-slider .owl-dots {
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	align-items: center;
	align-content: space-around;
}

.Akshar-hero-slider .owl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin: 12px 0;
	background: rgba(255, 255, 255, 0.5);
	transition: all 0.3s ease;
}

.Akshar-hero-slider .owl-dots .active {
	border: 2px solid var(--primary-color) !important;
	transform: scale(1.4);
	box-shadow: 0 0 0 6px rgba(255, 137, 15, 0.3);
}

.Akshar-hero-slider .owl-dots .active span {
	background: none;
}

.Akshar-hero-slider .owl-dot span {
	width: 12px;
	height: 12px;
	background: rgba(255, 255, 255, 0.5);
	display: block;
	border-radius: 50%;
}

.Akshar-hero-slider .hero-title .highlight {
	color: var(--primary-color);
	font-weight: 800;
}

/* ==============================
   Home page 2 Why Choose Section
================================ */

.why-choose-modern {
	position: relative;
	overflow: hidden;
	padding: 118px 0;
}

.why-choose-modern::before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255, 137, 15, 0.12);
	top: -210px;
	right: -150px;
	pointer-events: none;
	animation: blobFloat1 12s ease-in-out infinite,
		blobPulse 6s ease-in-out infinite;
}

.why-choose-modern::after {
	content: "";
	position: absolute;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: rgba(16, 146, 233, 0.12);
	bottom: -240px;
	left: -210px;
	pointer-events: none;
	animation: blobFloat2 14s ease-in-out infinite,
		blobPulse 7s ease-in-out infinite;
}

@keyframes blobFloat1 {
	0% {
		transform: translate(0, 0) scale(1);
	}

	25% {
		transform: translate(-20px, 30px) scale(1.05);
	}

	50% {
		transform: translate(30px, -20px) scale(0.95);
	}

	75% {
		transform: translate(-15px, 15px) scale(1.03);
	}

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

@keyframes blobFloat2 {
	0% {
		transform: translate(0, 0) scale(1);
	}

	25% {
		transform: translate(25px, -20px) scale(1.04);
	}

	50% {
		transform: translate(-30px, 25px) scale(0.96);
	}

	75% {
		transform: translate(20px, 10px) scale(1.02);
	}

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

@keyframes blobPulse {
	0% {
		opacity: 0.7;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0.7;
	}
}

.why-modern-bento {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px;
}

.why-modern-intro-card,
.why-modern-mini-card,
.why-modern-media-card,
.why-modern-proof-card {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
}

.why-modern-intro-card {
	grid-column: span 5;
	grid-row: span 2;
	padding: 34px;
	background: var(--white-color);
	border: 1px solid #e5ebf5;
	box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
	isolation: isolate;
	background: linear-gradient(145deg, #fff3e8 0%, var(--white-color) 100%);
}

.why-modern-intro-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 34px rgba(15, 23, 42, 0.13);
}

.why-modern-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 137, 15, 0.35);
	color: #ffce92;
	font-size: 12px;
	letter-spacing: 0.03em;
	margin-bottom: 16px;
}

.why-modern-title {
	font-size: 48px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
	color: var(--secondary-color);
}

.why-modern-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: grid;
	gap: 10px;
}

.why-modern-list li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.why-modern-list i {
	color: #ff9f33;
}

.why-modern-action {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.why-modern-action .btn {
	padding: 13px 22px;
}

.why-modern-call {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid #e5ebf5;
	background: #f9fafb;
	min-width: 210px;
}

.why-modern-call:hover {
	transform: translateY(-8px);
	border-color: rgba(255, 137, 15, 0.4);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	background: rgba(255, 137, 15, 0.08);
}

.why-modern-call span {
	font-size: 11px;
	letter-spacing: 0.08em;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-color);
}

.why-modern-call strong {
	font-size: 18px;
	line-height: 1.2;
	color: var(--text-color);
}

.why-modern-mini-card {
	padding: 22px 20px;
	background: var(--white-color);
	border: 1px solid #e5ebf5;
	box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.why-modern-mini-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 34px rgba(15, 23, 42, 0.13);
}

.why-modern-card-strategy {
	grid-column: span 3;
	background: linear-gradient(145deg, #fff9ef 0%, var(--white-color) 100%);
}

.why-modern-card-delivery {
	grid-column: span 4;
	background: linear-gradient(145deg, #eef7ff 0%, var(--white-color) 100%);
}

.why-modern-card-support {
	grid-column: span 3;
	background: linear-gradient(145deg, #f7f3ff 0%, var(--white-color) 100%);
}

.why-modern-card-scale {
	grid-column: span 4;
	background: linear-gradient(145deg, #eefcf6 0%, var(--white-color) 100%);
}

.why-modern-mini-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 17px;
}

.why-modern-mini-card h5 {
	font-size: 20px;
	margin-bottom: 8px;
	color: var(--secondary-color);
	letter-spacing: -0.01em;
}

.why-modern-mini-card p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-color);
}

.why-modern-media-card {
	grid-column: span 7;
	min-height: 318px;
	border: 1px solid #dde6f3;
	background: #0f172a;
	box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
}

.why-modern-media-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.why-modern-media-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 20px 18px;
	background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, 0.88) 62%, rgba(2, 6, 23, 0.96) 100%);
}

.why-modern-media-overlay h5 {
	font-size: 24px;
	margin-bottom: 6px;
	color: var(--white-color);
}

.why-modern-media-overlay p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(226, 232, 240, 0.86);
}

.why-modern-chip-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.why-modern-chip-row span {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: #dbeafe;
	background: rgba(30, 41, 59, 0.8);
	border: 1px solid rgba(148, 163, 184, 0.35);
}

.why-modern-proof-card {
	grid-column: span 5;
	padding: 28px 24px;
	background: var(--white-color);
	border: 1px solid #e5ebf5;
	box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 20px;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
	background: linear-gradient(145deg, #f0f7ff 0%, var(--white-color) 100%);
}

.why-modern-proof-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 34px rgba(15, 23, 42, 0.13);
}

.why-modern-proof-card .about-modern-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 14px;
	margin: 0;
}

.why-modern-proof-card .about-metric-pill {
	background: var(--white-color);
	border: 1px solid var(--primary-color);
	border-radius: 14px;
	padding: 16px 12px;
	text-align: center;
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 75px;
}

.why-modern-proof-card .about-metric-pill:hover {
	transform: translateY(-8px);
	border-color: rgba(255, 137, 15, 0.4);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	background: rgba(255, 137, 15, 0.08);
	-webkit-transition: all 0.5s ease-in-out 0s;
}

.why-modern-proof-card .about-metric-pill a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.why-modern-proof-card .about-metric-pill img {
	max-width: 100%;
	width: 100%;
	height: 45px;
	object-fit: contain;
	filter: grayscale(20%) brightness(1);
	transition: all 0.3s ease;
}

.why-modern-proof-card .about-metric-pill:hover img {
	filter: grayscale(0%) brightness(1);
	transform: scale(1.05);
}

.why-modern-proof-label {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0369a1;
	background: #e9f6ff;
	border: 1px solid #bae6fd;
	margin-bottom: 12px;
}

.why-modern-proof-card h5 {
	font-size: 22px;
	margin-bottom: 0;
	color: var(--secondary-color);
	line-height: 1.3;
}

.why-modern-proof-card p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-color);
}

.why-modern-proof-stack {
	display: grid;
	gap: 10px;
}

.why-modern-proof-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-radius: 14px;
	padding: 12px;
	background: var(--white-color);
	border: 1px solid #e5ecf7;
	animation: whyProofReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.why-modern-proof-item:nth-child(1) {
	animation-delay: 0.12s;
}

.why-modern-proof-item:nth-child(2) {
	animation-delay: 0.24s;
}

.why-modern-proof-step {
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--white-color);
	background: linear-gradient(135deg, #ff890f 0%, #1092e9 100%);
}

.why-modern-proof-item strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--text-color);
}

.why-modern-proof-item p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-color);
}

@keyframes whyProofFloat {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

@keyframes whyProofGlow {

	0%,
	100% {
		opacity: 0.35;
	}

	50% {
		opacity: 0.62;
	}
}

@keyframes whyProofReveal {
	0% {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* =========================
   Clients Section
========================= */

.agro-clients-premium {
	padding: 110px 0 90px;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 18% 20%, rgba(251, 113, 133, 0.16) 0%, transparent 28%),
		radial-gradient(circle at 82% 18%, rgba(253, 186, 116, 0.16) 0%, transparent 28%),
		radial-gradient(circle at 35% 85%, rgba(255, 228, 230, 0.24) 0%, transparent 30%),
		linear-gradient(135deg, #fff8f8 0%, #fff7ed 45%, #fffaf5 100%);
}

.menu-hero-ghost {
	position: absolute;
	font-size: 200px;
	font-weight: 900;
	letter-spacing: -8px;
	color: rgb(255 137 15 / 17%);
	bottom: -20px;
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
	line-height: 1;
	text-transform: uppercase;
}

.client-heading {
	margin-bottom: 40px;
}

.client-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	justify-items: center;
	align-items: center;
}

.client-logo {
	width: 200px;
	height: 100px;
	background: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
	transition: all 0.45s ease;
	position: relative;
	overflow: hidden;
	border: 1px solid #ff890f;
	border-radius: 10px;
	margin: 20px;
}

.client-logo img {
	max-width: 60%;
	max-height: 60%;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: 0.45s ease;
	z-index: 1;
}

.client-logo:hover {
	transform: translateY(-10px) scale(1.06);
}

.client-logo:hover::before {
	opacity: 1;
}

.client-logo:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

.team-social {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	opacity: 0;
	transition: 0.4s ease;
}

.team-social a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	transition: 0.3s;
}

.team-social a:hover {
	background: var(--primary-color);
	color: var(--white-color);
}

.team-card:hover .team-social {
	opacity: 1;
	right: 20px;
}

.team-details-section .team-social {
	position: relative;
	opacity: 1;
	top: auto;
	right: auto;
	transform: none;
	flex-direction: row;
	justify-content: flex-start;
	margin-top: 20px;
	gap: 12px;
}

.team-details-section .team-social a {
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

.team-details-section .team-social:hover {
	opacity: 1;
}

/* =========================
   Home page 2 Footer
========================= */

.Akshar-footer {
	color: var(--white-color);
	position: relative;
}

.footer-newsletter {
	margin-bottom: -110px;
	position: relative;
	z-index: 9;
}

.Akshar-newsletter-box {
	background: var(--primary-color);
	border-radius: 22px;
	padding: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
}

.Akshar-newsletter-left h3 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 15px;
	color: var(--white-color);
}

.Akshar-newsletter-form {
	display: flex;
	max-width: 420px;
	border-radius: 6px;
	overflow: hidden;
}

.Akshar-newsletter-form input {
	border: none;
	padding: 14px 18px;
	width: 100%;
	outline: none;
}

.Akshar-newsletter-form button {
	background: var(--secondary-color);
	color: var(--white-color);
	border: none;
	padding: 0 28px;
	font-weight: 600;
	cursor: pointer;
	transition: .3s;
}

.Akshar-newsletter-form button:hover {
	background: #000;
	color: var(--white-color);
}

.phone-box,
.email-box {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 20px;
	font-weight: 700;
}

.phone-box i,
.email-box i {
	width: 48px;
	height: 48px;
	background: var(--white-color);
	color: var(--primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.phone-box i:hover,
.email-box i:hover {
	background: var(--secondary-color);
	color: var(--white-color);
	transition: 0.4s ease;
}

.Akshar-footer-main {
	position: relative;
	overflow: hidden;
	padding: 80px 0 20px;
	background-color: var(--secondary-color);
}

.Akshar-footer-main::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(18, 26, 29, 0.72);
	z-index: 0;
}

.Akshar-footer-main::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(1100px, 94vw);
	height: min(400px, 60vw);
	transform: translate(-50%, -50%);
	background: url("../images/world-map.svg") center center / contain no-repeat;
	opacity: 0.20;
	filter: brightness(0) invert(1) contrast(0.10);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 1;
}

.Akshar-footer-main .container {
	position: relative;
	z-index: 2;
}

.footer-logo {
	height: 100px;
	margin-bottom: 18px;
}

.Akshar-footer-main p {
	color: var(--white-color);
	line-height: 1.7;
}

.Akshar-footer-main h5 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 18px;
	color: var(--white-color);
}

.Akshar-footer-main ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

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

.Akshar-footer-main ul li a {
	color: var(--white-color);
	text-decoration: none;
	transition: .3s;
}

.Akshar-footer-main ul li a i {
	font-size: 14px;
}

.Akshar-footer-main ul li a:hover {
	color: var(--primary-color);
	padding-left: 6px;
}

.footer-social {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.footer-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	transition: .3s;
	background: var(--primary-color);
}

.footer-social a:hover {
	background: var(--white-color);
	color: var(--primary-color);
}

.contactus-social {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.contactus-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	transition: .3s;
	background: var(--primary-color);
}

.contactus-social a:hover {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	box-shadow: 0 0 18px rgba(255, 137, 15, .8);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .2);
	margin-top: 15px;
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 14px;
	color: var(--white-color);
}

.footer-bottom a {
	color: var(--white-color);
	margin-left: 15px;
	text-decoration: none;
}

.footer-bottom a:hover {
	color: var(--primary-color);
}

/* =========================
   THEME SCROLLBAR
========================= */

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--primary-color);
}

::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 10px;
}

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

/* Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color);
}

.overflow-wrapper {
	width: 100%;
	position: relative;
}

.container {
	width: 90% !important;
	max-width: 1480px !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.navbar .nav-item.newmega-dropdown {
	position: relative;
}

.navbar .nav-item.newmega-dropdown {
	position: static !important;
}

.navbar .newmega-menu {
	position: absolute;
	left: 5%;
	transform: translateX(-50%) translateY(-10px) scale(0.98);
	width: auto;
	top: 100%;
	background-color: color-mix(in oklab, var(--white-color) 70%, transparent);
	border: none;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
	z-index: 1000;
	min-width: 1100px;
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0.4s linear;
	margin: 2px 0px;
}

.navbar .newmega-dropdown:hover .newmega-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scale(1);
}

.newmega-menu .container {
	max-width: 1400px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.newmega-menu .row {
	margin: 0;
}

.newmega-menu .col-md-3 {
	position: relative;
	margin: 0;
}

.newmega-menu .col-md-3:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 1px;
	background: linear-gradient(to bottom, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
}

.newmega-title {
	margin-bottom: 10px;
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: relative;
	padding-bottom: 12px;
}

.newmega-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--primary-color);
}

.newmega-list {
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: left;
}

.newmega-list li {
	margin-bottom: 0;
	list-style: none;
}

.newmega-list .dropdown-item {
	position: relative;
	padding: 10px 10px 10px 10px;
	transition: all 0.3s ease;
	color: var(--text-color);
	background: transparent;
	border-radius: 8px;
	font-weight: 500;
	display: block;
	white-space: normal;
	word-wrap: break-word;
	line-height: 1.4;
}

.newmega-list .dropdown-item::before {
	content: "\f105";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-color);
	font-size: 12px;
	opacity: 0;
	transition: all 0.3s ease;
}

.newmega-list .dropdown-item:hover {
	background: rgba(255, 137, 15, 0.08);
	color: var(--primary-color);
	padding-left: 25px;
	transform: translateX(4px);
}

.newmega-list .dropdown-item:hover::before {
	opacity: 1;
}

/* =========================
   Company Dropdown Menu
========================= */

.navbar .nav-item.company-dropdown {
	position: static !important;
}

.navbar .company-menu {
	position: absolute;
	left: 20%;
	transform: translateX(-50%) translateY(15px) scale(0.95);
	width: auto;
	min-width: 220px;
	top: 100%;
	background-color: color-mix(in oklab, var(--white-color) 70%, transparent);
	border: none;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
	padding: 10px 0px !important;
	z-index: 1000;
	border-radius: 10px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0.3s ease;
	margin: 2px 0px;
}

.navbar .company-dropdown:hover .company-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scale(1);
}

.company-list {
	padding: 0;
	margin: 0;
	list-style: none;
}

.company-list li {
	margin-bottom: 0;
	list-style: none;
}

.company-list .dropdown-item {
	position: relative;
	padding: 15px 20px 15px 20px;
	transition: all 0.3s ease;
	color: var(--text-color);
	background: transparent;
	border-radius: 8px;
	font-weight: 500;
	display: block;
	white-space: normal;
	word-wrap: break-word;
	line-height: 1.4;
}

.company-list .dropdown-item::before {
	content: "\f105";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-color);
	font-size: 12px;
	opacity: 0;
	transition: all 0.3s ease;
}

.company-list .dropdown-item:hover {
	background: rgba(255, 137, 15, 0.08);
	color: var(--primary-color);
	padding-left: 35px;
}

.company-list .dropdown-item:hover::before {
	opacity: 1;
}

/* =========================
   Service Details Process Steps
========================= */

.process-step-card {
	border: 1px solid #eef0f4;
	border-radius: 16px;
	padding: 25px;
	transition: all 0.3s ease;
	position: relative;
	height: 100%;
}

.process-step-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
	border-color: rgba(255, 137, 15, 0.3);
}

.step-number {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 20px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
}

.process-step-card h5 {
	font-size: 18px;
	margin-bottom: 10px;
	color: var(--dark-color);
}

.process-step-card p {
	color: var(--text-color);
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.aw-services {
	padding: 100px 0;
}

.agro-stats {
	position: relative;
	overflow: hidden;
	padding: 110px 0;
	background:
		radial-gradient(circle at 15% 20%, rgba(167, 139, 250, 0.25) 0%, transparent 30%),
		radial-gradient(circle at 85% 15%, rgba(96, 165, 250, 0.20) 0%, transparent 28%),
		radial-gradient(circle at 20% 80%, rgba(196, 181, 253, 0.22) 0%, transparent 30%),
		linear-gradient(135deg, #f8f7ff 0%, #eef2ff 45%, #f0f9ff 100%);
}

.agro-stats::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 137, 15, 0.18);
	top: -120px;
	left: -120px;
}

.agro-stats::after {
	content: "";
	position: absolute;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: rgba(18, 26, 29, 0.08);
	bottom: -160px;
	right: -160px;
}

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

.stat-box {
	background: var(--white-color);
	border-radius: 18px;
	padding: 25px;
	text-align: center;
	transition: all .4s ease;
	height: 100%;
}

.stat-box:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.stat-box .stat-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--primary-color, #ff8a00);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	font-size: 28px;
}

.stat-box .product-img {
	background: #f6f4ec;
	border-radius: 15px;
	padding: 25px;
	margin-bottom: 20px;
}

.stat-box .product-img img {
	max-width: 100%;
	height: 180px;
	object-fit: contain;
}

.stat-box .price {
	color: var(--text-color);
	margin-bottom: 15px;
}

/* =========================
   Portfolio Page
========================= */

.portfolio-hero {
	position: relative;
	overflow: hidden;
	padding: 110px 0;
	background: linear-gradient(135deg, #fff3e6 0%, #f3f8ff 55%, var(--white-color) 100%);
}

.portfolio-hero::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 137, 15, 0.18);
	top: -120px;
	right: -120px;
	animation: blobFloat1 12s ease-in-out infinite,
		blobPulse 6s ease-in-out infinite;
}

.portfolio-hero::after {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: rgba(18, 26, 29, 0.08);
	bottom: -160px;
	left: -160px;
	animation: blobFloat2 14s ease-in-out infinite,
		blobPulse 7s ease-in-out infinite;
}

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

.portfolio-highlights {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.highlight-item {
	background: var(--white-color);
	border-radius: 16px;
	padding: 14px 18px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	min-width: 150px;
	border: 1px solid #e5ebf5;
	-webkit-transition: all 0.5s ease-in-out 0s;
}

.highlight-item:hover {
	transform: translateY(-8px);
	border-color: rgba(255, 137, 15, 0.4);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	background: rgba(255, 137, 15, 0.08);
}

.highlight-number {
	font-size: 22px;
	font-weight: 800;
	color: var(--secondary-color);
	display: block;
	line-height: 1.1;
}

.highlight-text {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-color);
	font-weight: 600;
}

.portfolio-actions {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}

.portfolio-hero-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.portfolio-hero-item {
	position: relative;
	border-radius: 22px;
	padding: 0;
	min-height: 0;
	aspect-ratio: 16 / 10;
	background: var(--white-color);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.portfolio-hero-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at top right, rgba(255, 137, 15, 0.16), transparent 55%);
	opacity: 0.9;
}

.portfolio-hero-item.large {
	grid-column: span 2;
	aspect-ratio: 21 / 9;
	min-height: 0;
}

.portfolio-hero-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 2;
	transform: scale(1.02);
	transition: transform 0.45s ease;
}

.portfolio-hero-overlay {
	position: absolute;
	left: 20px;
	bottom: 20px;
	background: var(--primary-color);
	color: var(--white-color);
	padding: 10px 14px;
	border-radius: 12px;
	z-index: 2;
}

.portfolio-hero-overlay span {
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: block;
	color: var(--base-color);
	font-weight: 700;
}

.portfolio-hero-overlay h5 {
	color: var(--white-color);
	margin: 0;
	font-size: 17px;
}

.portfolio-showcase {
	padding: 100px 0;
}

.portfolio-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 40px;
}

.portfolio-filter button {
	border: none;
	background: var(--white-color);
	padding: 10px 20px;
	border-radius: 30px;
	font-weight: 600;
	color: var(--text-color);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.portfolio-filter button.active,
.portfolio-filter button:hover {
	background: var(--primary-color);
	color: var(--white-color);
}

.portfolio-card {
	background: var(--white-color);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
	transition: all 0.35s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.portfolio-thumb {
	position: relative;
	padding: 0;
	min-height: 0;
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(255, 137, 15, 0.1), rgba(18, 26, 29, 0.04));
	overflow: hidden;
}

.portfolio-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255, 137, 15, 0.2), transparent);
	opacity: 0;
	transition: all 0.3s ease;
}

.portfolio-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 2;
	transform: scale(1.01);
	transition: transform 0.45s ease;
}

.portfolio-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 14px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 20px;
	z-index: 2;
}

.portfolio-info {
	padding: 24px 25px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.portfolio-info h4 {
	font-size: 22px;
	margin-bottom: 0;
}

.portfolio-info p {
	font-size: 15px;
	color: var(--text-color);
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 48px;
}

.portfolio-meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--text-color);
	margin-top: auto;
}

.portfolio-meta span {
	background: #f3f4f6;
	padding: 6px 10px;
	border-radius: 999px;
}

.portfolio-link {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 25px 24px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--primary-color);
	padding-top: 16px;
	border-top: 1px solid #eef0f4;
}

.portfolio-grid-placeholder,
.portfolio-empty-state {
	background: var(--white-color);
	border-radius: 22px;
	border: 1px dashed #d8dfeb;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
	padding: 30px 24px;
	text-align: center;
	color: var(--text-color);
}

.portfolio-grid-placeholder {
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
}

.portfolio-empty-state h5 {
	font-size: 22px;
	margin-bottom: 8px;
}

.portfolio-empty-state p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-color);
}

.portfolio-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.12);
}

.portfolio-card:hover .portfolio-thumb::after {
	opacity: 1;
}

.portfolio-card:hover .portfolio-link {
	color: var(--secondary-color);
}

.portfolio-card:hover .portfolio-thumb img,
.portfolio-hero-item:hover img {
	transform: scale(1.06);
}

.portfolio-process {
	padding: 100px 0;
	background: var(--white-color);
}

.portfolio-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}

.portfolio-list li {
	display: flex;
	gap: 10px;
	font-weight: 600;
	color: var(--text-color);
}

.portfolio-list li i {
	color: var(--primary-color);
	margin-top: 4px;
}

.process-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.process-card {
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	transition: all 0.35s ease;
}

.process-icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: rgba(255, 137, 15, 0.15);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin-bottom: 16px;
}

.process-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.portfolio-cta {
	padding: 90px 0;
	background: #f6f4ec;
}

.portfolio-cta-box {
	background: linear-gradient(135deg, #121a1d, #1f2a30);
	color: var(--white-color);
	border-radius: 30px;
	padding: 45px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.portfolio-cta-box h3 {
	color: var(--white-color);
	font-size: 28px;
	margin-bottom: 10px;
}

.portfolio-cta-box p {
	color: var(--text-color);
	margin: 0;
}

/* =========================
   Page breadcrumb
========================= */

.breadcrumb-section {
	position: relative;
	min-height: 340px;
	height: auto;
	padding: 150px 0px 50px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	background:
		radial-gradient(circle at 15% 25%, rgba(255, 88, 27, 0.12) 0%, transparent 35%),
		radial-gradient(circle at 85% 20%, rgba(192, 132, 252, 0.15) 0%, transparent 32%),
		radial-gradient(circle at 25% 85%, rgba(216, 180, 254, 0.18) 0%, transparent 35%),
		radial-gradient(ellipse at 90% 80%, rgba(255, 137, 15, 0.1) 0%, transparent 40%),
		linear-gradient(135deg, #fff7fb 0%, #fdf2f8 50%, #f5f3ff 100%);

	background-attachment: fixed;
}

.breadcrumb-shapes {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	max-width: 100vw;
	right: 0;
}

.breadcrumb-shapes .shape {
	position: absolute;
	opacity: 0;
	animation: float 6s ease-in-out infinite;
}

.breadcrumb-shapes .shape-circle {
	border-radius: 50%;
}

.breadcrumb-shapes .shape-1 {
	width: 180px;
	height: 180px;
	top: 5%;
	left: 8%;
	background: linear-gradient(135deg, rgba(255, 88, 27, 0.25), rgba(255, 137, 15, 0.15));
	box-shadow: 0 20px 60px rgba(255, 88, 27, 0.2);
	animation: float 8s ease-in-out infinite;
	opacity: 0.8;
}

.breadcrumb-shapes .shape-2 {
	width: 220px;
	height: 220px;
	top: -10%;
	right: 5%;
	background: linear-gradient(135deg, rgba(192, 132, 252, 0.2), rgba(216, 180, 254, 0.15));
	box-shadow: 0 20px 60px rgba(192, 132, 252, 0.15);
	animation: float 10s ease-in-out infinite reverse;
	opacity: 0.75;
}

.breadcrumb-shapes .shape-3 {
	width: 150px;
	height: 150px;
	bottom: 5%;
	left: 15%;
	background: linear-gradient(135deg, rgba(216, 180, 254, 0.2), rgba(168, 85, 247, 0.15));
	box-shadow: 0 20px 50px rgba(216, 180, 254, 0.18);
	animation: float 9s ease-in-out infinite;
	opacity: 0.7;
}

.breadcrumb-shapes .shape-blob {
	border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.breadcrumb-shapes .shape-4 {
	width: 200px;
	height: 200px;
	top: 15%;
	right: 15%;
	background: linear-gradient(135deg, rgba(255, 88, 27, 0.18), rgba(192, 132, 252, 0.12));
	box-shadow: 0 25px 50px rgba(255, 88, 27, 0.15);
	animation: float 11s ease-in-out infinite reverse;
	opacity: 0.65;
	animation-delay: 1s;
}

.breadcrumb-shapes .shape-5 {
	width: 170px;
	height: 170px;
	bottom: 15%;
	right: 8%;
	background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(216, 180, 254, 0.1));
	box-shadow: 0 15px 40px rgba(168, 85, 247, 0.12);
	animation: float 7s ease-in-out infinite;
	opacity: 0.6;
	animation-delay: 0.5s;
}

.breadcrumb-section .container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.breadcrumb-content {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: space-between;
	align-items: center;
}

.breadcrumb-title {
	color: var(--primary-color);
	word-wrap: break-word;
	margin: 0;
}

.breadcrumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 28px;
	background: rgba(255, 137, 15, 0.12);
	border: 1.5px solid rgba(255, 137, 15, 0.25);
	border-radius: 50px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	flex-wrap: wrap;
	max-width: 100%;
	word-break: break-word;
	box-shadow: 0 8px 32px rgba(255, 88, 27, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	margin: 0;
}

.breadcrumb:hover {
	background: rgba(255, 137, 15, 0.18);
	box-shadow: 0 12px 40px rgba(255, 88, 27, 0.15);
	border-color: rgba(255, 137, 15, 0.35);
}

.breadcrumb-link {
	color: var(--primary-color);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
}

.breadcrumb-link:hover {
	color: var(--primary-color);
}

.breadcrumb-separator {
	color: rgba(51, 51, 51, 0.4);
	font-size: 14px;
}

.breadcrumb-current {
	color: var(--text-color);
	font-size: 14px;
	font-weight: 500;
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
	}

	25% {
		transform: translateY(-20px) rotate(5deg);
	}

	50% {
		transform: translateY(-40px) rotate(-5deg);
	}

	75% {
		transform: translateY(-20px) rotate(3deg);
	}
}

@keyframes pulse {

	0%,
	100% {
		box-shadow: 0 20px 60px rgba(255, 88, 27, 0.2);
	}

	50% {
		box-shadow: 0 25px 80px rgba(255, 88, 27, 0.35);
	}
}



@media (max-width: 480px) {
	.breadcrumb-section {
		padding: 60px 12px 50px;
		min-height: auto;
	}

	.breadcrumb-title {
		font-size: 28px;
		margin-bottom: 20px;
	}

	.breadcrumb {
		padding: 8px 16px;
		gap: 8px;
		font-size: 12px;
	}

	.breadcrumb-link,
	.breadcrumb-separator,
	.breadcrumb-current {
		font-size: 12px;
	}

	.breadcrumb-shapes .shape-4,
	.breadcrumb-shapes .shape-5,
	.breadcrumb-shapes .shape-6 {
		opacity: 0.3 !important;
	}

	.breadcrumb-shapes .shape-1 {
		width: 100px;
		height: 100px;
		top: 5%;
		left: 0;
	}

	.breadcrumb-shapes .shape-2 {
		width: 120px;
		height: 120px;
		top: 0%;
		right: 0;
	}

	.breadcrumb-shapes .shape-3 {
		width: 90px;
		height: 90px;
		bottom: 5%;
		left: 5%;
	}
}

/* =========================
   About Page
========================= */

.abt-section {
	position: relative;
	overflow: hidden;
	padding: 110px 0;
	background: linear-gradient(135deg, #fff6ed 0%, #f7f7fb 55%, var(--white-color) 100%);
	width: 100%;
	box-sizing: border-box;
}

.abt-section::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 137, 15, 0.18);
	top: -120px;
	left: -120px;
	animation: blobFloat1 12s ease-in-out infinite,
		blobPulse 6s ease-in-out infinite;
	pointer-events: none;
}

.abt-section::after {
	content: "";
	position: absolute;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: rgba(18, 26, 29, 0.08);
	bottom: -160px;
	right: -160px;
	animation: blobFloat2 14s ease-in-out infinite,
		blobPulse 7s ease-in-out infinite;
	pointer-events: none;
}

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

.abt-section .row {
	align-items: stretch;
	row-gap: 30px;
}

.abt-dtl {
	background: var(--white-color);
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 25px 70px rgba(0, 0, 0, 0.08);
}

.abt-img {
	height: 100%;
	min-height: 500px;
}

.abt-img img {
	width: 100%;
	height: 100%;
}

.abt-content {
	padding: 50px;
}

.section-heading {
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 15px;
}

.abt-content p {
	color: var(--text-color);
	line-height: 1.7;
}

.abt-section .feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 30px;
	align-content: center;
	align-items: center;
	justify-content: space-between;
}

.abt-section .feature-card {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 14px;
	border-radius: 18px;
	background: linear-gradient(145deg, var(--white-color), #f4f6fb);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.abt-section .feature-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent, rgba(255, 122, 0, 0.15), transparent);
	opacity: 0;
	transition: 0.4s;
}

.abt-section .feature-card h4 {
	font-size: 16px;
	margin-bottom: 4px;
	font-weight: 600;
}

.abt-section .feature-card p {
	font-size: 12px;
	color: var(--text-color);
	margin: 0;
}

.abt-section .feature-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.abt-section .feature-card:hover::before {
	opacity: 1;
}

@media (max-width: 992px) {
	.abt-img {
		min-height: 350px;
	}

	.abt-section .feature-grid {
		grid-template-columns: 1fr;
	}

	.abt-content {
		padding: 30px;
	}
}

.parallax-section {
	padding: 50px 0;
	margin-top: 0;
}

.parallax-section::before {
	background: linear-gradient(135deg, rgba(18, 26, 29, 0.9), rgba(18, 26, 29, 0.65));
}

.parallax-text h2 {
	font-size: 42px;
	line-height: 1.2;
}

.parallax-text {
	max-width: 760px;
	margin: 0 auto;
	align-items: center;
	text-align: center;
}

.interesting-facts {
	margin-top: 20px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.facts-col {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 18px;
	padding: 16px 18px;
	gap: 12px;
	backdrop-filter: blur(6px);
	justify-content: flex-start;
	width: 100%;
	min-height: 86px;
}

.facts-count {
	font-size: 38px;
	margin-right: 0;
}

.facts-text {
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

/* =========================
   Career Page
========================= */

.career-hero-alt {
	position: relative;
	overflow: hidden;
	padding: 110px 0;
	background: linear-gradient(135deg, #fff3e6 0%, #f3f8ff 55%, var(--white-color) 100%);
}

.career-hero-alt::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 137, 15, 0.18);
	top: -120px;
	right: -120px;
	animation: blobFloat1 12s ease-in-out infinite,
		blobPulse 6s ease-in-out infinite;
}

.career-hero-alt::after {
	content: "";
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: rgba(18, 26, 29, 0.08);
	bottom: -160px;
	left: -160px;
	animation: blobFloat2 14s ease-in-out infinite,
		blobPulse 7s ease-in-out infinite;
}

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

.section-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	font-weight: 700;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 16px;
	width: fit-content;
}

.text-highlight {
	color: var(--primary-color);
}

.section-desc {
	font-size: 17px;
	color: var(--text-color);
	line-height: 1.7;
	margin-bottom: 28px;
}

.career-hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.career-hero-metrics {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.metric-card {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16px;
	padding: 16px 24px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(255, 137, 15, 0.1);
}

.metric-card h4 {
	font-size: 32px;
	color: var(--primary-color);
	margin: 0 0 4px 0;
}

.metric-card span {
	font-size: 13px;
	color: var(--text-color);
	font-weight: 600;
}

.career-snapshot {
	background: var(--white-color);
	border-radius: 24px;
	padding: 32px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.snapshot-head h4 {
	font-size: 24px;
	margin-bottom: 8px;
	color: var(--secondary-color);
}

.snapshot-head p {
	color: var(--text-color);
	margin-bottom: 24px;
}

.snapshot-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

.snapshot-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border-radius: 14px;
	background: #f9fafb;
	border: 1px solid #eef0f4;
}

.snapshot-item i {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.snapshot-item h6 {
	margin: 0 0 2px 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--secondary-color);
}

.snapshot-item span {
	font-size: 12px;
	color: var(--text-color);
}

.snapshot-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	background: rgba(255, 137, 15, 0.08);
	border-radius: 12px;
	color: var(--text-color);
	font-weight: 600;
	font-size: 14px;
}

.snapshot-footer i {
	color: var(--primary-color);
	font-size: 18px;
}

.career-culture {
	padding: 100px 0;
}

.career-section-head {
	margin-bottom: 50px;
}

.career-section-head h2 {
	margin-bottom: 12px;
}

.career-section-head p {
	color: var(--text-color);
	font-size: 16px;
	max-width: 600px;
	margin: 0 auto;
}

.culture-card {
	border: 1px solid #eef0f4;
	border-radius: 20px;
	padding: 28px;
	text-align: center;
	transition: all 0.3s ease;
	height: 100%;
}

.culture-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
	border-color: rgba(255, 137, 15, 0.2);
}

.culture-card i {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 18px;
}

.culture-card h5 {
	font-size: 20px;
	margin-bottom: 10px;
	color: var(--secondary-color);
}

.culture-card p {
	color: var(--text-color);
	margin: 0;
	line-height: 1.6;
}

.career-openings-alt {
	padding: 100px 0;
}

.job-list {
	max-width: 900px;
	margin: 0 auto;
}

.job-row {
	background: linear-gradient(180deg, var(--white-color) 0%, #fbfdff 100%);
	border-radius: 20px;
	padding: 28px;
	margin-bottom: 20px;
	border: 1px solid #e2eaf4;
	box-shadow: 0 12px 40px rgba(14, 39, 65, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.job-row:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 46px rgba(14, 39, 65, 0.12);
}

.job-info {
	flex: 1;
}

.job-info h4 {
	font-size: 22px;
	margin-bottom: 10px;
	color: var(--secondary-color);
}

.job-meta {
	display: flex;
	gap: 20px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.job-meta span {
	font-size: 13px;
	color: var(--text-color);
	font-weight: 600;
}

.job-meta i {
	color: var(--primary-color);
	margin-right: 6px;
}

.job-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.job-tags span {
	background: #f3f4f6;
	color: var(--text-color);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
}

.job-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.job-type {
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 999px;
}

.btn-sm {
	padding: 10px 22px;
	font-size: 13px;
}

.career-process-alt {
	padding: 100px 0;
	background: var(--white-color);
}

.career-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 1000px;
	margin: 0 auto;
}

.career-step {
	text-align: center;
	position: relative;
}

.career-step::after {
	content: "";
	position: absolute;
	top: 30px;
	left: 63%;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, rgba(255, 137, 15, 0.3), transparent);
}

.career-step:last-child::after {
	display: none;
}

.step-number {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	font-size: 20px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.career-step h5 {
	font-size: 18px;
	margin-bottom: 8px;
	color: var(--secondary-color);
}

.career-step p {
	color: var(--text-color);
	margin: 0;
	font-size: 14px;
}

.career-cta-alt {
	padding: 90px 0;
	background: #eeeeee;
}

.career-cta-inner {
	background: linear-gradient(135deg, #121a1d, #1f2a30);
	color: var(--white-color);
	border-radius: 28px;
	padding: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.career-cta-inner h3 {
	color: var(--white-color);
	margin-bottom: 8px;
	font-size: 32px;
}

.career-cta-inner p {
	margin: 0;
	color: var(--white-color);
	font-size: 16px;
}

/* =========================
   Portfolio Details Page
========================= */

.project-overview {
	padding: 100px 0;
	background: var(--white-color);
}

.project-meta-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 30px;
}

.meta-item {
	/* background: #f9fafb; */
	border: 1px solid #e5ebf5;
	border-radius: 14px;
	padding: 16px 20px;
	-webkit-transition: all 0.5s ease-in-out 0s;
}

.meta-item:hover {
	transform: translateY(-8px);
	border-color: rgba(255, 137, 15, 0.4);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	background: rgba(255, 137, 15, 0.08);
}

.meta-label {
	display: block;
	font-size: 12px;
	color: var(--text-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.meta-value {
	display: block;
	font-size: 18px;
	color: var(--primary-color);
	font-weight: 700;
}

.project-tech-stack {
	/* background: #f9fafb; */
	border: 1px solid #eef0f4;
	border-radius: 20px;
	padding: 28px;
}

.project-tech-stack h5 {
	font-size: 18px;
	margin-bottom: 16px;
	color: var(--secondary-color);
}

.tech-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.tech-tags span {
	background: var(--white-color);
	border: 1.5px solid var(--primary-color);
	color: var(--primary-color);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: 999px;
	transition: all 0.3s ease;
}

.tech-tags span:hover {
	background: rgba(255, 88, 27, .04);
	transform: translateY(-8px);
	box-shadow: 0 6px 20px rgba(255, 88, 27, .12);
}

.project-links {
	display: flex;
	gap: 12px;
}

.project-showcase {
	padding: 60px 0;
	/* background: #f7f7fb; */
}

.project-main-image {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.project-main-image img {
	width: 100%;
	display: block;
}

/* .project-details {
	padding: 100px 0;
	background: var(--white-color);
} */

.detail-card {
	/* background: #f9fafb; */
	border: 1px solid #eef0f4;
	border-radius: 20px;
	padding: 32px;
	height: 100%;
}

.detail-icon {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin-bottom: 20px;
}

.detail-card h3 {
	font-size: 24px;
	margin-bottom: 14px;
	color: var(--secondary-color);
}

.detail-card p {
	color: var(--text-color);
	line-height: 1.7;
	margin: 0;
}

/* .project-features {
	padding: 100px 0;
	background: #f7f7fb;
} */

.feature-card {
	background: var(--white-color);
	border: 1px solid #eef0f4;
	border-radius: 18px;
	padding: 28px;
	text-align: center;
	height: 100%;
	transition: all 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
	border-color: rgba(255, 137, 15, 0.2);
}

.feature-card i {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.feature-card h5 {
	font-size: 18px;
	margin-bottom: 10px;
	color: var(--secondary-color);
}

.feature-card p {
	color: var(--text-color);
	margin: 0;
	line-height: 1.6;
}

.project-results {
	padding: 100px 0;
	background: linear-gradient(135deg, #121a1d, #1f2a30);
	color: var(--white-color);
}

.project-results .section-heading {
	color: var(--white-color);
}

.results-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 1000px;
	margin: 0 auto;
}

.result-card {
	text-align: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 18px;
	padding: 28px 20px;
	backdrop-filter: blur(10px);
}

.result-card h3 {
	font-size: 42px;
	color: var(--primary-color);
	margin-bottom: 8px;
}

.result-card p {
	color: var(--white-color);
	margin: 0;
	font-size: 14px;
}

.result-card:hover {
	transform: translateY(-8px) !important;
	border-color: rgba(255, 137, 15, 0.4);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	background: rgba(255, 137, 15, 0.08);
}

/* .more-projects {
	padding: 100px 0;
	background: var(--white-color);
} */

.more-project-card {
	display: block;
	border-radius: 18px;
	overflow: hidden;
	background: #f9fafb;
	border: 1px solid #eef0f4;
	transition: all 0.3s ease;
	text-decoration: none;
}

.more-project-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.more-project-card img {
	width: 100%;
	display: block;
}

.more-project-info {
	padding: 20px;
}

.more-project-info h5 {
	font-size: 18px;
	margin-bottom: 6px;
	color: var(--secondary-color);
}

.more-project-info span {
	font-size: 13px;
	color: var(--text-color);
	font-weight: 600;
}

/* =========================
   Service Cards
========================= */

.service-card-modern {
	position: relative;
	overflow: hidden;
}

.service-card-modern::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.service-card-modern:hover::before {
	transform: scaleX(1);
}

.service-img-modern {
	width: 100%;
	margin: 0 auto 20px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease;
	position: relative;
	overflow: hidden;
}

.service-img-modern::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--primary-color), transparent);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.service-img-modern img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	position: relative;
	z-index: 1;
	transition: all 0.4s ease;
}

.service-card-modern:hover .service-img-modern {
	transform: translateY(-5px);
}

.service-card-modern:hover .service-img-modern::after {
	opacity: 0.1;
}

.service-card-modern:hover .service-img-modern img {
	transform: scale(1.05);
}

/* =========================
   Particle Hero Section
========================= */
#hero-container {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, #fff3e8 0%, var(--white-color) 100%);
	overflow: hidden;
	padding: 0;
	margin: 0;
}

#particles-js {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

.hero-content-wrapper {
	position: relative;
	z-index: 10;
	text-align: center;
	max-width: 1200px;
	padding: 20px;
	margin: 0 auto;
	width: 100%;
	pointer-events: none;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hero-tagline {
	font-size: 14px;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--primary-color);
	margin-bottom: 10px;
	display: block;
	font-weight: 700;
}

.hero-main-title {
	font-size: 96px;
	font-weight: 900;
	line-height: 1.2;
	margin: 0;
	font-family: var(--heading-font);
	background: var(--secondary-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-main-description {
	font-size: 18px;
	color: var(--secondary-color);
	margin: 30px auto;
	max-width: 1200px;
	line-height: 1.6;
	font-weight: 400;
	text-align: center;
}

.hero-main-stats {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.hero-stat-item {
	text-align: center;
	flex-shrink: 0;
}

.hero-stat-item b {
	display: block;
	font-size: 28px;
	color: var(--secondary-color);
	font-weight: 900;
	font-family: var(--heading-font);
}

.hero-stat-item span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--primary-color);
	font-weight: 700;
}

.hero-cta-button {
	pointer-events: auto;
	position: relative;
	display: inline-block;
	margin-top: 30px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	background: var(--primary-color);
	color: var(--white-color) !important;
	text-decoration: none;
	border: none;
	border-radius: 100px;
	padding: 17px 56px 17px 25px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.hero-cta-button::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 6px;
	width: 40px;
	height: 40px;
	background-color: var(--white-color);
	background-image: url('../images/arrow-accent.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 10px auto;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all 0.4s ease-in-out;
}

.hero-cta-button:hover::before {
	transform: translateY(-50%) rotate(45deg);
}

.hero-cta-button::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	background: var(--secondary-color);
	z-index: -1;
	transition: all 0.4s ease-in-out;
}

.hero-cta-button:hover::after {
	right: auto;
	left: 0;
	width: 100%;
}

.hero-cta-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.hero-trust-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0px;
	border-radius: 50px;
	transition: all 0.3s ease;
}

.hero-trust-badge:hover {
	transform: translateY(-2px);
}

.hero-trust-badge .avatars {
	display: flex;
	align-items: center;
}

.hero-trust-badge .avatars img {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--primary-color);
	margin-left: -10px;
}

.hero-trust-badge .avatars img:first-child {
	margin-left: 0;
}

.hero-trust-badge p {
	font-size: 16px;
	margin: 0;
	color: var(--secondary-color);
	font-weight: 500;
	text-align: left;
}

.hero-trust-badge b {
	color: var(--primary-color);
}



/* =========================
   ticker
========================= */

.ticker {
	background: var(--primary-color);
	overflow: hidden;
	padding: 14px 0;
	position: relative;
	z-index: 15;
	width: 100%;
	margin-top: auto;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ticker-t {
	display: flex;
	gap: 52px;
	width: max-content;
	animation: tick 26s linear infinite
}

@keyframes tick {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-50%)
	}
}

.ti {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--white-color);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 40px;
}

.ti::after {
	content: '✦';
	font-size: 24px;
	color: var(--white-color);
}

/* =========================
   Header Dark Mode
========================= */

header,
.Akshar-header,
#site-header,
#site-header2 {
	z-index: 1000;
}

.sidebar,
.sidebar-overlay {
	z-index: 9999 !important;
}


.Akshar-header .navbar .newmega-menu,
.Akshar-header .navbar .company-menu,
.Akshar-header .navbar .dropdown-menu {
	z-index: 1001;
}

/* =========================
   Footer Contact Section
========================= */
.footer-contact-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	transition: transform 0.3s ease;
}

.footer-contact-item:hover {
	transform: translateX(5px);
}

.footer-contact-icon {
	width: 42px;
	height: 42px;
	min-width: 42px;
	background: rgba(255, 137, 15, 0.12);
	color: var(--primary-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.3s ease;
}

.footer-contact-item:hover .footer-contact-icon {
	background: var(--primary-color);
	color: var(--white-color);
	transform: scale(1.1);
}

.footer-contact-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.footer-contact-info .contact-label {
	font-size: 12px;
	color: var(--white-color);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.footer-contact-info a,
.footer-contact-info .contact-text {
	color: var(--white-color);
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.3s ease;
	font-weight: 500;
}

.footer-contact-info a:hover {
	color: var(--primary-color);
}

.contact-form-card {
	position: relative;
}

.contact-submit-loader {
	position: absolute;
	inset: 0;
	z-index: 15;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(2px);
}

.loader-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid #dde5ef;
	border-top-color: var(--primary-color);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

.loader-text {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-color);
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.job-empty {
	border: 1px dashed #c5d1e0;
	border-radius: 14px;
	padding: 28px 24px;
	text-align: center;
	color: var(--text-color);
	font-weight: 500;
	background: #f9fbff;
}

.job-row {
	display: block !important;
	padding: 26px 26px 20px;
	position: relative;
	overflow: hidden;
}

.job-row::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, #ff890f 0%, #f36f18 100%);
	opacity: 0.95;
}

.job-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.job-head-main {
	flex: 1;
	min-width: 0;
}

.job-head-main h4 {
	margin: 0;
	font-size: 23px;
	color: var(--secondary-color);
	font-weight: 700;
}

.job-description {
	margin: 10px 0 0;
	color: var(--text-color);
	font-size: 14px;
	line-height: 1.7;
	white-space: pre-line;
}

.job-description-muted {
	color: var(--text-color);
	font-style: italic;
}

.job-meta {
	margin-top: 14px;
}

.job-meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #f4f7fb;
	border: 1px solid #dbe6f4;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-color);
}

.job-tags {
	margin-top: 12px;
}

.job-bottom {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #e8edf4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.job-type {
	box-shadow: inset 0 0 0 1px rgba(255, 137, 15, 0.2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	line-height: 3;
	flex-shrink: 0;
}

.job-bottom-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-left: auto;
}

.requirements-toggle-btn {
	border: 1px solid #cad8eb;
	background: var(--white-color);
	color: var(--text-color);
	font-size: 13px;
	font-weight: 700;
	padding: 10px 15px;
	border-radius: 10px;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	line-height: 1;
	cursor: pointer;
	transition: all 0.22s ease;
}

.requirements-toggle-btn:hover {
	background: #f2f7ff;
	border-color: #a8c0df;
	transform: translateY(-1px);
}

.job-details-grid {
	margin-top: 14px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.job-detail-card {
	padding: 14px 16px;
	border-radius: 12px;
	background: #f3f7fc;
	border: 1px solid #d8e4f3;
}

.job-detail-card h6 {
	margin: 0 0 10px;
	color: var(--secondary-color);
	font-size: 0.95rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}

.job-detail-card p {
	margin: 0;
	color: var(--text-color);
	white-space: pre-line;
}

.job-detail-list {
	margin: 0;
	padding-left: 18px;
	color: var(--text-color);
	font-size: 14px;
}

.job-detail-list li {
	margin-bottom: 6px;
	line-height: 1.5;
}

.job-detail-list li:last-child {
	margin-bottom: 0;
}

.career-apply-modal {
	position: fixed;
	inset: 0;
	z-index: 1050;
	background: rgba(8, 15, 26, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.career-apply-dialog {
	width: min(820px, 95vw);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--white-color);
	border-radius: 20px;
	position: relative;
	padding: 0;
	box-shadow: 0 20px 50px rgba(12, 25, 40, 0.28);
	border: 1px solid rgba(16, 36, 61, 0.08);
}

.career-apply-close {
	border: 0;
	background: var(--white-color);
	color: var(--text-color);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	box-shadow: 0 4px 16px rgba(10, 26, 44, 0.2);
}

.career-apply-form-card {
	position: relative;
	padding: 34px 30px 24px;
	border-radius: 20px;
	box-shadow: none;
}

.career-apply-form-card h3 {
	font-size: 30px;
	margin-bottom: 8px;
}

.career-apply-form-card .form-header p {
	margin-bottom: 20px;
}

.career-apply-form-card select,
.career-apply-form-card input[type="file"] {
	width: 100%;
	padding: 14px 18px;
	border-radius: 10px;
	outline: none;
}

.career-apply-form-card select:focus,
.career-apply-form-card input[type="file"]:focus {
	border-color: rgba(255, 137, 15, 0.6);
	box-shadow: 0 0 0 3px rgba(255, 137, 15, 0.15);
}

.career-apply-form-card .text-muted {
	font-size: 12px;
}

.career-apply-form .form-control {
	min-height: 46px;
}

.career-hero-actions .btn.disabled,
.career-apply-modal .btn.disabled {
	pointer-events: none;
	opacity: 0.6;
}

.btn-rounded {
	border-radius: 50px;
}

.ak-brands-area {
	position: relative;
	overflow: hidden;
}

.ak-bg-common-black {
	background-color: var(--secondary-color);
}

.ak-text-common-white {
	color: var(--white-color);
}

.fw-500 {
	font-weight: 500;
}

.fs-25 {
	font-size: 25px;
}

.mr-35 {
	margin-right: 35px;
}

.ml-35 {
	margin-left: 35px;
}

.pt-65 {
	padding-top: 65px;
}

.pb-65 {
	padding-bottom: 65px;
}

.pt-40 {
	padding-top: 40px;
}

.fix {
	overflow: hidden;
}

.ak-brand-wrap {
	position: relative;
}

.ak-brand-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: 15px;
}

.ak-brand-item a {
	display: block;
	transition: all 0.3s ease;
	opacity: 0.7;
}

.ak-brand-item a:hover {
	opacity: 1;
	transform: scale(1.05);
}

.ak-brand-item img {
	max-width: 140px;
	height: auto;
	max-height: 70px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	transition: all 0.3s ease;
}

.ak-brand-item a:hover img {
	filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 137, 15, 0.5));
}

.ak-brand-slide-active {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.ak-brand-slide-active .swiper-wrapper {
	display: flex;
	align-items: center;
	transition-timing-function: linear;
	will-change: transform;
}

.slide-transtion {
	transition-timing-function: linear !important;
}

.btn-default {
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	background: var(--primary-color);
	color: var(--white-color) !important;
	border: none;
	border-radius: 100px;
	padding: 17px 56px 17px 25px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-black {
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	background: var(--white-color);
	color: var(--dark-color);
	border: none;
	border-radius: 100px;
	padding: 17px 56px 17px 25px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.btn-default::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 6px;
	width: 40px;
	height: 40px;
	background-color: var(--white-color);
	background-image: url('../images/arrow-accent.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 10px auto;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::before {
	transform: translateY(-50%) rotate(45deg);
}

.btn-default::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	background: var(--secondary-color);
	z-index: -1;
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::after {
	right: auto;
	left: 0;
	width: 100%;
}

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

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

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

.btn-black-highlighted {
	background: var(--secondary-color);
}

.btn-default.btn-dark {
	background: var(--secondary-color);
	color: var(--primary-color);
}

.btn-default.btn-dark:before {
	background-color: var(--primary-color);
	background-image: url('../images/arrow-white.svg');
}

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

.btn-outline {
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1em;
	text-transform: capitalize;
	color: var(--primary-color);
	border: 1.5px solid var(--primary-color);
	border-radius: 100px;
	padding: 17px 32px;
	background: transparent;
	overflow: hidden;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.btn-outline::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	background: var(--secondary-color);
	z-index: -1;
	transition: all 0.4s ease-in-out;
}

.btn-outline:hover::after {
	right: auto;
	left: 0;
	width: 100%;
}

.btn-outline:hover {
	color: var(--white-color);
	border: 1.5px solid var(--secondary-color);
}

.btn-pill {
	border-radius: 50px;
}

.btn-square {
	border-radius: 0;
}

.btn-icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	font-size: 16px;
}

.btn-icon.btn-sm {
	width: 36px;
	height: 36px;
	font-size: 14px;
}

.btn-icon.btn-lg {
	width: 54px;
	height: 54px;
	font-size: 20px;
}

.btn.loading {
	pointer-events: none;
	opacity: 0.75;
}


.image-animation {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.image-animation::after {
	content: "";
	position: absolute;
	width: 200%;
	height: 0%;
	left: 50%;
	top: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%) rotate(-45deg);
	pointer-events: none;
}

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

/* =====================
	CIRCLE 
======================== */
.circle-container {
	position: relative;
	width: 200px;
	height: 200px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rotating-circle {
	position: absolute;
	width: 100%;
	height: 100%;
	animation: slowRotate 20s linear infinite;
	transform-origin: center;
}

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

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

.circle-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--primary-color);
	border-radius: 50%;
	z-index: 1;
}

.circle-text-svg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.circle-text-svg text {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 2px;
	fill: var(--white-color);
}

.logo-circle {
	position: relative;
	width: 110px;
	height: 110px;
	background: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
	z-index: 3;
}

.logo-circle img {
	width: 150px;
	height: 150px;
	object-fit: contain;
}

.curve-shape {
	position: absolute;
	bottom: -1px;
	z-index: 2;
}

.top-bar-shape {
	transform: rotate(180deg);
	top: 90px;
}

.footer-bar-shape {
	transform: rotate(180deg);
	top: 0;
}

.luxury-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.animated-grid {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(rgba(255, 137, 15, 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 137, 15, 0.10) 1px, transparent 1px);
	background-size: 60px 60px;
	background-position: 0 0, 0 0;
	animation: grid-move 8s linear infinite;
	z-index: -1;
	pointer-events: none;
}

@keyframes grid-move {
	0% {
		background-position: 0 0, 0 0;
	}

	100% {
		background-position: 60px 60px, 60px 60px;
	}
}

.particle-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.particle {
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--primary-color);
	border-radius: 50%;
	opacity: 0.9;
	animation: particle-float 15s infinite;
}

.particle:nth-child(1) {
	top: 20%;
	left: 30%;
	animation-delay: 0s;
}

.particle:nth-child(2) {
	top: 40%;
	left: 70%;
	animation-delay: 1s;
}

.particle:nth-child(3) {
	top: 60%;
	left: 20%;
	animation-delay: 2s;
}

.particle:nth-child(4) {
	top: 80%;
	left: 80%;
	animation-delay: 3s;
}

.particle:nth-child(5) {
	top: 30%;
	left: 50%;
	animation-delay: 1.5s;
}

.particle:nth-child(6) {
	top: 70%;
	left: 40%;
	animation-delay: 2.5s;
}

@keyframes particle-float {
	0% {
		transform: translateY(0px) translateX(0px);
		opacity: 0;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		transform: translateY(-100px) translateX(50px);
		opacity: 0;
	}
}


.text-highlight-outline {
	font-family: 'Inter', sans-serif;
	letter-spacing: 2px;
	color: transparent;
	-webkit-text-stroke: 1px var(--primary-color);
}



.text-animation-effect {
	animation-fill-mode: forwards !important;
	animation-iteration-count: 1 !important;
}

.text-animation-effect.animated,
.text-animation-effect.aos-animate {
	animation-play-state: paused !important;
}

/** service card **/
.service-card-two {
	position: relative;
	z-index: 1;
	transition: all .35s;
	background-color: transparent;
	padding: 28px 24px;
	border-radius: 18px
}

.service-card-two:hover {
	transform: translateY(-10px);

}

.service-card-two .shape>img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -10
}

.service-card-two .service-thumb {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: 18px;
	margin-bottom: 24px;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card-two .service-thumb .btn {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
	z-index: 100;
	width: 128px;
	height: 22px;
	background-color: var(--secondary-color);
	display: flex;
	justify-content: center;
	color: var(--text-color);
	font-size: 14px;
	font-weight: 600;
	padding: 0 0 9px;
	transition: all .35s;
	border-radius: 0 0 12px 12px
}

.service-card-two .service-thumb .btn i {
	font-size: 18px
}

.service-card-two .service-thumb .btn:hover,
.service-card-two .service-thumb .btn:focus {
	color: var(--secondary-color)
}

.service-card-two .service-thumb img {
	width: 100%;
	border-radius: 18px
}

.service-card-two .service-number {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 60px;
	height: 60px;
	color: var(--secondary-color);
	font-weight: 800;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .35s
}

.service-card-two .service-title {
	font-size: 20px;
	margin-bottom: 8px;
	color: var(--secondary-color);
	letter-spacing: -0.01em;
	transition: all .35s
}

.service-card-two:hover .service-thumb,
.service-card-two:focus .service-thumb {
	transform: translateY(-4px) scale(1.02)
}

.service-card-two:hover .service-title,
.service-card-two:hover .service-number,
.service-card-two:hover .btn,
.service-card-two:focus .service-title,
.service-card-two:focus .service-number,
.service-card-two:focus .btn {
	color: var(--primary-color);
}

.service-card-two.style-two {
	padding: 0
}

.service-card-two.style-two .service-thumb .btn {
	top: auto;
	bottom: 0;
	border-radius: 1rem 1rem 0 0;
	height: 45px;
	width: 160px
}

/* ===================================
Category Section
=================================== */

.cat-section {
	position: relative;
	background: var(--bg-color);
	overflow: hidden;
	padding: 80px 0;
}

.cat-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 88, 27, .12) 1px, transparent 1px);
	background-size: 30px 30px;
	opacity: .45;
	pointer-events: none;
	z-index: 0;
}

.cat-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.cat-orb-1 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(255, 88, 27, .09) 0%, transparent 70%);
	top: -100px;
	right: -200px;
}

.cat-orb-2 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(255, 88, 27, .07) 0%, transparent 70%);
	bottom: 200px;
	left: -150px;
}

.cat-section .container {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 28px;
	position: relative;
	z-index: 1;
}

.cat-layout-row {
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 56px);
	position: relative;
	z-index: 1;
}

.cat-intro {
	flex: 0 0 clamp(260px, 30vw, 420px);
	max-width: 420px;
	margin-bottom: 0;
}

.cat-intro p {
	color: var(--text-color);
	line-height: 1.8;
	margin-bottom: 0;
}

.cat-slider-wrap {
	flex: 1 1 auto;
	min-width: 0;
	margin-right: clamp(-220px, -12vw, -80px);
}

.cat-track-outer {
	position: relative;
	overflow: hidden;
	padding-bottom: 20px;
	isolation: isolate;
}

.cat-track-outer::before,
.cat-track-outer::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 20px;
	width: 56px;
	z-index: 3;
	pointer-events: none;
}

.cat-track-outer::before {
	left: 0;
	background: linear-gradient(to right, var(--white-color), rgba(250, 251, 253, 0));
}

.cat-track-outer::after {
	right: 0;
	background: linear-gradient(to left, var(--white-color), rgba(250, 251, 253, 0));
}

.cat-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding: 20px 18px 30px 8px;
	scroll-snap-type: x proximity;
	scroll-behavior: auto;
	cursor: grab;
	-ms-overflow-style: none;
	scrollbar-width: none;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	overscroll-behavior-x: contain;
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	contain: layout paint;
}

.cat-track::-webkit-scrollbar {
	display: none;
}

.cat-track.grabbing {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}

.cat-track * {
	user-select: none;
	-webkit-user-select: none;
}

.cat-track img {
	pointer-events: none;
	-webkit-user-drag: none;
	draggable: false;
}

.cat-section .image-animation::after {
	display: none;
}

.cat-card {
	position: relative;
	flex: 0 0 280px;
	height: 400px;
	border-radius: 32px;
	overflow: hidden;
	scroll-snap-align: start;
	cursor: pointer;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1),
		box-shadow .35s ease;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
	will-change: transform, box-shadow;
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	contain: paint;
	border: 2px solid var(--primary-color);
}

.cat-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	background: rgba(255, 137, 15, 0.08);
	-webkit-transition: all 0.5s ease-in-out 0s;
}

.cat-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.cat-card:hover .cat-card-img {
	transform: scale(1.08);
}

.cat-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
			rgba(0, 0, 0, .0) 0%,
			rgba(0, 0, 0, .15) 40%,
			rgba(0, 0, 0, .75) 80%,
			rgba(0, 0, 0, .90) 100%);
	transition: opacity .35s ease;
}

.cat-card-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,
			rgba(255, 88, 27, .03) 0%,
			rgba(0, 0, 0, .25) 40%,
			rgba(0, 0, 0, .80) 80%,
			rgba(0, 0, 0, .92) 100%);
	opacity: 0;
	transition: opacity .35s ease;
}

.cat-card:hover .cat-card-overlay::after {
	opacity: 1;
}

.card-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 4;
	padding: 24px 22px 26px;
	transform: translateY(0);
	transition: transform .4s ease;
}

.cat-card:hover .card-emoji {
	background: var(--primary-color);
	border-color: var(--primary-color);
	transform: scale(1.12) rotate(-6deg);
}

.card-name {
	font-size: 22px;
	font-weight: 800;
	color: var(--white-color);
	letter-spacing: -.01em;
	margin-bottom: 6px;
	line-height: 1.2;
}

.card-desc {
	font-size: 13px;
	color: var(--white-color);
	line-height: 1.6;
	margin-bottom: 16px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .4s ease, opacity .4s ease, margin .4s ease;
}

.cat-card:hover .card-desc {
	max-height: 100px;
	opacity: 1;
}

.card-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 13px;
	line-height: 1em;
	text-transform: capitalize;
	background: var(--primary-color);
	color: var(--white-color) !important;
	border: none;
	border-radius: 100px;
	padding: 13px 48px 13px 20px;
	overflow: hidden;
	text-decoration: none;
	letter-spacing: .04em;
	z-index: 1;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease, color .4s ease-in-out;
	will-change: transform, opacity;
}

.card-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 5px;
	width: 34px;
	height: 34px;
	background-color: var(--white-color);
	background-image: url('../images/arrow-accent.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 10px auto;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: transform .4s ease-in-out;
	z-index: 2;
}

.card-btn::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 0;
	height: 100%;
	background: var(--secondary-color);
	z-index: -1;
	transition: width .4s ease-in-out, left .4s ease-in-out;
}

.cat-card:hover .card-btn {
	opacity: 1;
	transform: translateY(0);
}

.card-btn:hover::before {
	transform: translateY(-50%) rotate(45deg);
}

.card-btn:hover::after {
	right: auto;
	left: 0;
	width: 100%;
}

.cat-card[data-color="orange"] .cat-card-overlay::after {
	background: linear-gradient(to bottom,
			rgba(255, 137, 15, 0.04) 0%,
			rgba(0, 0, 0, 0.22) 42%,
			rgba(0, 0, 0, 0.78) 80%,
			rgba(0, 0, 0, 0.9) 100%);
}

.cat-card--wide {
	flex: 0 0 420px;
}

/*** SCROLL ARROWS ****/
.cat-slider-wrap .track-nav {
	justify-content: flex-start;
	padding-left: 8px;
}

.track-nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.track-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1.5px solid var(--primary-color);
	background: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all .3s ease;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.track-btn:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	box-shadow: 0 8px 28px rgba(255, 88, 27, .35);
	transform: scale(1.08);
}

.track-btn:hover svg {
	stroke: var(--white-color);
}

.track-btn svg {
	width: 20px;
	height: 20px;
	stroke: var(--primary-color);
	transition: stroke .3s;
}

.presence-section {
	position: relative;
	padding: 100px 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 18% 22%, rgba(244, 114, 182, 0.18) 0%, transparent 28%),
		radial-gradient(circle at 82% 20%, rgba(192, 132, 252, 0.18) 0%, transparent 28%),
		radial-gradient(circle at 30% 82%, rgba(216, 180, 254, 0.20) 0%, transparent 30%),
		linear-gradient(135deg, #fff7fb 0%, #fdf2f8 45%, #f5f3ff 100%);
}

.presence-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: flex-start;
}

.presence-left {
	display: flex;
	flex-direction: column;
	gap: 0px;
}

.presence-right {
	display: flex;
	align-items: flex-start;
}

.presence-card-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	width: 100%;
	max-width: 650px;
}

.presence-card {
	background: var(--white-color);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.presence-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.presence-card-media {
	width: 100%;
	height: 180px;
	overflow: hidden;
}

.presence-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.presence-card:hover .presence-card-media img {
	transform: scale(1.08);
}

.presence-card-content {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 0px;
	flex: 1;
}

.presence-card-kicker {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--primary-color);
	font-weight: 700;
}

.presence-card-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--secondary-color);
}

.presence-card-desc {
	font-size: 14px;
	color: var(--text-color);
	line-height: 1.5;
	margin-bottom: 5px;
}

.circle-container {
	position: absolute;
	top: 30px;
	right: 30px;
	z-index: 5;
}



/* =====================
 WHATSAPP CONTACT BUTTON SECTION
========================= */

.whatsapp-contact-wrapper {
	position: fixed;
	bottom: 40px;
	left: 40px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	animation: floatButton 3s ease-in-out infinite;
}

.chat-bubble {
	background: white;
	color: #25D366;
	padding: 12px 18px;
	border-radius: 20px;
	font-weight: 600;
	font-size: 13px;
	box-shadow: 0 5px 20px rgba(37, 211, 102, 0.25);
}

.whatsapp-floating-btn {
	width: 65px;
	height: 65px;
	background: linear-gradient(135deg, #25D366 0%, #1fa550 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
	text-decoration: none;
	overflow: hidden;

}

.whatsapp-floating-btn::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
	animation: shineEffect 3s infinite;
}

.whatsapp-floating-btn:hover {
	transform: scale(1.2) translateY(-8px) rotate(5deg);
	box-shadow: 0 15px 45px rgba(37, 211, 102, 0.5);
}

.whatsapp-floating-btn:hover .whatsapp-icon {
	animation: iconBounce 0.6s ease-out;
}

.whatsapp-floating-btn:active {
	transform: scale(0.95);
}

.whatsapp-icon {
	font-size: 40px;
	color: white;
}

@keyframes slideInChat {
	from {
		opacity: 0;
		transform: translateX(-30px) translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0) translateY(0);
	}
}

@keyframes floatButton {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-15px);
	}
}

@keyframes shineEffect {
	0% {
		transform: rotate(-45deg) translateX(-100%);
	}

	100% {
		transform: rotate(-45deg) translateX(200%);
	}
}

@keyframes expandPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
		transform: translate(-50%, -50%) scale(1);
	}

	70% {
		box-shadow: 0 0 0 25px rgba(37, 211, 102, 0);
		transform: translate(-50%, -50%) scale(1.1);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
		transform: translate(-50%, -50%) scale(1.2);
	}
}

@keyframes iconBounce {

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

	50% {
		transform: scale(1.15) rotate(-10deg);
	}
}

.whatsapp-floating-btn:hover::after {
	animation: expandPulse 1.5s ease-out infinite;
}

@media (max-width: 768px) {
	.whatsapp-contact-wrapper {
		bottom: 25px;
		left: 25px;
	}

	.whatsapp-floating-btn {
		width: 58px;
		height: 58px;
	}

	.whatsapp-icon {
		font-size: 28px;
	}

	.chat-bubble {
		font-size: 12px;
		padding: 10px 15px;
		display: none;
	}
}

/* =========================
    TERMS & CONDITIONS PAGE
=========================== */

.tc-hero-title {
	font-size: 56px;
	font-weight: 700;
	color: var(--secondary-color);
	margin: 0.5rem 0 0 0;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.tc-meta-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
}

.tc-hero-content .meta-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 500;
	color: var(--text-color);
	font-size: 15px;
}

.tc-hero-content .meta-item i {
	color: var(--primary-color);
	font-size: 18px;
}

/* =====================
   NAVIGATION SECTION
===================== */

.tc-nav-section {
	padding: 30px 0;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	border-bottom: 1px solid #e5e7eb;
	position: sticky;
	top: 70px;
	z-index: 50;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tc-quick-nav {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	align-items: center;
}

.tc-quick-nav::-webkit-scrollbar {
	height: 4px;
}

.tc-quick-nav::-webkit-scrollbar-track {
	background: transparent;
}

.tc-quick-nav::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 2px;
}

.tc-nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--white-color);
	border: 2px solid #e5e7eb;
	border-radius: 30px;
	font-weight: 600;
	color: var(--text-color);
	cursor: pointer;
	transition: all 0.3s ease;
	white-space: nowrap;
	font-size: 14px;
	font-family: var(--body-font);
}

.tc-nav-btn:hover {
	background: var(--primary-color);
	color: var(--white-color);
	border-color: var(--primary-color);
	transform: translateY(-2px);
}

.tc-nav-btn i {
	font-size: 16px;
}

.tc-nav-btn span {
	display: none;
}

.tc-content-section {
	padding: 60px 0;
	min-height: calc(100vh - 400px);
}

/* =====================
   TABLE OF CONTENTS
===================== */

.tc-toc {
	background: linear-gradient(135deg, #f8fcff 0%, #f0f9ff 100%);
	border: 1px solid rgba(56, 189, 248, 0.2);
	border-radius: 16px;
	padding: 30px;
	position: sticky;
	top: 160px;
	overflow-y: auto;
}

.toc-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--secondary-color);
	margin: 0 0 25px 0;
	font-family: var(--heading-font);
}

.toc-title i {
	color: var(--primary-color);
}

.toc-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.toc-link {
	display: block;
	color: var(--text-color);
	text-decoration: none;
	padding: 12px 15px;
	border-left: 3px solid transparent;
	transition: all 0.3s ease;
	font-weight: 500;
	font-size: 15px;
	margin: 0;
}

.toc-link:hover {
	color: var(--primary-color);
	border-left-color: var(--primary-color);
	padding-left: 20px;
	background: rgba(255, 137, 15, 0.05);
	border-radius: 0 8px 8px 0;
}

/* =====================
   SECTIONS
===================== */

.tc-sections {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.tc-section {
	scroll-margin-top: 150px;
	animation: fadeInUp 0.6s ease-out;
}

.tc-sections .section-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 25px;
	justify-content: flex-start;
}

.tc-sections .section-icon {
	width: 60px;
	height: 60px;
	min-width: 60px;
	background: linear-gradient(135deg, var(--primary-color), #ff6b35);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	font-size: 28px;
	box-shadow: 0 8px 20px rgba(255, 137, 15, 0.3);
}

.tc-sections .section-title-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
}

.tc-sections .section-number {
	font-size: 28px;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1.2;
	min-width: 40px;
	font-family: var(--heading-font);
}

.tc-sections .section-title {
	font-size: 28px;
	color: var(--dark-color);
	margin: 0;
	font-weight: 700;
	font-family: var(--heading-font);
	line-height: 1.3;
}

.tc-sections .section-content {
	padding: 25px 30px;
	background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	transition: all 0.3s ease;
}

.tc-sections .section-content:hover {
	border-color: var(--primary-color);
	box-shadow: 0 12px 30px rgba(255, 137, 15, 0.1);
}

.tc-sections .section-content p {
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 28px;
	color: var(--text-color);
}

.tc-sections .section-content p:last-child {
	margin-bottom: 0;
}

.tc-sections .section-content h4 {
	font-size: 18px;
	font-weight: 700;
	color: var(--secondary-color);
}

/* =====================
   LIST ITEMS
===================== */

.tc-list-items {
	list-style: none;
	padding: 0;
	margin: 25px 0;
}

.tc-list-items li {
	position: relative;
	padding: 12px 0 12px 30px;
	color: var(--text-color);
	font-size: 16px;
	line-height: 26px;
}

.tc-list-items li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--primary-color);
	font-weight: 700;
	font-size: 18px;
}

/* =====================
   HIGHLIGHT BOXES
===================== */

.tc-highlight-box {
	display: flex;
	gap: 20px;
	background: linear-gradient(135deg, rgba(255, 137, 15, 0.08), rgba(255, 137, 15, 0.04));
	border-left: 4px solid var(--primary-color);
	padding: 20px 25px;
	border-radius: 8px;
	margin: 25px 0;
}

.tc-highlight-box i {
	color: var(--primary-color);
	font-size: 24px;
	min-width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tc-highlight-box p {
	margin: 0;
	font-size: 15px;
	color: var(--text-color);
}

.tc-highlight-box strong {
	color: var(--secondary-color);
}

/* =====================
   WARNING BOXES
===================== */

.tc-warning-box {
	display: flex;
	gap: 20px;
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
	border-left: 4px solid #ef4444;
	padding: 25px;
	border-radius: 8px;
	margin: 25px 0;
}

.tc-warning-box i {
	color: #ef4444;
	font-size: 24px;
	min-width: 30px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-shrink: 0;
}

.tc-warning-box h4 {
	color: var(--secondary-color);
	margin: 0 0 10px 0;
	font-size: 18px;
	font-weight: 700;
	font-family: var(--heading-font);
}

.tc-warning-box p {
	margin: 0;
	font-size: 15px;
	color: var(--text-color);
}

/* =====================
   INFO GRID
===================== */

.tc-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin: 25px 0;
}

.info-card {
	background: var(--white-color);
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 25px;
	transition: all 0.3s ease;
}

.info-card:hover {
	border-color: var(--primary-color);
	box-shadow: 0 12px 25px rgba(255, 137, 15, 0.1);
	transform: translateY(-5px);
}

.info-card i {
	font-size: 36px;
	color: var(--primary-color);
	margin-bottom: 15px;
	display: block;
}

.info-card h5 {
	color: var(--secondary-color);
	margin: 0 0 12px 0;
	font-size: 18px;
	font-weight: 700;
	font-family: var(--heading-font);
}

.info-card p {
	margin: 0;
	font-size: 14px;
	color: var(--text-color);
	line-height: 22px;
}

/* =====================
   TIMELINE
===================== */

.tc-timeline {
	margin: 25px 0;
}

.timeline-item {
	display: flex;
	gap: 25px;
	margin-bottom: 30px;
	position: relative;
}

.timeline-item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 19px;
	width: 2px;
	height: calc(100% + 30px);
	background: linear-gradient(to bottom, var(--primary-color), rgba(255, 137, 15, 0.3));
}

.timeline-dot {
	width: 40px;
	height: 40px;
	min-width: 40px;
	background: var(--primary-color);
	border-radius: 50%;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 8px rgba(255, 137, 15, 0.1);
	flex-shrink: 0;
}

.timeline-content h5 {
	color: var(--secondary-color);
	margin: 0 0 8px 0;
	font-size: 17px;
	font-weight: 700;
	font-family: var(--heading-font);
}

.timeline-content p {
	margin: 0;
	font-size: 15px;
	color: var(--text-color);
}

/* =====================
   CONTACT BOX
===================== */

.tc-contact-box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 25px;
	margin-top: 25px;
}

.tc-contact-box .contact-item {
	display: flex;
	gap: 20px;
	padding: 25px;
	background: var(--white-color);
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	transition: all 0.3s ease;
}

.tc-contact-box .contact-item:hover {
	border-color: var(--primary-color);
	box-shadow: 0 12px 25px rgba(255, 137, 15, 0.1);
}

.tc-contact-box .contact-item i {
	font-size: 32px;
	color: var(--primary-color);
	min-width: 50px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 5px;
	flex-shrink: 0;
}

.tc-contact-box .contact-item h5 {
	color: var(--secondary-color);
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 700;
	font-family: var(--heading-font);
}

.tc-contact-box .contact-item p,
.tc-contact-box .contact-item a {
	margin: 0;
	font-size: 15px;
	color: var(--text-color);
}

.tc-contact-box .contact-item a {
	color: var(--primary-color);
	font-weight: 600;
	transition: all 0.3s ease;
	text-decoration: none;
}

.tc-contact-box .contact-item a:hover {
	color: var(--secondary-color);
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================
   Masonry Grid Layout
========================= */

.masonry-grid {
	display: columns;
	column-count: 3;
	column-gap: 20px;
	width: 100%;
}

.masonry-item {
	break-inside: avoid;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 20px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	transition: all 0.35s ease;
	background: var(--white-color);
	display: inline-block;
	width: 100%;
}

.masonry-item:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.masonry-item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 18px;
	vertical-align: middle;
}

/* Responsive Masonry Grid */
@media (max-width: 1200px) {
	.masonry-grid {
		column-count: 3;
		column-gap: 18px;
	}

	.masonry-item {
		margin-bottom: 18px;
	}
}

@media (max-width: 992px) {
	.masonry-grid {
		column-count: 2;
		column-gap: 15px;
	}

	.masonry-item {
		margin-bottom: 15px;
	}
}

@media (max-width: 768px) {
	.masonry-grid {
		column-count: 2;
		column-gap: 12px;
	}

	.masonry-item {
		margin-bottom: 12px;
	}
}

@media (max-width: 576px) {
	.masonry-grid {
		column-count: 1;
		column-gap: 0;
	}

	.masonry-item {
		margin-bottom: 15px;
	}
}