* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	text-decoration: none !important;
	list-style: none;
	outline: none;
	font: normal 16px/24px LexendRegular, "Sans-serif";
	resize: none !important;
}

html {
	scroll-behavior: smooth;
	font-size: 100%;
}

body {
	overflow-x: hidden;
	counter-reset: service-section;
}

a {
	display: inline-block;
	color: var(--tertiary-color) !important;
}

section {
	scroll-snap-align: start;
	scroll-padding-top: 250px;
	scroll-margin-top: 155px;
}

::picker(select) {
	border: none;
	margin: 6px 0;
	overflow: hidden;
	border-radius: 6px;
	appearance: base-select;
	border: 1px solid #dddddd;
	box-shadow: 0 0 24px 0 rgba(150, 180, 170, 0.3);
}

input,
textarea,
select {
	width: 100%;
	border-color: var(--border-color) !important;
	transition: 300ms ease-in;

	&:focus {
		border-color: var(--primary-color) !important;
	}
}

input[type="checkbox"],
input[type="radio"] {
	scale: 1.2;
}

textarea::-webkit-scrollbar {
	display: none;
}

textarea {
	-ms-overflow-style: none;
	scrollbar-width: none;
	margin-bottom: -5px;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;

	&:invalid {
		color: var(--gray-color);
	}
}

select::-ms-expand {
	display: none;
}

select {
	appearance: base-select;

	&::picker-icon {
		display: none;
	}

	&:open::picker-icon {
		display: none;
	}

	option {
		padding: 10px;
		color: var(--gray-color);
		transition: 0.4s;

		&:not(:last-child) {
			border-bottom: 1px solid #dddddd;
		}

		&::checkmark {
			display: none;
		}

		&:hover {
			color: var(--primary-color);
			background: #f1f1f1;
		}
	}
}

::picker(select) {
	appearance: base-select;
	border: none;
	margin: 6px 0;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #dddddd;
	box-shadow: 0 0 24px 0 rgba(150, 180, 170, 0.3);
}

:is(ul, ol):not(:is(header, footer, nav) :is(ul, ol)) {
	padding: 0 !important;
	margin: 0 !important;

	li {
		margin-bottom: 6px;
	}
}

img,
video,
iframe,
svg {
	max-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

/* ------------- BOOTSTRAP CSS CLASSES ------------- */

.btn {
	color: var(--white-color) !important;
	position: relative;
	overflow: hidden;
	padding: 12px 20px !important;
	min-width: 150px !important;
	min-height: 52px;
	transition: 300ms ease-in;
	border-radius: 40px !important;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		background: var(--white-color);
		transform: translateX(-100%);
		z-index: 1;
		transition: 300ms ease-in;
	}

	span {
		position: relative;
		z-index: 2;
		transition: 300ms ease-in;

		i {
			transition: 300ms ease-in;
			rotate: -45deg;
			margin-left: 0;
			font-size: 18px;
		}
	}

	&.btn-primary {
		border: 2px solid var(--primary-color) !important;
		background: var(--primary-color) !important;

		&:hover {
			&::after {
				transform: translateX(0);
			}

			span {
				color: var(--primary-color) !important;

				i {
					rotate: 0deg;
				}
			}
		}
	}

	&.btn-secondary {
		border-color: transparent !important;
		background: var(--secondary-color) !important;

		&:hover {
			&::after {
				transform: translateX(0);
			}

			span {
				color: var(--secondary-color) !important;

				i {
					rotate: 0deg;
				}
			}
		}
	}

	&.btn-secondary {
		border-color: transparent !important;
		background: var(--gray-color) !important;

		&:hover {
			&::after {
				transform: translateX(0);
			}

			span {
				color: var(--gray-color) !important;

				i {
					rotate: 0deg;
				}
			}
		}
	}
}

.accordion {
	.accordion-button {
		font: bold 20px/28px LexendBold, "Sans-serif";

		&::after {
			content: "\f054";
			font-family: "Font Awesome 5 Free" !important;
			transition: content 0.2sease-in-out;
			background: transparent !important;
		}

		&:not(.collapsed) {
			background-color: transparent !important;
			color: var(--primary-color) !important;
			font-weight: bold;
			box-shadow: none !important;

			&::after {
				content: "\f078";
				transform: rotate(0deg);
				background: transparent !important;
			}
		}

		:focus {
			border: none !important;
			outline: none !important;
			box-shadow: none !important;
		}
	}

	.accordion-item {
		border-color: transparent !important;

		.accordion-header {
			border-bottom: 2px solid var(--border-color) !important;
		}

		&:has(.accordion-collapse.collapse.show) {
			.accordion-header {
				border-bottom: 2px solid var(--primary-color) !important;
			}
		}
	}
}

.form-check-input {
	&:focus {
		box-shadow: none !important;
		border-color: var(--primary-color) !important;
	}

	&:hover,
	&:active,
	&:focus {
		border-color: var(--primary-color) !important;
	}

	&:checked {
		border-color: var(--primary-color) !important;
		background-color: var(--primary-color) !important;
	}
}

