:root {
	--color-blue: #4f5dec;
	--color-primary: #0d6efd;
	--color-black-200: #212529;
	--color-text: #5f5f5f;
	--color-white: #fff;
	--color-black-250: #141414;
	--color-black-300: #111111;
	--color-border: rgb(223 223 223 / 0.84);
	--color-gray-100: #757f95;
	--color-blockqoute: #f9f9f9;
	--bg-color-black-gray-200: #464646;
	--bg-color-white-fade: rgba(255, 255, 255, 0.169);
	--color-orange: #ff9800;
	--box-shadow-blue: 0 0 5px rgba(79, 92, 236, 0.726);
	--bg-section-color: #f7f8f8;
	--border-color-accent: rgba(255, 255, 255, 0.169);

	--transition: all 0.5s ease;
	--transition-linear: all 0.3s linear;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	height: 100%;
	margin: 0;
}

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

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 10px var(--color-blue);
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
}

body {
	font-size: 1rem;
	font-family: 'Dosis', sans-serif;
	color: var(--color-text);
}
ul {
	padding: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
}
h2 {
	font-size: 2.5rem;
	color: var(--color-black-200);
}
h2 span {
	color: var(--color-blue);
}
h3 {
	color: var(--color-blue);
	margin-bottom: 1rem;
	font-size: 1.1rem;
}
p {
	font-weight: 500;
	font-size: 1.1rem;
	line-height: 1.6;
}
button {
	font-family: 'Dosis', sans-serif;
}
textarea {
	font-family: 'Dosis', sans-serif;
}
/* --- Reusable CSS --- */
.container {
	width: 1240px;
	margin: 0 auto;
}
.section {
	padding: 5rem 0;
}
.section-pad {
	padding-bottom: 5rem;
}
.grid-column-two {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.grid-column-three {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.grid-column-four {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.sub-heading {
	margin-bottom: 1.5rem;
}
.btn {
	display: block;
	line-height: 50px;
	padding: 0 2rem;
	background-color: var(--color-blue);
	color: var(--color-white);
	border-radius: 0.3rem;
	font-weight: 600;
	max-width: fit-content;
	position: relative;
	transition: var(--transition);
	font-size: 1.1rem;
	overflow: hidden;
}
.btn::before {
	content: '';
	position: absolute;
	width: 150px;
	height: 150px;
	left: 50%;
	top: 50%;
	margin: -70px 0 0 -75px;
	transform: scale(0);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
}
.btn:hover {
	background: var(--color-black-200);
}
.btn:hover::before {
	transform: scale(1);
	opacity: 0;
	transition: all 1s ease;
}
.ckc-btn {
	cursor: pointer;
}
input {
	display: block;
	line-height: 3.5rem;
	padding: 0 1rem;
	font-size: 1rem;
	width: 100%;
	font-family: 'Dosis', sans-serif;
	border: 1px solid var(--color-border);
	font-weight: 600;
	font-size: 1rem;
	border-radius: 0.5rem;
}
input::placeholder {
	color: var(--color-text);
}
input:focus {
	outline: 1px solid var(--color-blue);
	border: none;
}

.inner-bg {
	background: rgba(10, 10, 10, 0.507);
	height: 400px;
}
.inner-banner-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 400px;
}
.inner-banner-content h4 {
	font-size: 3.8rem;
	color: var(--color-white);
	margin-bottom: 1rem;
	font-weight: 600;
}
.inner-banner-content p {
	font-size: 1.5rem;
	color: var(--color-white);
	max-width: 530px;
	margin-bottom: 1rem;
	line-height: 1.6;
}
.innner-bnr-links ul {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-white);
}
.innner-bnr-links ul li {
	font-size: 1.2rem;
}
.innner-bnr-links ul li a {
	color: var(--color-white);
	transition: var(--transition);
	font-weight: 600;
	font-size: 1.1rem;
}
.innner-bnr-links ul li a:hover {
	color: var(--color-orange);
}
.mt-top {
	margin-top: 4rem;
}

.scroll-tp {
	position: fixed;
	bottom: 1.3rem;
	right: 2rem;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 0.3rem;
	background: var(--color-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	visibility: hidden;
	opacity: 0;
	transition: var(--transition);
}

.scroll-tp i {
	color: var(--color-white);
	font-size: 1.5rem;
}

.scroll-tp.active {
	visibility: visible;
	opacity: 1;
}

.cookies {
	position: fixed;
	bottom: 0;
	right: 0;
	height: auto;
	width: 25rem;
	background: var(--color-white);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	z-index: 12;
	padding: 2rem;
	transform: translateY(100%);
	transition: transform 1s ease;
}
.cookies.active {
	transform: translateY(0);
}

.close-icon {
	position: absolute;
	top: 15px;
	right: 15px;
	height: 2rem;
	width: 2rem;
	background: var(--color-blue);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	border-radius: 5rem;
	cursor: pointer;
}
.coockies-image img {
	display: block;
	margin: auto;
}
.coockies-content {
	text-align: center;
}
.coockies-content h4 {
	font-size: 2rem;
	color: var(--color-black-200);
	margin: 0.5rem 0;
}
.coockies-content p {
	margin-bottom: 1.5rem;
	line-height: 1.3;
}

.cookies-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
}

.cookies-btn .btn {
	line-height: 38px;
	font-size: 1rem;
}
.ckc-btn {
	border: none;
}
/* --- Header Section --- */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	border-bottom: 1px solid var(--color-border);
	background: var(--bg-section-color);
	z-index: 99;
}
.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 4rem;
}
.logo {
	display: flex;
	align-items: center;
	gap: 0.2rem;
}
.vb-logo {
	background: var(--color-blue);
	padding: 0 0.4rem;
	border-radius: 0.3rem;
	color: var(--color-white);
	font-weight: 600;
	font-size: 2rem;
}
.vb-text {
	font-size: 2rem;
	font-weight: 800;
	color: var(--color-black-300);
}
.header-links {
	display: flex;
	align-items: center;
	gap: 2rem;
}
.header-sub-links a {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--color-text);
	transition: var(--transition);
	position: relative;
}
.header-sub-links a:hover {
	color: var(--color-blue);
}
.menu-bar {
	cursor: pointer;
}
.menu-bar i {
	font-size: 1.8rem;
	color: var(--color-text);
}
.case-study {
	position: relative;
}
.case-study::before {
	content: '';
	position: absolute;
	top: -5px;
	right: -8px;
	height: 5px;
	width: 5px;
	border-radius: 100%;
	border: 2px solid var(--color-blue);
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
}
.case-study:hover::before {
	opacity: 1;
	visibility: visible;
}
.header-sub-links a.contact-num {
	padding: 0.5rem 1rem;
	background: var(--color-blue);
	color: var(--color-white);
	border-radius: 0.3rem;
}

