/** @format */

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

* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	scroll-behavior: smooth;
	transition: all 0.4s ease;
}
body {
	font-family: "Montserrat", sans-serif;
}
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 0px;
}
a {
	display: inline-block;
	text-decoration: none;
	color: #000;
}
p {
	font-family: "Roboto", sans-serif;
}
img {
	width: 100%;
	height: auto;
}
ul {
	padding: unset;
}
li {
	list-style-type: none;
}
.container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 15px;
}
:root {
	--blue: #1997f2;
	--white: #fff;
	--gray: #727272;
	--black: #000;
	--navy-blue: #7dc9ff;
	--sky-blue: #dff1ff;
	--form-color: #eee;
}

/* SITE BTN CSS */
.global-btn:hover {
	background: transparent;
	color: var(--white) !important;
	border: 2px solid var(--white);
	padding-top: 10px !important;
	padding-left: 10px !important;
	transition: all 0.4s ease;
}
a.global-btn {
	background: var(--blue);
	width: 175px;
	height: 65px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border: 2px solid transparent;
	z-index: unset;
	padding: 0px !important;
	transition: all 0.4s ease;
}
a.global-btn:before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 175px;
	height: 65px;
	z-index: -1;
	border: 2px solid var(--blue);
	border-radius: 8px;
	opacity: 0;
	transition: all 0.4s ease;
	z-index: -1;
}
a.global-btn:hover:before {
	transition: all 0.4s ease;
	top: 6px;
	left: 6px;
	opacity: 1;
}
/* SITE BTN CSS */

/* HEADER CSS START */
header {
	position: absolute;
	top: 0;
	width: 100%;
	padding-top: 57px;
	z-index: 1;
}
header nav a img {
	width: 100%;
	max-width: 173px;
}
header nav .navbar-collapse {
	justify-content: end;
}
header nav .navbar-nav {
	flex-direction: row;
	align-items: center;
}
header nav .navbar-collapse ul li {
	padding: 0 25.2px;
}
header nav .navbar-collapse ul li:first-child {
	padding-left: 0px;
}
header nav .navbar-collapse ul li:last-child {
	padding-right: 0px;
}
header nav .navbar-collapse ul li a {
	color: #fff;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
a.global-btn {
	color: #fff;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
header nav .navbar-collapse ul li a:hover {
	color: var(--blue);
}

/* HEADER CSS END */

/* HOME BANNER CSS START */
section.home-banner {
	background: url(../images/home-banner.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc(100vh + 100px);
	position: relative;
	z-index: 0;
}
section.home-banner .home-banner-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	gap: 24px;
}
section.home-banner .home-banner-inner h1 {
	color: #fff;
	font-size: 70px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
section.home-banner .home-banner-inner h1 span {
	color: var(--blue);
}
section.home-banner .home-banner-inner p {
	color: #fff;
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
}
section.home-banner .home-banner-counter {
	position: absolute;
	width: 100%;
	bottom: -60px;
	max-width: 1440px;
	margin: 0 auto;
	transform: translateX(-50%);
	left: 50%;
}
section.home-banner .home-banner-counter #counter-section {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
section.home-banner .home-banner-counter #counter-section #counter-outer {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white);
	padding: 28px 25px;
	width: 100%;
	justify-content: space-between;
	box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
}
section.home-banner
	.home-banner-counter
	#counter-section
	#counter-outer
	#counter-box
	span.counter,
section.home-banner
	.home-banner-counter
	#counter-section
	#counter-outer
	#counter-box
	span.counter-text {
	color: var(--blue);
	font-size: 35px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
}
section.home-banner
	.home-banner-counter
	#counter-section
	#counter-outer
	#counter-box
	h6 {
	color: var(--blue);
	font-size: 25px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px; /* 120% */
}
section.home-banner
	.home-banner-counter
	#counter-section
	#counter-outer
	#counter-box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 22px;
	width: 100%;
	max-width: 33%;
	border-right: 2px solid var(--blue);
	padding: 8px 0;
}
section.home-banner
	.home-banner-counter
	#counter-section
	#counter-outer
	#counter-box:last-child {
	border-right: unset;
}
/* HOME BANNER CSS END */