.form-control:focus {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border-color: var(--secondary-color);
	outline: 0;
	box-shadow: none !important;
}

.nav {
	scrollbar-width: none;
	-ms-overflow-style: none;

	&::-webkit-scrollbar {
		display: none;
	}

	&.nav-tabs {
		position: relative;

		.nav-link {
			text-align: center;
			color: var(--gray-color);
			border-radius: 4px !important;
			padding: 4px 20px !important;
			position: relative;
			transition: 300ms ease-in-out;

			&::after {
				content: "";
				display: block;
				position: absolute;
				bottom: -5.5px;
				left: 50%;
				width: 0;
				height: 2px;
				transform: translateX(-50%);
				background-color: var(--primary-color);
				transition: width 300ms ease-in-out;
				z-index: 3;
			}

			&:hover {
				color: var(--dark-color);
			}

			&:focus {
				box-shadow: none !important;
				outline: none !important;
			}

			&.active {
				color: var(--primary-color);
				background-color: transparent;

				&::after {
					width: 100%;
				}
			}
		}
	}
}

.pagination {
	li {
		margin: 0;

		&.page-item span,
		&.page-item .page-link {
			width: 36px;
			height: 36px;
			display: grid;
			place-items: center;
			border-radius: 50% !important;
			border: 2px solid var(--gray-color) !important;
			color: var(--gray-color) !important;
			padding: 0 !important;
			transition: 300ms ease-in;

			&.active {
				z-index: 2 !important;
				background: var(--primary-color) !important;
				border: 2px solid var(--primary-color) !important;
				color: var(--white-color) !important;
			}

			&:not(.active):hover,
			&:not(.active):focus {
				border: 2px solid var(--dark-color) !important;
				background: var(--dark-color) !important;
				color: var(--white-color) !important;
			}
		}
	}
}

.offcanvas {
	.btn-close:focus {
		box-shadow: none !important;
	}

	img {
		max-height: 28px !important;
	}

	.menu-item {
		padding: 8px 0;

		a {
			margin-bottom: 10px;
			border-left: 2px solid transparent;
			transition: 300ms ease-in;
			color: var(--dark-color) !important;

			&:hover {
				padding: 8px 20px;
				border-left: 2px solid var(--secondary-color) !important;
				color: var(--secondary-color) !important;
			}
		}

		&.current-menu-item a {
			font-weight: bold !important;
			padding: 8px 20px;
			border-left: 2px solid var(--primary-color);
			color: var(--primary-color) !important;
		}
	}
}

.modal {
	form {
		img {
			width: 100%;
		}
	}

	iframe {
		min-width: 100%;
		height: 450px;
		max-width: 100%;
	}
}

/* ------------- HEADER & FOOTER CSS CLASSES ------------- */

#mainContainer {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
}

#headerArea {
	top: 0;
	width: 100%;
	transition: box-shadow 0.3s ease, background-color 0.3s ease, top 0.3s ease;

	.bname {
		font: bold 24px/30px RowdiesBold, "Sans-serif";
		color: var(--primary-color);
		white-space: nowrap;
	}

	.social {
		li a {
			width: 26px;
			height: 26px;
			display: grid;
			place-items: center;
			transition: 300ms ease-in;
			border: 1px solid var(--white-color);

			i {
				color: #fff;
				font-size: 12px;
			}

			&:hover {
				background: var(--white-color);

				i {
					color: var(--dark-color);
				}
			}
		}
	}

	&.active {
		background-color: var(--white-color) !important;

		.contact-bar {
			display: none;
		}
	}

	.navbar-brand.small {
		margin: 4px 0;
	}

	.nav-img {
		transition: 300ms ease-in-out;
		z-index: 2;

		img {
			height: auto;
		}
	}

	.topbar {
		a {
			font: normal 14px/20px OutfitRegular, "Sans-serif";
		}
	}

	#menu-header-menu {
		li {
			a {
				color: var(--gray-color) !important;
				transition: 300ms ease-in-out;
				position: relative;
				white-space: nowrap;
				margin: 0 2px;

				&::after {
					content: "";
					display: block;
					position: absolute;
					bottom: -5.5px;
					left: 50%;
					width: 0;
					height: 2px;
					transform: translateX(-50%);
					border-radius: 4px;
					transition: width 300ms ease-in-out;
					z-index: 3;
				}
			}

			&.current-menu-item {
				a {
					color: var(--primary-color) !important;
					font-weight: 500;

					&::after {
						width: 30px;
						background-color: var(--primary-color);
					}
				}
			}

			&:hover {
				a {
					color: var(--dark-color) !important;
					font-weight: 500;

					&::after {
						width: 30px;
						background-color: var(--dark-color);
					}
				}
			}
		}
	}

	.callIconBtn {
		place-items: center;
		color: var(--white-color) !important;
		background: var(--primary-color);
		width: 30px;
		height: 30px;
		transition: 300ms ease-in;
		outline: 2px solid var(--primary-color);
		outline-offset: 3px;

		&:hover {
			background: var(--secondary-color);
			outline: 2px solid var(--secondary-color);
			box-shadow: 0 0.25rem .5rem -0.25rem #010e28;
		}
	}
}

