/* fonts  */

/* heading - urbanist */
/* body- inter  */

/* ---------------------------------------- layout ------------------------- */
:root {
	--color-primary: #fff;
	--color-secondary: #011321;
	--color-text: #102c24;
	--color-white: #fff;
}
.container {
	max-width: 1448px;
	padding: 0 1.5rem;
	margin: 0 auto;
}

/* ----------------- common style --------------------- */
.btn-common {
	padding: 18px 30px !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 18px;
	line-height: 1em;
	font-weight: 400;
	border-radius: 50px;
	transition: all 0.2s ease;
	text-decoration: none;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}
.icon-btn {
	padding: 10px 24px 10px 10px !important;
}
.btn-primary {
	background-color: var(--color-secondary);
	color: #fff;
}
.btn-primary:hover {
	background-color: #e1e1e1;
	color: #1e1e1e;
}
.btn-secondary {
	background-color: #fff !important;
	color: #1e1e1e !important;
}
.btn-secondary:hover {
	background-color: #ffffffb9 !important;
	color: #1e1e1e !important;
}
.section-title {
	font-size: 32px;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.section-title {
		font-size: 40px;
	}
}
@media (min-width: 1024px) {
	.section-title {
		font-size: 48px;
	}
}
.section-title-wrap {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	max-width: 900px;
	margin: auto;
	text-align: center;
}

.section-subtitle {
	font-size: 16px;
	color: #000;
}
.section-subtitle.on_white {
	color: #1e1e1ed7;
}
/* common-section gap */
.title-gap {
	margin-bottom: 30px;
}

.pricing-section,
.contact-section,
.common-gap {
	padding: 40px 0;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.pricing-section,
	.contact-section,
	.common-gap {
		padding: 60px 0;
		margin: 0 auto;
	}
	.title-gap {
		margin-bottom: 40px;
	}
}
@media (min-width: 1024px) {
	.pricing-section,
	.contact-section,
	.common-gap {
		padding: 80px 0;
		margin: 0 auto;
	}
	.title-gap {
		margin-bottom: 60px;
	}
}

/* ******************************************* HOME PAGE **************************************** */

/* -------------------------------------------- hero ----------------------------------------- */
.hero-read-more-btn {
	color: #011321 !important;
	gap: 4px;
	position: relative;
}
.hero-image-wrap img {
	width: 100%;
	margin: auto;
	max-width: 1024px;
}
.hero-image-wrap {
	margin-bottom: 80px;
}

.btn-primary:hover {
	background-color: #000a11;
	color: #fff !important;
}

.button-icon-wrap {
	background-color: #fff;
	color: #000a11;
	transition: all 0.2s ease !important;
	padding: 8px;
	display: flex;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}
.btn-primary:hover .button-icon-wrap {
	background-color: #d8ff50;
	border-radius: 50px;
	color: #000a11;
	display: flex;
	align-items: center;
	justify-content: center;
}
.button-icon-wrap svg {
	transform: 0.2s ease !important;
}
.btn-primary:hover .button-icon-wrap svg {
	transform: rotate(10deg);
}

.hero-read-more-btn:hover .hero-read-more-btn-effect {
	bottom: 0;
}
.hero-read-more-btn:hover > .arrow {
	transform: translateX(5px);
}
.hero-read-more-btn-effect {
	position: absolute;
	bottom: 5px;
	z-index: -1;
	right: 45px;
	transition: all 0.2s ease;
}
.hero-read-more-btn .arrow {
	transition: all 0.2s ease;
}

.title-pre_tag {
	background-color: #d8ff50;
	backdrop-filter: blur(10px);
	padding: 4px 16px;
	border-radius: 40px;
	border: 1px solid #00000042;
	color: #000;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
}
.title-pre_tag.on_white {
	background-color: #102c242d;
	color: #1e1e1e;
}
.hero {
	background-color: var(--color-primary);
	color: #fff;
	padding: 60px 0px;
}

@media (min-width: 1024px) {
	.hero {
		padding: 160px 0 120px 0px;
	}
}
.hero-main-wrap {
	position: relative;
	gap: 2rem;
}

.hero-main-wrap-content {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	max-width: 880px;
	margin: 0px auto;
	padding: 5rem 0;
	position: relative;
	z-index: 1;
}

@media (min-width: 1024px) {
	.hero-main-wrap-content {
		padding: 0 3rem;
	}
}

.hero-webmaster-img {
	width: 40px;
	position: absolute;
	z-index: 0;
}
.hero-webmaster-img-1 {
	right: 10px;
	top: 0;
}
.hero-webmaster-img-2 {
	right: 10%;
	bottom: -50px;
}

.hero-webmaster-img-5 {
	left: 10%;
	bottom: -100px;
}

@media (min-width: 768px) {
	.hero-webmaster-img {
		width: 48px;
	}
}

@media (min-width: 1024px) {
	.hero-webmaster-img {
		width: auto;
	}
	.hero-webmaster-img-1 {
		right: 179px;
		top: 0;
	}
	.hero-webmaster-img-2 {
		right: 60px;
		bottom: -10%;
	}

	.hero-webmaster-img-5 {
		left: 60px;
		top: 50%;
	}
}
.hero-main-title-wrap {
	margin-bottom: 46px;
}