nav ul {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 400px;
	background: var(--bg-color-black-gray-200);
	padding: 4rem 1rem 2rem 3rem;
	overflow-y: scroll;
	z-index: 105;
	transform: translateX(100%);
	transition: var(--transition);
	opacity: 0;
	visibility: hidden;
}
nav ul.active {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
}
nav ul li {
	width: 100%;
	margin-bottom: 0.5rem;
	padding: 0.3rem 0 0 0;
}
nav ul li a {
	display: block;
	width: 100%;
	padding: 0.3rem 0;
	font-size: 1.5rem;
	font-weight: 500;
	max-width: fit-content;
	color: var(--color-white);
	transition: var(--transition);
}
nav ul li a:hover {
	color: var(--color-orange);
}
.close-menu {
	position: absolute;
	top: 1rem;
	right: 3rem;
	height: 2rem;
	width: 2rem;
	cursor: pointer;
	z-index: 106;
	display: none;
}

.close-menu i {
	font-size: 2rem;
	color: var(--color-white);
}

.side-bar-menu {
	margin-bottom: 1.5rem;
	display: none;
}
.side-bar-menu .logo .vb-text {
	font-weight: 500;
}
.side-bar-menu .logo .vb-text {
	color: var(--color-white);
	font-weight: 500;
}
.side-bar-links {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	display: none;
}
.side-bar-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 100%;
	background-color: var(--bg-color-white-fade);
	transition: var(--transition);
}
.side-bar-links a:hover {
	background: var(--color-blue);
}
.side-bar-links a i {
	color: var(--color-white);
	font-size: 1.2rem;
}
.overlay {
	position: fixed;
	top: 0;
	right: 0;
	width: 0;
	height: 100%;
	background: rgb(0 0 0 / 79%);
	transition: all 0.8s ease;
	z-index: 102;
	opacity: 0;
	visibility: hidden;
}
.overlay.active {
	width: 100%;
	opacity: 1;
	visibility: visible;
	/* -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px); */
}
.header-sub-links {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.header-social-links {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.social-sub-links {
	display: flex;
	align-items: center;
	gap: 0.8rem;
}
.social-sub-links a {
	color: var(--color-black-300);
	transition: var(--transition);
}
.social-sub-links a i {
	font-size: 1.8rem;
}
.social-sub-links a:hover {
	color: var(--color-blue);
}

/* ---- Hero Section ---- */
.slider-box {
	background: url('../img/hero2.jpg') no-repeat center center;
	background-size: cover;
	height: 100vh;
	position: relative;
}
.slider-box::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	background: rgba(0, 0, 0, 0.644);
}
.hero-content {
	position: relative;
	z-index: 2;
	height: 100vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: var(--color-white);
	padding-left: 2.5rem;
}
.hero-content h1 {
	font-size: 4rem;
	max-width: 710px;
	font-weight: 600;
	margin-bottom: 1.2rem;
}
.hero-content p {
	font-size: 1.3rem;
	max-width: 600px;
	line-height: 1.6;
	margin-bottom: 1.8rem;
}
.hero-link {
	display: flex;
	gap: 1rem;
}
.hero-link a {
	font-size: 1rem;
	font-weight: 600;
}
.hero-link .btn {
	padding: 0 2rem;
	line-height: 50px;
	font-weight: 600;
	font-size: 1.2rem;
	position: relative;
}
.hero-link .hero-lrn-btn {
	background: var(--color-white);
	color: var(--color-blue);
	transition: var(--transition);
}
.hero-link .hero-lrn-btn:hover {
	background: var(--color-black-300);
	color: var(--color-white);
}
.hero-link .hero-contact-btn {
	transition: var(--transition);
}
.hero-link .hero-contact-btn:hover {
	background: var(--color-black-300);
	color: var(--color-white);
}
.hero-sec .slider-box.slider-image {
	background: url('../img/hero1.jpg') no-repeat center center;
	background-size: cover;
}
.slick-arrow {
	position: absolute;
}
.hero-slider .slick-next {
	position: absolute;
	right: 1rem;
	top: 50%;
	height: 4rem;
	width: 4rem;
	z-index: 1;
	border-radius: 100%;
	border: none;
	background: var(--bg-color-white-fade);
	font-size: 0;
	cursor: pointer;
}
.hero-slider .slick-next::after {
	content: '\f061';
	position: absolute;
	top: 50%;
	right: 34%;
	transform: translateY(-50%) !important;
	font-family: 'FontAwesome';
	font-size: 1.3rem;
	z-index: 1;
	padding: 0.1rem;
	color: var(--color-white);
	cursor: pointer;
}
.hero-slider .slick-prev {
	position: absolute;
	left: 1rem;
	top: 50%;
	height: 4rem;
	width: 4rem;
	z-index: 1;
	border-radius: 100%;
	border: none;
	background: var(--bg-color-white-fade);
	font-size: 0;
	cursor: pointer;
}
.hero-slider .slick-prev::after {
	content: '\f060';
	position: absolute;
	top: 50%;
	right: 34%;
	transform: translateY(-50%) !important;
	font-family: 'FontAwesome';
	font-size: 1.3rem;
	z-index: 1;
	padding: 0.1rem;
	color: var(--color-white);
	cursor: pointer;
}
.hero-slider .slick-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 5.5rem;
	left: 50%;
	transform: translateX(-50%);
}
.hero-slider .slick-dots li {
	margin-right: 0.5rem;
}
.hero-slider .slick-dots li button {
	border: none;
	height: 0.3rem;
	width: 6rem;
	font-size: 0;
	background: var(--color-white);
	cursor: pointer;
	border-radius: 0.3rem;
}
/* .slick-dots li:first-child button {
	border-radius: 3rem 0 0 3rem;
}
.slick-dots li:last-child button {
	border-radius: 0 3rem 3rem 0;
} */
.hero-slider .slick-dots li.slick-active button {
	background: var(--color-blue);
}