#footerArea {
	background: #f1f6fe;

	a {
		width: 100%;
	}

	.navbar-brand {
		max-width: 100%;
		min-height: auto !important;
		max-height: 64px;
		mix-blend-mode: multiply;
	}

	.social {
		li a {
			display: grid;
			width: 28px;
			height: 28px;
			font-size: 16px;
			background: var(--primary-color);
			color: var(--white-color) !important;
			outline: 2px solid var(--primary-color);
			outline-offset: 3px;
			place-items: center;
			border-radius: 50%;
			transition: 300ms ease-in;

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 0.25rem .5rem -0.25rem #010e28;
				background: var(--secondary-color);
			}
		}
	}

	.footermenu {
		li {
			padding: 3px 0;
			margin-bottom: 8px;
			transition: 300ms ease-in;

			&:last-child {
				margin-bottom: 0 !important;
			}

			a {
				margin-left: 8px;

				&::before {
					content: "\f101";
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					margin-right: 16px;
					transition: content 300ms ease-in;
				}
			}

			&:hover {
				margin-left: 6px;
			}

		}
	}

	.WorkList {
		li {
			padding: 3px 0;
			margin-bottom: 8px;
			transition: 300ms ease-in;

			a {
				img {
					max-width: 50px;
					aspect-ratio: 1;
				}

				span {
					font: normal 18px/24px OutfitRegular, "Sans-serif";
				}

				p {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					line-clamp: 1;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	a {
		color: var(--gray-color) !important;
		transition: 300ms ease-in;

		&:hover,
		&:focus {
			color: var(--primary-color) !important;
		}
	}

	.bottombar {

		p,
		a {
			font: normal 16px/20px OutfitRegular, "Sans-serif";
		}
	}
}

/* ------------- COMMON CSS CLASSES ------------- */

.section-header {
	max-width: 1024px;

	.title {
		font: bold 36px/42px LexendBold, "Sans-serif";
		color: var(--primary-color);
	}

	.sub-title {
		font: bold 24px/30px OutfitRegular, "Sans-serif";
		color: var(--secondary-color);
	}
}

#breadcrumbArea {
	min-height: 540px;
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-clip: border-box;
	position: relative;

	p {
		max-width: 920px;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		background: rgba(1, 14, 40, 0.85);
		z-index: 1;
	}

	.breadcrumbs {
		color: #fff !important;

		* {
			color: #fff !important;
		}
	}
}

#sidebarArea {
	top: 90px;

	.sidebar {
		li:last-child {
			border: 0 !important;
		}

		a {
			color: var(--tertiary-color);
			transition: 300ms ease-in;

			&:hover {
				color: var(--primary-color);
			}
		}
	}
}

#EnquireModal {
	.modal-body {
		min-height: 520px;
		background: var(--secondary-color) url(../images/bg2.jpg) no-repeat center center / cover;

		.formbox {
			background: var(--white-color);
			border-radius: 8px;
			box-shadow: 0 0 10px -2px rgba(180, 150, 170, .4);
		}

		input:not([type="checkbox"], [type="radio"]),
		textarea,
		select {
			padding: 8px 12px;
		}
	}
}

.callButton {
	#callIcon {
		background: var(--primary-color);
		width: 30px;
		height: 30px;
		transition: 300ms ease-in;
		outline: 2px solid var(--primary-color);
		outline-offset: 3px;
		transition: 300ms ease-in-out;
	}

	small {
		font: normal 12px/16px OutfitRegular, "Sans-serif";
	}

	span {
		font: normal 16px/16px OutfitBold, "Sans-serif";
	}

	&:hover {
		#callIcon {
			background: var(--secondary-color);
			outline: 2px solid var(--secondary-color);
			box-shadow: 0 0.25rem .5rem -0.25rem #010e28;
		}
	}
}

.scrollToTop {
	content: " ";
	position: fixed;
	inset: auto 20px 20px auto;
	display: none;
	z-index: 3;
	width: 36px;
	height: 36px;
	place-items: center;
	transition: 300ms ease-in;
	background: var(--primary-color) !important;
	border: 2px solid var(--primary-color) !important;
	outline: 2px solid var(--primary-color);
	outline-offset: 3px;

	i {
		font-size: 18px;
		color: var(--white-color);
		transition: 300ms ease-in;
	}

	&:hover {
		box-shadow: 0 0.25rem .5rem -0.25rem #010e28;
		background: var(--white-color) !important;

		i {
			color: var(--primary-color);
		}
	}
}

/* ------------- ERROR CSS CLASSES ------------- */

section.error-404 {
	min-height: 50dvh;

	.error-404__code {
		font: bold 100px/100px MontserratBold, "Sans-serif" !important;
		color: var(--primary-color) !important;
	}

	.error-404__title {
		font: bold 52px/68px MontserratBold, "Sans-serif" !important;
		color: var(--primary-color) !important;
	}

	.error-404__text {
		font: bold 20px/28px MontserratBold, "Sans-serif" !important;
		color: var(--primary-color) !important;
	}
}

