@import url(https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Josefin+Sans:wght@300;400;600;700&display=swap);

*,
:after,
:before {
	box-sizing: inherit;
	margin: 0;
	padding: 0
}

html {
	font-size: 62.5%;
	scrollbar-width: thin;
	scrollbar-color: #3b4754 #f7fafc
}

::-moz-selection {
	background-color: #4f6072;
	color: #f7fafc
}

::selection {
	background-color: #4f6072;
	color: #f7fafc
}

body {
	box-sizing: border-box;
	overflow-x: hidden;
	background-color: #fff
}

body::-webkit-scrollbar {
	background-color: #f7fafc;
	width: .7rem
}

body::-webkit-scrollbar-thumb {
	background-color: #3b4754;
	border-radius: 8px;
	border: none
}

main {
	min-height: 85vh
}

a {
	text-decoration: none;
	color: currentColor
}

ul {
	list-style: none
}

article,
p {
	word-break: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto
}

img {
	display: block
}

body {
	font-size: 1.6rem;
	line-height: 1.6;
	font-family: Didact Gothic, sans-serif;
	color: #4f6072;
	letter-spacing: .5px;
	font-weight: 500
}

.page-headings {
	font-family: Josefin Sans, sans-serif;
	font-size: 11.9rem;
	letter-spacing: .5rem;
	font-weight: 600;
	line-height: 1.1
}

.heading-primary {
	font-size: 5rem;
	line-height: 1.3
}

.heading-primary,
.heading-secondary {
	font-family: Josefin Sans, sans-serif;
	font-weight: 400;
	color: #4f6072;
	-webkit-animation: ani-text 2s linear infinite alternate;
	animation: ani-text 2s linear infinite alternate;
	-webkit-filter: hue-rotate(90deg);
	filter: hue-rotate(90deg)
}

.heading-secondary {
	font-size: 3.7rem;
	line-height: 1.4
}

.heading-tertiary {
	font-size: 2.8rem
}

.heading-quaternary,
.heading-tertiary {
	color: #4f6072;
	font-family: Josefin Sans, sans-serif;
	font-weight: 400;
	line-height: 1.4
}

.heading-quaternary {
	font-size: 2.1rem
}

.scale-image {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	display: block
}

.section-gap {
	margin-bottom: 15rem !important
}

.margin-bottom-large {
	margin-bottom: 5.12rem !important
}

.margin-bottom-medium {
	margin-bottom: 3.2rem !important
}

.margin-bottom-small {
	margin-bottom: 1.6rem !important
}

.text-accent {
	color: #f28c8c !important
}

.text-black {
	color: #3b4754 !important
}

.text-white {
	color: #f7fafc !important
}

.text-light-grey {
	color: #e4e8ec !important
}

.pre-load {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: -ms-flexbox;
	display: flex;
	z-index: 1000;
	pointer-events: none;
}

.pre-load .pre-loadBox {
	width: 20%;
	height: 100vh;
	background-color: #3b4754;
	will-change: contents;
}

@-webkit-keyframes animate-hue {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg)
	}

	to {
		-webkit-filter: hue-rotate(1turn);
		filter: hue-rotate(1turn)
	}
}

@keyframes animate-hue {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg)
	}

	to {
		-webkit-filter: hue-rotate(1turn);
		filter: hue-rotate(1turn)
	}
}

@-webkit-keyframes ani-text {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg)
	}

	to {
		-webkit-filter: hue-rotate(120deg);
		filter: hue-rotate(120deg)
	}
}

@keyframes ani-text {
	0% {
		-webkit-filter: hue-rotate(0deg);
		filter: hue-rotate(0deg)
	}

	to {
		-webkit-filter: hue-rotate(120deg);
		filter: hue-rotate(120deg)
	}
}

nav {
	position: relative
}

.navbar {
	position: fixed;
	top: 0;
	left: 0;
	padding: 1rem 7.5vw;
	display: -ms-flexbox;
	display: flex;
	width: 100vw;
	z-index: 500;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	background-color: hsla(0, 0%, 100%, .8)
}

.navbar:before {
	content: "";
	position: absolute;
	background: inherit;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	box-shadow: inset 0 0 100rem hsla(0, 0%, 100%, .3);
	-webkit-filter: blur(10px);
	filter: blur(10px)
}

.navbar-logo {
	mix-blend-mode: luminosity
}

.navbar-logo svg {
	fill: #3b4754;
	width: 5rem;
	display: block
}

.navbar-logo img {
	width: 2rem;
	display: block
}

.navbar-menu {
	width: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center
}

.navbar-menu .nav-phone {
	display: none
}

.navbar-menu .menu-btn {
	position: relative;
	display: block;
	width: 3rem;
	height: 3rem
}

.navbar-menu .menu-btn:hover {
	-webkit-animation: animate-hue .4s ease infinite alternate;
	animation: animate-hue .4s ease infinite alternate
}

.navbar-menu .menu-btn button {
	cursor: pointer;
	border: none;
	outline: none;
	display: block;
	height: 3px;
	width: 3.5rem;
	background-color: #f28c8c
}

.navbar-menu .menu-btn button:after {
	content: "MENU";
	position: absolute;
	width: 100%;
	font-size: 1.2rem;
	bottom: 0;
	font-weight: 600;
	left: 0;
	text-align: right;
	letter-spacing: .3px;
	color: #f28c8c;
	line-height: 1;
	display: block
}

.navbar-menu .menu-btn button:before {
	content: "";
	position: absolute;
	width: 3.5rem;
	height: 3px;
	background-color: inherit;
	top: 1rem;
	left: 0
}

.navbar .navfull {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #3b4754;
	z-index: 200;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center
}

.navfull-link--item {
	font-size: 3.7rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: lowercase;
	font-family: Josefin Sans, sans-serif;
	color: #f7fafc;
	position: relative;
	text-align: center
}

.navfull-link--item:after {
	content: "";
	position: absolute;
	width: 120%;
	height: 4px;
	background-color: #f28c8c;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%) scale(0);
	pointer-events: none;
	transition: all .3s ease;
	mix-blend-mode: hard-light
}

