/*!
Theme Name: Greative Soft
Theme URI: http://greativesoft.com/
Author: greativesoft.com
Author URI: http://greativesoft.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: greative-soft
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Greative Soft is based on Underscores https://greativesoft.com/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Seore - SEO And Digital Marketing Agency HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Our Strategy css
08. Company Feature css
09. How It Work css
10. Our Pricing css
11. Our Projects
12. Our Testimonial css
13. Our Blog css
14. Footer css
15. About us Page css
16. Services Page css
17. Service Single css
18. Blog Archive css
19. Blog Single css
20. Project Page css
21. Project Single css
22. Team Page css  
23. Contact us Page css
24. FAQs Page css
25. 404 Page css
26. Responsive css
-------------------------------------------------------------------------------------- */

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

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--primary-color: #3B393C;
	--secondary-color: #F5F4F0;
	--text-color: #3B393C;
	--accent-color: #716D60;
	--gradient-color: rgb(59, 57, 60);
	--box-shadow-color: #585B631A;
	--white-color: #FFFFFF;
	--divider-color: #F5F4F0;
	--dark-divider-color: #E6E6E6;
	--error-color: rgb(230, 87, 87);
	--default-font: "Poppins", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/
body {
	font-family: var(--default-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6em;
	color: var(--text-color);
	background-color: var(--white-color);
	padding-top: 120px;
	/* header offset */
}


p {
	line-height: 1.6em;
	margin-bottom: 1.6em;
	font-size: 20px;
}

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

h1,
h2 {
	margin: 0;
	font-weight: 600;
	color: var(--primary-color);
	line-height: 1.1em;
}

h3,
h4 {
	margin: 0;
	font-weight: 500;
	color: var(--primary-color);
	line-height: 1.1em;
}

h5,
h6 {
	margin: 0;
	font-weight: 500;
	color: var(--primary-color);
	line-height: 1.1em;
}


figure {
	display: block;
	margin: 0;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
}

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

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

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

.container {
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	padding-right: 15px;
	padding-left: 15px;
}

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

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

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

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

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

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

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

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

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

#magic-cursor {
	position: absolute;
	width: 10px !important;
	height: 10px !important;
	pointer-events: none;
	z-index: 1000000;
}

#ball {
	position: fixed;
	display: block;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 8px !important;
	height: 8px !important;
	background: var(--accent-color);
	margin: 0;
	border-radius: 50%;
	pointer-events: none;
	opacity: 1 !important;
}

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

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

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

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

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

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

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

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

.btn-default {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1em;
	color: var(--white-color);
	text-transform: capitalize;
	background-image: linear-gradient(to right, var(--accent-color) 0%, var(--gradient-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	padding: 20px 30px;
	border-radius: 10px;
	border: none;
	transition: 0.3s ease-in-out;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.btn-default:hover {
	background-position: right center;
}

.btn-large {
	font-size: 20px;
	padding: 20px 65px 20px 20px;
}

.btn-default.btn-large::before {
	width: 40px;
	height: 40px;
	background-size: 15px;
}

.section-row {
	text-align: center;
	margin-bottom: 60px;
}

.section-row .section-title {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 0;
}

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

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

.section-title h3 {
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	line-height: 1.3em;
	color: var(--accent-color);
}

.section-title h1,
.section-title h2 {
	font-size: 46px;
	letter-spacing: -0.02em;
	color: var(--primary-color);
	cursor: none;
}

.section-title h1 span,
.section-title h2 span {
	color: var(--accent-color);
}

.section-title p {
	color: var(--text-color);
	margin-top: 20px;
	margin-bottom: 0;
}

.section-title-t p {
	color: var(--text-color);
	margin-top: 20px;
	margin-bottom: 0;
	text-align: justify;
}

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

:root {
	--glass-bg: rgba(255, 255, 255, 0.75);
	--glass-bg-strong: rgba(255, 255, 255, 0.92);
	--glass-border: rgba(255, 255, 255, 0.35);
	--glass-blur: blur(22px) saturate(180%);
	--green: #1e6d3d;
	--green-dark: #14502d;
}

/* Header Wrapper */
.main-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	transition: padding 0.35s ease, backdrop-filter 0.35s ease;
	background: transparent;
}

/* Header grows smaller on scroll */
.main-header.scrolled {
	padding: 14px 0;
}

/* Floating Navigation Pill */
.header-nav-box {
	min-width: 540px;
	max-width: 100%;
	width: auto;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;

	padding: 14px 32px;

	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);

	border: 1px solid var(--glass-border);
	border-radius: 60px;

	box-shadow: 0 8px 35px rgba(0, 0, 0, 0.08);
	transition: 0.3s ease;
}

/* Shrink logo on scroll */
.main-header.scrolled .navbar-brand img {
	height: 34px;
}

/* Logo */
.header-nav-box .navbar-brand img {
	height: 44px;
	transition: 0.3s ease;
}

/* Nav Menu */
.navbar-nav {
	display: flex;
	gap: 26px;
}

.nav-link {
	color: #1a1a1a;
	font-size: 16px;
	font-weight: 600;
	transition: 0.25s ease;
}

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

/* Phone Button */
.header-btn a {
	background: var(--green);
	color: white;
	padding: 12px 28px;
	border-radius: 40px;
	font-weight: 600;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: background 0.3s ease;
}

.header-btn a:hover {
	background: var(--green-dark);
}

/* NAVBAR TOGGLER */
.navbar-toggler {
	border: none;
	padding: 6px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 6px;
	display: none;
}

.navbar-toggler:focus {
	box-shadow: none;
}

/*===============================================
RESPONSIVE
================================================*/

/* Only the responsive part below is updated */
@media (max-width: 991px) {

	/* Keep header fixed on mobile too (prevents content jumping under it) */
	.main-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 12px 0 !important;
		background: transparent;
	}

	/* Add padding to body so content isn't hidden behind fixed header */
	body {
		padding-top: 90px;
		/* Adjust if needed — matches your mobile header height */
	}

	/* Mobile glass pill → full-width card style */
	.header-nav-box {
		width: 100%;
		max-width: none;
		min-width: auto;
		margin: 0 auto;
		padding: 16px 20px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border: 1px solid rgba(255, 255, 255, 0.4);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

		flex-wrap: wrap;
		gap: 16px;
	}

	/* Logo + Toggler + Phone button in one row (always visible) */
	.navbar-brand {
		flex-shrink: 0;
	}

	.navbar-brand img {
		height: 38px;
	}

	/* Phone button stays visible even when menu is closed */
	.header-btn {
		margin-left: auto;
		order: 3;
		justify-content: center;
	}

	.header-btn a {
		padding: 10px 20px;
		font-size: 14px;
	}

	/* Toggler */
	.navbar-toggler {
		display: block;
		order: 2;
		margin-left: 12px;
	}

	/* Collapsed menu — clean dropdown below the pill */
	.navbar-collapse {
		width: 100%;
		margin-top: 16px;
		background: rgba(255, 255, 255, 0.97);
		border-radius: 16px;
		padding: 20px 0;
		box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
		order: 4;
	}

	.navbar-nav {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}

	.nav-link {
		padding: 14px 20px;
		font-size: 17px;
		font-weight: 600;
	}

	/* Optional: slightly smaller pill on very small phones */
	@media (max-width: 480px) {
		.header-nav-box {
			width: 100%;
			padding: 14px 16px;
		}

		.header-btn a {
			padding: 10px 16px;
			font-size: 13.5px;
			justify-content: center;
		}

		body {
			padding-top: 84px;
		}
	}
}



/************************************/
/***        04. Hero css	      ***/
/************************************/
/* ================================================
   UPDATED PAGE HEADER – DARK BG BEHIND GLASS NAVBAR
================================================ */
#pageHeader {
	position: relative;
	padding-top: 220px;
	/* Space for your fixed glass navbar */
	margin-top: -180px;
	/* Pulls the dark section UP behind navbar */
	overflow: hidden;
	text-align: center;
	border-radius: 0 0 3rem 3rem;

}


/* Responsive */
@media (max-width: 991px) {
	#pageHeader {
		padding-top: 180px;
		margin-top: -140px;
	}


}


.ptop {
	padding: 8px 16px 8px 16px;
	background-color: #321b1b4d;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #000000;
	border-radius: 100px 100px 100px 100px;
	display: inline-flex;
}

.hero {
	background: #ffffff;
	background-position: center;
	background-size: cover;
	padding: 40px 0;
	;
}



.hero-content {
	padding-right: 80px;
}

.hero-content .section-title.hero-content-title h1 {
	font-size: 65px;
	line-height: 1.4;
}

.hero-image {
	text-align: center;
}

.hero-content-footer {
	display: flex;
	align-items: center;
}

.wide-client {
	display: flex;
	align-items: center;
	margin-left: 20px;
}