/* ------------- HOME PAGE CSS CLASSES ------------- */

#bannerArea {
	border-color: transparent;
	background-image: url(../images/bg2.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

	.row {
		.imghold {

			.divbox {

				img {
					position: relative;
					z-index: 2;
				}

				.imgboxRotate {
					content: "";
					position: absolute;
					top: 56%;
					left: 50%;
					transform: translate(-50%, -50%);
					height: 98%;
					width: 98%;
					border: 2px solid var(--primary-color);
					border-radius: 50%;
					z-index: 1;

					.dotImg {
						content: "";
						position: absolute;
						width: 48px;
						height: 48px;
						border-radius: 50%;
						display: grid;
						place-items: center;
						z-index: 2;
						background-color: var(--white-color);

						i {
							font-size: 24px;
							color: var(--white-color);
						}

						&.dotImg1 {
							top: 21%;
							left: 9%;
							transform: translate(-50%, -50%);
						}

						&.dotImg2 {
							top: 70%;
							left: 4%;
							transform: translate(-50%, -50%);
						}

						&.dotImg3 {
							top: 100%;
							left: 36%;
							transform: translate(50%, -50%);
						}

						&.dotImg4 {
							bottom: 5%;
							right: 11%;
							transform: translate(-50%, -50%);
						}

						&.dotImg5 {
							right: -5%;
							top: 35%;
							transform: translate(-50%, -50%);
						}
					}
				}
			}
		}

		.playbutton {
			span:first-child {
				font-size: 24px;
				color: var(--white-color);
				background-color: var(--secondary-color);
				width: 40px;
				height: 40px;
				display: grid;
				place-items: center;
				border-radius: 50%;
			}

			span:last-child {
				font: normal 16px/24px OutfitRegular, "Sans-serif";
			}
		}
	}

}

#brandArea {
	.scroller {
		li {
			aspect-ratio: 1;
			width: 100px;
			height: 100px;

			img {
				max-width: 100%;
				object-fit: contain;
				mix-blend-mode: multiply;
				border-radius: 5px;
				transition: 300ms ease-in;
			}
		}
	}
}

#statArea {
	background-color: #f1f6fe;

	.scroller__inner {
		li {
			padding: 12px 24px 12px 12px;
			background-color: #fff;

			span {
				width: 32px;
				height: 32px;
				font-size: 14px;
				place-items: center;
			}
		}
	}
}

#serviceArea {

	/* background: #E4EFFF; */
	/* background: linear-gradient(0deg, rgba(228, 239, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); */
	/* .owl-features { */
	.item {
		.card {
			min-height: 370px;
			overflow: hidden !important;
			border-radius: 4px;

			img {
				max-width: 65px;
				min-height: auto;
				height: auto;
			}

			span {
				width: 80px;
				height: 80px;
				padding: 10px;
				place-items: center;
			}

			&::after,
			&::before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				transform: translate(40%, -45%);
				width: 200px;
				height: 200px;
				border-radius: 50%;
				background: #E4EFFF;
				background: linear-gradient(181deg, rgba(228, 239, 255, 1) 0%, rgba(255, 255, 255, 0.22) 100%);
				z-index: 1;
				transition: 300ms ease-in-out;
			}

			&:hover {
				span {
					color: var(--primary-color);
				}

				&::before {
					background: #E4EFFF;
					background: linear-gradient(181deg, rgba(228, 239, 255, 1) 0%, rgba(255, 255, 255, 0.22) 100%);
					z-index: 2;
				}

				&::after {
					border-radius: 0;
					background: #E4EFFF;
					background: linear-gradient(181deg, rgba(228, 239, 255, 1) 0%, rgba(255, 255, 255, 0.22) 100%);
					width: 100%;
					height: 100%;
					transform: translate(0, 0);
				}
			}
		}
	}

	/* } */
}

#chooseArea {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		width: 100%;
		height: 86.5%;
		background: #E4EFFF;
		background: linear-gradient(180deg, rgba(228, 239, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
		z-index: 0;
	}

	.choosebg {
		position: relative;
		z-index: 2;

		.owl-choose {
			position: absolute;
			inset: 10px 0 0 10px;
			width: 95%;
			height: 100%;
			overflow: hidden;
			border-radius: 85px;
			min-height: 375px;
			z-index: 1;

			.item {
				background-size: cover;
				background-color: var(--dark-color);
				background-repeat: no-repeat;
				background-position: center center;
			}
		}
	}

	.choose-card {
		img {
			max-width: 95px;
			margin-bottom: 5px;
		}
	}
}

#technologiesArea {
	background: #f1f6fe;

	.tab-pane {
		.cards {
			background: #fff;
			padding: 10px;
			width: 85px;
			aspect-ratio: 5/4;
			display: grid;
			place-items: center;
			/* box-shadow: 0 0 10px -2px rgba(180, 150, 170, .4); */

			&:last-child {
				margin-right: 0 !important;
			}

			img {
				max-height: 45px;
				object-fit: contain;
				transition: 300ms ease-in-out;
				border-radius: 4px;
			}

			&:hover {
				img {
					scale: 1.1;
				}
			}
		}
	}
}