.navfull-link--item:active:after,
.navfull-link--item:hover:after {
	-ms-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1)
}

#footer {
	background-color: #4f6072;
	width: 100vw;
	color: #f7fafc
}

#footer .footer {
	width: 85vw;
	margin: 0 auto;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: stretch;
	align-items: stretch;
	padding: 5rem 0
}

#footer .footer-logo {
	width: 30%;
	padding-right: 2rem
}

#footer .footer-logo--icon {
	width: 8rem
}

#footer .footer-logo h4 {
	width: 80%
}

#footer .footer-logo--social {
	margin-left: -.7rem;
	display: -ms-flexbox;
	display: flex
}

#footer .footer-logo--social a img {
	width: 3rem;
	height: 3rem;
	margin-right: 2rem
}

#footer .footer-sitelinks {
	width: 30%;
	text-align: center;
	position: relative;
	color: #f7fafc
}

#footer .footer-sitelinks:after {
	left: -1rem
}

#footer .footer-sitelinks:after,
#footer .footer-sitelinks:before {
	content: "";
	position: absolute;
	width: 2px;
	height: 100%;
	top: 0;
	background-color: #f28c8c
}

#footer .footer-sitelinks:before {
	right: -1rem
}

#footer .footer-sitelinks li {
	margin-bottom: 1rem;
	transition: .15s ease;
	font-size: 600;
	letter-spacing: 2px
}

#footer .footer-sitelinks li:focus,
#footer .footer-sitelinks li:hover {
	color: #f28c8c
}

#footer .footer-contact {
	width: 30%;
	text-align: right
}

#footer .footer-contact--address li {
	text-transform: capitalize;
	font-family: Josefin Sans, sans-serif
}

#footer .footer-contact--address address {
	width: 80%;
	text-align: right
}

#footer .footer-contact--email,
#footer .footer-contact--phone {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: center;
	align-items: center
}

#footer .copyright {
	text-align: center;
	color: #e4e8ec;
	font-size: 1.2rem
}

header {
	position: relative
}

.hero {
	width: 100vw
}

.hero,
.hero-image {
	display: -ms-flexbox;
	display: flex
}

.hero-image {
	width: 50%;
	-ms-flex-align: end;
	align-items: flex-end;
	position: relative;
	padding-right: 10rem
}

.hero-image:after {
	content: "";
	width: 50%;
	height: 95%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #e4e8ec;
	z-index: -1
}

.hero-image--socialIcons {
	margin-bottom: 10rem;
	width: 10rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center
}

.hero-image--socialIcons a img {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	margin: 1.5rem 0
}

.hero-image--img {
	height: 92vh;
	width: 85%;
	margin-top: 8vh
}

.hero-content {
	width: 50%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: start;
	align-items: flex-start;
	position: relative
}

.hero-content:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 20%;
	background-color: #e4e8ec;
	width: 120%;
	height: 40%;
	z-index: -1
}

.hero-content .hero-slider {
	width: 100%;
	position: relative;
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-auto-flow: column;
	grid-auto-columns: 33.3%;
	-ms-flex-align: stretch;
	align-items: stretch;
	gap: 1.5rem;
	overflow: scroll hidden;
	overflow-x: scroll;
	overflow-y: hidden;
	cursor: -webkit-grab;
	cursor: grab;
	scrollbar-width: thin;
	scrollbar-color: #3b4754 #f7fafc
}

.hero-content .hero-slider::-webkit-scrollbar {
	background-color: rgba(0, 0, 0, 0);
	height: .25rem;
	width: 0
}

.hero-content .hero-slider::-webkit-scrollbar-thumb {
	background-color: #4f6072;
	border-radius: 5px;
	border: none
}

.hero-slider--projectCard {
	border-radius: .2rem;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	padding-bottom: 2rem;
	margin: .5rem .5rem 2rem;
	position: relative;
	text-align: center;
	background-color: #fff
}

.hero-slider--projectCard .projectName {
	margin-top: 1.6rem;
	font-family: Josefin Sans, sans-serif
}

.hero-slider--projectCard .projectAddress {
	font-family: Josefin Sans, sans-serif;
	color: #f28c8c
}

.hero-slider--projectCard .projectimage {
	height: 25vh
}

.project-controls {
	width: 100%;
	margin-left: auto;
	padding: 2rem .5rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start
}

#aboutPointline {
	width: 100vw
}

#aboutPointline .aboutPointline {
	display: -ms-flexbox;
	display: flex;
	width: 85vw;
	margin: 0 auto;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center
}

#aboutPointline .aboutPointline-content {
	width: 40%;
	padding-right: 8rem;
	text-align: justify
}

#aboutPointline .aboutPointline-image {
	width: 60%;
	padding: 0 2rem;
	height: 60vh;
	position: relative
}

#aboutPointline .aboutPointline-image div {
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

#aboutPointline .aboutPointline-image:after {
	content: "";
	position: absolute;
	top: 50%;
	right: -7.5vw;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 87.5%;
	height: 140%;
	background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .8)), url(/static/about-us-bg-cde056f09c40206f2199808713a96993.jpg);
	background-size: cover;
	z-index: -1
}

#servicesPointline {
	width: 100vw;
	position: relative
}

#servicesPointline:after {
	content: "";
	position: absolute;
	width: 10vw;
	height: calc(100% + 30rem);
	top: -15rem;
	right: 0;
	background-color: #e4e8ec;
	z-index: -2
}

#servicesPointline .servicesPointline {
	width: 85vw;
	margin: 0 auto
}

#servicesPointline .servicesPointline-heading {
	text-align: center;
	position: relative
}

#servicesPointline .servicesPointline-heading hr {
	margin: 0 auto
}

#servicesPointline .servicesPointline-content {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: space-evenly;
	justify-content: space-evenly
}

#servicesPointline .servicesPointline-content--items {
	margin: 2rem 0;
	width: 25rem;
	text-align: center
}