.hero-main-title-wrap p {
	max-width: 520px;
	line-height: 1.5;
	margin: auto !important;
	font-weight: 500;
	font-size: 20px;
	text-align: center;
}
.hero-main-title-wrap h1 {
	font-size: 36px;
	color: #000;
	line-height: 1.3;
	margin-bottom: 26px;
}

@media (min-width: 768px) {
	.hero-main-title-wrap h1 {
		font-size: 52px;
	}
}
@media (min-width: 1024px) {
	.hero-main-title-wrap h1 {
		font-size: 64px;
	}
}
.section-button-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.brandSlider {
	padding: 20px 0;
	overflow: hidden;
}

.brandSlider .swiper-slide {
	width: auto;
	display: flex;
	align-items: center;
	padding: 0 40px;
}
.brandSlider .swiper-wrapper {
	transition-timing-function: linear !important;
}
.brand-logo {
	height: 40px;
	width: auto;
	opacity: 0.7;
	transition: opacity 0.3s;
	filter: grayscale();
}

.brand-logo:hover {
	opacity: 1;
}

/* ---------------------------------- process sectino -------------------------------------- */
.process-section {
	background-color: #ffbc2c1f;
}
.process-section .title-pre_tag,
.process-section .section-title,
.process-section .section-subtitle {
	color: #000a11;
}
.process-grid {
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.process-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}
@media (min-width: 1024px) {
	.process-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 3rem;
	}
}

.process-grid-card {
	border-radius: 16px;
	color: #000a11;
}
.process-grid-card svg {
	width: 60px;
	height: 60px;
	margin-bottom: 3.5rem;
}
.process-card-image-wrap {
	position: relative;
}
.process-card-image {
	border-radius: 16px;
}
.process-number {
	color: #04263f;
	margin-bottom: 0.5rem;
	position: absolute;
	height: 60px;
	width: 60px;
	font-size: 28px;
	font-weight: 700;
	top: 20px;
	padding: 1rem;
	background: #fff;
	border: 2px solid #04263f;
	border-radius: 50px;
	right: 20px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	box-shadow: 12px 1px #000a11;
}

h3.process-title {
	font-size: 32px;
	color: #000a11;
	margin-bottom: 0.5rem;
}

p.process-subtitle {
	margin: 0;
}
@media (min-width: 768px) {
	.process-grid-card:nth-child(2),
	.process-grid-card:nth-child(4) {
		margin-top: 60px;
	}
}
/* ----------------------------------- solution section ----------------------------------- */
.solution-section {
	padding: 40px 0;
}
@media (min-width: 768px) {
	.solution-section {
		padding: 60px 0;
	}
}
@media (min-width: 1024px) {
	.solution-section {
		padding: 80px 0;
	}
}

.solution-main-grid img {
	width: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.solutions-grid {
	display: grid;
	gap: 2rem;
	margin-bottom: 2rem;
}
.solution-page .solutions-grid {
	gap: 1rem;
}
.solution > svg:first-of-type {
	width: 48px;
	height: 48px;
	margin-top: 10px;
}

@media (min-width: 768px) {
	.solutions-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem;
		margin-bottom: 3rem;
	}
}
.solution h3 {
	font-size: 28px;
}
.solution p {
	margin: 0.875rem 0 1rem;
}
.solution a {
	display: flex;
	gap: 0.2rem;
	align-items: center;
	color: #1e1e1e;
	text-decoration: none;
	transition: 0.2s ease;
}
.solution a svg {
	transition: 0.2s ease;
}
.solution a:hover svg {
	transform: translateX(5px);
}

/* -------------------------------- work section ---------------------------------------------- */
.work-cards-wrapper {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}
@media (min-width: 1240px) {
	.work-cards-wrapper {
		gap: 10rem;
	}
}
.work-card {
	display: grid;
	padding: 28px;
	border: 1px solid #76717124;
	gap: 30px;
	border-radius: 32px;
	gap: 2rem 2.5rem;
}