/* BEST SERVICES CSS START */

section.best-service {
	background: url(../images/best-service-bg.png);
	background-repeat: no-repeat;
	background-size: 36%;
	background-position: right 33%;
	padding: 194px 0 115px;
}
section.best-service .best-heading {
	width: 100%;
	max-width: 506px;
	margin-bottom: 87px;
}
section.best-service .best-heading h2 {
	color: var(--black);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	margin-bottom: 25px;
}
section.best-service .best-heading p {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 34px; /* 141.667% */
}
section.best-service .best-box-outer {
	display: flex;
	align-items: flex-start;
	row-gap: 82px;
	column-gap: 19px;
	flex-wrap: wrap;
}
section.best-service .best-box-outer .service-box {
	position: relative;
	width: 100%;
	max-width: 455px;
	padding: 78px 41px 61px;
	background: var(--white);
	border-radius: 8px;
	box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
}
section.best-service .best-box-outer .service-box:hover {
	background: var(--blue);
}
section.best-service .best-box-outer .service-box:hover .service-icon {
	background: var(--white);
}
section.best-service .best-box-outer .service-box:hover h3,
section.best-service .best-box-outer .service-box:hover p {
	color: var(--white);
	transition: all 0.4s ease;
}
section.best-service .best-box-outer .service-box:hover .service-icon svg path {
	fill: var(--blue);
	stroke: var(--blue);
}
section.best-service .best-box-outer .service-box .service-icon {
	box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
	background: var(--blue);
	width: 100%;
	max-width: 90px;
	height: 90px;
	border-radius: 50%;
	position: absolute;
	top: -40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

section.best-service .service-box .service-icon svg {
}
section.best-service .best-box-outer .service-box h3 {
	color: var(--black);
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px; /* 107.143% */
	margin-bottom: 30px;
	transition: all 0.4s ease;
}
section.best-service .best-box-outer .service-box p {
	color: #727272;
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px; /* 136.364% */
	transition: all 0.4s ease;
}
/* BEST SERVICES CSS END */

/* ACCORDIAN CSS START */
section.build {
	background: url(../images/build.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
	padding: 115px 0;
}
section.build .build-outer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
section.build .build-outer .build-data {
	width: 100%;
	max-width: 48%;
}
section.build .build-outer .accordion-data {
	width: 100%;
	max-width: 48%;
}
section.build .build-outer .build-data h2 {
	color: var(--black);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
	margin-bottom: 25px;
}
section.build .build-outer .build-data p {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 45px; /* 187.5% */
	margin-bottom: 25px;
}
section.build .build-outer .build-list ul {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
section.build .build-outer .build-list ul li {
	color: #727272;
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	display: flex;
	align-items: baseline;
	gap: 27px;
}
section.build .build-outer .build-list ul li i {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--blue);
	font-size: 12px;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
}
section.build
	.build-outer
	.accordion-data
	.accordion-item
	h2.accordion-header
	button.accordion-button.collapsed {
	font-size: 22px;
	transition: all 0.4s ease;
}
section.build
	.build-outer
	.accordion-data
	.accordion-item
	h2.accordion-header
	button.accordion-button {
	background: var(--blue);
	color: var(--white);
	font-size: 28px;
	font-style: normal;
	font-weight: 600;
	line-height: 30px; /* 100% */
	transition: all 0.4s ease;
	position: relative;
}
section.build
	.build-outer
	.accordion-data
	.accordion-item
	h2.accordion-header
	button.accordion-button:before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 94%;
	height: 2px;
	background-color: var(--navy-blue);
	left: 50%;
	transform: translate(-50%, 0);
}
section.build
	.build-outer
	.accordion-data
	.accordion-item
	h2.accordion-header
	button.accordion-button.collapsed:before {
	width: 100%;
	height: 0px;
}
section.build .build-outer .accordion-data .accordion-item {
	background-color: transparent;
}
section.build .build-outer .accordion-data .accordion-item {
	margin-bottom: 21px;
}
section.build .build-outer .accordion-data .accordion-item:last-child {
	margin-bottom: unset;
}
section.build .build-outer .accordion-data .accordion-body {
	color: var(--white);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px; /* 145.455% */
	background-color: var(--blue);
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.accordion-button:focus {
	box-shadow: unset;
}
.accordion-button::after {
	content: "\f107";
	color: #1997f2;
	font-family: "Font Awesome 6 Pro";
	background-image: unset;
	background-color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	transition: all 0.4s ease;
	padding-top: 4px;
}
.accordion-button:not(.collapsed)::after {
	background-image: unset;
	width: 40px;
	height: 40px;
	transition: all 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

section.build.accordion-flush .accordion-item .accordion-button,
.accordion-flush .accordion-item .accordion-button:not(.collapsed) {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
section.build.accordion-flush .accordion-item .accordion-button,
.accordion-flush .accordion-item .accordion-button.collapsed {
	border-radius: 8px;
}
/* ACCORDIAN CSS END */

/* ADVENTURE CSS START */
section.adventure {
	background-color: var(--sky-blue);
	padding: 85px 0;
}
section.adventure .adventure-inner {
	width: 100%;
	max-width: 1266px;
	margin: 0 auto;
	border: 2px solid var(--blue);
	border-radius: 8px;
	padding: 64px 156px 42px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
section.adventure .adventure-inner h4 {
	color: var(--blue);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
	margin-bottom: 15px;
}
section.adventure .adventure-inner p {
	color: var(--gray);
	text-align: center;
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 45px; /* 204.545% */
	margin-bottom: 25px;
}
.global-btn.adventure-btn:hover {
	background: var(--blue);
	color: var(--white) !important;
	border: 2px solid var(--white);
	padding-top: 10px !important;
	padding-left: 10px !important;
	transition: all 0.4s ease;
}
a.global-btn.adventure-btn {
	background: transparent;
	width: 175px;
	height: 65px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border: 2px solid var(--blue);
	z-index: unset;
	padding: 0px !important;
	transition: all 0.4s ease;
	color: var(--black);
}
a.global-btn.adventure-btn:before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 175px;
	height: 65px;
	z-index: -1;
	border: 2px solid var(--blue);
	border-radius: 8px;
	opacity: 0;
	transition: all 0.4s ease;
	z-index: -1;
}
a.global-btn.adventure-btn:hover:before {
	transition: all 0.4s ease;
	top: -8px;
	left: -8px;
	opacity: 1;
	z-index: 1;
}

/* ADVENTURE CSS END */

/* TESTIMONIAL CSS START */
section.testimonial {
	background: var(--sky-blue);
	padding: 40px 330px;
}
section.testimonial .testimonial-inner {
	margin-bottom: 45px;
	text-align: center;
}
section.testimonial .testimonial-inner h2 {
	color: var(--black);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
	margin-bottom: 15px;
}
section.testimonial .testimonial-inner p {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 34px; /* 141.667% */
}

/* SLIDER CSS START*/
section.testimonial .swiper {
	width: 100%;
	height: 100%;
}

section.testimonial .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: var(--blue);
	display: flex;
	align-items: center;
	padding: 40px 60px;
}

section.testimonial .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* section.testimonial .swiper-slide {
	width: 68% !important;
} */
section.testimonial .swiper-slide-active {
	width: 66% !important;
	background: var(--blue);
}
section.testimonial .swiper-slide .slide-box .box-data {
	display: none;
}
section.testimonial .swiper-slide-active .slide-box .box-data {
	display: block;
}
section.testimonial .swiper-slide .slide-box {
	display: flex;
	align-items: flex-start;
	gap: 75px;
}
section.testimonial .swiper-slide .slide-box .box-img img {
	width: 264px;
	height: 264px;
	margin-bottom: 28px;
	border-radius: 61px;
}
section.testimonial .swiper-slide .slide-box .box-img h5 {
	color: var(--white);
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: 34px; /* 141.667% */
}
section.testimonial .swiper-slide .slide-box .box-img h6 {
	color: var(--white);
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 34px; /* 154.545% */
}
section.testimonial .swiper-slide .slide-box .box-data {
	padding-top: 33px;
}
section.testimonial .swiper-slide .slide-box .box-data p {
	color: var(--white);
	font-family: "Roboto";
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px; /* 133.333% */
	text-align: left;
}
section.testimonial .swiper-button-next:after,
.swiper-button-prev:after {
	font-family: swiper-icons;
	font-size: 18px;
	text-transform: none !important;
	letter-spacing: 0;
	font-variant: initial;
	line-height: 1;
}
section.testimonial .swiper-button-prev,
.swiper-button-next {
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 50%;
}
/* SLIDER CSS END*/

/* TESTIMONIAL CSS END */

/********************************** SERVICE PAGE CSS START **********************************/

/* SERVICE BANNER CSS START */
section.service-banner {
	background: url(../images/service-banner.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 0;
	padding: 239px 0 185px;
}
section.service-banner .service-banner-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	gap: 24px;
}
section.service-banner .service-banner-inner h1 {
	color: #fff;
	font-size: 70px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}
section.service-banner .service-banner-inner h1 span {
	color: var(--blue);
}
section.service-banner .service-banner-inner p {
	color: var(--white);
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
}

section.service-banner .service-testimonial {
	position: absolute;
	width: 1440px;
	bottom: -63px;
	background: var(--white);
	text-align: center;
	padding: 20px 70px;
	border-radius: 8px;
	box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
	left: 50%;
	transform: translateX(-50%);
}
section.service-banner .service-testimonial .testimonial-box h5 {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 34px;
}
section.service-banner .service-testimonial .testimonial-box h6 {
	color: var(--blue);
	font-family: "Roboto";
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	line-height: 34px;
}
section.service-banner .service-testimonial .testimonial-box {
	position: relative;
}
section.service-banner .service-testimonial .testimonial-box::before {
	content: "\f10e";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	top: -20px;
	left: -60px;
	font-size: 32px;
	color: var(--blue);
	transform: rotateY(180deg);
}
section.service-banner .service-testimonial .testimonial-box::after {
	content: "\f10d";
	font-family: "Font Awesome 6 Pro";
	position: absolute;
	font-weight: 900;
	bottom: -20px;
	right: -60px;
	font-size: 32px;
	color: var(--blue);
	transform: rotate(180deg);
}
/* SERVICE BANNER CSS END */

/* PARTNER CSS START */

section.partner {
	padding: 208px 0 57px;
}
section.partner .partner-inner {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}
section.partner .partner-inner .partner-img {
	width: 100%;
	max-width: 710px;
}
section.partner .partner-inner .partner-data h2 {
	color: var(--black);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
	margin-bottom: 34px;
}
section.partner .partner-inner .partner-data p {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 34px; /* 154.545% */
	margin-bottom: 38px;
}
section.partner .partner-inner .partner-data .partner-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 27px;
	width: 100%;
	max-width: 694px;
}
section.partner .partner-inner .partner-data .partner-option h3 {
	color: var(--black);
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px; /* 136.364% */
}
section.partner .partner-inner .partner-data .partner-option h3 img {
	width: 100%;
	max-width: 30px;
	margin-right: 27px;
}
section.partner .partner-inner .partner-data .partner-list ul li {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px; /* 145.455% */
	display: flex;
	align-items: baseline;
	gap: 27px;
	margin-bottom: 25px;
}
section.partner .partner-inner .partner-data .partner-list ul li:last-child {
	margin-bottom: unset;
}
section.partner .partner-inner .partner-data .partner-list ul li i {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--blue);
	font-size: 12px;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
}
/* PARTNER CSS END */

/* SERVICE PAGE SEC CSS START */
section.service-2 {
	padding: 57px 0 127px;
}
section.service-2 .service-page-heading h2 {
	color: var(--black);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
	text-align: center;
	margin-bottom: 52px;
}
section.service-2 .service-2-box {
	display: flex;
	align-items: center;
	gap: 19px;
	position: relative;
	transition: all 0.4s ease;
	flex-wrap: wrap;
	justify-content: center;
}
section.service-2 .service-2-box .box-inner {
	width: 100%;
	max-width: 32%;
	cursor: pointer;
	position: relative;
	transition: all 0.4s ease;
}
section.service-2 .service-2-box .box-inner img {
	width: 100%;
	max-width: 468px;
	cursor: pointer;
}
section.service-2 .service-2-box .box-inner .web-box-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	justify-content: center;
	transition: all 0.4s ease;
}