.services-icons {
	width: 4.5rem;
	height: 4.5rem;
	display: block;
	margin: 1.2rem auto
}

.services-title {
	font-weight: 400;
	font-family: Josefin Sans, sans-serif
}

.servicePointline-pagelink {
	display: grid;
	place-items: center
}

#differentPointline {
	width: 100vw;
	position: relative
}

#differentPointline:after {
	height: 50vh;
	top: 0;
	right: 0;
	z-index: -2
}

#differentPointline:after,
#differentPointline:before {
	content: "";
	position: absolute;
	width: 10vw;
	background-color: #e4e8ec
}

#differentPointline:before {
	height: calc(100% + 15rem);
	top: -4rem;
	left: 0;
	z-index: -4
}

#differentPointline .differentPointline {
	width: 80vw;
	margin: auto;
	position: relative
}

#differentPointline .differentPointline h3 {
	width: 30rem;
	position: absolute;
	top: -4rem;
	left: 4rem
}

#differentPointline .differentPointline-image {
	height: 50vh;
	position: relative;
	z-index: -3
}

#differentPointline .differentPointline-image img {
	-o-object-position: left;
	object-position: left
}

#differentPointline .differentPointline-content {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between
}

#differentPointline .differentPointline-content--heading {
	width: 40%;
	padding-left: 4rem;
	padding-right: 8rem
}

#differentPointline .differentPointline-content--article {
	width: 60%;
	padding-right: 2rem;
	text-align: justify
}

#pointlineProjects {
	width: 100vw
}

#pointlineProjects .pointlineProjects {
	width: 90vw;
	margin-left: auto
}

#pointlineProjects .pointlineProjects-heading {
	width: 90%;
	text-align: right;
	padding-right: 3rem;
	position: relative
}

#pointlineProjects .pointlineProjects-heading:after {
	content: "";
	position: absolute;
	bottom: -.5rem;
	right: 3rem;
	background-color: #f28c8c;
	height: .4rem;
	width: 15rem
}

#pointlineProjects .pointlineProjects-rowone {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: end;
	align-items: flex-end;
	-ms-flex-pack: justify;
	justify-content: space-between
}

#pointlineProjects .pointlineProjects-rowone a {
	padding-bottom: 4rem
}

#pointlineProjects .pointlineProjects-rowone--images {
	display: -ms-flexbox;
	display: flex;
	height: 55vh
}

#pointlineProjects .pointlineProjects-rowtwo {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: end;
	align-items: flex-end;
	-ms-flex-pack: justify;
	justify-content: space-between
}

#pointlineProjects .pointlineProjects-rowtwo h3 {
	padding-bottom: 4rem;
	position: relative
}

#pointlineProjects .pointlineProjects-rowtwo h3:after {
	content: "explore";
	position: absolute;
	top: -2.5rem;
	left: 0;
	color: #f28c8c;
	font-family: Josefin Sans, sans-serif
}

#pointlineProjects .pointlineProjects-rowtwo--images {
	display: -ms-flexbox;
	display: flex;
	height: 55vh
}

.pointlineProjects-rowone--images {
	width: 90%
}

.pointlineProjects-rowone--images .rowone-image {
	width: 100%;
	height: 100%;
	padding: 4rem 2rem
}

.pointlineProjects-rowone--images .rowone-image div {
	height: 100%;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

.pointlineProjects-rowtwo--images {
	width: 90%
}

.pointlineProjects-rowtwo--images .rowtwo-image {
	width: 100%;
	height: 100%;
	padding-top: 4rem;
	padding-bottom: 4rem;
	padding-left: 4rem
}

.pointlineProjects-rowtwo--images .rowtwo-image div {
	height: 100%;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

#pointlineclients {
	width: 100vw;
	background-color: #e4e8ec;
	padding: 5rem 0
}

#pointlineclients .pointlineclients {
	width: 85vw;
	margin: 0 auto
}

#pointlineclients .pointlineclients-logo {
	padding: 4rem 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

#pointlineclients .pointlineclients-logo img {
	height: 8rem
}

#contactPointline {
	width: 100vw;
	padding: 5rem 0
}

#contactPointline .contactPointline {
	width: 85vw;
	margin: auto;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center
}

#servicesBanner {
	width: 100vw
}

#servicesBanner .servicesBanner {
	width: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-ms-flex-align: start;
	align-items: flex-start;
	-ms-flex-direction: column;
	flex-direction: column;
	height: 90vh;
	padding: 10rem 7.5vw;
	background-image: linear-gradient(270deg, hsla(0, 0%, 100%, .7), hsla(0, 0%, 100%, .7)), url(/static/services-banner-2532d6a73f7e43916a982ab9786d5968.jpg);
	background-size: cover;
	background-position: 50%
}

#servicesBanner .servicesBanner h2,
#servicesBanner .servicesBanner p {
	width: 40%
}

.servicesGallery {
	width: 80vw;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center;
	padding: 3rem;
	margin: -5rem auto 0;
	background-color: #fff;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16)
}

.servicesGallery-images {
	width: 30%;
	height: 25rem
}

.servicesGallery-images div {
	height: 100%
}

#servicesDetail {
	width: 100vw;
	padding: 10rem 0
}

#servicesDetail .servicesDetail {
	width: 80vw;
	margin: 0 auto
}

#servicesDetail .servicesDetail-cardContainer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem 2rem
}

.servicesDetails-card {
	background-color: #fff;
	padding: 2rem;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem;
	transition: .1s ease-out
}

.servicesDetails-card:hover {
	background-color: #4f6072;
	color: #fff
}

.servicesDetails-card .servicesDetails-title {
	text-transform: capitalize;
	min-height: 4rem;
	font-weight: 600
}

.servicesDetails-card .servicesDetails-para {
	padding-left: 2rem
}

.servicesDetails-card .servicesDetails-para li {
	text-transform: capitalize;
	position: relative
}