.work-card img {
	width: 100%;
}
.work-card-author-info img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
}
.work-card-category {
	font-size: 18px;
	font-style: italic;
	font-weight: 500;
}
h3.work-card-title {
	font-size: 24px;
	line-height: 1.2em;
}
.work-meta-grid {
	display: flex;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.work-timeline span {
	font-size: 18px !important;
	color: #0000008f;
}

.work-timeline h4 {
	font-size: 24px;
}

.work-card-author-info-left {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.work-card-author-info-left h5 {
	font-size: 24px;
}

.work-card-author-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.work-card-author-wrap svg {
	width: 24px;
	height: 24px;
}

.work-card-author-wrap {
	padding: 1rem;
	border: 1px solid #0000001f;
	border-radius: 24px;
	display: block;
	text-decoration: none;
	color: #000a11;
}
.work-card-author-wrap:hover {
	color: #000a11;
}
.work-card-image {
	width: 100%;
	height: 100%;
}
.work-card-image img {
	border-radius: 24px !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 768px) {
	.work-timeline h4 {
		font-size: 28px;
	}
	.work-meta-grid {
		gap: 5rem;
	}
	.work-card-category {
		font-size: 22px;
	}
	h3.work-card-title {
		font-size: 42px;
	}
	.work-meta-grid {
		margin-bottom: 3rem;
	}
}

@media (min-width: 1024px) {
	.work-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 36px;
		border-radius: 36px;
	}
}

@media (min-width: 1240px) {
	.work-card-wrap {
		border: 2px dashed #d6d6d6;
		border-radius: 76px;
	}
	.work-card.work-card-archive {
		background: #46e696;
		padding: 1.5rem;
		text-align: left;
		gap: 1.5rem;
		transform: translateX(30px) rotate(3deg);
		transition: all 0.2s ease;
	}

	.work-card-wrap:nth-child(even) .work-card.work-card-archive {
		transform: translateX(-30px) rotate(-3deg);
	}

	.work-card-wrap:hover .work-card.work-card-archive {
		transform: translateX(0px) rotate(0deg);
	}

	.work-card-wrap:hover {
		border-color: transparent !important;
	}
}
/* swiper style  */

.work-slider-nav-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-top: 50px;
	position: relative;
	bottom: 0;
}
@media (min-width: 768px) {
	.work-slider-nav-wrapper {
		margin-top: 70px;
	}
}
.work-prev,
.work-next,
.home-review-prev,
.home-review-next {
	position: static !important;
	width: 60px !important;
	height: 60px !important;
	background-color: #000a11;
	border: 1px solid #e0e0e0;
	border-radius: 50px !important;
	color: #333 !important;
	transition: all 0.3s ease;
	cursor: pointer;
}

.work-prev::after,
.work-next::after,
.home-review-prev::after,
.home-review-next::after {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	padding: 12px;
	border-radius: 50px;
	font-size: 14px !important;
	font-weight: bold;
	height: 34px;
	width: 34px;
	transition: all 0.2s ease;
}
.work-prev:hover:after,
.work-next:hover:after,
.home-review-prev:hover:after,
.home-review-next:hover:after {
	background-color: #d8ff50;
	color: #000;
}
.work-prev:hover,
.work-next:hover,
.home-review-prev:hover,
.home-review-next:hover {
	background-color: #000;
	color: #fff !important;
	border-color: #000;
	transform: translateY(-3px);
}

.swiper-button-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* --------------------------- review section -------------------------- */
.review-section-title-wrap {
	display: flex;
	justify-content: space-between;
	align-items: end;
}
.review-section-title {
	max-width: 600px;
}
.swiper.homeReviewSlider {
	margin: 0 !important;
}
.review-section-container {
	position: relative;
	display: flex;
	flex-direction: column;
}

.review-nav-wrap {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 24px;
	z-index: 10;
}

.reviewed-project-link {
	margin-top: 12px;
	font-size: 18px;
	font-weight: 600;
}
/* =========================
   Navigation Position
========================= */

/* Mobile: bottom center */
.review-nav-wrap {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
	margin-bottom: 0;
	order: 3;
}

@media (min-width: 768px) {
	.review-section-container {
		position: relative;
	}

	.review-nav-wrap {
		top: 0;
		right: 0;
		margin: 0;
		justify-content: flex-end;
	}
}
.review-nav-wrap.for-tablet {
	display: none;
}
.review-nav-wrap.for-mobile {
	display: flex;
}
.review-section-title {
	text-align: center;
}
@media (min-width: 768px) {
	.review-section-title {
		text-align: left;
	}
	.review-nav-wrap.for-tablet {
		display: flex;
	}
	.review-nav-wrap.for-mobile {
		display: none;
	}
}

/* ==========================================================================
   Review Card Design
   ========================================================================== */

.review-card {
	background: #fff;
	display: grid;
	padding: 1.5rem;
	border-radius: 36px;
	gap: 2rem;
	align-items: stretch;
	overflow: hidden;
}

/* Left Side: Content */
.review-content-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	order: 2;
}

.review-brand-logo {
	margin-bottom: 1rem;
}

.review-brand-logo img {
	max-height: 40px;
	width: auto;
}

p.review-text {
	font-size: 24px;
	margin-bottom: 1rem;
	line-height: 1.4;
	letter-spacing: -0.4px;
	color: #1a1a1a;
	font-weight: 500;
}
.author-info {
	max-width: 300px;
}
.author-info .author-name {
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #000;
}

.author-info .author-designation {
	font-size: 18px;
	font-weight: 400;
	color: #a09898e5;
}

/* Right Side: Image/Video */
.review-video-column {
	position: relative;
	border-radius: 24px;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #f0f0f0;
	order: 1;
}

.review-video-column img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
@media (min-width: 1024px) {
	/* .review-video-column img {
    max-height: 550px;
  } */
}

.review-card:hover .review-video-column img {
	transform: scale(1.05);
}