#featureWorkArea {
	.swiper-container {
		overflow: hidden;

		.swiper-slide {
			width: 100%;
			visibility: hidden;
			transition: 300ms ease-in-out;

			img {
				object-view-box: cover !important;
				object-position: top center !important;
				object-fit: cover !important;
				width: 100%;
				height: 600px;
			}

			.swiper-text {
				display: none;
				padding: 25px;
				inset: auto 0 0 0;
				transition: 300ms ease-in-out;
				color: var(--white-color);
			}

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				background: #000000;
				background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 50%);
				z-index: 1;
				display: none;
				transition: 300ms ease-in-out;
			}

			&.swiper-slide-active,
			&.swiper-slide-next,
			&.swiper-slide-prev {
				visibility: visible;
			}

			&.swiper-slide-active {
				.swiper-text {
					display: block;
				}

				&::after {
					display: block;
				}
			}
		}
	}
}

#reviewsArea {
	background: #f1f6fe;

	.owl-review {
		.item {
			.card {
				border: 0;
				overflow: hidden;
				border-bottom: 4px solid var(--primary-color);

				.card-body {
					&::after {
						content: '';
						position: absolute;
						inset: 15px 25px auto auto;
						width: 50px;
						height: 50px;
						background: transparent url(../images/quote.png) no-repeat center center / cover;
					}

					img {
						max-width: 55px;
					}
				}
			}
		}
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		width: 100%;
		height: 100%;
		background: url(../images/patterns/bg-pattern.png) no-repeat center center / cover;
		mix-blend-mode: multiply;
		z-index: 0;
		opacity: 0.65;
	}

	&.bg-transparent {
		&::after {
			display: none;
		}
	}
}

#storyArea {
	.storyGrid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-auto-columns: 1fr;
		gap: 20px 20px;
		grid-auto-flow: row;

		article {
			transition: 300ms ease-in;

			img {
				transition: 300ms ease-in-out;
				aspect-ratio: 4/3;
			}

			.textbox {
				bottom: 0;
				color: var(--white-color);
			}

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .25) 100%);
				z-index: 1;
			}

			&:hover {
				img {
					scale: 1.1;
				}
			}
		}
	}
}

#faqsArea {
	.text {
		transform: rotate(-90deg);
		letter-spacing: 4px;
	}
	.help-faqs-items {
		li {
			margin-bottom: 0;

			&:not(:last-child) {
				details {
					border-bottom: 1px solid var(--gray-color);
				}
			}
		}

		details {
			padding: 12px 0;
			p {
				margin: 12px 0 !important;
				color: var(--gray-color);
			}

			summary {
				color: var(--gray-color);
				font-size: 18px;

				&::after {
					content: "\f0d7";
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					font-size: 16px;
					color: var(--gray-color);
				}
			}

			&:open {
				summary {
					color: var(--dark-color);

					&::after {
						content: "\f0d8";
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						color: var(--dark-color);
					}
				}
			}
		}
	}
}

#contactArea {
	.textboxout {
		margin: auto;
		min-height: 320px;
		padding: 25px;
		color: var(--white-color);
		background: var(--primary-color) url(../images/coder.jpg) no-repeat center center / cover;
		position: relative;
		border-radius: 8px;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.35) 100%);
			z-index: 1;
			border-radius: 8px;
		}

		.textbox {
			max-width: 720px;
		}

	}
}

/* ------------- OTHER PAGE CSS CLASSES ------------- */

#aboutUsArea {
	.section-header {
		max-width: 100%;
	}

	img.aboutImg {
		width: 100%;
		max-height: 550px;
	}
}

#WorkProcessArea {
	.timeline {
		position: relative;
		margin: 50px auto;
		padding: 40px 0;
		width: 100%;
		box-sizing: border-box;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 2px;
			height: 100%;
			background: #c5c5c5;
		}

		ul {
			padding: 0;
			margin: 0;

			li {
				list-style: none;
				position: relative;
				width: 50%;
				padding: 20px 40px;
				box-sizing: border-box;

				&:nth-child(odd) {
					float: left;
					text-align: right;
					clear: both;

					.time {
						position: absolute;
						top: 12px;
						right: -100px;
						margin: 0;
						padding: 8px 16px;
						background: var(--primary-color);
						color: #fff;
						border-radius: 18px;
						box-shadow: 0 0 0 3px var(--primary-color);
					}

					&:before {
						content: '';
						position: absolute;
						width: 10px;
						height: 10px;
						top: 24px;
						right: -6px;
						background: var(--primary-color);
						border-radius: 50%;
						box-shadow: 0 0 0 3px var(--primary-color);
					}
				}

				&:nth-child(even) {
					float: right;
					text-align: left;
					clear: both;

					.time {
						position: absolute;
						top: 12px;
						left: -100px;
						margin: 0;
						padding: 8px 16px;
						background: var(--primary-color);
						color: #fff;
						border-radius: 18px;
						box-shadow: 0 0 0 3px var(--primary-color);
					}

					&:before {
						content: '';
						position: absolute;
						width: 10px;
						height: 10px;
						top: 24px;
						left: -4px;
						background: var(--primary-color);
						border-radius: 50%;
						box-shadow: 0 0 0 3px var(--primary-color);
					}
				}

				.content {
					padding-bottom: 20px;
				}

				h3 {
					padding: 0;
					margin: 0;
					color: var(--primary-color);
					font-weight: 600;
				}

				p {
					margin: 10px 0 0;
					padding: 0;
				}

				.time h4 {
					margin: 0;
					padding: 0;
					font-size: 14px;
				}
			}
		}
	}
}