.servicesDetails-card .servicesDetails-para li:after {
	content: "";
	position: absolute;
	width: .5rem;
	height: .5rem;
	top: 1rem;
	left: -1.5rem;
	background-color: #f28c8c
}

#aboutIntro {
	width: 100vw
}

#aboutIntro .aboutIntro {
	width: 85vw;
	margin: 0 auto;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	position: relative
}

#aboutIntro .aboutIntro-image {
	width: 50%;
	padding: 5rem
}

#aboutIntro .aboutIntro-image:after {
	content: "";
	position: absolute;
	width: 20rem;
	height: 20rem;
	background-color: #3b4754;
	bottom: 0;
	left: 0;
	z-index: -1
}

#aboutIntro .aboutIntro-content {
	width: 50%;
	padding: 5rem
}

#aboutIntro .aboutIntro-content:after {
	content: "";
	position: absolute;
	width: 35rem;
	height: 28rem;
	background-color: #e4e8ec;
	top: 0;
	left: 50%;
	z-index: -1
}

#aboutIntro .aboutIntro-content--para {
	text-align: justify
}

#aboutIntro .aboutDetails {
	width: 70vw;
	margin: 10rem auto;
	text-align: justify
}

#pointlineVision {
	width: 100vw
}

#pointlineVision .pointlineVision {
	width: 70vw;
	margin: 0 auto;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between
}

#pointlineVision .pointlineVision-content {
	width: 50%;
	margin-bottom: 3.2rem;
	text-align: justify
}

#pointlineVision .pointlineVision-content a {
	font-size: 2.1rem;
	font-family: Josefin Sans, sans-serif;
	color: #f28c8c
}

#pointlineVision .pointlineVision-image {
	width: 45%;
	position: relative
}

#pointlineVision .pointlineVision-image div {
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem;
	height: 100%
}

#pointlineVision .pointlineVision-image:after {
	content: "VISION";
	position: absolute;
	top: 10rem;
	left: -20rem;
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	line-height: 1;
	font-size: 8.9rem;
	color: #e4e8ec;
	letter-spacing: 4px;
	opacity: .3
}

#our-approach {
	width: 100vw
}

#our-approach .our-approach {
	width: 100%;
	padding: 0 7.5vw;
	min-height: 90vh;
	background-image: url(/static/our-ap-c79aef29b78675bf5a0cdc06bd40f77f.jpg);
	background-size: cover;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	position: relative
}

#our-approach .our-approach:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -15rem;
	left: 0;
	width: 100%;
	height: 15rem;
	background-color: #e4e8ec
}

#our-approach .our-approach--content {
	width: 40%;
	margin-left: auto;
	text-align: justify
}

#whyUs {
	width: 100vw
}

#whyUs .whyUs {
	width: 85vw;
	margin: 10rem auto;
	text-align: center
}

#whyUs .whyUs hr {
	margin: 0 auto
}

#whyUs .whyUs-items {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: stretch;
	align-items: stretch;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

#whyUs .whyUs-items--content {
	width: 23%;
	background-color: #fff;
	border-radius: .2rem;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	padding: 2rem
}

#whyUs .whyUs-items--content span {
	font-size: 3.7rem;
	color: #f28c8c
}

#showcase-image {
	width: 100vw
}

#showcase-image .showcase-image {
	width: 85vw;
	margin: 10rem auto;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-align: center;
	align-items: center
}

#showcase-image .showcase-image--img {
	width: 23%
}

#showcase-image .showcase-image--img div {
	height: 25vh;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

#contactHero {
	width: 100vw
}

#contactHero .contactHero {
	width: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center;
	height: 90vh;
	padding: 10rem 7.5vw;
	background-image: linear-gradient(270deg, hsla(0, 0%, 100%, .4), hsla(0, 0%, 100%, .4)), url(/static/contact-banner-97c6a62cbcb980c5148909ae78229962.jpg);
	background-size: cover;
	background-position: 50%
}

#contactHero .contactHero-heading {
	width: 50%
}

#contactHero .contactHero-heading--social {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: center;
	align-items: center
}

#contactHero .contactHero-heading--social li a img {
	margin-right: 2.5rem;
	width: 2.5rem;
	height: 2.5rem
}

#contactMaps {
	margin-top: 5rem;
	width: 100vw
}

#contactMaps .contactMaps {
	width: 100%;
	display: -ms-flexbox;
	display: flex
}

#contactMaps .contactMaps-mumbai,
#contactMaps .contactMaps-patna {
	width: 50%;
	padding: 2rem 3rem
}

.map-area {
	width: 100%;
	height: 60vh;
	position: relative
}

.map-area iframe div {
	overflow: hidden
}

.map-area iframe div #gmap_canvas {
	height: 100%;
	width: 100%
}

#projectHeader {
	width: 100vw;
	background-image: url(/static/projectHeader-0b88a89cca9ad4270476f517a5eacc3a.jpg);
	background-size: cover;
	height: 100vh
}

#projectHeader .projectHeader {
	width: 100%;
	height: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 0 7.5vw
}

#projectHeader .projectHeader-title {
	position: relative;
	z-index: 5;
	text-shadow: 1rem 2rem 3rem rgba(0, 0, 0, .2)
}

#projectHeader .projectHeader-article {
	width: 50%;
	background-color: rgba(247, 250, 252, .9);
	padding: 4rem;
	-ms-transform: translate(10rem, -5rem);
	transform: translate(10rem, -5rem)
}

#projectDesc {
	width: 100vw;
	overflow-x: hidden
}

.imageGallery {
	transition: .3s ease;
	-ms-transform-origin: center;
	transform-origin: center;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 100;
	background-color: #fff;
	display: grid;
	grid-template-columns: 33% 33% 33%;
	grid-auto-flow: column;
	grid-auto-columns: 33%;
	-ms-flex-align: center;
	align-items: center;
	justify-items: center;
	gap: 1.5rem;
	overflow-x: scroll;
	overflow-y: hidden;
	cursor: -webkit-grab;
	cursor: grab
}