/* ---- About Section ---- */
.about-sec .grid-column-two {
	gap: 3rem;
}
.about-content p {
	margin-bottom: 1rem;
	text-align: justify;
}

.about-content .btn {
	margin-top: 2rem;
}
.image-container img {
	width: 100%;
	display: block;
	margin: auto;
}

/* ---- Our Value Section ---- */
.value-sec {
	background: #f8f8f8;
}
.value-sec .grid-column-three {
	gap: 2rem;
}
.value-card {
	text-align: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
	padding: 2rem;
	border-radius: 0.5rem;
	transform: translateY(10px);
	transition: var(--transition);
}
.value-card:hover {
	transform: translateY(0);
}
.card-image {
	height: 8rem;
	width: 8rem;
	border-radius: 100%;
	overflow: hidden;
	margin: auto;
	margin-bottom: 1.5rem;
}
.card-image img {
	width: 100%;
	height: 8rem;
	object-fit: cover;
	border: 1px solid var(--color-blue);
	border-radius: 100%;
	padding: 0.5rem;
}

.value-card h4 {
	font-size: 1.7rem;
	color: var(--color-black-300);
	margin-bottom: 0.5rem;
}
.value-sec .sub-heading {
	margin-bottom: 3rem;
	text-align: center;
}
.value-sec .sub-heading h2 {
	max-width: 550px;
	margin: 0 auto;
}