#brandsArea {
	background-color: #f5f5f7;

	img {
		max-height: 64px;
		mix-blend-mode: darken;
		border-radius: 6px;
	}

	.scroller__inner {
		gap: 1.25rem;
	}
}

#allServicesArea {
	.service-card {
		counter-increment: service-section;
		min-height: 150px;
		top: calc(var(--index) + 30px);

		.number::before {
			content: counter(service-section, decimal-leading-zero) ".";
		}

		img {
			width: 100%;
			max-height: 420px;
		}

		.textBox {
			background-color: #c5c5c5;
			top: 75%;
			width: 100%;
			min-width: 250px;
			max-width: 375px;
		}

		&:nth-child(odd) {
			border: 2px solid blue;

			.textBox {
				left: 20%;
				right: auto;
			}
		}

		&:nth-child(even) {
			border: 2px solid gray;

			.textBox {
				left: auto;
				right: -32%;
			}
		}

		ul {
			counter-reset: list-counter;

			li {
				position: relative;
				padding-left: 30px;
				margin-bottom: 8px;
				counter-increment: list-counter;

				&::before {
					content: counter(list-counter, decimal-leading-zero) ". ";
					position: absolute;
					left: 0;
					top: 0;
					font-weight: 600;
					color: var(--primary-color);
				}
			}
		}

		&:first-child {
			margin-top: 0 !important;
		}

		&:last-child {
			margin-bottom: 0 !important;
		}

		&:nth-child(1) {
			background-color: #fad1d8;
		}

		&:nth-child(2) {
			background-color: #f5acb8;
		}

		&:nth-child(3) {
			background-color: #ec6a82;
		}

		&:nth-child(4) {
			background-color: #e44f6f;
		}

		&:nth-child(5) {
			background-color: #cf2f58;
		}

		&:nth-child(6) {
			background-color: #ae224a;
		}

		&:nth-child(7) {
			background-color: #921f44;
		}

		&:nth-child(8) {
			background-color: #7d1e3f;
		}
	}

}

#blogsArea {
	.stories {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		grid-auto-rows: auto;
		gap: 24px;
		grid-auto-flow: row;

		article {
			grid-column: span 2;
			transition: 300ms ease-in;

			img {
				transition: 300ms ease-in-out;
				aspect-ratio: 4/3;
			}

			.textbox {
				bottom: 0;
				color: var(--white-color);

				p:last-child {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .25) 100%);
				z-index: 1;
			}

			&:hover {
				img {
					scale: 1.1;
				}
			}

			&:nth-child(1) {
				grid-area: 1 / 1 / span 2 / span 3;
			}

			&:nth-child(2) {
				grid-area: 1 / 4 / 1 / span 3;

				img {
					aspect-ratio: 2/1;
				}
			}

			&:nth-child(3) {
				grid-area: 2 / 4 / 2 / span 3;

				img {
					aspect-ratio: 2/1;
				}
			}
		}

		nav.navigation {
			grid-column: 1/ span 6;
		}
	}
}

#contactArea {
	form {

		input:not([type="checkbox"], [type="radio"]),
		textarea,
		select {
			padding: 12px;
		}
	}

	.contact-box {
		background-color: var(--primary-color);

		.boxes {
			color: var(--white-color);
			background-color: rgba(255, 255, 255, .25);
			backdrop-filter: blur(20px);

			small {
				font: normal 12px/16px LexendLight, "Sans-serif" !important;
			}

			a {
				font: normal 18px/18px LexendRegular, "Sans-serif" !important;
			}

			&:last-child {
				margin-bottom: 0 !important;
			}
		}

		.social {
			li a {
				width: 36px;
				height: 36px;
				border: 2px solid var(--white-color);
				font-size: 18px;
				place-items: center;
				border-radius: 50%;
				transition: 300ms ease-in;

				&:hover {
					transform: translateY(-5px);
					box-shadow: 0 0.25rem .5rem -0.25rem #010e28;
					background: var(--white-color);
					color: var(--primary-color) !important;
				}
			}
		}
	}
}