.imageGallery div {
	height: 40vh;
	background-color: #fff;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

.galleryClose {
	-ms-transform: scale(0);
	transform: scale(0)
}

.galleryOpen {
	-ms-transform: scale(1);
	transform: scale(1)
}

.btn-moreImages {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
	background-color: #fff;
	border: none;
	outline: none;
	padding: 1rem 2rem;
	color: #4f6072;
	transition: .2s ease
}

.btn-moreImages:hover,
.btn-projectClose {
	background-color: #4f6072;
	color: #fff
}

.btn-projectClose {
	display: inline-block;
	position: absolute;
	bottom: 7vw;
	right: 7vw;
	border: 1px solid #4f6072;
	outline: none;
	padding: 1rem 2rem;
	transition: .2s ease
}

.btn-projectClose:hover {
	background-color: #fff;
	color: #4f6072
}

#teamHeader {
	width: 100vw;
	height: 80vh;
	background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, .5)), url(/static/ourteam-acb911dce97830a1131c6dac0d6bae43.jpg);
	background-size: cover
}

#teamHeader .teamHeader {
	width: 100%;
	height: 100%;
	padding: 4rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center
}

#teamFounder {
	width: 100vw
}

#teamFounder .teamFounder {
	width: 70vw;
	margin: 10rem auto;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center
}

#teamFounder .teamFounder-image {
	width: 40%;
	box-shadow: 0 1rem 1rem 0 rgba(66, 66, 66, .09), 0 1rem 2rem 1rem rgba(66, 66, 66, .18);
	border-radius: .2rem
}

#teamFounder .teamFounder-content {
	width: 50%;
	padding: 4rem;
	text-align: justify;
	background-color: #e4e8ec;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

.fourOfour-section {
	width: 100vw;
	min-height: 100vh;
	text-align: center;
	padding-bottom: 5rem
}

.fourOfour-section .fourOfour-image {
	padding: 5rem 10rem
}

.thanks-section {
	width: 100vw;
	height: 80vh;
	padding: 0 2rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-direction: column;
	flex-direction: column;
	text-align: center
}

.btn-primary {
	display: inline-block;
	background-color: #f28c8c;
	color: #f7fafc;
	border: 2px solid #f28c8c;
	outline: none;
	padding: 1rem 3rem;
	font-weight: 400;
	transition: all .2s ease;
	letter-spacing: 2px;
	text-transform: uppercase;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

.btn-primary:focus,
.btn-primary:hover {
	background-color: #f7fafc;
	color: #f28c8c;
	-ms-transform: scale(1.005) translateY(-4px);
	transform: scale(1.005) translateY(-4px);
	-webkit-animation: animate-hue .5s ease infinite alternate;
	animation: animate-hue .5s ease infinite alternate
}

.page-links img {
	display: block;
	width: 3rem
}

.page-links span {
	font-family: Josefin Sans, sans-serif;
	font-weight: 600;
	font-size: 2.1rem;
	color: #f28c8c;
	line-height: 1;
	position: relative
}

.page-links span:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 4px;
	bottom: -1rem;
	left: 0;
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	background-color: #f28c8c;
	transition: .15s ease
}

.page-links span:hover:after {
	-ms-transform: scaleX(1.2);
	transform: scaleX(1.2);
	-webkit-animation: animate-hue .5s ease infinite alternate;
	animation: animate-hue .5s ease infinite alternate
}

.page-links span:focus,
.page-links span:hover {
	-ms-transform: scale(1.005) translateY(-4px);
	transform: scale(1.005) translateY(-4px)
}

.underline {
	height: 4px;
	width: 15rem;
	background-color: #f28c8c;
	border: none
}

#contactForm {
	width: 100vw;
	margin-top: -5rem;
	position: relative;
	z-index: 10;
	margin-bottom: 5rem
}

#contactForm .contactForm {
	width: 70vw;
	margin: 0 auto;
	padding: 8rem 0;
	background-color: #f0f5fa
}

#contactForm .contactForm,
#contactForm .contactForm-card {
	display: -ms-flexbox;
	display: flex;
	box-shadow: 0 1rem 1rem 0 rgba(66, 66, 66, .09), 0 1rem 2rem 1rem rgba(66, 66, 66, .18);
	border-radius: .2rem
}

#contactForm .contactForm-card {
	width: 60%;
	padding: 4rem;
	background-color: #f28c8c;
	-ms-transform: translateX(-10rem);
	transform: translateX(-10rem);
	color: #f7fafc;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: start;
	align-items: flex-start;
	-ms-flex-direction: column;
	flex-direction: column
}

#contactForm .contactForm-form {
	width: 100%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: stretch;
	align-items: stretch;
	padding-right: 10rem
}

.contactForm-card>* {
	display: block;
	margin-bottom: 2.1rem
}

.contactForm-card--phone a {
	display: block;
	font-size: 2.1rem;
	margin-bottom: 1.2rem
}

.formDiv {
	width: 100%
}

.formDiv .formInput,
.formDiv .formLabel,
.formDiv .formTextarea {
	display: block;
	width: 100%;
	font-family: inherit
}

.formDiv .formLabel {
	font-family: Josefin Sans, sans-serif
}

.formDiv .formInput {
	background-color: #e1e6ea;
	border: 2px solid #e1e6ea;
	padding: .7rem;
	margin-bottom: 1.6rem;
	transition: .1s ease;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

.formDiv .formInput:focus,
.formDiv .formInput:hover {
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
	outline: none;
	background-color: #f7fafc;
	border: 2px solid #f28c8c
}

.formDiv .formInput:valid {
	border: 2px solid #57bd65
}

.formDiv .formTextarea {
	height: 20vh;
	resize: vertical;
	background-color: #e1e6ea;
	border: 2px solid #e1e6ea;
	padding: 1rem;
	margin-bottom: 1.6rem;
	transition: .1s ease;
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, .08), 0 1px 3px 1px rgba(66, 66, 66, .16);
	border-radius: .2rem
}

.formDiv .formTextarea:focus,
.formDiv .formTextarea:hover {
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
	outline: none;
	border: 2px solid #f28c8c;
	background-color: #f7fafc
}