/* ---- Services Section ---- */
.service-sec .grid-column-three {
	gap: 3rem 2rem;
}
.service-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}
.service-sec .value-card {
	text-align: left;
	transform: translateY(0);
}

.service-sec .value-card .card-image {
	margin: inherit;
	border-radius: 0.8rem;
	height: 14rem;
	width: inherit;
}
.service-sec .value-card .card-image img {
	border-radius: 0;
	height: 14rem;
	border: 0;
	width: 100%;
	object-fit: cover;
	padding: inherit;
}
.service-sec .value-card h4 {
	margin-top: 1.5rem;
}
.service-sec .value-card .btn {
	margin-top: 1.5rem;
}

/* ---- Work Section ---- */
.work-sec {
	background: var(--bg-section-color);
}
.work-sec .grid-column-three {
	gap: 2rem;
}
.work-card {
	border-radius: 0.5rem;
	overflow: hidden;
	padding: 1rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.work-card:hover {
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.website-link {
	display: block;
	margin-bottom: 2rem;
	width: 100%;
	height: 270px;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid #ccc;
}

.website-link img {
	object-fit: cover;
	width: 100%;
	transform: translateY(0);
	transition: 12s ease-out;
}

.work-card:hover .website-link img {
	object-fit: cover;
	transform: translateY(calc(-100% + 400px));
	transition: 12s ease-out;
}

.project-headings {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--color-black-300);
	transition: var(--transition);
	max-width: fit-content;
	margin-bottom: 0.5rem;
}

.project-headings:hover {
	color: var(--color-blue);
}

.website-description p {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

.work-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}

/* ---- Testimonials Section ---- */
.test-sec .grid-column-three {
	gap: 2rem;
}
.test-sec .sub-heading {
	margin-bottom: 3rem;
}

/* ---- Testimonials Section ---- */
.test-sec {
	background: rgb(255 255 255 / 95%);
	height: 100vh;
}
.test-bg-img {
	background: url('../img/map_bg.png') no-repeat 50% 54px;
	background-size: 1000px;
	height: 100vh;
}

.test-content-container {
	padding: 5rem 0;
}
.test-card {
	margin: 0 1rem;
}
.test-sec h2 {
	margin-bottom: 3rem;
}
.client-feedback {
	background: var(--bg-section-color);
	padding: 3rem;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}
.client-feedback p {
	line-height: 1.4;
}
.client-image {
	border-radius: 100%;
	height: 5rem;
	width: 5rem;
	overflow: hidden;
}
.client-image img {
	width: 100%;
	height: 5rem;
	border-radius: 100%;
	object-fit: cover;
	border: 5px solid #ffffff;
	border-left-color: #7b68ee;
	border-bottom-color: #7b68ee;
	margin: 0 auto;
	display: block;
}
.client-info {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
.client-details h5 {
	color: var(--color-black-300);
	font-size: 1.2rem;
}
.client-details p {
	color: var(--bg-color-black-gray-200);
	line-height: inherit;
}

.test-slider .slick-next {
	position: absolute;
	top: -67px;
	right: 0;
	background: transparent;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	border-bottom: 1px solid var(--e-global-color-638d055);
	padding-right: 1.2rem;
	text-transform: uppercase;
	font-weight: 500;
}
.test-slider .slick-next::after {
	content: '\f178 ';
	position: absolute;
	top: 0;
	right: 0;
	font-family: 'FontAwesome';
	font-size: 0.9rem;
	z-index: 1;
	padding-top: 0.5rem;
	font-weight: normal;
}
.test-slider .slick-next:hover {
	color: var(--color-blue);
	border-bottom: 1px solid var(--e-global-color-332724a);
}
.test-slider .slick-prev {
	position: absolute;
	top: -67px;
	right: 90px;
	background: transparent;
	border: none;
	font-size: 1.4rem;
	cursor: pointer;
	border-bottom: 1px solid var(--e-global-color-638d055);
	text-transform: uppercase;
	padding-left: 1.3rem;
	z-index: 2;
	font-weight: 500;
}

.test-slider .slick-prev::before {
	content: '\f177';
	position: absolute;
	top: 0;
	left: 0;
	font-family: 'FontAwesome';
	z-index: 1;
	font-size: 0.9rem;
	padding-top: 0.5rem;
	font-weight: normal;
}
.test-slider .slick-prev:hover {
	color: var(--color-blue);
	border-bottom: 1px solid var(--e-global-color-332724a);
}
/* --- Clients Section ---- */
.clients-sec {
	background: var(--bg-section-color);
}
.clients-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}
.clients-sec .grid-column-four {
	gap: 2rem;
	justify-content: center;
}
.logo-box {
	padding: 2rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	height: 7rem;
	width: 100%;
}
.clients-logo {
	display: block;
	margin: auto;
	width: 150px;
}
.client-bg-color {
	background: var(--color-black-300);
}

/* --- Contact Section ---- */
.contact-sec {
	background: url('../img/team-working.jpg') no-repeat center center;
	background-size: cover;
	padding: 8rem 0;
	position: relative;
	z-index: 1;
}
.contact-sec::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.6;
	background-color: #000;
}
.contact-sec .sub-heading {
	text-align: center;
}
.contact-sec .sub-heading h3 {
	color: var(--color-orange);
}
.contact-sec .sub-heading h2 {
	color: var(--color-white);
}
.contact-content {
	text-align: center;
}
.contact-content p {
	max-width: 600px;
	color: var(--color-white);
	margin: 0 auto 1.5rem;
}
.contact-links {
	display: flex;
	justify-content: center;
	gap: 1rem;
}
.contact-links .btn {
	line-height: 50px;
	font-size: 1.1rem;
}
.cont-us-link {
	background: var(--color-white);
	color: var(--color-blue);
}
.cont-us-link:hover {
	background: var(--color-black-300);
	color: var(--color-white);
}