/* Video Play Icon */
.review-video-column .video-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 10, 17, 0.8) !important;
	color: #fff !important;
	fill: #fff;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	cursor: pointer;
}

.review-video-column .video-icon svg {
	width: 60px;
	height: 60px;
}
.review-button-wrap {
	display: flex;
	justify-content: center;
	padding-top: 2rem;
}
/* ==========================================================================
   Desktop Responsive
   ========================================================================== */

@media (min-width: 768px) {
	.review-brand-logo {
		margin-bottom: 2rem;
	}
	.review-card {
		grid-template-columns: 7fr 5fr;
		padding: 2rem;
		gap: 2rem;
	}

	p.review-text {
		margin-bottom: 3rem;
		font-size: 32px;
	}

	.review-section-container {
		flex-direction: column;
	}

	.review-nav-wrap {
		justify-content: center;
		margin-top: 24px;
		margin-bottom: 0;
	}
	.review-content-column {
		order: 1;
	}
	.review-video-column {
		order: 2;
	}
}

/* review pop up  */
.video-popup-link {
	display: block;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.video-popup-link::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	transition: 0.3s;
	z-index: 1;
}

.video-popup-link:hover::before {
	background: rgba(0, 0, 0, 0.3);
}

.video-icon {
	z-index: 2;
}

/* ------------------ review page ------------------ */
.review-section.review-page,
.works-section {
	padding-top: 140px;
}
@media (min-width: 1240px) {
	.review-section.review-page,
	.works-section {
		padding-top: 120px;
	}
}

/* single review page  */
.review-card.single-review-page {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* .works-page-grid */
.work-details-wrapper {
	padding: 80px 0;
}
.review-page-grid,
.work-details-grid {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.work-details-wrapper {
		padding-top: 120px 0;
	}
	.review-page-grid,
	.work-details-grid {
		gap: 2rem;
		grid-template-columns: 3.5fr 8.5fr;
	}
}
@media (min-width: 1240px) {
	.review-page-grid,
	.work-details-grid {
		gap: 5rem;
	}
}

.review-section .review-card-wrap {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
a.video-popup-link {
	height: 100%;
}
/* ---------------------------------- comparison table section-------------------------------------------- */
.owl-comparison-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.owl-comparison-section {
	margin: 0 auto;
	padding: 2rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);

	/* important */
	width: max-content;
}

/* GRID */
.comparison-header,
.comparison-row {
	display: grid;
	grid-template-columns: 320px repeat(5, 180px);
	gap: 1px;
}

/* PLATFORM COLUMN */
.col-platform {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 2rem;
}

/* FEATURE COLUMN */
.col-feature {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
}

/* ICON */
.platform-icon {
	width: 50px;
	height: 50px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* TEXT */
.platform-info h3 {
	margin: 0 0 4px;
	font-size: 1.25rem;
	font-weight: 700;
}

.platform-info p {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.8;
}

/* CHECK CROSS */
.col-feature.check {
	color: #0a8f3d;
}

.col-feature.cross {
	color: #ff0000;
}

/* ROW */
.comparison-row {
	background: #fff;
	transition: 0.3s;
}

/* HIGHLIGHT */
.comparison-row.owl-highlight {
	border: 2px solid #d8ff50;
	border-radius: 20px;
	margin: 15px 0;
	background: #d9ff5025;
	box-shadow: 0 0 15px #d9ff5067;
}

/* MOBILE */
@media (max-width: 768px) {
	.owl-comparison-section {
		padding: 1rem;
	}

	.platform-icon {
		width: 45px;
		height: 45px;
		font-size: 1.2rem;
	}

	.platform-info h3 {
		font-size: 1.1rem;
	}

	.platform-info p {
		font-size: 0.85rem;
	}
}
/* -------------------problems section ------------------------------ */
.problem-section {
	padding: 40px 0;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.problem-section {
		padding: 60px 0;
		margin: 0 auto;
	}
}
@media (min-width: 1024px) {
	.problem-section {
		padding: 80px 0;
		margin: 0 auto;
	}
}
.problem-section-title,
.solutions-page-title,
.blog-section-title,
.faq-section-title,
.reviews-section-title,
.pricing-section-title,
.contact-section-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 2rem;
	max-width: 800px;
	margin: 0px auto 3rem;
}
@media (min-width: 768px) {
	.problem-section-title {
		margin-bottom: 3rem;
	}
}

.problem-items-wrap {
	display: grid;
	gap: 2rem;
}
@media (min-width: 768px) {
	.problem-items-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}
@media (min-width: 1024px) {
	.problem-items-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2rem;
	}
}

.problem-item {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}
.problem-item img {
	transition: 0.2s ease;
}
.problem-item:hover img {
	scale: 1.1;
}
.problem-item img {
	height: 400px;
	width: 100%;
	object-fit: cover;
}
@media (min-width: 768px) {
	.problem-item img {
		height: 450px;
	}
}
@media (min-width: 1024px) {
	.problem-item img {
		height: 550px;
	}
}