.imageFrontcard {
	width: 75vw;
	margin: 10rem auto;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

.imageFrontcard:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 5rem;
	left: 5rem;
	background-color: #f28c8c;
	z-index: -1
}

.imageFrontcard-content,
.imageFrontcard:after {
	box-shadow: 0 1rem 1rem 0 rgba(66, 66, 66, .09), 0 1rem 2rem 1rem rgba(66, 66, 66, .18);
	border-radius: .2rem
}

.imageFrontcard-content {
	width: 45%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-item-align: center;
	align-self: center;
	background-color: #fff;
	padding: 5rem 2rem;
	text-align: center
}

.imageFrontcard-content article {
	font-size: 1.4rem
}

.imageFrontcard-image {
	width: 55%;
	position: relative;
	box-shadow: 0 1rem 1rem 0 rgba(66, 66, 66, .09), 0 1rem 2rem 1rem rgba(66, 66, 66, .18);
	border-radius: .2rem;
	overflow: hidden
}

.imageFrontcard-image div {
	height: auto;
	background-color: #fff
}

.imageNextBtn {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 2.75rem;
	height: 2.75rem;
	background-color: #fff;
	border: none;
	outline: none;
	padding: .5rem;
	box-sizing: content-box;
	border-radius: 3rem;
	cursor: pointer
}

.imageNextBtn svg {
	width: 100%
}

.imagePrevBtn {
	position: absolute;
	top: 2rem;
	left: 2rem;
	width: 2.5rem;
	height: 2.5rem;
	background-color: #f28c8c;
	border: none;
	outline: none;
	padding: .5rem;
	box-sizing: content-box;
	border-radius: 3rem;
	-ms-transform: rotate(180deg);
	transform: rotate(180deg)
}

.imagePrevBtn svg {
	width: 100%
}

.gallery-dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	-ms-flex-item-align: end;
	align-self: flex-end;
	height: auto
}

.gallery-dots span {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 1rem;
	background-color: #fff;
	margin: 0 .5rem;
	transition: .2s ease-out
}

.gallery-dots .active-dot {
	background-color: #f28c8c;
	-ms-transform: scale(1.2);
	transform: scale(1.2)
}

.imageFrontcard:nth-of-type(2n) {
	width: 75vw;
	margin: 20rem auto;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	-ms-flex-pack: end;
	justify-content: flex-end
}

.imageFrontcard:nth-of-type(2n):after {
	content: "";
	width: 100%;
	height: 80%;
	top: -5rem;
	left: -5rem;
	background-color: #4f6072;
	z-index: -1
}

.imageFrontcard:nth-of-type(2n) .contentFront-content,
.imageFrontcard:nth-of-type(2n):after {
	position: absolute;
	box-shadow: 0 1rem 1rem 0 rgba(66, 66, 66, .09), 0 1rem 2rem 1rem rgba(66, 66, 66, .18);
	border-radius: .2rem
}

.imageFrontcard:nth-of-type(2n) .contentFront-content {
	width: 50%;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-item-align: center;
	align-self: center;
	background-color: #fff;
	padding: 5rem 2rem;
	text-align: center;
	z-index: 5;
	top: 5rem;
	left: 0
}

.imageFrontcard:nth-of-type(2n) .imageFront-image {
	width: 65%;
	-ms-flex-item-align: end;
	align-self: flex-end;
	box-shadow: 0 1rem 1rem 0 rgba(66, 66, 66, .09), 0 1rem 2rem 1rem rgba(66, 66, 66, .18);
	border-radius: .2rem
}

.imageFrontcard:nth-of-type(2n) .imageFront-image div {
	height: 60vh;
	background-color: #fff
}

@media (min-width:1900px) {
	html {
		font-size: 100%
	}
}

@media (min-width:2860px) {
	html {
		font-size: 200%
	}
}