/* ---- Blog Section ---- */
.blog-sec .grid-column-three {
	gap: 2rem;
}
.blog-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}
.blog-card {
	border-radius: 0.5rem;
}
.blog-image {
	margin-bottom: 1rem;
}
.blog-img {
	width: 100%;
	border-radius: 0.5rem;
}
.blog-card .blog-link {
	font-size: 1.5rem;
	color: var(--color-black-300);
	margin: 1rem 0;
	font-weight: 700;
	transition: var(--transition);
}
.blog-card .blog-link:hover {
	color: var(--color-blue);
}
.blog-card p {
	margin: 1rem 0;
}
.blog-card .btn i {
	vertical-align: middle;
}
.blog-author ul {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--color-border);
}
.blog-author ul li {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 600;
}
.blog-author ul li i {
	color: var(--color-blue);
}
/* ---- Footer Section ---- */
.footer-sec {
	position: relative;
	z-index: 1;
	background-color: #000000;
	opacity: 0.9;
	color: var(--color-white);
}
.footer-sec::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.2;
	background: url('../img/footer-bg.png') no-repeat center center;
	/* background-repeat: no-repeat; */
	background-size: cover;
	/* background-position: center center; */
}
.footer-sec .container {
	border-left: 1px solid var(--border-color-accent);
	border-right: 1px solid var(--border-color-accent);
}
.col-1 {
	padding: 5rem 1rem;
}
.col-2 {
	padding: 5rem 1rem;
	border-left: 1px solid var(--border-color-accent);
	border-right: 1px solid var(--border-color-accent);
}
.col-3 {
	padding: 5rem 0;
}
.subscribe-box {
	margin-bottom: 2rem;
}
.subscribe-box h4 {
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 1rem;
}
.sbs-input-box {
	position: relative;
}
.sbs-input-box input {
	border: none;
	background: transparent;
	border-bottom: 1px solid var(--border-color-accent);
	color: var(--color-white);
	padding: 0 6.8rem 0 0;
}
.sbs-input-box input:focus {
	outline: none;
}
.sbs-btn {
	position: absolute;
	top: 0;
	right: 0;
	height: 2.5rem;
	width: 6rem;
	border: none;
	background: transparent;
	color: var(--color-white);
	font-weight: 600;
	font-size: 1rem;
	font-family: 'Dosis', sans-serif;
	cursor: pointer;
}
.company-adress {
	display: flex;
	gap: 1.2rem;
	margin-bottom: 2rem;
}
.company-adress p {
	font-size: 1.3rem;
	font-weight: 500;
}
.map-icon {
	padding-top: 0.5rem;
}
.map-icon i {
	font-size: 1.5rem;
}