.problem-item .problem-item-short-text {
	position: absolute;
	bottom: 0;
	color: #fff;
	width: 100%;
	padding: 20px;
	height: 100%;
	display: flex;
	justify-content: end;
	flex-direction: column;
	background-image: linear-gradient(180deg, transparent, #000000db);
}
.problem-item .problem-item-short-text h3 {
	color: #fff;
	font-size: 28px;
}
.problem-item .problem-item-short-text a {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: #fff;
	text-decoration: none !important;
}
.problem-item .problem-item-short-text a:hover {
	color: var(--color-secondary);
}

/* -------------------- faq section ----------------------------------- */
.faq-section {
	max-width: 900px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.faq-section-title {
		margin-bottom: 3rem;
	}
}
@media (min-width: 1024px) {
	.faq-section-title {
		margin-bottom: 3rem;
	}
}
.faq-section-title {
	margin-bottom: 2rem;
}

.faq-item {
	border-bottom: 1px solid #e5e7eb;
}
.faq-items-wrap {
	margin-bottom: 3rem;
}
.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	padding: 16px 0;
	font-weight: 600;
}
.faq-question.active {
	color: #3655e1;
}
.faq-question .arrow {
	transition: transform 0.3s ease;
}

.faq-question.active .arrow {
	transform: rotate(180deg);
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.faq-answer.show {
	max-height: 300px; /* enough for content */
}

.faq-answer p {
	margin: 0;
	padding: 0 0 16px;
	color: #4b5563;
}

/* --------------------------- blog section ------------------ */
.blog-section {
	padding: 40px 0;
}
@media (min-width: 768px) {
	.blog-section {
		padding: 60px 0;
	}
}
@media (min-width: 1024px) {
	.blog-section {
		padding: 80px 0;
	}
}

.custom-blog-grid {
	display: grid;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.custom-blog-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}
@media (min-width: 1024px) {
	.custom-blog-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}
.custom-blog-grid .custom-blog-card {
	background-color: #fff;
	overflow: hidden;
	border-radius: 12px;
}
.custom-blog-grid .custom-blog-card .custom-blog-thumbnail img {
	width: 100%;
}
.custom-blog-grid .custom-blog-card .blog-content {
	padding: 1.5rem;
}
.custom-blog-grid .custom-blog-card h2.blog-title {
	margin-bottom: 1rem;
}

.custom-blog-grid .custom-blog-card .blog-excerpt {
	margin-bottom: 1.5rem;
}
a.blog-content-read-more {
	display: flex;
	gap: 0.2rem;
	align-items: center;
	color: #1e1e1e;
	text-decoration: none;
	transition: 0.2s ease;
}
a.blog-content-read-more svg {
	transition: 0.2s ease;
}
a.blog-content-read-more:hover svg {
	transform: translateX(5px);
}

/* ----------------------------- archive and single page page's style ------------------- */
.custom-blog-header {
	display: none;
}
.blog .custom-blog-header {
	display: flex;
	padding-top: 50px !important;
	justify-content: center;
	text-align: center;
}
@media (min-width: 768px) {
	.blog .custom-blog-header {
		padding-top: 60px !important;
	}
}
@media (min-width: 1024px) {
	.blog .custom-blog-header {
		padding-top: 80px !important;
	}
}
.blog ul#archive-container {
	gap: 1.5rem;
}
#archive-container .entry-list-item {
	border-radius: 12px !important;
	overflow: hidden !important;
}
.single-post .content-area {
	margin-top: 8rem;
}
@media (min-width: 1024px) {
	.single-post .content-area {
		margin-top: 10rem;
	}
}

.single-post img {
	border-radius: 12px;
}
a.post-more-link {
	font-weight: 600 !important;
	text-transform: none !important;
	font-size: 100% !important;
}

/* archive page single blog  */

article.latest-post-card {
	border: 1px solid #ffffff57;
	background: #fff;
	display: grid;
	align-items: stretch;
	border-radius: 40px;
	gap: 20px;
}
.latest-post-card-section {
	padding-top: 50px;
}
@media (min-width: 768px) {
	.latest-post-card-section {
		padding-top: 60px;
	}
}
@media (min-width: 1024px) {
	article.latest-post-card {
		grid-template-columns: 5.75fr 6.25fr;
	}
}
.latest-post-card img.attachment-medium.size-medium.wp-post-image {
	width: 100%;
	height: 100%;
	border-radius: 30px;
	object-fit: cover;
	min-height: 250px;
}

.latest-post-card .latest-post-tag {
	margin-bottom: 0.5em;
	letter-spacing: 0.05em;
	font-size: 18px;
	text-transform: uppercase;
}

.latest-post-card .read-more-btn {
	display: flex;
	align-items: center;
	gap: 8px;
}
.latest-post-card .read-more-btn {
	text-decoration: none !important;
	color: #042614;
	font-weight: 500;
}
.latest-post-card .read-more-btn svg {
	height: 18px;
	width: 18px;
}