.wide-client-image {
	margin-right: 10px;
}

.wide-client-image img {
	width: 136px;
}

.wide-client-content {
	width: calc(100% - 146px);
}

.wide-client-content p {
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color);
	text-transform: capitalize;
	max-width: 100px;
	margin: 0;
}

.hero-image {
	position: relative;
}

.company-sales {
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 17px;
	padding: 15px 25px 15px 15px;
	animation: salesmoveobject 3s infinite linear alternate;
}

@keyframes salesmoveobject {
	50% {
		left: 50px;
	}
}

.company-sales .icon-box {
	margin-right: 15px;
}

.company-sales .icon-box img {
	width: 50px;
}

.company-sales-content {
	width: calc(100% - 65px);
	text-align: left;
}

.company-sales-content h3 {
	font-size: 18px;
	font-weight: 500;
}

.company-sales-content p {
	text-transform: capitalize;
	margin: 0;
}

.company-visit {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(50%);
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 17px;
	padding: 15px 25px 15px 15px;
	animation: visitmoveobject 3s infinite linear alternate;
}

@keyframes visitmoveobject {
	50% {
		right: 30px;
	}
}

.company-visit .icon-box {
	margin-right: 15px;
}

.company-visit .icon-box img {
	width: 50px;
}

.company-visit-content {
	/* width: calc(100% - 65px); */
	text-align: left;
}

.company-visit-content h3 {
	font-size: 18px;
	font-weight: 500;
}

.company-visit-content p {
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***       05. About Us css	      ***/
/************************************/

.about-us {
	position: relative;
	background: url('../Greativesoft/images/section-bg-img-1.png') no-repeat;
	background-position: right -100px bottom -100px;
	padding: 70px 0;
}

.about-image {
	position: relative;
}

.about-img {
	text-align: center;
}

.company-experience {
	position: absolute;
	/* top: 50%; */
	right: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 17px;
	padding: 15px 25px 15px 15px;
	animation: expmoveobject 3s infinite linear alternate;
}

@keyframes expmoveobject {
	50% {
		right: 50px;
	}
}

.company-experience .icon-box {
	margin-right: 15px;
}

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

.company-experience-content {
	width: calc(100% - 65px);
	text-align: left;
}

.company-experience-content h3 {
	font-size: 18px;
	font-weight: 500;
}

.company-experience-content p {
	text-transform: capitalize;
	margin: 0;
}

.about-content {
	padding-left: 80px;
}

.about-content-body {
	margin-bottom: 30px;
}

.about-content-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.heros ul li {
	position: relative;
	width: auto !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	color: var(--primary-color);
	text-transform: capitalize;
	padding-left: 30px;
}

.about-content-body ul li {
	position: relative;
	width: calc(50% - 10px);
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	padding-left: 30px;
}

.about-content-body ul li:before {
	content: '\f058';
	font-family: "Font Awesome 6 Free";
	color: var(--accent-color);
	font-size: 20px;
	font-weight: 900;
	position: absolute;
	top: 0;
	left: 0;
}

/************************************/
/***     06. Our Services css	  ***/
/************************************/

.our-services {
	background: var(--secondary-color) url('../Greativesoft/images/section-bg-img-2.png') no-repeat;
	background-position: left -100px bottom -250px;
	padding: 100px 0 70px;
}

.our-service-content {
	position: sticky;
	top: 20px;
	margin-bottom: 30px;
}

.our-services .section-btn {
	text-align: left;
}

.service-item {
	position: relative;
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	border-radius: 16px;
	height: calc(100% - 30px);
	margin-bottom: 10px;
	padding: 30px;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
	cursor: none;
}

.service-item::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	border-radius: 0px;
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	transition: all 0.4s ease-in-out;
	height: 100%;
	z-index: 1;
}

.service-item:hover:before {
	top: 0;
}

.service-item .icon-box {
	position: relative;
	z-index: 2;
}

.service-item .icon-box img {
	transition: all 0.4s ease-in-out;
}

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

.service-body {
	position: relative;
	z-index: 2;
	margin-bottom: 20px;
}