.ft-social-links {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.ft-social-links a {
	height: 3rem;
	width: 3rem;
	border-radius: 100%;
	background: var(--bg-color-white-fade);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	transition: var(--transition);
}
.ft-social-links a i {
	font-size: 1.3rem;
}
.ft-social-links a:hover {
	background: var(--color-blue);
}
.quick-links-container h4 {
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 1.5rem;
}
.ft-links ul li {
	margin-bottom: 1rem;
}
.ft-links ul li a {
	font-size: 1.1rem;
	color: var(--color-text);
	font-weight: 500;
	transition: var(--transition);
}
.ft-links ul li a:hover {
	color: var(--color-white);
	text-decoration: underline;
}
.company-info-container {
	padding: 0 1rem 2rem 1rem;
}
.company-info-container p {
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
	color: var(--bg-color-black-gray-200);
	font-weight: 700;
	transition: var(--transition);
}
.company-info-container:hover p {
	color: var(--color-white);
}
.company-info-container a {
	color: var(--color-white);
	font-size: 1.3rem;
	font-weight: 500;
	transition: var(--transition);
}
.company-info-container a:hover {
	color: var(--color-orange);
}
.mail-container {
	padding: 2rem 1rem;
	border-top: 1px solid var(--border-color-accent);
	border-bottom: 1px solid var(--border-color-accent);
}
.copyright {
	padding: 2rem 1rem;
}
.copyright p {
	color: var(--color-white);
}
.copyright p span {
	color: var(--color-orange);
}

/* =======================
 	INNER PAGES CSS 
======================= */

/* ---- About Page CSS ---- */

.inner-banr-sec {
	background: url('../img/aboutbanner.jpg') no-repeat center center;
	background-size: cover;
	height: 400px;
	position: relative;
}
.usp-sec .grid-column-three {
	gap: 2rem;
}
.usp-card {
	text-align: center;
	padding: 2rem;
	box-shadow: 0px 10px 57px 0px rgba(0, 0, 0, 0.08);
	border-radius: 0.5rem;
	transform: translateY(0);
	transition: var(--transition);
}
.usp-card:hover {
	transform: translateY(-10px);
}

.usp-img-container img {
	width: 6rem;
	display: block;
	margin: 0 auto 1rem;
}
.usp-card h4 {
	font-size: 1.5rem;
	margin-bottom: 0.8rem;
	color: var(--color-black-300);
}
.usp-card p {
	margin-bottom: 1.5rem;
}
.usp-card .btn {
	margin: auto;
	line-height: 45px;
}

.work-process-sec .grid-column-four {
	gap: 1.5rem;
}
.work-process-sec .usp-card {
	padding: 2rem 1rem;
	text-align: left;
	box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.08);
}
.work-process-sec .usp-card .usp-img-container {
	height: 5rem;
	width: 5rem;
	border-radius: 0.5rem;
	padding: 1rem;
	border: 5px solid rgb(123, 104, 238, 0.05);
	background-color: rgb(123, 104, 238, 0.05);
	transition: var(--transition);
}
.work-process-sec .usp-card:hover .usp-img-container {
	border-color: rgba(124, 104, 238, 0.363);
}
.work-process-sec .usp-card .usp-img-container img {
	margin: inherit;
	width: 100%;
}
.work-process-sec .usp-card h4 {
	margin-top: 1rem;
}
.work-process-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}