.latest-post-card .post-excerpt {
	margin-bottom: 24px;
}
.latest-post-card .post-title {
	line-height: 1.2em;
	font-weight: 600;
}
.latest-post-card .post-meta {
	display: flex;

	gap: 10px;
	margin: 0 !important;
	flex-direction: column;
}
@media (min-width: 768px) {
	.latest-post-card .post-meta {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
}
.latest-post-card .post-meta span {
	display: flex;
	align-items: center;
	gap: 4px;
}
.latest-post-card .latest-post-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
	padding: 8px;
}
@media (min-width: 768px) {
	.latest-post-card .latest-post-content {
		gap: 20px;
	}
	.latest-post-card .post-title {
		font-size: 40px;
	}

	.latest-post-card .post-excerpt {
		margin: 0;
		margin-bottom: 35px;
	}
}
section#categories-2 ul {
	display: flex;
	flex-wrap: wrap;
}

section#categories-2 ul li a {
	/* background: #ff53ff; */
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid #b9b6b6;
	text-decoration: none;
	font-size: 14px;
}
/* ---------------------------- contact section --------------------------- */
.contact-grid {
	display: grid;
}
@media (min-width: 768px) {
	.contact-grid {
		display: grid;
		gap: 7rem;
	}
}
@media (min-width: 1024px) {
	.contact-grid {
		grid-template-columns: 4fr 8fr;
		gap: 4rem;
	}
}
@media (min-width: 1280px) {
	.contact-grid {
		gap: 8rem;
	}
}

.contact-grid .contact-section-title {
	text-align: left;
	display: flex;
	align-items: start !important;
	margin-bottom: 1.5rem;
}
.contact-infos {
	padding: 1rem;
	background: #efefef;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	border-radius: 1rem;
}
.contact-infos h2 {
	margin-bottom: 1rem;
	font-size: 36px !important;
}
@media (min-width: 768px) {
	.contact-infos h2 {
		margin-bottom: 2rem;
	}
}

.contact-infos .contact-info {
	background-color: #fff;
	padding: 1.75rem 1.5rem;
	display: flex;
	gap: 0.75rem;
	border-radius: 12px;
}