#portfolioArea {
	.portfolio {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		grid-auto-columns: 1fr;
		gap: 24px;
		grid-auto-flow: row;

		.portfolio-card {
			img {
				width: 100%;
				min-height: auto;
				aspect-ratio: 1;
				transition: 300ms ease-in-out;
			}

			.textbox {
				inset: auto 0 0 0;
				color: var(--white-color);

				a {
					color: var(--white-color) !important;
				}

				p.d-flex {
					a {
						font: normal 14px/20px OutfitRegular, "Sans-serif";
					}
				}

				p:last-child {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			&::after {
				content: "";
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 100%);
				z-index: 1;
				transition: 300ms ease-in-out;
			}

			&:hover {
				img {
					scale: 1.1;
				}

				&::after {
					background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .25) 100%);
				}
			}
		}
	}
}

#prebuiltAppsArea {
	.app-card {
		--top: calc(1.5rem * var(--index));
		top: calc(100px + var(--top));
		width: 100%;
		background: linear-gradient(180deg, rgba(228, 239, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);

		.row {
			ul {
				li {
					display: flex;
					align-items: center;
					gap: 6px;

					&::before {
						content: "\f058";
						font-family: "Font Awesome 5 Free";
						font-weight: 500;
						color: var(--secondary-color);
					}
				}
			}
		}
	}
}

#caseStudyArea {
	.casestudy {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		grid-auto-columns: 1fr;
		gap: 24px;
		grid-auto-flow: row;

		.casestudy-card {
			img {
				margin: auto;
				max-width: 425px;
				min-height: auto;
				transition: 300ms ease-in-out;
			}

			&:nth-child(5n + 1) {
				background-color: #fbf3ea;
			}

			&:nth-child(5n + 2) {
				background-color: #e8e6f3;
			}

			&:nth-child(5n + 3) {
				background-color: #f9e3df;
			}

			&:nth-child(5n + 4) {
				background-color: #ecf0f7;
			}

			&:nth-child(5n + 5) {
				background-color: #e6f5e6;
			}

			&:hover {
				img {
					scale: 1.025;
				}
			}
		}
	}
}

#helpsArea {
	.help-faqs {
		.position-sticky {
			top: 100px;

			.help-faqs-list {
				li {
					&:not(:last-child) {
						border-bottom: 1px solid var(--gray-color);
					}
				}

				a {
					color: var(--gray-color) !important;

					&:hover {
						color: var(--dark-color) !important;

						&::before {
							color: var(--dark-color) !important;
						}
					}

					&.active {
						color: var(--primary-color) !important;

						&::before {
							color: var(--primary-color) !important;
						}
					}

					&::before {
						content: "\f059";
						font-family: "Font Awesome 5 Free";
						font-weight: 400;
						font-size: 16px;
						color: var(--gray-color);
					}
				}
			}
		}
	}

	.help-faqs-items {
		li {
			margin-bottom: 0;

			&:not(:last-child) {
				details {
					border-bottom: 1px solid var(--gray-color);
				}
			}
		}

		details {
			padding: 12px 0;
			p {
				margin-bottom: 0 !important;
				color: var(--gray-color);
			}

			summary {
				font-size: 18px;
				color: var(--gray-color);

				&::after {
					content: "\f0d7";
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					font-size: 16px;
					color: var(--gray-color);
				}
			}

			&:open {
				summary {
					margin-bottom: 6px;
					color: var(--dark-color);

					&::after {
						content: "\f0d8";
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						color: var(--dark-color);
					}
				}
			}
		}
	}

	.help-text {
		background-color: #fbf3ea;
		place-items: center;
		min-height: 180px;

		div {
			line-height: 150%;
			max-width: 780px;
			margin: auto;
			text-align: center;
			color: var(--gray-color);

			a {
				font: 500 16px/24px LexendRegular, "Sans-serif";
				transition: 300ms ease-in-out;
				color: var(--gray-color) !important;

				&:hover {
					color: var(--primary-color) !important;
					text-underline-offset: 2px;
				}
			}
		}
	}
}

#testimonialsArea {
	.testimonials {
		.card {
			background-color: #f8f8f8;

			.avatar {
				aspect-ratio: 1;
				height: 36px;
				min-height: 36px;
				max-height: 36px;
				max-width: 36px;
				outline: 2px solid var(--gray-color);
				outline-offset: 3px;
			}

			.logo {
				top: 20px;
				right: 25px;

				img {
					max-width: 65px;
					height: auto;
					max-height: auto;
					min-height: auto;
					object-fit: contain;
					aspect-ratio: 1;
				}
			}

			.quote {
				bottom: 15px;
				right: 15px;

				i {
					font-size: 65px;
					color: #b6b6b6;
					text-shadow: -1px -1px 0 #b6b6b6, 1px -1px 0 #b6b6b6, -1px 1px 0 #b6b6b6, 1px 1px 0 #b6b6b6;
					transform: scaleY(-1);
					opacity: .25;
				}
			}

			.star-rate {
				i {
					font-size: 20px;
					color: var(--gray-color);

					&.fa-gold {
						color: gold;
					}
				}
			}

			.text {
				color: var(--gray-color);
			}

			small {
				font-size: 14px;
			}

			&::after,
			&::before {
				content: '';
				position: absolute;
				width: 75px;
				height: 75px;
				border: 1px solid #b6b6b6;
				transition: 300ms ease-in-out;
			}

			&::after {
				inset: 0 auto auto 0;
				border-bottom: 0;
				border-right: 0;
				border-top-left-radius: 6px;
			}

			&::before {
				inset: auto 0 0 auto;
				border-top: 0;
				border-left: 0;
				border-bottom-right-radius: 6px;
			}

			&:hover {

				&::after,
				&::before {
					border-color: var(--primary-color);
					width: 125px;
					height: 125px;
				}
			}
		}
	}
}