/* ---- Faq Section ---- */

.acc-container {
	width: 800px;
	margin: auto;
}
.acc-box {
	width: 100%;
	cursor: pointer;
}

.acc-heading {
	background: var(--bg-section-color);
	padding: 1rem;
	border-bottom: 1px solid var(--color-border);
}

.acc-text {
	max-height: 0;
	overflow: hidden;
}
.acc-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.5rem;
	color: var(--e-global-color-638d055);
}
.acc-heading h5 {
	font-weight: 600;
	color: var(--color-black-300);
}
.symbol {
	font-size: 1.5rem;
	font-weight: 600;
}
.acc-box.active .acc-text {
	max-height: 100vh;
	transition: max-height 3s ease;
}
.acc-text p {
	line-height: 1.6;
	color: var(--e-global-color-primary);
}
.acc-box.active .acc-text p {
	padding: 0.8rem 1rem;
}
.faq-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}

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

.srvc-banr-sec {
	background: url('../img/service-bg2.jpg') no-repeat center center;
	background-size: cover;
	height: 400px;
	position: relative;
}

/* ---- Why Choose us Section ---- */
.choose-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}
.choose-image img {
	width: 60px;
	transform: scale(1);
	transition: var(--transition);
}
.choose-card {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
	transition: var(--transition);
}
.choose-card:hover .choose-image img {
	transform: scale(1.1);
}
.choose-card h4 {
	font-size: 1.5rem;
	color: var(--color-black-300);
	margin-bottom: 0.5rem;
}
.choose-us-image {
	padding-top: 4rem;
}
.choose-us-image img {
	width: 100%;
	display: block;
	transform: scale(0.9);
	transition: var(--transition);
}
.choose-us-image:hover img {
	transform: scale(1);
}

/* ======================
	Blogs Page
======================	 */
.blog-page-sec .grid-column-three {
	gap: 3rem 2rem;
}

/* ======================
	Contact Page
======================	 */
.contact-page-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}
.contact-page-sec .sub-heading h2 {
	max-width: 500px;
	margin: 0 auto 0.5rem;
}
.conatct-para {
	max-width: 500px;
	margin: 0 auto 3rem;
	text-align: center;
}
.form-content-container {
	display: flex;
	gap: 2rem;
}
.contact-image {
	width: 30%;
}
.form-container {
	width: 70%;
}
.contact-container .grid-column-three {
	gap: 2rem;
}
.conatct-card {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
	padding: 2rem;
}
.contact-icon i {
	font-size: 2.8rem;
	color: var(--color-blue);
}
.contact-info h5 {
	font-size: 2rem;
	font-weight: 600;
	color: var(--color-black-200);
	margin-bottom: 0.2rem;
}
.form-content-container {
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
	padding: 2rem;
	border-radius: 0.8rem;
}
.contact-image {
	position: relative;
	overflow: hidden;
	border-radius: 0.5rem;
}
.contact-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0.5rem;
}
.contact-bg {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.377);
	z-index: 1;
}
.form-container h3 {
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}
.form-container h2 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}
.form-box-1 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
.input-box {
	margin-bottom: 1rem;
}
.input-box textarea {
	border: 1px solid var(--color-border);
	padding: 1rem;
	border-radius: 0.5rem;
	width: 100%;
	height: 8rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-text);
}
.input-box textarea::placeholder {
	color: var(--color-text);
}
.input-box textarea:focus {
	outline: 1px solid var(--color-blue);
	border: none;
}
.form-para {
	margin-bottom: 1.5rem;
	max-width: 600px;
	line-height: 1.6;
}
.form-btn {
	border: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}
.form-btn i {
	font-size: 1.3rem;
}

/* ======================
	Case Study Page
======================	 */
.case-stduy-sec .sub-heading {
	text-align: center;
	margin-bottom: 3rem;
}

.case-study-content h2 {
	margin-bottom: 1rem;
}

.case-study-content h4 {
	margin-bottom: 1rem;
	font-size: 1.8rem;
	font-weight: 500;
	color: var(--bg-color-black-gray-200);
}
.case-study-content p {
	margin-bottom: 1rem;
}