@media (max-width:900px) {
	.page-headings {
		font-size: 6.7rem;
		letter-spacing: 2px
	}

	.heading-primary {
		font-size: 3.7rem
	}

	#footer .footer {
		width: 100%;
		padding: 5rem 4rem
	}

	#footer .footer-logo {
		width: 40%
	}

	#footer .footer-sitelinks {
		width: 20%
	}

	#footer .footer-contact {
		width: 40%
	}

	.hero {
		-ms-flex-direction: column;
		flex-direction: column
	}

	.hero-image {
		width: 100%;
		padding-right: 0;
		margin: 0 auto
	}

	.hero-image--socialIcons {
		display: none;
		width: 0
	}

	.hero-image--img {
		width: 100%;
		margin-top: 0
	}

	.hero-content:after {
		display: none
	}

	.hero-content {
		margin: -15vh auto 0;
		position: relative;
		z-index: 10;
		text-align: center;
		background-color: hsla(0, 0%, 100%, .85);
		width: 90vw;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: center;
		padding-top: 2rem
	}

	.hero-content .hero-slider {
		width: 100%;
		grid-template-columns: 50% 50%;
		grid-auto-columns: 50%;
		gap: 1rem;
		background-color: #f7fafc
	}

	.project-controls {
		padding: 1rem 0;
		margin: 0;
		background-color: #fff
	}

	#aboutPointline .aboutPointline,
	.project-controls {
		width: 100%;
		-ms-flex-pack: start;
		justify-content: start
	}

	#aboutPointline .aboutPointline {
		padding: 0 4rem;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-align: start;
		align-items: start
	}

	#aboutPointline .aboutPointline-content {
		width: 100%;
		padding: 0
	}

	#aboutPointline .aboutPointline-image {
		width: 100%;
		padding: 0;
		margin-top: 3.2rem;
		height: 50vh
	}

	#aboutPointline .aboutPointline-image:after {
		display: none
	}

	#servicesPointline .servicesPointline-content--items {
		width: 14rem;
		text-align: center
	}

	.services-icons {
		width: 3.5rem;
		height: 3.5rem;
		margin: .6rem auto
	}

	#pointlineProjects .pointlineProjects-rowone--images,
	#pointlineProjects .pointlineProjects-rowtwo--images {
		height: auto
	}

	#servicesBanner .servicesBanner {
		height: auto;
		min-height: 60vh
	}

	.servicesGallery {
		width: 100%
	}

	#servicesDetail .servicesDetail-cardContainer {
		grid-template-columns: repeat(2, 1fr)
	}

	#aboutIntro .aboutIntro {
		width: 100vw;
		padding: 4rem;
		-ms-flex-align: center;
		align-items: center
	}

	#aboutIntro .aboutIntro-image {
		padding: 0 2rem 0 0
	}

	#aboutIntro .aboutIntro-content {
		padding: 0 0 0 2rem;
		-ms-flex-item-align: center;
		align-self: center
	}

	#aboutIntro .aboutIntro-content:after {
		width: 50%;
		height: 50%
	}

	#pointlineVision .pointlineVision {
		width: 100%;
		padding: 0 4rem
	}

	#pointlineVision .pointlineVision-image {
		height: auto
	}

	#our-approach .our-approach {
		padding: 4rem;
		min-height: 70vh
	}

	#our-approach .our-approach--content {
		width: 100%;
		padding: 4rem 0;
		text-align: left
	}

	#showcase-image .showcase-image,
	#whyUs .whyUs {
		width: 100%;
		padding: 0 4rem
	}

	#contactHero .contactHero {
		height: auto;
		-ms-flex-align: end;
		align-items: flex-end
	}

	#contactMaps .contactMaps {
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 2rem
	}

	#contactMaps .contactMaps-mumbai,
	#contactMaps .contactMaps-patna {
		padding: 1rem;
		width: 100%
	}

	.map-area {
		height: 50vh
	}

	#projectHeader {
		padding: 10rem 0;
		height: auto;
		background-position: 50%
	}

	#projectHeader .projectHeader {
		padding: 4rem
	}

	#projectHeader .projectHeader-article {
		width: 100%;
		-ms-transform: none;
		transform: none
	}

	#projectDesc {
		padding: 0 4rem
	}

	.imageGallery {
		width: 100%;
		grid-template-columns: 100%;
		grid-auto-columns: 100%;
		gap: 1rem;
		background-color: #f7fafc
	}

	#teamFounder .teamFounder {
		width: 100%;
		padding: 4rem
	}

	.fourOfour-section {
		min-height: 80vh;
		height: auto;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-align: center;
		align-items: center
	}

	.fourOfour-section .fourOfour-image {
		padding: 0
	}

	#contactForm .contactForm {
		width: 90vw
	}

	#contactForm .contactForm-card {
		-ms-transform: translateX(-4rem);
		transform: translateX(-4rem)
	}

	#contactForm .contactForm-form {
		padding-right: 4rem
	}

	.imageFrontcard {
		width: 100%;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-align: center;
		align-items: center;
		margin: 15rem auto
	}

	.imageFrontcard-content,
	.imageFrontcard-image {
		width: 100%
	}

	.imageFrontcard-image div {
		height: auto;
		min-height: auto
	}

	.imageFrontcard:nth-of-type(2n) {
		width: 100%;
		-ms-flex-direction: column;
		flex-direction: column;
		margin: 15rem auto
	}

	.imageFrontcard:nth-of-type(2n) .contentFront-content {
		position: relative;
		-ms-transform: none;
		transform: none;
		top: 0;
		left: 0;
		width: 100%
	}

	.imageFrontcard:nth-of-type(2n) .imageFront-image {
		width: 100%
	}

	.imageFrontcard:nth-of-type(2n) .imageFront-image div {
		height: auto
	}
}