section.service-2 .service-2-box .box-inner .web-box-icon .web-icon {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blue);
	transition: all 0.4s;
}
section.service-2 .service-2-box .box-inner:hover .web-box-icon .web-icon {
	width: 100%;
	height: 100%;
	border-radius: 0%;
	transition: all 0.4s;
	opacity: 0.8;
}
section.service-2 .service-2-box .box-inner .web-box-icon .web-icon img {
	position: relative;
	top: 0px;
	transition: all 0.8s;
	aspect-ratio: 2/2;
	object-fit: contain;
}
section.service-2 .service-2-box .box-inner:hover .web-box-icon .web-icon img {
	position: relative;
	top: -10px;
	transition: all 0.8s;
}

section.service-2 .service-2-box .box-inner .icon-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	flex-direction: column;
	background: var(--blue);
	width: 90px;
	height: 90px;
	border-radius: 50%;
	opacity: 0;
	z-index: -1;
}
section.service-2 .service-2-box .box-inner .web-icon img {
	width: 100%;
	max-width: 47px;
}
section.service-2 .service-2-box .box-inner .web-heading h3 {
	top: 70%;
	position: absolute;
	transition: all 0.1s;
	width: 100%;
	text-align: center;
	color: var(--white);
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 30px; /* 107.143% */
	opacity: 0;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
}
section.service-2 .service-2-box .box-inner:hover .web-heading h3 {
	position: absolute;
	opacity: 1;
	transition: all 2s;
	top: 60%;
}