.contact-infos .contact-info .contact-info-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.contact-infos .contact-info svg {
	color: #00ad1d;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}
.contact-infos .contact-info h3 {
	line-height: 1em;
	margin-bottom: 0.25rem;
	font-size: 22px;
}
.contact-infos .contact-info a {
	text-decoration: none !important;
	color: #1c1c1cea;
	line-height: 1em;
}

/* contact form wrap  */
.owl-contact-form {
	background: #fff;
	padding: 1.5rem;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	font-family: "Inter" !important;
	justify-content: center;
}

@media (min-width: 768px) {
	.owl-contact-form {
		padding: 2rem;
	}
}

.owl-contact-form .ff-default .ff-el-input--label label {
	font-weight: 600 !important;
	margin-bottom: 4px !important;
	font-size: 20px !important;
}
.owl-contact-form .ff-default .ff-el-form-control {
	padding: 12px 24px !important;
}
@media (min-width: 1024px) {
	.fluentform .ff-el-group {
		margin-bottom: 36px;
	}
}

.owl-contact-form .ff-el-input--content {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem !important;
}

@media (min-width: 768px) {
	.owl-contact-form .ff-el-input--content {
		gap: 0.75rem !important;
	}
}

.owl-contact-form
	.fluentform
	.ff-el-group.ff_list_buttons
	.ff-el-form-check
	span {
	font-size: 18px;
	padding: 12px 24px !important;
	border-radius: 4px !important;
	line-height: 1.6em !important;
	border: 1px solid #dadbdd;
	box-shadow: none;
	margin: 0 !important;
}
.owl-contact-form .fluentform .ff-el-group.ff_list_buttons .ff-el-form-check {
	margin: 0;
}
.owl-contact-form
	.fluentform
	.ff-el-group.ff_list_buttons
	.ff-el-form-check.ff_item_selected
	label
	> span,
.owl-contact-form
	.fluentform
	.ff-el-group.ff_list_buttons
	.ff-el-form-check
	label
	> span:hover {
	background-color: #000;
	color: #fff;
	border-color: #000 !important;
	border-radius: 4px;
}
.owl-contact-form .ff-default .ff-btn-lg {
	margin-top: 3rem;
	border-radius: 50px !important;
}

@media (max-width: 1023px) {
	.owl-contact-form .ff-default .ff-btn-lg {
		margin-top: 1.5rem;
	}

	.contact-sidebar {
		order: 2 !important;
	}
	.owl-contact-form {
		order: 1;
	}
}

/* ******************************************** solution page ************************************** */
.solution {
	display: flex;
	align-items: start;
	gap: 1rem;
}
.solution svg {
	flex-shrink: 0;
}
@media (min-width: 1024px) {
	.solution-grid-reverse .solution-content-wrap:first-child {
		order: 2; /* later → right */
	}

	.solution-grid-reverse img {
		order: 1; /* earlier → left */
	}
}
/* others style of solution section of solution page is similar to solution section of home page  */

.solution-tag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.solution-tag svg {
	width: 24px;
	height: 24px;
	color: var(--color-primary);
}

.solution-tag-text {
	font-size: 24px;
	font-weight: 600;
	color: var(--color-primary);
}
h1.solution-section-title {
	font-size: 36px;
	line-height: 1.2em;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	h1.solution-section-title {
		font-size: 48px;
	}
	.solution-tag {
		margin-bottom: 1rem;
	}
}
@media (min-width: 1024px) {
	h1.solution-section-title {
		font-size: 48px;
	}
	.solution-tag svg {
		width: 28px;
		height: 28px;
	}
	.solution-tag-text {
		font-size: 28px;
	}
}

.solution-page .solution-feature-title svg {
	width: 22px;
	height: 22px;
}
.solution-page .solution-feature-title h3 {
	font-size: 22px;
}

.solution-page .solution-feature-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.solution-page .btn-primary {
	margin-top: 1rem;
	display: inline-flex;
}
/* ---------------------- footer cta ------------------ */

/* cta  */

.cta-grid {
	display: grid;
	gap: 1rem;
}
@media (min-width: 768px) {
	.cta-grid {
		grid-template-columns: 8fr 4fr;
		gap: 1.5rem;
	}
}

.cta-grid-left {
	background-image: url(../images/cta-image.webp);
	background-size: cover;
	background-position: center;
	padding: 1.5rem;
	border-radius: 24px;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.cta-expert {
	background: #46e696;
	border-radius: 24px;
	padding: 1.5rem;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	transition: all 0.2s ease;
}
.cta-expert-wrapper:hover {
	border: 1px solid #46e696;
}

@media (min-width: 768px) {
	.cta-grid-left,
	.cta-expert {
		padding: 2rem;
	}
}
@media (min-width: 1024px) {
	.cta-grid-left,
	.cta-expert {
		padding: 2.5rem;
	}
}
.cta-expert-wrapper {
	text-decoration: none !important;
}
@media (min-width: 1240px) {
	.cta-expert-wrapper {
		border: 1px dashed #000a1163;
		border-radius: 24px;
	}
	.cta-expert {
		transform: translateX(25px) rotate(3deg);
	}
	.cta-expert-wrapper:hover {
		border: 1px solid #46e696;
	}
	.cta-expert-wrapper:hover .cta-expert {
		transform: translateX(0px) rotate(0deg);
	}
}
.cta-grid-left-content {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	position: relative;
	z-index: 1;
	max-width: 350px;
}
.cta-title-tag {
	font-weight: 600;
	color: #46e696;
	text-align: left;
}
.cta-grid-left-content h2 {
	font-size: 32px;
	color: #fff;
	text-align: left;
	margin-bottom: 28px;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.cta-grid-left-content h2 {
		font-size: 44px;
	}
}
.cta-grid-left::after {
	content: "";
	background-image: linear-gradient(
		90deg,
		#102c24 0%,
		#102c24c9 80%,
		rgba(255, 255, 255, 0) 100%
	);
	width: 100%;
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
}
.cta-grid .btn-common {
	color: #fff !important;
}
.cta-expert img {
	width: 90px;
}

/* site footer  */
.footer-widget-area-inner img {
	flex-shrink: 0;
	object-fit: contain;
}

.cta-expert .cta-expert-title {
	color: #1e1e1e;
	font-size: 20px;
	margin-top: 0px;
	margin-bottom: 2.5rem;
	font-weight: 600;
}
@media (min-width: 1024px) {
	.cta-expert-title {
		font-size: 24px;
	}
}

.footer-description {
	color: #fff;
}

ul.wpsn-footer-address {
	padding-left: 0;
	margin: 0;
	color: rgba(255, 255, 255, 0.6) !important;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

ul.wpsn-footer-address li {
	display: flex;
	gap: 0.5rem;
}

ul.wpsn-footer-address li svg {
	flex-shrink: 0;
}

ul.wpsn-footer-address .wpsn-footer-title {
	color: #ffffff9e;
	font-size: 16px;
}

.widget-area ul {
	padding: 0;
}
.wpsn-footer-email {
	display: block;
}

@media (min-width: 1024px) {
	.site-footer-middle-section-5 {
		margin-left: -2rem;
	}
	.site-bottom-footer-wrap .site-footer-bottom-section-1 {
		order: 0 !important;
	}
}

.widget_nav_menu a {
	padding: 0.3em 0 !important;
}
.footer-social-icons {
	margin-bottom: 0;
	margin-top: 1rem;
}

.archive .entry-header {
	display: none;
}
/* Injects text/icon before the category title */
.category .page-title::before {
	content: "Archive: ";
	color: #333;
	font-weight: 300;
	display: inline-block;
	margin-right: 10px;
}

/* Wraps the title in a custom background "marker" style */
/* ------------------------ sidebar style ------------------------------ */
/* Sidebar Layout */

@media (min-width: 1024px) {
	.owl-custom-sidebar {
		position: sticky;
		top: 100px;
	}
	.owl-custom-sidebar.contact-page-sidebar {
		position: static !important;
	}
}
.owl-custom-sidebar h3.sidebar-title,
.widget.widget_nav_menu .widget-title {
	font-size: 42px;
	margin-bottom: 1.5rem;
	line-height: 1.2em;
	color: #fff !important;
}

.owl-custom-sidebar {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Menu Wrap */
.custom-sidebar-menu-wrap,
.sidebar-inner-wrap .widget.widget_nav_menu {
	padding: 2rem;
	background: #a4ad66;
	border-radius: 16px;
	counter-reset: menu-counter; /* নম্বর শুরু করার জন্য */
}

.custom-sidebar-menu-wrap ul,
.sidebar-inner-wrap .widget.widget_nav_menu .menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Menu Item Link */
.custom-sidebar-menu-wrap ul li,
.sidebar-inner-wrap .widget.widget_nav_menu .menu .menu-item {
	counter-increment: menu-counter;
}

.custom-sidebar-menu-wrap ul a,
.sidebar-inner-wrap .widget.widget_nav_menu .menu .menu-item a {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: #000a14;
	padding: 12px 20px !important;
	background-color: #fff;
	border-radius: 12px;
	transition: all 0.3s ease;
	font-weight: 500;
}

.custom-sidebar-menu-wrap ul a::before,
.sidebar-inner-wrap .widget.widget_nav_menu .menu .menu-item a::before {
	content: counter(menu-counter, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #a4ad66;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	border-radius: 50%;
	margin-right: 12px;
	flex-shrink: 0;
}

.custom-sidebar-menu-wrap ul a:hover,
.sidebar-inner-wrap .widget.widget_nav_menu .menu .menu-item a:hover {
	background-color: #011321;
	color: #fff;
	transform: translateX(5px);
}

.sidebar-inner-wrap .custom-sidebar-menu-wrap ul a:hover::before,
.widget.widget_nav_menu .menu .menu-item a:hover::before {
	background: #fff;
	color: #011321;
}

/* CTA Box Styling */
.sidebar-cta-box {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	text-align: center;
	border: 1px solid #eee;
}

.cta-content h3 {
	font-size: 20px;
	margin-bottom: 0.5rem;
	color: #011321;
}

.cta-content p {
	font-size: 14px;
	color: #666;
	margin-bottom: 1.5rem;
}

/* WhatsApp Button with Icon */
.whatsapp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #25d366;
	color: #fff !important;
	padding: 10px 20px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	gap: 8px;
	transition: 0.3s;
}

.whatsapp-btn:hover {
	background-color: #1ebe57;
	transform: scale(1.05);
}

.whatsapp-btn svg {
	width: 20px;
	height: 20px;
}

/* service page style  */

/* ******************************************** service page ************************************** */
/* ----------------------------------- service section ----------------------------------- */
.service-section {
	padding: 40px 0;
}
.service-page-title {
	padding-top: 80px;
}
@media (min-width: 768px) {
	.service-page-title {
		padding-top: 100px;
	}
	.service-section {
		padding: 60px 0;
	}
}
@media (min-width: 1024px) {
	.service-section {
		padding: 80px 0;
	}
}
.service-main-grid {
	display: grid;
	gap: 3rem;
	align-items: stretch;
}

@media (min-width: 1024px) {
	.service-main-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.service-main-grid img {
	width: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.services-grid {
	display: grid;
	gap: 2rem;
}
.service-page .services-grid {
	gap: 1rem;
}
.service > svg:first-of-type {
	width: 36px;
	height: 36px;
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.services-grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem 1rem;
	}
	.service-page .services-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
}
.service h3 {
	font-size: 28px;
}
.service p {
	margin: 0.875rem 0 1rem;
}
.service a {
	display: flex;
	gap: 0.2rem;
	align-items: center;
	color: #1e1e1e;
	text-decoration: none;
	transition: 0.2s ease;
}
.service a svg {
	transition: 0.2s ease;
}
.service a:hover svg {
	transform: translateX(5px);
}
@media (min-width: 1024px) {
	.service-grid-reverse .service-content-wrap:first-child {
		order: 2; /* later → right */
	}

	.service-grid-reverse img {
		order: 1; /* earlier → left */
	}
}
/* others style of service section of service page is similar to service section of home page  */

.service-tag {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.service-tag svg {
	width: 24px;
	height: 24px;
	color: #10c068;
}

.service-tag-text {
	font-size: 24px;
	font-weight: 600;
	color: #10c068;
}
h1.service-section-title {
	font-size: 36px;
	line-height: 1.2em;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	h1.service-section-title {
		font-size: 48px;
	}
	.service-tag {
		margin-bottom: 1rem;
	}
}
@media (min-width: 1024px) {
	h1.service-section-title {
		font-size: 48px;
	}
	.service-tag svg {
		width: 28px;
		height: 28px;
	}
	.service-tag-text {
		font-size: 28px;
	}
}

.service-page .service-feature-title svg {
	width: 22px;
	height: 22px;
}
.service-page .service-feature-title h3 {
	font-size: 22px;
}

.service-page .service-feature-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.service-page .btn-primary {
	margin-top: 1rem;
	display: inline-flex;
}