/* ------------- INSIDE PAGE CSS CLASSES ------------- */

#serviceDetailArea {
	form {
		.form-box {
			box-shadow: 0 0 12px -2px rgba(150, 180, 170, 0.3);

			&::before {
				content: '';
				width: 100%;
				height: 100%;
				position: absolute;
				inset: -30px auto auto -30px;
				background: #ffffff;
				background: linear-gradient(105deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 65%);
				z-index: -2;
				border-radius: 6px;
				box-shadow: -10px -10px 12px -6px rgba(150, 180, 170, 0.1);
			}

			input,
			textarea {
				padding: 12px;
				margin-bottom: 4px;
			}
		}
	}

	.textboxes {
		p {
			margin-bottom: 12px;
		}
	}
}

#howWorksArea {
	background-color: #f1f6fe;

	.timeline {
		position: relative;
		margin: 50px auto;
		padding: 40px 0;
		width: 100%;
		box-sizing: border-box;

		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 2px;
			height: 100%;
			background: #c5c5c5;
		}

		ul {
			padding: 0;
			margin: 0;

			li {
				list-style: none;
				position: relative;
				width: 50%;
				padding: 20px 40px;
				box-sizing: border-box;

				&:nth-child(odd) {
					float: left;
					text-align: right;
					clear: both;

					.time {
						position: absolute;
						top: 12px;
						right: -100px;
						margin: 0;
						padding: 8px 16px;
						background: var(--primary-color);
						color: #fff;
						border-radius: 18px;
						box-shadow: 0 0 0 3px var(--primary-color);
					}

					&:before {
						content: '';
						position: absolute;
						width: 10px;
						height: 10px;
						top: 24px;
						right: -6px;
						background: var(--primary-color);
						border-radius: 50%;
						box-shadow: 0 0 0 3px var(--primary-color);
					}
				}

				&:nth-child(even) {
					float: right;
					text-align: left;
					clear: both;

					.time {
						position: absolute;
						top: 12px;
						left: -100px;
						margin: 0;
						padding: 8px 16px;
						background: var(--primary-color);
						color: #fff;
						border-radius: 18px;
						box-shadow: 0 0 0 3px var(--primary-color);
					}

					&:before {
						content: '';
						position: absolute;
						width: 10px;
						height: 10px;
						top: 24px;
						left: -4px;
						background: var(--primary-color);
						border-radius: 50%;
						box-shadow: 0 0 0 3px var(--primary-color);
					}
				}

				.content {
					padding-bottom: 20px;
				}

				h3 {
					padding: 0;
					margin: 0;
					color: var(--primary-color);
					font-weight: 600;
				}

				p {
					margin: 10px 0 0;
					padding: 0;
				}

				.time h4 {
					margin: 0;
					padding: 0;
					font-size: 14px;
				}
			}
		}
	}
}

#seriveFAQArea {
	.help-faqs-items {
		li {
			margin-bottom: 0;

			&:not(:last-child) {
				details {
					border-bottom: 1px solid var(--gray-color);
				}
			}
		}

		details {
			padding: 12px 0;
			p {
				margin: 12px 0 !important;
				color: var(--gray-color);
			}

			summary {
				color: var(--gray-color);
				font-size: 18px;

				&::after {
					content: "\f0d7";
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					font-size: 16px;
					color: var(--gray-color);
				}
			}

			&:open {
				summary {
					color: var(--dark-color);

					&::after {
						content: "\f0d8";
						font-family: "Font Awesome 5 Free";
						font-weight: 900;
						color: var(--dark-color);
					}
				}
			}
		}
	}
}

/* ------------- ANIMATION CSS CLASSES ------------- */

.pulse {
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
	}

	100% {
		box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	}
}

/* ------------- ANIMATION CSS CLASSES ------------- */

input[name="user-mobile"] {
	padding-left: 88px !important;
}

.country-list {
	max-width: 300px;
	min-width: 100%;
	width: 300px;

	li.country {
		white-space: break-spaces;
	}
}

span[data-name="term-acceptance"] {
	span.wpcf7-list-item {
		font-size: 14px;
		margin: 0;
		padding-left: 2px;

		input[type="checkbox"] {
			width: auto;
			scale: 1.25;
			margin-right: 6px;
		}
	}
}

.wpcf7-not-valid-tip,
.wpcf7-response-output,
.wpcf7-validation-errors {
	display: none !important;
}

.grecaptcha-badge {
	display: none !important;
	opacity: 0 !important;
}

#wpadminbar {
	z-index: 2 !important;
}