/* SERVICE PAGE SEC CSS END */

/* PORTFOLIO BANNER CSS START */
section.service-banner.portfolio {
	background: url(../images/portfolio-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 0;
	padding: 239px 0 185px;
}
/* PORTFOLIO BANNER CSS END */

/* VISION CSS START */
section.vision {
	padding: 205px 0 57px;
}
section.vision .vision-inner {
	display: flex;
	align-items: flex-start;
	gap: 54px;
}

section.vision .vision-inner .vision-img-box {
	width: 100%;
	max-width: 40%;
	display: flex;
	align-items: flex-start;
	gap: 22px;
}
section.vision .vision-inner .vision-img-box .vision-left img.w-288,
section.vision .vision-inner .vision-img-box .vision-right img.w-288 {
	width: 100%;
	max-width: 288px;
}
section.vision .vision-inner .vision-img-box .vision-right,
section.vision .vision-inner .vision-img-box .vision-left {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
section.vision .vision-inner .vision-img-box .vision-left .experience {
	width: 100%;
	max-width: 288px;
	padding: 40px 63px;
	border-radius: 8px;
	background-color: var(--blue);
}
section.vision .vision-inner .vision-img-box .vision-left .experience p {
	color: var(--white);
	font-size: 25px;
	font-style: normal;
	font-weight: 700;
	line-height: 45px; /* 180% */
}
section.vision .vision-inner .vision-data {
	width: 100%;
	max-width: 60%;
}
section.vision .vision-inner .vision-data {
	width: 100%;
	max-width: 60%;
}
section.vision .vision-inner .vision-data h4 {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px; /* 145.455% */
	margin-bottom: 20px;
}
section.vision .vision-inner .vision-data .vision-heading h2 {
	color: var(--black);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
	margin-bottom: 12px;
}
section.vision .vision-inner .vision-data .vision-heading p {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 45px; /* 204.545% */
	margin-bottom: 14px;
}
section.vision .vision-inner .vision-data .vision-question {
	margin-bottom: 29px;
}
section.vision .vision-inner .vision-data .vision-question:last-child {
	margin-bottom: unset;
}
section.vision .vision-inner .vision-data .vision-question h3 {
	color: var(--black);
	font-size: 22px;
	font-style: normal;
	font-weight: 600;
	line-height: 32px; /* 145.455% */
	margin-bottom: 13px;
}
section.vision .vision-inner .vision-data .vision-question p {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 40px; /* 181.818% */
}
/* VISION CSS END */

/* EXPLORE CREATIVE CSS START */

section.explore {
	padding: 57px 0px 115px;
}
section.explore .explore-heading {
	margin-bottom: 55px;
}
section.explore .explore-heading h2 {
	color: var(--black);
	text-align: center;
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
}
section.explore .product-outer-box {
	display: flex;
	align-items: center;
	gap: 54px;
	margin-bottom: 45px;
}
section.explore .product-outer-box:last-child {
	margin-bottom: unset;
}
section.explore .product-outer-box .product-data {
	width: 100%;
	max-width: 40%;
}
section.explore .product-outer-box.design .product-img {
	width: 100%;
	max-width: 40%;
}
section.explore .product-outer-box.design .product-data {
	width: 100%;
	max-width: 60%;
}
section.explore .product-outer-box .product-data h2 {
	color: var(--black);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
	margin-bottom: 44px;
}
section.explore .product-outer-box .product-data h2 span {
	color: var(--black);
	font-size: 70px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 64.286% */
	margin-right: 36px;
}
section.explore .product-outer-box .product-list ul {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
section.explore .product-outer-box .product-list ul li {
	display: flex;
	align-items: baseline;
	gap: 30px;
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 40px; /* 181.818% */
}
section.explore .product-outer-box .product-list ul li i {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--blue);
	font-size: 12px;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
}
section.explore .product-outer-box .product-img {
	width: 100%;
	max-width: 60%;
	display: flex;
	flex-wrap: wrap;
	row-gap: 29px;
	column-gap: 26px;
}
section.explore .product-outer-box .product-img img.w-784 {
	width: 100%;
	max-width: 100%;
}

section.explore .product-outer-box .product-img img.w-371 {
	width: 100%;
	max-width: 48%;
}
section.explore .product-outer-box .product-img img.w-387 {
	width: 100%;
	max-width: 48%;
}
section.explore .product-outer-box.design .product-img img.w-371 {
	width: 100%;
	max-width: 47.1%;
}

/* EXPLORE CREATIVE CSS END */

/********************************** SERVICE PAGE CSS END **********************************/

/********************************** ABOUT PAGE CSS START **********************************/
section.service-banner.about {
	background: url(../images/about-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 0;
	padding: 239px 0 185px;
}

section.about-outer {
	padding: 205px 0 115px;
}
section.about-outer .about-box-inner {
	display: flex;
	align-items: flex-start;
	gap: 67px;
}
section.about-outer .about-box-inner .about-data {
	width: 100%;
	max-width: 40%;
}
section.about-outer .about-box-inner .about-data h2 {
	color: var(--black);
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 45px; /* 128.571% */
	margin-bottom: 28px;
}
section.about-outer .about-box-inner .about-data .about-list ul {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: 15px;
}
section.about-outer .about-box-inner .about-data .about-list ul li {
	display: flex;
	align-items: baseline;
	gap: 16px;
}
section.about-outer
	.about-box-inner
	.about-data
	.about-list
	ul
	li
	.list-box
	h4 {
	color: var(--black);
	font-size: 22px;
	font-style: normal;
	font-weight: 600;
	line-height: 32px; /* 145.455% */
	margin-bottom: 15px;
}
section.about-outer .about-box-inner .about-data .about-list ul li .list-box p {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px; /* 145.455% */
	margin: unset;
}
section.about-outer .about-box-inner .about-data .about-list ul li i {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--blue);
	font-size: 12px;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px;
}
section.about-outer .about-box-inner p {
	color: var(--gray);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px; /* 145.455% */
	margin-bottom: 52px;
}
section.about-outer .about-box-inner .about- {
	width: 100%;
	max-width: 40%;
}
section.about-outer .about-box-inner .about-data .about-list {
	position: relative;
}
section.about-outer
	.about-box-inner
	.about-data
	.about-list
	ul
	li:first-child:after {
	content: "";
	position: absolute;
	top: 46px;
	left: 9px;
	background: var(--blue);
	width: 2px;
	height: 138px;
}
section.about-outer
	.about-box-inner
	.about-data
	.about-list
	ul
	li:nth-child(2):after {
	content: "";
	position: absolute;
	top: 230px;
	left: 9px;
	background: var(--blue);
	width: 2px;
	height: 118px;
}
section.about-outer .about-box-inner .about-form-box .embark {
	background-color: var(--blue);
	padding: 24px 27px 36px;
	border-radius: 8px;
}
section.about-outer .about-box-inner .about-form-box {
	background: var(--white);
	box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 60%;
}
section.about-outer .about-box-inner .about-form-box .embark p {
	color: var(--white);
	font-size: 22px;
	font-style: normal;
	font-weight: 600;
	line-height: 40px; /* 181.818% */
	margin-bottom: unset;
	font-family: "Montserrat", sans-serif;
}
section.about-outer .about-box-inner .about-form-box .form-outer form {
	padding: 27px;
}

section.about-outer
	.about-box-inner
	.about-form-box
	.form-outer
	form
	.name-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding-bottom: 27px;
}
section.about-outer .about-box-inner .about-form-box .form-outer form .name {
	width: 100%;
	max-width: 48%;
	background-color: var(--form-color);
}
section.about-outer
	.about-box-inner
	.about-form-box
	.form-outer
	form
	.optional {
	width: 100%;
	border-radius: 8px;
	margin-bottom: 26px;
}
section.about-outer
	.about-box-inner
	.about-form-box
	.form-outer
	form
	.optional
	textarea {
	background-color: var(--form-color);
	border-radius: 8px;
	padding: 16px;
	outline: none;
	width: 100%;
	border: unset;
}
section.about-outer
	.about-box-inner
	.about-form-box
	.form-outer
	form
	.optional
	h3 {
	color: var(--black);
	font-family: "Montserrat";
	font-size: 22px;
	font-style: normal;
	font-weight: 600;
	line-height: 28px; /* 127.273% */
	margin-bottom: 23px;
}
section.about-outer
	.about-box-inner
	.about-form-box
	.form-outer
	form
	.name
	input {
	width: 100%;
	padding: 16px;
	border-radius: 8px;
	background: #eee;
	outline: none;
	border: unset;
}
section.about-outer
	.about-box-inner
	.about-form-box
	.form-outer
	form
	.name
	input:focus-visible {
	outline: unset;
	/* border: 2px solid var(--gray); */
}
section.about-outer .about-box-inner .about-form-box .form-outer .fotm-btn {
	width: 100%;
}

section.about-outer
	.about-box-inner
	.about-form-box
	.form-outer
	input[type="submit"] {
	width: 100%;
	padding: 16px;
	background: #1997f2;
	border-radius: 8px;
	color: #fff;
	font-size: 18px;
	outline: none;
	border: unset;
}
/********************************** ABOUT PAGE CSS END **********************************/
/* FOOTER CSS START */
footer {
	background-color: var(--blue);
	padding: 90px 0 61px;
}
footer .footer-inner {
	display: flex;
	align-items: flex-start;
	gap: 255px;
}
footer .footer-inner .footer-data .footer-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
	width: 150px;
}
footer .footer-inner .footer-data .footer-link a i {
	border-radius: 50%;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 40px;
	background: var(--white);
	padding: 20px;
	color: var(--blue);
	border: 1px solid transparent;
}
footer .footer-inner .footer-data .footer-link a i:hover {
	background: var(--blue);
	padding: 20px;
	color: var(--white);
	border: 1px solid var(--white);
}
footer .footer-inner .footer-data {
	width: 100%;
	max-width: fit-content;
}
footer .footer-inner .footer-data a img {
	width: 100%;
	max-width: 335px;
	margin-bottom: 20px;
}
footer .footer-inner .footer-data p {
	color: var(--white);
	font-family: "Roboto";
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	max-width: 365px;
	line-height: 40px;
}
footer .footer-inner .footer-data h3 {
	color: var(--white);
	font-family: "Roboto";
	font-size: 35px;
	font-style: normal;
	font-weight: 600;
	line-height: 34px;
	margin-bottom: 32px;
	padding-top: 30px;
}
footer .footer-inner .footer-data ul li a {
	color: var(--white);
	font-family: "Roboto";
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 34px; /* 141.667% */
	padding-bottom: 14px;
	display: inline-block;
}
footer .footer-inner .footer-data ul li:last-child a {
	padding-bottom: unset;
}
/* FOOTER CSS END */