.service-body h3 {
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.service-item:hover .service-body h3 {
	color: var(--white-color);
}

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

.service-item:hover .service-body p {
	color: var(--white-color);
}

.service-footer {
	position: relative;
	z-index: 2;
}

.service-footer a {
	background-color: var(--accent-color);
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-footer a img {
	max-width: 20px;
	transition: all 0.4s ease-in-out;
	transform: rotate(-45deg);
}

.service-item:hover .service-footer a img {
	transform: rotate(0deg);
}

/************************************/
/***     07. Our Strategy css	  ***/
/************************************/

.our-strategy {
	background: url('../Greativesoft/images/section-bg-img-3.png') no-repeat;
	background-position: top right;
	padding: 100px 0;
}

.strategy-image {
	display: flex;
	align-items: start;
	text-align: left;
	position: relative;
}

.strategy-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url('../Greativesoft/images/strategy-image-bg.png') no-repeat;
	background-position: center top;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.strategy-img-1 {
	margin-right: 30px;
}

.strategy-img-2 {
	padding-top: 80px;
}

.strategy-img-2 figure,
.strategy-img-1 figure {
	display: block;
}

.strategy-img-2 img,
.strategy-img-1 img {
	border-radius: 16px;
}

.our-strategy-box {
	padding-left: 80px;
}

.strategy-item {
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	border-radius: 16px;
	display: flex;
	align-items: center;
	padding: 30px;
	margin-bottom: 30px;
}

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

.strategy-item .icon-box {
	position: relative;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	width: 75px;
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.strategy-item:hover .icon-box {
	border-color: transparent;
}

.strategy-item .icon-box::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	top: 0;
	left: 0;
	transform: scale(0);
	transition: all 0.3s ease-in-out;
	border-radius: 50px;
}

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

.strategy-item .icon-box img {
	position: relative;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

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

.strategy-progress-bar {
	width: calc(100% - 95px);
}

.skillbar .skill-data {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.skillbar .skill-data .skill-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	text-transform: capitalize;
}

.skillbar .skill-data .skill-no {
	font-size: 16px;
	font-weight: 600;
	color: var(--accent-color);
}

.skillbar .skill-progress {
	width: 100%;
	height: 12px;
	background: var(--dark-divider-color);
	border-radius: 16px;
	position: relative;
}

.skillbar .skill-progress .count-bar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	border-radius: 16px;
}

/************************************/
/***    08. Company Feature css   ***/
/************************************/

.company-feature {
	background: var(--secondary-color) url('../Greativesoft/images/section-bg-img-1.png') no-repeat;
	background-position: right -100px bottom -100px;
	padding: 100px 0;
}

.company-feature-item {
	background-color: var(--white-color);
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	display: flex;
	align-items: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 15px 20px;
}

.company-feature-item:hover .feature-item-content h3 {
	color: #716d60;
	/* Change the color to whatever you prefer */
}

.company-feature-item .icon-box {
	position: relative;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	width: 75px;
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
}

.company-feature-item:hover .icon-box {
	border-color: transparent;
}

.company-feature-item .icon-box::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	top: 0;
	left: 0;
	transform: scale(0);
	transition: all 0.3s ease-in-out;
	border-radius: 50px;
}

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

.company-feature-item .icon-box img {
	position: relative;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.company-feature-item:hover .icon-box img {
	filter: brightness(0) invert(1);
}

.feature-item-content {
	/* width: calc(100% - 90px); */
	text-align: center;
}

.feature-item-content h3 {
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	/* margin-bottom: 5px; */
}

.feature-item-content p {
	margin: 0;
}

.company-feature-image {
	text-align: center;
}

/************************************/
/***     09. How It Work css      ***/
/************************************/

.how-it-work {
	padding: 100px 0 70px;
}

.how-work-item {
	position: relative;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
	cursor: none;
}

.how-work-item::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	border-radius: 0px;
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	transition: all 0.4s ease-in-out;
	height: 100%;
	z-index: 1;
}

.how-work-item:hover:before {
	top: 0;
}

.how-work-item .icon-box {
	position: relative;
	z-index: 2;
	margin-bottom: 20px;
}

.how-work-item .icon-box img {
	width: 55px;
	transition: all 0.4s ease-in-out;
}

.how-work-item:hover .icon-box img {
	filter: brightness(0) invert(1);
}

.how-work-content {
	position: relative;
	z-index: 2;
}

.how-work-content h3 {
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
	transition: all 0.3s ease-in-out;
}

.how-work-item:hover .how-work-content h3 {
	color: var(--white-color);
}

.how-work-content p {
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.how-work-item:hover .how-work-content p {
	color: var(--white-color);
}

/************************************/
/***     10. Our Pricing css	  ***/
/************************************/

.our-pricing {
	background-color: var(--secondary-color);
	padding: 100px 0 70px;
}

.pricing-item {
	background-color: var(--white-color);
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	border-radius: 16px;
	height: calc(100% - 30px);
	padding: 40px 30px;
	margin-bottom: 30px;
}

.pricing-header {
	border-bottom: 1px solid var(--dark-divider-color);
	text-align: center;
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.pricing-header h3 {
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.pricing-header h2 {
	font-size: 48px;
	margin-bottom: 15px;
}

.pricing-header p {
	margin: 0;
}

.pricing-body {
	margin-bottom: 40px;
}

.pricing-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pricing-body ul li {
	position: relative;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 15px;
}

.pricing-body ul li:last-child {
	margin-bottom: 0;
}

.pricing-body ul li i {
	position: absolute;
	top: 2px;
	right: 0;
	font-size: 18px;
	color: #3BC13B;
}

.pricing-body ul li i.fa-solid.fa-xmark {
	color: var(--error-color);
}

.pricing-footer {
	text-align: center;
}

.pricing-item.highlighted-box {
	position: relative;
	background-color: var(--primary-color);
	overflow: hidden;
}

.pricing-item.highlighted-box::before {
	content: '';
	display: block;
	position: absolute;
	top: -40px;
	right: -60px;
	transform: rotate(45deg);
	background: url('../Greativesoft/images/icon-star.svg') no-repeat, linear-gradient(to right, var(--accent-color) 35%, var(--gradient-color) 2.05%, var(--accent-color) 99.13%);
	background-position: right 50px top 60px;
	width: 140px;
	height: 100px;
	z-index: 1;
}

.pricing-item.highlighted-box .pricing-body ul li,
.pricing-item.highlighted-box .pricing-header p,
.pricing-item.highlighted-box .pricing-header h2,
.pricing-item.highlighted-box .pricing-header h3 {
	color: var(--white-color);
}

/************************************/
/***     11. Our Projects css	  ***/
/************************************/

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

.our-projects-nav {
	margin-bottom: 30px;
}

.our-projects-nav ul {
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
}

.our-projects-nav ul li {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 10px;
}

.our-projects-nav ul li:last-child {
	margin-right: 0;
}

.our-projects-nav ul li a {
	position: relative;
	display: inline-block;
	background-color: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	color: var(--text-color);
	font-weight: 600;
	padding: 8px 20px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.our-projects-nav ul li a:hover {
	color: var(--white-color);
}

.our-projects-nav ul li a::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	border-radius: 0px;
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	transition: all 0.3s ease-in-out;
	height: 100%;
	z-index: -1;
}

.our-projects-nav ul li a:hover:before {
	top: 0;
}

.our-projects-nav ul li a.active-btn {
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	color: var(--white-color);
}

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

.project-item {
	position: relative;
	overflow: hidden;
	cursor: none;
}

.project-image a {
	position: relative;
	cursor: none;
	display: block;
}

.project-image img {
	width: 100%;
	border-radius: 16px;
	/* aspect-ratio: 1/1.1;*/
	object-fit: cover;
}

.project-body {
	position: absolute;
	bottom: 20px;
	right: 20px;
	left: 20px;
	transform: translateY(100%);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-between;
	opacity: 0;
	border-radius: 10px;
	padding: 20px;
	z-index: 1;
	transition: all 0.5s ease-in-out;
}

.project-body::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: var(--primary-color);
	border-radius: 10px;
	opacity: 90%;
	z-index: -1;
}

.project-item:hover .project-body {
	opacity: 1;
	transform: translateY(0px);
}

.project-content {
	text-align: left;
}

.project-content h3 {
	font-size: 20px;
	font-weight: 600;
	color: var(--white-color);
	text-transform: capitalize;
	margin-bottom: 5px;
}

.project-content p {
	color: var(--white-color);
	text-transform: capitalize;
	margin: 0;
}

.project-readmore-btn a {
	background-color: var(--accent-color);
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.project-readmore-btn a img {
	max-width: 20px;
	transform: rotate(-45deg);
	transition: all 0.4s ease-in-out;
}

.project-body:hover .project-readmore-btn a img {
	transform: rotate(0deg);
}

/* ================= TESTIMONIAL SECTION ================= */
.testimonial-section {
	position: relative;
	padding: 5rem 0;
	background: #f5f4f0;
	overflow: hidden;
}

/* Subtle pattern overlay */
.testimonial-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at 20% 50%, rgba(59, 57, 60, 0.02) 0%, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(113, 109, 96, 0.02) 0%, transparent 50%);
	pointer-events: none;
}

/* Top header */
.testimonial-header-small {
	text-transform: uppercase;
	color: #716d60;
	font-weight: 700;
	letter-spacing: 3px;
	font-size: 0.85rem;
	margin-bottom: 0.5rem;
	animation: fadeInDown 0.6s ease;
	position: relative;
}

.testimonial-header-small::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background: linear-gradient(90deg, #716d60, #3b393c);
	margin: 0.5rem auto 0;
	border-radius: 2px;
}

.testimonial-header-large {
	font-size: 2.8rem;
	font-weight: 800;
	margin-bottom: 1rem;
	color: #3b393c;
	animation: fadeInDown 0.8s ease;
	position: relative;
}

.testimonial-header-large span {
	background: linear-gradient(135deg, #3b393c 0%, #716d60 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.testimonial-header-desc {
	font-size: 1.1rem;
	color: #716d60;
	margin-bottom: 3rem;
	animation: fadeInDown 1s ease;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Swiper Container */
.testimonial-swiper {
	padding: 2rem 0 4rem;
	position: relative;
}

/* Swiper Cards */
.testimonial-card {
	background: #ffffff;
	border-radius: 1.5rem;
	padding: 2.5rem;
	height: 100%;
	min-height: 300px;
	text-align: left;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow:
		0 4px 20px rgba(59, 57, 60, 0.08),
		0 1px 3px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	overflow: hidden;
	border: 1px solid rgba(59, 57, 60, 0.08);
}

.testimonial-card:hover {
	transform: translateY(-5px);
	box-shadow:
		0 8px 25px rgba(59, 57, 60, 0.10),
		0 2px 5px rgba(0, 0, 0, 0.06);
	border-color: rgba(59, 57, 60, 0.12);
}

/* Quote icon */
.testimonial-card::before {
	content: "\201C";
	font-size: 8rem;
	color: rgba(59, 57, 60, 0.05);
	position: absolute;
	top: -20px;
	right: 20px;
	z-index: 0;
	font-family: Georgia, serif;
	line-height: 1;
	font-weight: bold;
}

/* Top accent bar */
.testimonial-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #3b393c 0%, #716d60 50%, #3b393c 100%);
	transform: scaleX(0);
	transition: transform 0.4s ease;
	transform-origin: center;
}

.testimonial-card:hover::after {
	transform: scaleX(1);
}

/* Title and designation */
.testimonial-card h5 {
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 0.3rem;
	z-index: 1;
	position: relative;
	color: #3b393c;
	transition: color 0.3s ease;
}

.testimonial-card:hover h5 {
	color: #716d60;
}

.testimonial-card .designation {
	font-size: 0.9rem;
	color: #716d60;
	margin-bottom: 1.2rem;
	z-index: 1;
	position: relative;
	font-weight: 500;
	font-style: italic;
}

/* Testimonial text */
.testimonial-text {
	font-size: 1rem;
	color: #3b393c;
	line-height: 1.8;
	position: relative;
	z-index: 1;
	margin-bottom: 0.8rem;
	transition: all 0.3s ease;
	font-weight: 400;
}

.testimonial-text.collapsed {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.read-more-btn {
	color: #5c595e;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 400;
	z-index: 1;
	position: relative;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.read-more-btn:hover {
	color: #716d60;
	gap: 8px;
}

.read-more-btn::after {
	content: '→';
	transition: transform 0.3s ease;
	display: inline-block;
	font-size: 1.1rem;
}

.read-more-btn.expanded::after {
	content: '↑';
}

/* Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
	color: #3b393c;
	background: #ffffff;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	box-shadow: 0 4px 15px rgba(59, 57, 60, 0.2);
	transition: all 0.3s ease;
	border: 2px solid rgba(59, 57, 60, 0.1);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
	background: linear-gradient(135deg, #3b393c 0%, #716d60 100%);
	color: #ffffff;
	transform: scale(1.1);
	box-shadow: 0 6px 25px rgba(59, 57, 60, 0.35);
}

.swiper-button-next::after,
.swiper-button-prev::after {
	font-size: 22px;
	font-weight: bold;
}

/* Pagination */
.swiper-pagination {
	bottom: 0 !important;
}

.swiper-pagination-bullet {
	background: #3b393c;
	opacity: 0.3;
	width: 10px;
	height: 10px;
	transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
	opacity: 1;
	width: 35px;
	border-radius: 6px;
	background: linear-gradient(90deg, #3b393c 0%, #716d60 100%);
}

/* Animations */
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

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

/* Responsive */
@media (max-width: 768px) {
	.testimonial-header-large {
		font-size: 2.2rem;
	}

	.testimonial-card {
		min-height: 280px;
		padding: 2rem;
	}

	.swiper-button-next,
	.swiper-button-prev {
		width: 45px;
		height: 45px;
	}

	.swiper-button-next::after,
	.swiper-button-prev::after {
		font-size: 18px;
	}
}

@media (max-width: 576px) {
	.testimonial-section {
		padding: 3rem 0;
	}

	.testimonial-header-large {
		font-size: 1.8rem;
	}

	.testimonial-card {
		padding: 1.5rem;
	}
}

/************************************/
/***      13. Our Blog css	      ***/
/************************************/

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

.our-blog .section-title {
	text-align: center;
}

.blog-item {
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	box-shadow: 5px 28px 75px 4px var(--box-shadow-color);
	overflow: hidden;
	margin-bottom: 30px;
	height: calc(100% - 30px);
}

.blog-item .post-item-content {
	padding: 30px;
}

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

.blog-item .post-featured-image img {
	aspect-ratio: 1 / 0.6;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

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

.post-item-body h2 {
	font-size: 22px;
	color: var(--primary-color);
	line-height: 1.4em;
	margin-bottom: 20px;
}

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

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

.post-item-footer a {
	background-color: var(--accent-color);
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.post-item-footer a img {
	max-width: 20px;
	transition: all 0.4s ease-in-out;
	transform: rotate(-45deg);
}

.blog-item:hover .post-item-footer a img {
	transform: rotate(0deg);
}

/************************************/
/***    	14. Footer css		  ***/
/************************************/
/* ===============================
   FOOTER WRAPPER
=============================== */
.main-footer {
	background-color: #3b393c;
	padding: 120px 0 30px;
	color: #ffffff;
	position: relative;
	border-radius: 3rem 3rem 0 0;
}

/* ===============================
FOOTER BRAND (GIF)
=============================== */
.footer-brand {
	width: 100%;
	text-align: center;
	margin-bottom: 40px;
}

.footer-brand img {
	width: 100%;
	height: auto;
	display: block;
}

/* ===============================
CONTACT (INLINE DESKTOP, STACK MOBILE)
=============================== */
.footer-contact {
	display: flex;
	align-items: center;
	gap: 25px;
	font-size: 0.9rem;
	white-space: nowrap;
	justify-content: center;
	margin-bottom: 30px;
}

.footer-contact p {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	gap: 6px;
}

.footer-contact a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

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

.footer-contact i {
	font-size: 14px;
	color: #ffffff;
}

/* Mobile */
@media (max-width: 768px) {
	.footer-contact {
		flex-direction: column;
		/* white-space: normal; */
		gap: 6px;
	}
}

/* ===============================
SOCIAL LINKS
=============================== */
.footer-social-links {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 40px;
}

.footer-social-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	transition: all 0.3s ease;
}

.footer-social-links a:hover {
	background-color: #ffffff;
	color: #000000;
}

/* ===============================
FOOTER BOTTOM (COPYRIGHT + LINKS INLINE)
=============================== */
.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: nowrap;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}

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

/* Bottom Links */
.footer-bottom-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 25px;
}

.footer-bottom-links ul li a {
	font-size: 0.85rem;
	transition: color 0.3s ease;
}

/* Mobile */
@media (max-width: 768px) {
	.footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}

	.footer-bottom-links ul {
		justify-content: center;
		gap: 15px;
	}
}

/************************************/
/***     15. About us Page css    ***/
/************************************/

.page-header {
	position: relative;
	padding: 100px 0px;
	background: linear-gradient(179.5deg, var(--primary-color) 0.06%, var(--box-shadow-color) 90.6%), url('../../themes/Greativesoft/images/banner.jpg') no-repeat center center;
	background-size: cover;
}

.page-header-box {
	position: relative;
	z-index: 1;
	text-align: center;
}

.page-header-box h1 {
	color: var(--white-color);
	font-size: 56px;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
	cursor: none;
}

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

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

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

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

.page-about {
	padding: 100px 0;
	background: var(--secondary-color) url('../Greativesoft/images/section-bg-img-1.png') no-repeat;
	background-position: right -100px bottom -100px;
}

.page-about .row.section-row {
	max-width: 100%;
	text-align: left;
}

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

.about-us-image {
	position: relative;
	margin-right: 40px;
}

.about-img-1 {
	position: relative;
	width: 380px;
}

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

.about-img-2 figure,
.about-img-1 figure {
	display: block;
}

.about-img-1 img {
	aspect-ratio: 1 /1.32;
	object-fit: cover;
	border-radius: 219px 219px 0 0;
}

.about-img-2 figure {
	border-radius: 219px 219px 0 0;
}

.about-img-2 img {
	aspect-ratio: 1 /1.26;
	object-fit: cover;
	border-width: 10px 0 0 10px;
	border-style: solid;
	border-color: var(--secondary-color);
	border-radius: 219px 219px 0 0;
}

.experience-counter-item {
	position: absolute;
	top: 50px;
	right: 0;
	display: flex;
	align-items: center;
	width: auto;
	padding: 15px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	animation: moveobject 3s infinite linear alternate;
}

@keyframes moveobject {
	50% {
		right: 50px;
	}
}

.experience-counter-item .icon-box {
	margin-right: 15px;
}

.experience-counter-item .icon-box img {
	width: 50px;
}

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

.experience-counter-item .experience-counter-content h3 {
	font-size: 18px;
	font-weight: 500;
}

.experience-counter-item .experience-counter-content p {
	font-weight: 500;
	text-transform: capitalize;
	margin: 0;
}

.about-us-content-body ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.about-us-content-body ul li {
	position: relative;
	width: calc(50% - 10px);
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	padding-left: 30px;
}

.about-us-content-body ul li:before {
	content: '\f058';
	font-family: "Font Awesome 6 Free";
	color: var(--accent-color);
	font-size: 20px;
	font-weight: 900;
	position: absolute;
	top: 0;
	left: 0;
}

.trusted-company {
	margin-top: 60px;
}

.trusted-companies-title h3 {
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
}

.why-choose-us {
	padding: 100px 0;
	background: var(--secondary-color) url('../Greativesoft/images/section-bg-img-2.png') no-repeat;
	background-position: left -120px bottom -300px;
}

.why-choose-us .section-title {
	text-align: center;
}

.faq-accordion.why-choose-accordion .accordion-item {
	position: relative;
	background: none;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 25px;
	margin-bottom: 25px;
}

.faq-accordion.why-choose-accordion .accordion-item:last-child {
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.faq-accordion.why-choose-accordion .accordion-header {
	position: relative;
}

.faq-accordion.why-choose-accordion .accordion-header .icon-box {
	position: absolute;
	left: 0;
	top: 4px;
}

.faq-accordion.why-choose-accordion .accordion-item .accordion-button {
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
	border: none;
	box-shadow: none;
	padding: 5px 35px 5px 55px;
	position: relative;
	transition: all 0.3s ease-in-out;
}

.faq-accordion.why-choose-accordion .accordion-item .accordion-button.collapsed::after,
.faq-accordion.why-choose-accordion .accordion-item .accordion-button:after {
	display: none;
}

.faq-accordion.why-choose-accordion .accordion-item .accordion-button span {
	position: absolute;
	right: 0;
	top: 0;
	bottom: auto;
	transform: translateY(50%);
	font-size: 26px;
	line-height: 1em;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.faq-accordion.why-choose-accordion .accordion-item .accordion-body {
	padding: 5px 30px 5px 55px;
}

.faq-accordion.why-choose-accordion .accordion-item.accordion-body p {
	margin: 0;
}

.why-choose-image {
	display: flex;
	align-items: start;
	justify-content: end;
	position: relative;
	margin-left: 60px;
}

.why-choose-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: url('../Greativesoft/images/why-choose-image-bg.png') no-repeat;
	background-position: center top;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.why-choose-img-1 {
	margin-right: 30px;
}

.why-choose-img-2 {
	padding-top: 80px;
}

.wwhy-choose-img-1 figure,
.why-choose-img-2 figure {
	display: block;
}

.why-choose-img-1 img,
.why-choose-img-2 img {
	border-radius: 16px;
}

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

.our-team .section-row {
	width: 100%;
	max-width: 100%;
	text-align: left;
}

.team-member-item {
	margin-bottom: 30px;
}

.team-image {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	margin-bottom: 15px;
}

.team-image img {
	width: 100%;
	border-radius: 0px;
	aspect-ratio: 1/1.2;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-image img {
	transform: scale(1.1);
}

.team-social-icon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	transition: all 0.4s ease-in-out;
	opacity: 0;
	z-index: 1;
}

.team-member-item:hover .team-social-icon {
	opacity: 1;
	bottom: 20px;
}

.team-social-icon ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.team-social-icon ul li {
	display: inline-block;
	text-align: center;
	margin-right: 10px;
}

.team-social-icon ul li:last-child {
	margin-right: 0;
}

.team-social-icon ul li a {
	display: block;
}

.team-social-icon ul li a i {
	background-color: var(--accent-color);
	width: 40px;
	height: 40px;
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-out;
	color: var(--white-color);
	font-size: 18px;
}

.team-social-icon ul li a i:hover {
	background-color: var(--primary-color);
}

.team-content {
	text-align: center;
}

.team-content h3 {
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.team-content p {
	text-transform: capitalize;
	margin: 0;
}

.about-company-counter {
	background: linear-gradient(180deg, var(--white-color) 50%, var(--secondary-color) 50%);
}

.about-company-counter .company-counter-box {
	background: linear-gradient(180deg, var(--accent-color) 0%, var(--gradient-color) 100%);
	border-radius: 16px;
	padding: 40px 0;
}

.company-counter-item {
	text-align: center;
}

.company-counter-item .company-counter-content h3 {
	font-size: 40px;
	color: var(--white-color);
	margin-bottom: 5px;
}

.company-counter-item .company-counter-content p {
	font-size: 20px;
	font-weight: 600;
	color: var(--white-color);
	text-transform: capitalize;
	margin: 0;
}

.our-faq {
	padding: 100px 0;
	background: var(--white-color) url('../Greativesoft/images/section-bg-img-2.png') no-repeat;
	background-position: left -100px bottom -250px;
}

.faq-image {
	position: relative;
	/* padding-bottom: 110px; */
	margin-right: 20px;
}

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

.faq-img-1 {
	position: relative;
	width: 450px;
}

.faq-img-2 figure,
.faq-img-1 figure {
	display: block;
}

.faq-img-1 img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 16px;
}

.faq-img-2 img {
	aspect-ratio: 1 /1.25;
	object-fit: cover;
	border: 10px solid var(--secondary-color);
	border-radius: 16px;
}

.faq-accordion .accordion-item {
	position: relative;
	background: none;
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 25px;
	margin-bottom: 25px;
}

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

.faq-accordion .accordion-item .accordion-button {
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
	border: none;
	box-shadow: none;
	padding: 5px 30px 5px 0px;
	position: relative;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
	content: '\f068';
	font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 0px;
	top: 50%;
	bottom: auto;
	transform: translate(0px, -10px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 20px;
	width: 20px;
	height: 20px;
	padding: 5px;
	color: var(--primary-color);
}

.faq-accordion .accordion-item .accordion-button.collapsed::after {
	content: '\f067';
	color: var(--primary-color);
}

.faq-accordion .accordion-item .accordion-body {
	padding: 5px 30px 5px 0px;
}

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

/************************************/
/***     16. Services Page css    ***/
/************************************/

.page-services {
	background: var(--secondary-color) url('../Greativesoft/images/section-bg-img-1.png') no-repeat;
	background-position: right -100px bottom -100px;
	padding: 100px 0 70px;
}

.our-pricing.service-pricing {
	background: var(--secondary-color) url(../Greativesoft/images/section-bg-img-2.png) no-repeat;
	background-position: left -100px bottom -250px;
}

/************************************/
/***   17. Service Single css	  ***/
/************************************/

.page-service-single {
	padding: 100px 0;
	background: var(--secondary-color) url('../Greativesoft/images/section-bg-img-2.png') no-repeat;
	background-position: left -100px bottom -250px;
}

.service-sidebar {
	position: sticky;
	top: 20px;
}

.service-list {
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px;
	margin-bottom: 30px;
}

.service-list h3 {
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

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

.service-list ul li {
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

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

.service-list ul li a {
	display: block;
	position: relative;
	color: var(--text-color);
	font-size: 16px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.service-list ul li a:after {
	content: '\f105';
	font-family: "Font Awesome 6 Free";
	font-weight: 700;
	display: block;
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
	color: var(--accent-color);
}

.service-list ul li a:hover {
	color: var(--accent-color);
}

.sidebar-cta-box {
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px;
}

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

.sidebar-cta-box .cta-content h3 {
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.sidebar-cta-box .cta-content p {
	margin-bottom: 20px;
}

.service-featured-image {
	margin-bottom: 30px;
}

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

.service-featured-image img {
	aspect-ratio: 1 / 0.6;
	object-fit: cover;
	border-radius: 16px;
}

.service-entry {
	margin-bottom: 30px;
}

.service-entry h3 {
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.company-growth .company-growth-img figure {
	display: block;
}

.company-growth .company-growth-img img {
	border-radius: 16px;
}

.company-growth-content h3 {
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.company-growth-content p {
	margin-bottom: 20px;
}

.company-growth-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.company-growth-content ul li {
	position: relative;
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	padding-left: 25px;
	margin-bottom: 12px;
}

.company-growth-content ul li:last-child {
	margin-bottom: 0;
}

.company-growth-content ul li:before {
	content: '';
	position: absolute;
	background: url('../Greativesoft/images/icon-check.svg') no-repeat center center;
	background-size: 100% auto;
	height: 16px;
	width: 16px;
	top: 5px;
	left: 0;
}

.about-company-growth-content {
	margin-top: 20px;
}

.about-company-growth-content p {
	margin: 0;
}

.our-solution-faq {
	padding: 100px 0;
}

.our-solution-faq .solution-faqs {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

/************************************/
/***    18. Blog Archive css  	  ***/
/************************************/
/* Blog Archive */
.blog-card {
	transition: all 0.3s ease;
	border-radius: 12px;
}

.blog-card:hover {
	transform: translateY(-6px);
}

/* Image Overlay */
.overlay {
	transition: all 0.3s ease;
}

.overlay.hover-opacity-100:hover {
	opacity: 1 !important;
}

/* Overall Padding & Presentation */
.blog-card .card-body {
	padding: 1.4rem 1.3rem !important;
}

.pagination-wrapper ul {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding-left: 0;
}

.pagination-wrapper ul li {
	list-style: none;
}

.pagination-wrapper ul li a,
.pagination-wrapper ul li span {
	padding: 8px 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-decoration: none;
	color: #333;
	font-weight: 500;
}

.pagination-wrapper ul li span.current {
	background: #000;
	color: #fff;
	border-color: #000;
}

/************************************/
/***    19. Blog Single css  	  ***/
/************************************/

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

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

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

.post-image figure {
	display: block;
}

.post-image figure,
.post-image img {
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 16px;
}

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

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

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

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

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

.post-entry h1 {
	font-size: 58px;
}

.post-entry h2 {
	font-size: 35px;
	font-weight: 400;
}

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

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

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

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

.post-entry p {
	margin-bottom: 20px;
	font-size: 20px;
	text-align: justify;
}

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

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

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

.post-entry ol li {
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--text-color);
}

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

.post-entry ul li {
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	position: relative;
	margin-bottom: 18px;
}

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

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

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

.post-entry blockquote {
	background: var(--secondary-color) url('../Greativesoft/images/icon-blockquote.svg') no-repeat 40px 46px;
	background-size: 45px;
	border-radius: 16px;
	padding: 40px 40px 40px 110px;
	margin-bottom: 30px;
}

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

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

.tag-links {
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	display: inline-block;
}

.post-tags .tag-links a {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	text-transform: capitalize;
	background-color: var(--accent-color);
	color: var(--white-color);
	border-radius: 10px;
	padding: 8px 20px;
	margin-left: 10px;
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

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

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

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

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

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

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

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

.post-social-sharing ul li a i {
	font-size: 18px;
	color: inherit;
	transition: all 0.3s ease-in-out;
}

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

/************************************/
/***    20. Project Page css  	  ***/
/************************************/

/* Equal height card */
.project-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	transition: all 0.35s ease;
}

/* Fixed image height */
.project-image-wrapper {
	height: 260px;
	/* set uniform height */
	position: relative;
	overflow: hidden;
}

.project-image-wrapper img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Flexible content pushes read-more to bottom */
.project-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.project-readmore {
	margin-top: auto;
	/* sticks to bottom */
}

/* Hover */
.project-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

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

/************************************/
/***   21. Project Single css    ***/
/************************************/

.page-project-single {
	padding: 100px 0;
	background-color: #ffffff;
	/* background: var(--secondary-color) url('../Greativesoft/images/section-bg-img-2.png') no-repeat; */
	background-position: left -100px bottom -250px;
}

.project-featured-image {
	margin-bottom: 30px;
}

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

.project-featured-image img {
	border-radius: 16px;
	aspect-ratio: 1/ 0.6;
	object-fit: cover;
}

.project-single-content .project-section-title h3 {
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.project-detail,
.project-values-content,
.project-about-image {
	margin-bottom: 30px;
}

.project-values-content ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.project-values-content ul li {
	position: relative;
	width: calc(50% - 10px);
	text-transform: capitalize;
	padding-left: 30px;
}

.project-values-content ul li:before {
	content: '';
	position: absolute;
	background: url('../Greativesoft/images/icon-check.svg') no-repeat center center;
	background-size: 100% auto;
	height: 16px;
	width: 16px;
	top: 5px;
	left: 0;
}

.project-about-image .project-about-img-2 figure,
.project-about-image .project-about-img-1 figure {
	display: block;
}

.project-about-image .project-about-img-1 img,

.project-about-image .project-about-img-2 img {
	aspect-ratio: 1 / 0.8;
	object-fit: cover;
	border-radius: 16px;
}

.project-result-content p {
	margin: 0;
}

.project-sidebar {
	position: sticky;
	top: 20px;
}

.portfolio-info-box {
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 30px;
	margin-bottom: 30px;
}

.portfolio-info-box-title {
	margin-bottom: 30px;
}

.portfolio-info-box-title h3 {
	font-size: 20px;
	text-transform: capitalize;
}

.portfolio-info-item {
	display: flex;
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

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

.portfolio-info-item .icon-box {
	margin-right: 15px;
}

.portfolio-info-content {
	width: calc(100% - 65px);
}

.portfolio-info-content h3 {
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
	text-transform: capitalize;
	margin-bottom: 3px;
}

.portfolio-info-content p {
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***	  22. Team Page css       ***/
/************************************/

.page-team {
	background: var(--white-color) url('../Greativesoft/images/section-bg-img-2.png') no-repeat;
	background-position: left -120px bottom -300px;
	padding: 100px 0 70px;
}

/************************************/
/***   23. Contact us Page css    ***/
/************************************/

.page-contact-us {
	padding: 100px 0;
	background: var(--secondary-color) url('../Greativesoft/images/section-bg-img-2.png') no-repeat;
	background-position: left -100px bottom -250px;
}

.contact-info .contact-info-box {
	margin-bottom: 40px;
}

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

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

.contact-info-box .contact-info-title h2 {
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.contact-info-box .contact-info-title p {
	margin: 0;
}

.contact-info-item {
	position: relative;
	padding-left: 35px;
	margin-bottom: 20px;
}

.contact-info-item a {
	text-decoration: underline;
	color: var(--primary-color);
}

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

.contact-info-item .icon-box {
	position: absolute;
	top: 0px;
	left: 0px;
}

.contact-info-item .contact-info-content p {
	color: var(--primary-color);
	text-transform: capitalize;
	margin: 0;
}

.contact-form {
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 40px;
}

.contact-form-content p {
	margin-bottom: 20px;
}

.contact-form .form-control {
	padding: 15px 20px;
	background-color: var(--secondary-color);
	color: var(--primary-color);
	box-shadow: none;
	border: none;
	border-radius: 10px;
}

.contact-form .form-control::placeholder {
	color: var(--primary-color);
	text-transform: capitalize;
}

.contact-form button.btn-default {
	width: 100%;
}

.help-block.with-errors ul {
	margin-bottom: 0;
}

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

.google-map .container-fluid {
	padding: 0;
}

.google-map-iframe,
.google-map-iframe iframe {
	width: 100%;
	height: 500px;
}

/************************************/
/***  	   24. FAQs Page css      ***/
/************************************/

.page-faqs {
	padding: 100px 0;
	background: var(--white-color) url('../Greativesoft/images/section-bg-img-2.png') no-repeat;
	background-position: left -120px bottom -300px;
}

.faq-sidebar {
	position: sticky;
	top: 20px;
}

.faq-category-box {
	padding: 30px;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
}

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

.faq-category-box ul li {
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.faq-category-box ul li:last-child {
	border: none;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.faq-category-box ul li a {
	display: block;
	position: relative;
	color: var(--text-color);
	font-size: 16px;
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.faq-category-box ul li a:after {
	content: '\f105';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	display: block;
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
	color: var(--accent-color);
}

.faq-category-box ul li a:hover {
	color: var(--accent-color);
}

.faq-section {
	margin-bottom: 60px;
}

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

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

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

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

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

.error-page-content-heading {
	margin-bottom: 30px;
}

.error-page-content-heading h2 {
	font-size: 46px;
}

.error-page-content-heading h2 span {
	color: var(--accent-color);
}

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

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

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

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

	#magic-cursor {
		display: none !important;
	}

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

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

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

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

	.section-title h1,
	.section-title h2 {
		font-size: 38px;
	}

	.section-title-content {
		text-align: left;
		margin-left: 0;
		margin-top: 15px;
	}

	.hero {
		padding: 40px 0;
	}

	.hero-content {
		padding-right: 0px;
		text-align: center;
		margin-top: 40px;

	}

	.hero-content .section-title.hero-content-title h1 {
		font-size: 60px;
	}

	.about-us {
		background-position: right -200px bottom -200px;
		padding: 10px 0;
	}

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

	.about-content {
		padding-left: 0px;
	}

	.our-services {
		background-position: left -100px bottom -250px;
		padding: 50px 0 20px;
	}

	/* .service-item{		
		padding: 20px;
	} */

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

	.strategy-image {
		justify-content: center;
		margin-bottom: 30px;
	}

	.our-strategy-box {
		padding-left: 0px;
	}

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

	.company-feature {
		background-position: right -200px bottom -200px;
		padding: 50px 0;
	}

	.company-feature-content {
		margin-bottom: 10px;
	}

	.company-feature-item .icon-box {
		width: 60px;
		height: 60px;
	}

	.company-feature-item .icon-box img {
		width: 35px;
	}

	.feature-item-content {
		width: calc(100% - 75px);
	}

	.how-it-work {
		padding: 50px 0 20px;
	}

	.how-work-item {
		padding: 20px;
	}

	.how-work-content h3 {
		margin-bottom: 15px;
	}

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

	.pricing-item {
		padding: 30px 20px;
	}

	.pricing-header h2 {
		font-size: 38px;
		margin-bottom: 10px;
	}

	.pricing-header {
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.pricing-body {
		margin-bottom: 30px;
	}

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

	.project-body {
		padding: 15px;
	}

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

	.testimonial-item {
		padding: 20px;
	}

	.testimonial-header .author-image figure,
	.testimonial-header .author-image img {
		height: 65px;
		width: 65px;
	}

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

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

	.blog-item .post-item-content {
		padding: 25px;
	}

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

	.footer-logo {
		margin-bottom: 30px;
	}

	.about-footer {
		margin-bottom: 30px;
		padding-right: 0;
	}

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

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

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

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

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

	.about-us-image {
		width: 100%;
		max-width: 580px;
		margin: 0 auto;
		margin-bottom: 30px;
	}

	.about-us-content-body ul li {
		font-size: 16px;
	}

	.trusted-company {
		margin-top: 40px;
	}

	.trusted-companies-title {
		margin-bottom: 20px;
	}

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

	.why-choose-image {
		justify-content: center;
	}

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

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

	.faq-accordion.why-choose-accordion .accordion-item .accordion-button span {
		font-size: 22px;
	}

	.why-choose-image {
		margin-left: 0;
	}

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

	.about-company-counter .company-counter-box {
		padding: 30px;
	}

	.company-counter-item .company-counter-content h3 {
		font-size: 32px;
	}

	.company-counter-item .company-counter-content p {
		font-size: 18px;
	}

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

	.faq-image {
		max-width: 650px;
		margin: 0 auto;
		margin-bottom: 30px;
	}

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

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

	.service-sidebar {
		margin-bottom: 30px;
	}

	.service-list {
		padding: 20px;
	}

	.service-list h3 {
		margin-bottom: 20px;
	}

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

	.sidebar-cta-box .icon-box {
		margin-bottom: 15px;
	}

	.sidebar-cta-box .icon-box img {
		width: 50px;
	}

	.sidebar-cta-box .cta-content h3 {
		margin-bottom: 15px;
	}

	.company-growth-content ul li {
		font-size: 16px;
	}

	.our-solution-faq {
		padding: 50px 0;
	}

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

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

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

	.post-entry blockquote {
		background: var(--secondary-color) url('../Greativesoft/images/icon-blockquote.svg') no-repeat 30px 36px;
		background-size: 45px;
		padding: 30px 30px 30px 90px;
		margin-bottom: 20px;
	}

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

	.post-entry h2 {
		font-size: 26px;
		font-weight: 400;
	}

	.post-entry ul li {
		font-size: 16px;
	}

	.post-tag-links {
		padding: 0 0px;
	}

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

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

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

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

	.post-pagination {
		margin-top: 20px;
	}

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

	.project-sidebar {
		margin-top: 30px;
	}

	.portfolio-info-box {
		padding: 20px;
	}

	.portfolio-info-item .icon-box img {
		width: 40px;
	}

	.portfolio-info-content {
		width: calc(100% - 55px);
	}

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

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

	.contact-info .contact-info-box {
		margin-bottom: 30px;
	}

	.contact-info {
		margin-bottom: 30px;
	}

	.contact-form {
		padding: 20px;
	}

	.contact-info-box .contact-info-title {
		margin-bottom: 15px;
	}

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

	.google-map-iframe,
	.google-map-iframe iframe {
		height: 500px;
	}

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

	.faq-sidebar {
		margin-bottom: 30px;
	}

	.faq-category-box {
		padding: 20px;
	}

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

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

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

	.error-page-content-heading {
		margin-bottom: 20px;
	}

	.error-page-content-heading h2 {
		font-size: 38px;
	}
}

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

	.btn-default {
		font-size: 16px;
		padding: 15px 25px;
	}

	.section-title h1,
	.section-title h2 {
		font-size: 30px;
	}

	.topbar-contact-info {
		text-align: center;
	}

	.topbar-contact-info ul li {
		margin-right: 0;
		padding-right: 10px;
	}

	.topbar-social-links {
		display: none;
	}

	.hero-content .section-title.hero-content-title h1 {
		font-size: 30px;
	}

	.hero-content-footer {
		display: block;
	}

	.wide-client {
		margin-left: 0px;
		margin-top: 15px;
	}

	.hero-image {
		padding-bottom: 30px;
	}

	.company-sales {
		transform: translateY(0%);
		padding: 10px 15px 10px 10px;
	}

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

	.company-sales-content {
		width: calc(100% - 55px);
	}

	.company-visit {
		top: 50%;
		transform: translateY(-50%);
		padding: 10px 15px 10px 10px;
	}

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

	.company-visit-content {
		width: calc(100% - 55px);
	}

	.about-image {
		padding-bottom: 30px;
	}

	.company-experience {
		top: auto;
		bottom: 0%;
		right: 0;
		transform: translateY(0%);
		padding: 10px 15px 10px 10px;
	}

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

	.company-experience-content {
		width: calc(100% - 55px);
	}

	.about-content-body ul {
		display: inherit;
	}

	.about-content-body ul li {
		width: 100%;
		font-size: 16px;
		margin-bottom: 15px;
	}

	.about-content-body ul li:last-child {
		margin-bottom: 0;
	}

	.about-content-body ul li:before {
		font-size: 18px;
	}

	.service-body h3 {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.strategy-image::before {
		left: 50%;
		transform: translateX(-50%);
		background-size: contain;
		width: 150px;
		height: 200px;
		z-index: -1;
	}

	.strategy-img-1 {
		margin-right: 20px;
	}

	.strategy-img-2 {
		padding-top: 60px;
	}

	.strategy-item .icon-box {
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}

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

	.strategy-progress-bar {
		width: calc(100% - 70px);
	}

	.skillbar .skill-data {
		margin-bottom: 5px;
	}

	.skillbar .skill-data .skill-title {
		font-size: 18px;
	}

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

	.how-work-content h3 {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.pricing-header {
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.pricing-header h2 {
		font-size: 28px;
	}

	.pricing-body ul li {
		font-size: 16px;
	}

	.our-projects-nav ul li {
		margin-right: 10px;
	}

	.our-projects-nav ul li a {
		padding: 8px 15px;
	}

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

	.testimonial-footer .author-content h3 {
		font-size: 18px;
	}

	.post-item-body h2 {
		font-size: 18px;
		margin-bottom: 15px;
	}

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

	.footer-info-box .icon-box i {
		font-size: 18px;
	}

	.footer-links {
		margin-bottom: 30px;
	}

	.main-footer .col-12:last-child .footer-links {
		margin-bottom: 0;
	}

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

	.footer-copyright {
		margin-top: 30px;
	}

	.footer-copyright-text {
		text-align: center;
		margin-bottom: 15px;
	}

	.footer-copyright .footer-social-links ul {
		text-align: center;
	}

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

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

	.about-img-1 {
		width: 250px;
	}

	.about-img-2 img {
		width: 175px;
	}

	.experience-counter-item {
		padding: 10px 15px 10px 10px;
		width: auto;
		top: 0;
	}

	.experience-counter-item .icon-box img {
		width: 40px;
	}

	.about-us-content-body ul li {
		width: 100%;
	}

	.trusted-companies-title h3 {
		font-size: 16px;
	}

	.why-choose-image::before {
		left: 50%;
		transform: translateX(-50%);
		background-size: contain;
		width: 150px;
		height: 200px;
	}

	.faq-accordion.why-choose-accordion .accordion-header .icon-box {
		top: 0;
	}

	.faq-accordion.why-choose-accordion .accordion-item .accordion-button span {
		font-size: 18px;
	}

	.faq-accordion.why-choose-accordion .accordion-item .accordion-button {
		font-size: 18px;
	}

	.why-choose-img-1 {
		margin-right: 20px;
	}

	.why-choose-img-2 {
		padding-top: 60px;
	}

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

	.about-company-counter .company-counter-box {
		padding: 30px 30px 0;
	}

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

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

	.company-counter-item .company-counter-content h3 {
		font-size: 24px;
	}

	.company-counter-item .company-counter-content p {
		font-size: 16px;
	}

	.faq-img-1 {
		width: 250px;
	}

	.faq-img-2 img {
		width: 175px;
		border-width: 6px;
	}

	.faq-accordion .accordion-item .accordion-button {
		font-size: 18px;
	}

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after {
		font-size: 18px;
	}

	.service-list h3 {
		font-size: 18px;
	}

	.sidebar-cta-box .cta-content h3 {
		font-size: 18px;
	}

	.service-entry h3 {
		font-size: 18px;
	}

	.company-growth-content h3 {
		font-size: 18px;
	}

	.company-growth-img {
		margin-bottom: 30px;
	}

	.post-entry blockquote {
		background: var(--secondary-color) url('../Greativesoft/images/icon-blockquote.svg') no-repeat 20px 20px;
		background-size: 35px;
		padding: 55px 20px 20px 20px;
	}

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

	.tag-links {
		font-size: 18px;
	}

	.project-single-content .project-section-title h3 {
		font-size: 18px;
	}

	.project-values-content ul {
		gap: 10px;
	}

	.project-values-content ul li {
		width: 100%;
		padding-left: 25px;
	}

	.project-values-content ul li:before {
		height: 14px;
		width: 14px;
		top: 6px;
	}

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

	.portfolio-info-box-title h3 {
		font-size: 18px;
	}

	.contact-info-box .contact-info-title h2 {
		font-size: 18px;
	}

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

	.google-map-iframe,
	.google-map-iframe iframe {
		height: 350px;
	}

	.error-page-content-heading h2 {
		font-size: 30px;
	}
}


/* Workflow */
/* Section Wrapper */
.how-it-works-section {
	padding: clamp(60px, 8vw, 100px) 0;
	background: rgb(255, 255, 255);
}

/* Section Header */
.section-header {
	text-align: center;
	max-width: 750px;
	margin: 0 auto 50px;
}

.section-label {
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 1px;
	font-weight: 600;
	color: #666;
	margin-bottom: 10px;
}

.section-title {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 800;
}

.section-title span {
	color: #716d60;
}

.section-description {
	margin-top: 15px;
	color: #555;
	font-size: 17px;
}

/* Cards */
.how-card {
	background: white;
	border-radius: 18px;
	padding: 40px 28px;
	position: relative;
	overflow: hidden;
	transition: all 0.35s ease;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Large Step Number */
.how-number {
	position: absolute;
	top: -10px;
	right: 10px;
	font-size: 80px;
	font-weight: 900;
	opacity: 0.05;
	line-height: 1;
	pointer-events: none;
}

/* Title */
.how-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 12px;
}

/* Text */
.how-text {
	color: #555;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* Hover Effect */
.how-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	border-color: transparent;
}


/* Portfolio */
/* Portfolio Section - Continuous Loop */
:root {
	--brand-dark: #3b393c;
	--brand-light: #f3f2ee;
	--accent-warm: #c9a87c;
	--text-dark: #2a2829;
	--text-muted: #6b696a;
	--overlay-gradient: rgba(59, 57, 60, 0.85);
}

/* Section Base */
.portfolio-section {
	position: relative;
	padding: clamp(50px, 8vw, 0px) 0;
	background: var(--brand-light);
	overflow: hidden;
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 clamp(15px, 3vw, 30px);
}


.section-label {
	display: inline-block;
	font-family: 'Work Sans', sans-serif;
	font-size: clamp(11px, 2vw, 12px);
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--accent-warm);
	padding: 8px 20px;
	background: rgba(201, 168, 124, 0.1);
	border-radius: 50px;
}

/* Portfolio Grid */
.portfolio-grid-wrapper {
	position: relative;
	overflow: hidden;
	margin-bottom: clamp(30px, 5vw, 50px);
}

.portfolio-grid {
	display: flex;
	gap: clamp(12px, 2vw, 20px);
	padding: 0 clamp(8px, 1.5vw, 15px);
	will-change: transform;
}

/* Portfolio Card - Mobile First */
.portfolio-card {
	position: relative;
	min-width: calc(100% - 16px);
	height: clamp(320px, 50vw, 360px);
	flex-shrink: 0;
	overflow: hidden;
	cursor: pointer;
	background: var(--brand-dark);
	border-radius: 15px;
}

@media (min-width: 640px) {
	.portfolio-card {
		min-width: calc(50% - 10px);
		height: clamp(340px, 45vw, 380px);
	}
}

@media (min-width: 1024px) {
	.portfolio-card {
		min-width: calc(33.333% - 14px);
		height: 400px;
	}
}

@media (min-width: 1200px) {
	.portfolio-card {
		height: 420px;
	}
}

/* Image Wrapper */
.portfolio-image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.portfolio-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.15) brightness(0.92);
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-card:hover .portfolio-image {
	transform: scale(1.05);
}

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg,
			transparent 0%,
			rgba(59, 57, 60, 0.4) 60%,
			var(--overlay-gradient) 100%);
}

/* Portfolio Overlay - Always Visible */
.portfolio-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: clamp(20px, 4vw, 28px);
	background: linear-gradient(180deg,
			transparent 0%,
			rgba(59, 57, 60, 0.7) 40%,
			rgba(59, 57, 60, 0.92) 100%);
	z-index: 2;
}

/* Portfolio Number */
.portfolio-number {
	position: absolute;
	top: clamp(12px, 2vw, 16px);
	right: clamp(12px, 2vw, 16px);
	z-index: 2;
	pointer-events: none;
}

.portfolio-number span {
	font-family: var(--default-font);
	font-weight: 700;
	line-height: 1;
	color: rgba(243, 242, 238, 0.1);
	display: block;
	transition: color 0.3s ease;
}

.portfolio-card:hover .portfolio-number span {
	color: rgba(201, 168, 124, 0.15);
}

/* Portfolio Content */
.portfolio-content {
	position: relative;
	z-index: 3;
}

.portfolio-category {
	display: inline-block;
	font-size: clamp(9px, 1.8vw, 10px);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--accent-warm);
	background: rgba(201, 168, 124, 0.15);
	padding: 5px 12px;
	border-radius: 3px;
	margin-bottom: 10px;
}

.portfolio-title {
	font-family: var(--default-font);
	font-weight: 600;
	line-height: 1.2;
	color: var(--brand-light);
	letter-spacing: -0.5px;
	margin-bottom: 12px;
}

.view-project-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: clamp(11px, 2vw, 12px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(243, 242, 238, 0.8);
	text-decoration: none;
	padding: 8px 0;
	transition: all 0.3s ease;
}

.view-project-link:hover {
	color: var(--accent-warm);
}

.view-project-link svg {
	width: 16px;
	height: 16px;
	transition: transform 0.3s ease;
}

.view-project-link:hover svg {
	transform: translateX(4px);
}

/* Carousel Dots */
.carousel-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	padding: clamp(15px, 3vw, 25px) 0;
}

.carousel-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--text-muted);
	opacity: 0.3;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.carousel-dot:hover {
	opacity: 0.5;
	transform: scale(1.2);
}

.carousel-dot.active {
	width: 28px;
	border-radius: 3.5px;
	background: var(--brand-dark);
	opacity: 1;
}

/* No Projects */
.no-projects {
	text-align: center;
	padding: clamp(40px, 8vw, 60px) 20px;
	color: var(--text-muted);
	width: 100%;
}

.no-projects p {
	font-size: 16px;
	font-weight: 500;
}

/* Mobile Specific */
@media (max-width: 639px) {
	.portfolio-overlay {
		padding: 16px 18px;
	}

	.portfolio-title {
		margin-bottom: 8px;
	}
}

/* Touch Device Optimizations */
@media (hover: none) {
	.portfolio-card:active {
		transform: scale(0.98);
	}
}

/* Performance */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* Service */
/* BRAND COLORS & BASE STYLES */
:root {
	--brand-primary: #3b393c;
	/* Dark Grey/Blackish - text and primary elements */
	--brand-secondary: #716d60;
	/* Muted Grey/Brown - accents and hover effects */
	--base-light: #f5f4f0;
	/* Light background */
	--card-light: #ffffff;
	/* White card background */
	--shadow-color: rgba(0, 0, 0, 0.1);
}

/* Apply base styles to this specific section */
.services-bento-section {
	background-color: var(--base-light);
	color: var(--brand-primary);
	font-family: var(--default-font);
	padding-top: 6rem;
	padding-bottom: 6rem;
	border-radius: 5rem 5rem 0 0;
}

/* BENTO GRID CARD STYLE */
.service-card-bento {
	background: #fffefb;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 1.5rem;
	/* Modern radius */
	padding: 2.5rem !important;
	min-height: 200px;
	/* Base height for items */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* Aligns content to the top since the bottom link is removed */
	transition: all 0.3s ease-in-out;
	box-shadow: 0 5px 15px var(--shadow-color);
	position: relative;
	text-decoration: none;
	/* Ensure link decoration is removed */
	color: inherit;
	/* Inherit text color */
}

.service-card-bento.full-width {
	min-height: 120px;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}

.service-card-bento:hover {
	transform: translateY(-5px);
	/* Subtle lift */
	border-color: var(--brand-secondary);
	/* Accent border on hover */
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.text-brand-accent {
	color: var(--brand-secondary) !important;
}


.header-title {
	font-size: 3rem;
	line-height: 1.1;
}

@media (min-width: 992px) {
	.header-title {
		font-size: 4rem;
	}
}

.bento-tag {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 0.75rem;
	padding: 0.25rem 0.75rem;
	border-radius: 0.5rem;
	background-color: rgba(113, 109, 96, 0.1);
	color: var(--brand-secondary);
	font-weight: 600;
	z-index: 10;
}

/* Small link arrow styling - no longer needed but kept for potential reuse */
.link-arrow-icon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.3s ease;
}

/* Responsive adjustments for service cards */
@media (max-width: 991.98px) {
	.service-card-bento {
		min-height: auto !important;
		/* Allow mobile cards to resize naturally */
	}
}


/* Industry CSS */
.company-feature {
	background-color: #f9f9f9;
}

.company-feature .section-title h2 {
	font-size: 2rem;
	font-weight: 700;
	color: #333;
}

.company-feature-item {
	background: #fff;
	border-radius: 12px;
	padding: 2rem 1rem;
	text-align: center;
	transition: all 0.4s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 180px;
	cursor: pointer;
}

.company-feature-item h3 {
	margin-top: 1rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: #323232;
}

.company-feature-item:hover {
	transform: translateY(-10px);
	background: linear-gradient(135deg, #323232, #716d60);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.company-feature-item:hover h3,
.company-feature-item:hover .feature-icon {
	color: #fff;
}

/* Icons */
.feature-icon {
	font-size: 2rem;
	color: #323232;
	transition: color 0.4s ease;
}

/* Responsive spacing */
@media (max-width: 768px) {
	.company-feature-item {
		height: auto;
		padding: 1.5rem 1rem;
	}
}


/* Workfollow */
/* Section Wrapper */
.how-it-works-section {
	padding: clamp(60px, 8vw, 100px) 0;
	background: rgb(255, 255, 255);
}

/* Section Header */
.section-header {
	text-align: center;
	max-width: 750px;
	margin: 0 auto 50px;
}

.section-label {
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: 1px;
	font-weight: 600;
	color: #666;
	margin-bottom: 10px;
}

.section-title {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 800;
}

.section-title span {
	color: #716d60;
}

.section-description {
	margin-top: 15px;
	color: #555;
	font-size: 17px;
}

/* Cards */
.how-card {
	background: white;
	border-radius: 18px;
	padding: 40px 28px;
	position: relative;
	overflow: hidden;
	transition: all 0.35s ease;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Large Step Number */
.how-number {
	position: absolute;
	top: -10px;
	right: 10px;
	font-size: 80px;
	font-weight: 900;
	opacity: 0.05;
	line-height: 1;
	pointer-events: none;
}

/* Title */
.how-title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 12px;
}

/* Text */
.how-text {
	color: #555;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* Hover Effect */
.how-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
	border-color: transparent;
}