.case-study-card {
	margin-bottom: 8rem;
}
.case-study-card .grid-column-two {
	gap: 2rem;
	align-items: center;
}

.case-study-image .work-card {
	padding: 0.5rem;
	overflow: hidden;
	height: 24rem;
}
.case-study-image .website-link {
	height: 100%;
}
.case-stduy-sec .case-study-card:last-child {
	margin: 0;
}

.main {
	text-align: center;
}

.marq {
	padding-top: 30px;
	padding-bottom: 30px;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.geek1 {
	font-size: 36px;
	font-weight: bold;
	color: white;
	padding-bottom: 10px;
}
.mark-srvc-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mark-heading {
	font-size: 1.5rem;
}

/* ======================
	Blog Deatil Page
======================	 */
.detail-image {
	width: 100%;
	display: block;
	margin-bottom: 2rem;
}
.blg-dtl-info ul {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1rem 0;
	font-weight: 600;
	color: var(--color-blue);
}
.para h4 {
	font-size: 1.8rem;
	color: var(--color-black-200);
	margin-bottom: 0.8rem;
}
.para p {
	margin-bottom: 0.8rem;
	line-height: 1.3;
}
.para p:last-child {
	margin-bottom: 0;
}
.para {
	margin-bottom: 1.8rem;
}
.blog-detail-content h5 {
	font-size: 2.3rem;
	color: var(--color-black-200);
	margin: 2rem 0;
}
.blog-detail-sec .container {
	width: 700px;
}

/* ======================
	Privacy Page
======================	 */
.policy-box {
	margin-bottom: 1.5rem;
}
.policy-box h4 {
	font-size: 1.8rem;
	color: var(--color-black-200);
	margin-bottom: 1rem;
}
.policy-box p {
	margin-bottom: 1rem;
}
.policy-box p:last-child {
	margin-bottom: 0;
}

/* ======================
	Terms condition Page
======================	 */

.terms-box {
	margin-bottom: 1.5rem;
}
.terms-box h4 {
	font-size: 1.8rem;
	color: var(--color-black-200);
	margin-bottom: 1rem;
}
.terms-box p {
	margin-bottom: 1rem;
}
.terms-box p span {
	color: var(--color-black-200);
	font-weight: 600;
}
.terms-box p:last-child {
	margin-bottom: 0;
}

/*======================
	Web Devlopment Page
=========================*/
.web-dev-sec .grid-column-two {
	align-items: center;
}

.inner-srvc-content {
	padding-right: 2rem;
}
.inner-srvc-content h2 {
	margin-bottom: 1.5rem;
}
.inner-srvc-content p {
	margin-bottom: 1rem;
}
.inner-srvc-image img {
	width: 100%;
}
.cnct-sec {
	background: var(--bg-section-color);
	padding: 1.5rem 0;
}
.contact-info-two {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.cnct-info-content h4 {
	font-size: 1.8rem;
	color: var(--color-black-200);
}
.contact-info-links {
	display: flex;
	gap: 1rem;
}
.cnct-links {
	padding: 1rem;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	border-radius: 0.5rem;
	transition: var(--transition);
}
.cnct-links:hover {
	color: var(--color-white);
	background: var(--color-blue);
	border-color: transparent;
}
.cnct-links i {
	font-size: 1.4rem;
}

.services-provider {
	/* border-bottom: 1px solid #ccc; */
	/* background-color: #ededed; */
}
.services-provider .grid-column-three {
	gap: 2rem;
}
.services-provider .value-card {
	text-align: left;
	/* background-color: #fff; */
	box-shadow: none;
	transition: none;
	transform: none;
}
.services-provider .value-card h4 {
	margin-bottom: 1rem;
}
.services-provider .value-card:hover {
	transition: none;
	transform: none;
}
.services-provider .value-card ul li {
	list-style: none;
	padding: 7px 0;
	position: relative;
	font-size: 1.2em;
}
.services-provider .value-card ul li a {
	color: #000;
}
.services-provider .value-card ul li a:hover {
	color: #0d6efd;
}
.services-provider .value-card ul li i {
	font-size: 14px;
	margin-right: 5px;
}
.txt-color {
	color: #0d6efd;
}

.work-process-sec .grid-column-three {
	gap: 2rem;
}