@media (max-width:680px) {
	.section-gap {
		margin-bottom: 5rem !important
	}

	#footer .footer {
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 5rem 2rem
	}

	#footer .footer-logo {
		width: 100%;
		padding: 0
	}

	#footer .footer-logo--icon {
		margin: 0 auto
	}

	#footer .footer-logo h4 {
		width: 100%;
		text-align: center
	}

	#footer .footer-logo--social {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-align: center;
		align-items: center
	}

	#footer .footer-sitelinks {
		width: 100%;
		margin: 5rem 0
	}

	#footer .footer-sitelinks:after {
		top: -2rem;
		left: 0;
		width: 100%;
		height: 2px
	}

	#footer .footer-sitelinks:before {
		top: calc(100% + 2rem);
		right: 0;
		width: 100%;
		height: 2px
	}

	#footer .footer-contact {
		width: 100%;
		text-align: center
	}

	#footer .footer-contact--address {
		width: 100%;
		-ms-flex-pack: center;
		justify-content: center
	}

	#footer .footer-contact--address address {
		width: 100%;
		text-align: center
	}

	#footer .footer-contact--email,
	#footer .footer-contact--phone {
		width: 100%;
		-ms-flex-pack: center;
		justify-content: center
	}

	.hero-image {
		width: 100%;
		padding: 0
	}

	.hero-image--socialIcons a img {
		display: none
	}

	.hero-content {
		padding-bottom: 0
	}

	.hero-content .hero-heading {
		padding: 2rem;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		flex-direction: column
	}

	.hero-content .hero-heading h1 {
		-ms-flex-order: 2;
		order: 2
	}

	.hero-content .hero-heading h2 {
		-ms-flex-order: 1;
		order: 1
	}

	.hero-content .hero-slider {
		width: 100%;
		grid-template-columns: 95%;
		grid-auto-columns: 95%;
		gap: 1rem;
		background-color: #f7fafc
	}

	.hero-slider--projectCard {
		text-align: center
	}

	.hero-slider--projectCard .projectimage {
		height: 40vh
	}

	#aboutPointline .aboutPointline {
		padding: 0 2rem
	}

	#servicesPointline:after {
		display: none
	}

	#servicesPointline .servicesPointline {
		width: 100%;
		padding: 0 2rem
	}

	#servicesPointline .servicesPointline-content {
		-ms-flex-align: stretch;
		align-items: stretch
	}

	#differentPointline {
		padding-top: 5rem
	}

	#differentPointline:after {
		display: none
	}

	#differentPointline:before {
		width: 30vw;
		height: calc(100% + 4rem);
		top: -2rem
	}

	#differentPointline .differentPointline {
		width: 100%
	}

	#differentPointline .differentPointline h3 {
		width: 100%;
		left: 0;
		padding: 0 2rem
	}

	#differentPointline .differentPointline-image {
		height: auto
	}

	#differentPointline .differentPointline-content {
		-ms-flex-direction: column;
		flex-direction: column
	}

	#differentPointline .differentPointline-content--article,
	#differentPointline .differentPointline-content--heading,
	#pointlineProjects .pointlineProjects {
		width: 100%;
		padding: 0 2rem
	}

	#pointlineProjects .pointlineProjects-heading {
		padding: 0;
		width: 100%;
		text-align: left
	}

	#pointlineProjects .pointlineProjects-heading:after {
		left: 0
	}

	#pointlineProjects .pointlineProjects-rowone {
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-align: start;
		align-items: flex-start;
		-ms-flex-pack: start;
		justify-content: flex-start
	}

	#pointlineProjects .pointlineProjects-rowone a {
		padding: 2rem 0
	}

	#pointlineProjects .pointlineProjects-rowone--images,
	#pointlineProjects .pointlineProjects-rowtwo {
		-ms-flex-direction: column;
		flex-direction: column
	}

	#pointlineProjects .pointlineProjects-rowtwo {
		-ms-flex-align: start;
		align-items: flex-start
	}

	#pointlineProjects .pointlineProjects-rowtwo h3 {
		-ms-flex-order: 2;
		order: 2
	}

	#pointlineProjects .pointlineProjects-rowtwo h3:after {
		top: 2.5rem
	}

	#pointlineProjects .pointlineProjects-rowtwo--images {
		-ms-flex-direction: column;
		flex-direction: column
	}

	.pointlineProjects-rowone--images {
		width: 100%
	}

	.pointlineProjects-rowone--images .rowone-image {
		padding: 2rem 0
	}

	.pointlineProjects-rowtwo--images {
		width: 100%
	}

	.pointlineProjects-rowtwo--images .rowtwo-image {
		padding: 2rem 0
	}

	#pointlineclients .pointlineclients {
		width: 100%;
		padding: 0 2rem
	}

	#pointlineclients .pointlineclients-logo {
		padding-bottom: 0
	}

	#pointlineclients .pointlineclients-logo img {
		height: 4rem
	}

	#contactPointline .contactPointline {
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
		padding: 2rem;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-ms-flex-align: start;
		align-items: flex-start
	}

	#servicesBanner .servicesBanner {
		min-height: 90vh
	}

	#servicesBanner .servicesBanner h2,
	#servicesBanner .servicesBanner p {
		width: 100%
	}

	.servicesGallery {
		width: 100%;
		padding: 2rem;
		background-color: rgba(0, 0, 0, 0)
	}

	.servicesGallery-images {
		width: 100%;
		height: auto
	}

	#servicesDetail .servicesDetail-cardContainer {
		grid-template-columns: 1fr
	}

	#aboutIntro .aboutIntro {
		padding: 2rem;
		-ms-flex-direction: column;
		flex-direction: column
	}

	#aboutIntro .aboutIntro-image {
		width: 100%;
		padding: 0;
		margin-bottom: 3.2rem
	}

	#aboutIntro .aboutIntro-image:after {
		display: none
	}

	#aboutIntro .aboutIntro-content {
		width: 100%;
		padding: 0
	}

	#aboutIntro .aboutIntro-content:after {
		width: 50%;
		height: 30%
	}

	#aboutIntro .aboutDetails {
		width: 100%;
		padding: 3.2rem 2rem;
		margin: 0
	}

	#pointlineVision .pointlineVision {
		padding: 2rem;
		-ms-flex-direction: column;
		flex-direction: column;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-align: center;
		align-items: center
	}

	#pointlineVision .pointlineVision-content,
	#pointlineVision .pointlineVision-image {
		width: 100%
	}

	#pointlineVision .pointlineVision-image:after {
		display: none
	}

	#our-approach .our-approach {
		padding: 2rem;
		background-position: 50%
	}

	#our-approach .our-approach:after {
		display: none
	}

	#whyUs .whyUs {
		padding: 0 2rem
	}

	#whyUs .whyUs-items--content {
		width: 100%;
		margin: 1.6rem 0
	}

	#showcase-image .showcase-image {
		padding: 0 2rem
	}

	#showcase-image .showcase-image--img {
		width: 100%;
		margin: 1.6rem 0
	}

	#showcase-image .showcase-image--img div {
		height: auto
	}

	#contactMaps .contactMaps-mumbai,
	#contactMaps .contactMaps-patna {
		width: 100%;
		padding: 2rem 0
	}

	#projectHeader .projectHeader {
		padding: 2rem
	}

	#projectDesc {
		padding: 0 2rem
	}

	#teamFounder .teamFounder {
		width: 100%;
		padding: 2rem;
		-ms-flex-direction: column;
		flex-direction: column;
		margin: 5rem auto
	}

	#teamFounder .teamFounder-image {
		width: 100%
	}

	#teamFounder .teamFounder-content {
		width: 100%;
		padding: 4rem 2rem;
		text-align: left
	}

	#contactForm {
		margin: 5rem 0
	}

	#contactForm .contactForm {
		width: 100%;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 4rem 2rem
	}

	#contactForm .contactForm-card {
		width: 100%;
		-ms-transform: translateX(0);
		transform: translateX(0);
		margin-bottom: 5rem
	}

	#contactForm .contactForm-form {
		width: 100%;
		padding: 0
	}
}

@media (max-width:1024px) {
	.hero-image {
		padding-right: 0
	}

	.hero-image--socialIcons {
		width: 5rem
	}

	#aboutPointline .aboutPointline-content {
		padding-right: 0
	}
}