.wow {
	visibility: hidden;
}

@-webkit-keyframes fade_top {
	0% {
		opacity: 0;
		-webkit-transform: translateY(100px);
		transform: translateY(100px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes fade_top {
	0% {
		opacity: 0;
		-webkit-transform: translateY(100px);
		-ms-transform: translateY(100px);
		transform: translateY(100px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}

.fade_top {
	-webkit-animation-name: fade_top;
	animation-name: fade_top;
}

@-webkit-keyframes slide_left {
	0% {
		left: 0%;
	}

	100% {
		left: -30%;
	}
}

@keyframes slide_left {
	0% {
		left: 0%;
	}

	100% {
		left: -30%;
	}
}

.slide_left {
	-webkit-animation-name: slide_left;
	animation-name: slide_left;
}

@-webkit-keyframes slide_right {
	0% {
		right: 0%;
	}

	100% {
		right: -30%;
	}
}

@keyframes slide_right {
	0% {
		right: 0%;
	}

	100% {
		right: -30%;
	}
}

.slide_right {
	-webkit-animation-name: slide_right;
	animation-name: slide_right;
}

.rotate_right {
	-webkit-animation: rotationRight 12s infinite linear;
	animation: rotationRight 12s infinite linear;
}

@keyframes rotationRight {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(359deg);
	}
}

.wow {
	visibility: hidden;
}

/* Font */

@font-face {
	font-family: 'font-Bold';
	src: url('../fonts/font/font-Bold.woff2') format('woff2'),
		url('../fonts/font/font-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'font-Light';
	src: url('../fonts/font/font-Light.woff2') format('woff2'),
		url('../fonts/font/font-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'font-Medium';
	src: url('../fonts/font/font-Medium.woff2') format('woff2'),
		url('../fonts/font/font-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'font-Regular';
	src: url('../fonts/font/font-Regular.woff2') format('woff2'),
		url('../fonts/font/font-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'font-Black';
	src: url('../fonts/font/font-Black.woff2') format('woff2'),
		url('../fonts/font/font-Black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* colors */
	--primary-color: #1a1a1a;
	--secondary-color: #121212;
	--highlighted-color: #444444;
	--highlighted-color-2: #989898;
	--grey-color: #666666;
	--black-color: #000000;
	--placeholder-color: #DEDEDE;
	--border-color: #e7e8e8;
	--white-color: #ffffff;
	/* font-sizes */
	--bannertitle-font-size: 7.75rem;
	/*124px*/
	--title2-font-size: 16rem;
	/*170px*/
	--onyx-font-size: 22rem;
	/*352px*/
	--title-font-size: 4rem;
	/*48px*/
	--content-font-size: 2rem;
	/*30px*/
	--subtitle-font-size: 1.5rem;
	/*24px*/
	--footer-font-size: 0.75rem;
	/*12px*/
	--paragraph-font-size: 1.125rem;
	/*18px*/
	--small-font-size: 0.875rem;
	/* font-families */
	--light-font-family: "font-Light";
	--regular-font-family: "font-Regular";
	--medium-font-family: "font-Medium";
	--bold-font-family: "font-Bold";
	--black-font-family: "font-Black";
	/* other variables */
	--common-transition: all 0.3s ease;
	--web-border-radius: 1.2rem;
	--mobile-border-radius: 0.6rem;
	--common-gap-size: 1rem;
	--small-gap-size: 1.5rem;
	--medium-gap-size: 2.5rem;
	--high-gap-size: 4rem;
	--big-gap-size: 6rem;
}

/* Reset CSS */

html,
body,
div,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
span,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: var(--regular-font-family);
	color: var(--primary-color);
}

html {
	font-size: 16px;
	height: auto;
	scroll-behavior: smooth;
}

* {
	line-height: 1.2;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	line-height: 1.2;
	width: 100%;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	background-color: transparent;
	color: unset;
	outline: none;
	text-decoration: none;
	-webkit-transition: var(--common-transition);
	-moz-transition: var(--common-transition);
	-ms-transition: var(--common-transition);
	-o-transition: var(--common-transition);
	transition: var(--common-transition);
}

a:focus,
a:hover {
	outline: 0;
	text-decoration: unset;
	color: var(--black-color);
}

img {
	max-width: 100%;
	width: 100%;
	height: auto;
	transition: var(--common-transition);
	margin: 0 auto;
	cursor: pointer;
	object-fit: cover;
	display: block;
}

.relative {
	position: relative;
}

.uppercase {
	text-transform: uppercase;
}

.capitalize {
	text-transform: capitalize;
}

.black_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all ease 0.4s;
	background: rgb(0 0 0 / 15%);
	z-index: 0;
}

.main-container {
	width: 95%;
	margin: 0 auto;
}

.main-container-3 {
	width: 85%;
	margin: 0 auto;
}

.main-container-2 {
	width: 97%;
	margin-left: auto;
	margin-right: 0;
}

.full-container {
	width: 100%;
	max-width: 100%;
}

.content_accordian {
	display: none;
}

.main-section-padding {
	padding: 8rem 0;
}

.main-padding-bottom {
	padding: 0 0 8rem;
}

.main-padding-top {
	padding: 8rem 0 0;
}

.banner-padding {
	padding: 10rem 0 2rem;
}

.banner-padding-2 {
	padding: 18.75rem 0 2rem;
}

.hover-enable {
	display: none;
}

.hover-disable {
	display: inline-block;
}

.mobile-image {
	display: none;
}

.web-image {
	display: block;
}

div:focus-visible,
img:focus-visible,
button:focus-visible {
	outline: none;
	border: none;
}

body.no-scroll-body {
	overflow-y: hidden;
}

.visible-tab-mobile {
	display: none !important;
}

.hide-tab-mobile {
	display: block !important;
}

/* Reset CSS Ends */
/* Default CSS */
.section-bannertitle h1 {
	font-size: var(--bannertitle-font-size);
	font-family: var(--regular-font-family);
}

.section-bannertitle h2 {
	font-size: var(--bannertitle-font-size);
	font-family: var(--regular-font-family);
}

.section-bannertitle h2>span {
	font-size: var(--bannertitle-font-size);
	font-family: var(--regular-font-family);
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-color: var(--white-color);
	-webkit-text-stroke-width: 2px;
}

.section-bannertitle h2>span.black-text {
	font-size: var(--bannertitle-font-size);
	font-family: var(--regular-font-family);
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-color: var(--primary-color);
	-webkit-text-stroke-width: 2px;
}

.section-title-2 h2 {
	font-size: var(--title2-font-size);
	font-family: var(--regular-font-family);
}

.section-title a span,
.section-title h2 {
	font-size: var(--title-font-size);
	font-family: var(--regular-font-family);
}

.section-title h2>span.black-text {
	font-size: var(--title-font-size);
	font-family: var(--regular-font-family);
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-color: var(--primary-color);
	-webkit-text-stroke-width: 2px;
}

.section-title h2>span {
	font-size: var(--title-font-size);
	font-family: var(--regular-font-family);
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-color: var(--white-color);
	-webkit-text-stroke-width: 1px;
}

.section-title-bold h2>span.black-text {
	font-size: var(--title-font-size);
	font-family: var(--bold-font-family);
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-color: var(--primary-color);
	-webkit-text-stroke-width: 1px;
}

.section-title-bold h2 {
	font-size: var(--title-font-size);
	font-family: var(--bold-font-family);
}

.section-content a span,
.section-content h3 {
	font-size: var(--content-font-size);
	font-family: var(--regular-font-family);
}

.section-content-bold a span,
.section-content-bold h3 {
	font-size: var(--content-font-size);
	font-family: var(--bold-font-family);
}

.section-subtitle a span,
.section-subtitle p {
	font-size: var(--subtitle-font-size);
	font-family: var(--regular-font-family);
}

.section-paragraph p {
	font-size: var(--paragraph-font-size);
	font-family: var(--regular-font-family);
}

.section-subtitle-bold h3 {
	font-size: var(--subtitle-font-size);
	font-family: var(--bold-font-family);
}

.footer-font a span,
.footer-font p {
	font-size: var(--footer-font-size);
	font-family: var(--regular-font-family);
}

.section-small-font-bold a span,
.section-small-font-bold p {
	font-size: var(--small-font-size);
	font-family: var(--bold-font-family);
}

.section-small-font a span,
.section-small-font p {
	font-size: var(--small-font-size);
	font-family: var(--regular-font-family);
}

.flex-row {
	display: flex;
	flex-direction: row;
	gap: var(--common-gap-size);
}

.inner-flex {
	display: flex;
	flex-direction: column;
	gap: var(--common-gap-size);
}

.flex-align-center {
	align-items: center;
}

.flex-justify-space {
	justify-content: space-between;
}

.flex-justify-center {
	justify-content: center;
}

.flex-gap-0 {
	gap: 0;
}

.flex-gap-small {
	gap: var(--small-gap-size);
}

.flex-gap-medium {
	gap: var(--medium-gap-size);
}

.flex-gap-high {
	gap: var(--high-gap-size);
}

.flex-gap-big {
	gap: var(--big-gap-size);
}
.flex-gap-big.gap_0 {
	row-gap: 0 !important;
}
.white-text {
	color: var(--white-color);
}

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

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

.highlighted-text {
	color: var(--highlighted-color);
}
.highlighted-color-2 {
	color: var(--highlighted-color-2);
}
.swiper-slide {
	background-color: unset;
	font-size: unset;
	text-align: unset;
}

.swiper-button-prev,
.swiper-button-next {
	background-image: none;
	position: relative;
	left: unset;
	right: unset;
	top: unset;
	width: unset;
	height: unset;
	margin: 0;
}

.flex_navigation {
	display: flex;
	justify-content: center;
	gap: var(--small-gap-size);
}

.dark-bg {
	background-color: var(--secondary-color);
}

.black-bg {
	background-color: var(--black-color);
}

span.material-symbols-outlined {
	vertical-align: middle;
}

.text-align-center {
	text-align: center;
}

.text-align-right {
	text-align: right;
}

.white-border-btn button {
	border: 1px solid var(--highlighted-color);
	width: -webkit-fill-available;
	padding: 0.75rem 1rem;
	background-color: transparent;
	transition: var(--common-transition);
}

.white-border-btn button:hover {
	background-color: var(--white-color);
	border-color: var(--white-color);
	transition: var(--common-transition);
}

.white-border-btn button p {
	color: var(--highlighted-color-2);
}

.white-border-btn.active button {
	background-color: var(--white-color);
	border-color: var(--white-color);
	transition: var(--common-transition);
}
.white-border-btn.active button p {
	color: #201818;
}
.white-border-btn:hover button p {
	color: #201818;
}

.white-bg-btn button {
	border: 1px solid var(--highlighted-color);
	width: 12rem;
	padding: 0.75rem 1rem;
	background-color: var(--white-color);
}

.white-bg-btn button p {
	color: var(--black-color);
}

/* Default CSS Ends */
/* header CSS Start */
.header-wrapper {
	position: fixed;
	background-color: transparent;
	top: 1rem;
	left: 0;
	width: 100%;
	padding: 1.5rem 0;
	z-index: 99999;
	transition: var(--common-transition)
}

.bar {
	display: block;
	height: 1px;
	width: 3.5rem;
	background-color: var(--white-color);
	transition: var(--common-transition);
}

.bar.middle {
	display: none;
}

.bar.top {
	margin-bottom: 6px;
}

.bar.bottom {
	margin-top: 6px;
}


.nav-bar.nav-bar-active .bar.top {
	transform: translateY(6px) rotateZ(45deg);
}

.nav-bar.nav-bar-active .bar.bottom {
	transform: translateY(-2px) rotateZ(-45deg);
}


.header-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-wrapper.header_change {
	top: 0;
	background: var(--black-color);
	transition: var(--common-transition);
	padding: 1.5rem 0;
}

.flex-links {
	gap: 3rem;
}

/* header CSS Ends */
/* Footer CSS Starts */
.footer-location {
	padding: 2rem 0;
	align-items: center;
	justify-content: space-between;
}

.footer-flex-one {
	gap: 0.5rem;
}

.border-radius {
	background-color: var(--white-color);
	padding: 0.7rem;
	border-radius: 50%;
	width: 2.5rem;
}

.lets-talk {
	height: 100vh;
	display: grid;
	place-items: center;
}

.footer-flex-two {
	padding: 3rem 0 2rem;
	border-top: 1px solid var(--highlighted-color);
}

.footer-arrow .material-symbols-outlined {
	font-size: var(--bannertitle-font-size);
	color: var(--white-color);
}

/* Footer CSS Ends */

/* Homepage */
.banner_text {
	position: absolute;
	top: 38%;
	left: 10%;
}

.swiper-pagination.swiper-pagination-banner-swiper {
	top: 70%;
	left: 12%;
	transform: translate(-50%, -50%);
	display: flex;
	gap: 0.5rem;
}

.swiper-pagination-banner-swiper .swiper-pagination-bullet {
	width: 0.75rem;
	height: 0.75rem;
	background: var(--white-color);
}

.swiper-pagination-banner-swiper .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--white-color);
}

.apps_icons_abs {
	position: absolute;
	bottom: 5rem;
	right: 2rem;
	z-index: 1;
}

.apps_icons_abs span {
	padding: 0.7rem;
	background-color: #ffffff2e;
	border-radius: 50%;
	color: var(--white-color);
	font-size: var(--subtitle-font-size);
}

/* Section 2 */
.flex_sect2>div:nth-child(1) {
	width: 28%;
}

.flex_sect2>div:nth-child(2) {
	width: 68%;
}


/* Section 3 */
.flex_sect3>div:nth-child(1) {
	width: 77%;
	flex-basis: 77%;
}

.flex_sect3>div:nth-child(2) {
	width: 60%;
	flex-basis: 60%;
	transform: translateY(20%);
}

/* Section 4 */
.grid-company {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.grid-company>div {
	border: 1px solid var(--border-color);
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

.all-client {
	justify-content: right;
}

.flex_sect5 {
	width: 95%;
}

/* Section 6 */
.usecases-swiper {
	width: 66%;
}

.usecases_img img,
.usecases_img {
	aspect-ratio: 973/685;
	background-color: #DEDEDE;
}

.banner_img {
	width: 100%;
}

.swiper-button-usecases-next .material-symbols-outlined,
.swiper-button-usecases-prev .material-symbols-outlined {
	font-size: var(--content-font-size);
}

.navigation_usecase {
	position: absolute;
	bottom: 0rem;
	right: 13rem;
	z-index: 99;
}


/* marquee start */
@keyframes marquee {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-100%)
	}
}

.marquee {
	position: relative;
	width: 100vw;
	max-width: 100%;
	overflow-x: hidden;
}

.track {
	white-space: nowrap;
	width: max-content;
	will-change: transform;
	animation: marquee 20s linear infinite;
}

.content {
	font-size: var(--title2-font-size);
	/* font-family: var(--medium-font-family); */
	padding: 3rem 0 2.5rem 0;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-color: var(--primary-color);
	-webkit-text-stroke-width: 1px;
}

.content span {
	color: var(--black-color);
	font-family: var(--medium-font-family);
}

/* marquee ends */
/* Section 8 */
.grid_sect8 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 88%;
}

.grid_sect8>div:nth-child(1) {
	width: 60%;
}

.right-arrow .material-symbols-outlined {
	font-size: 3rem;
}

/* section 9 */
/* Accordian */
.stonedge-footer-videobg {
	background-color: var(--primary-color);
}

.stonedge-footer-videobg.stonedge-footer-videobg-active {
	height: 120vh;
}

.accordion-block:nth-child(1) {
	border-top: 1px solid var(--border-color);
	padding-top: 4rem;
}

.accordion-block {
	display: flex;
	flex-direction: column;
	padding-bottom: 4rem;
	border-bottom: 1px solid var(--border-color);
	gap: var(--small-gap-size);
}

.accordian_title {
	cursor: pointer;
}

.accordion_click_careeropening {
	display: flex;
	justify-content: space-between;
}

.accordion_icon_careeropening {
	width: 1.5rem;
}

.accordian_title .accordion_icon_opening .minus-sign {
	display: none;
}

.accordian_title.active .accordion_icon_opening .plus-sign {
	display: none;
}

.accordian_title.active .accordion_icon_opening .minus-sign {
	display: block;
}

/* Accordian ends */

.flex-row-sect9>div:nth-child(1) {
	width: 45%;
}

.flex-row-sect9>div:nth-child(2) {
	width: 60%;
}

.accordion_icon_opening>div>span {
	font-size: 2.5rem;
}

/* Section 10,11 */
.our_project_content_1 {
	align-items: flex-end;
}

.our_project_content_1>div:nth-child(1) {
	position: absolute;
	width: 55%;
	top: 10%;
	left: 9%;
}

.our_project_content_1>div:nth-child(2) {
	width: 100%;
}

.our_project_content_3 {
	align-items: flex-end;
	width: 48%;
	transform: translateY(10rem);
	justify-content: flex-end;
}

.our_project_content_2 {
	width: 35%;
}

.our_project_content_3>div:nth-child(1) {
	width: 50%;
}

.our_project_content_5 {
	align-items: flex-end;
}

.our_project_content_6 {
	width: 34%;
	position: absolute;
	right: 12rem;
	bottom: -25rem;
}

.stonedge-section-10-home {
	padding-bottom: 20rem;
}

.stonedge-section-11-home {
	padding-top: 30rem;
	padding-bottom: 0;
}

.our_project_content_7 {
	width: 86%;
	margin: 0 auto;
	align-items: flex-end;
	gap: var(--medium-gap-size);
}

.our_project_g3 {
	gap: 10rem;
}

.our_project_content_8 {
	width: 34%;
}



/* ************************* About Page Starts ************************* */

/* Section 1 */
.stonedge-section-about .about-heading {
	width: 60%;
	margin-left: auto;
}

/* Section 1 Ends */

/* Section 3 */

.stonedge-section-3-about .grid-sect3-about {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

/* Section 3 Ends */

/* Section 5 */

.flex-row-sect5-about>div:nth-child(1) {
	width: 35%;
	margin: 15rem 0 0 auto;
}

.flex-row-sect5-about>div:nth-child(2) {
	width: 55%;
	background-color: var(--placeholder-color);
}

.about-section-8-img {
	background-color: var(--placeholder-color);
}

/* Section 5 Ends */

/* Section 6 */

.stonedge-section-6-about .sect6-text {
	width: 70%;
	text-align: center;
	margin: 0 auto;
	padding: 10rem 0;
}

.stonedge-section-6-about .sec6-bg {
	background-image: url("../images/about/section-6-bg.jpg");
}

/* Section 6 Ends */

/* Section 7  */

.stonedge-section-7-about .about-sect7-flex-row>div:nth-child(1) {
	width: 35%;
}

.stonedge-section-7-about .about-sect7-flex-row>div:nth-child(2) {
	width: 65%;
}

.stonedge-section-7-about .about-sect7-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	place-items: flex-start;
}

.stonedge-section-7-about .about-sect7-grid-item {
	border-bottom: 0.1rem solid var(--border-color);
	padding: 2rem 0;
}

.stonedge-section-7-about .about-sect7-grid>div:last-child {
	border-bottom: 0;
}

.stonedge-section-7-about .about-sect7-text {
	width: 65%;
}

.stonedge-section-7-about .about-sect7-number {
	width: 30%;
}

/* Section 7 Ends */

/* Section 9  */
.about-sect8-swiper-arrows>div>span {
	font-size: 3rem;
}

.stonedge-section-9-about .our_clients {
	overflow: hidden;
}

.stonedge-section-9-about .sect8-swiper-grid {
	display: grid;
	gap: var(--common-gap-size);
	grid-template-columns: repeat(1, 1fr);
	width: 80%;
	height: 100% !important;
}

.flex-row-sect9-about>div:nth-child(1) {
	width: 25%;
}

.flex-row-sect9-about>div:nth-child(2) {
	width: 70%;
}

.stonedge-section-9-about .company-logo {
	width: 6rem;
	margin: 0 auto;
}

.stonedge-section-9-about .about-company {
	padding: 2rem 0;
	border-bottom: 1px solid var(--border-color);
	height: 18rem;
}

.stonedge-section-9-about .viewall-clients-arrow {
	width: var(--subtitle-font-size);
}

.stonedge-section-9-about .about-viewall-clients-sect9 {
	position: absolute;
	bottom: 10%;
	right: 5%;
}

/* Section 9 Ends */

/* Product page */
.product-banner {
	width: 65%;
	margin: 0 auto;
}

.product-banner div {
	overflow: hidden;
}

.down-arrow span {
	font-size: 2.5rem;
}

.stonedge-section-product-2 {
	padding: 15rem 0;
	z-index: 0;
}

.onyx-abs {
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

.onyx-abs h2 {
	font-size: var(--onyx-font-size);
	color: #ffffff35;
}

.grid-sect2-product {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--high-gap-size);
	width: 85%;
	margin: 0 auto;
}

.grid-sect2-product>div,
.product-img {
	overflow: hidden;
}

.product-img {
	aspect-ratio: 9/14;
	background-color: #DEDEDE;
	width: 100%;
}

.product-img img {
	width: 100%;
	height: 100%;
}

.product-img:hover img,
.grid-sect2-product>div P {
	transition: all 0.6s ease;
}

.product-img:hover img {
	scale: 1.1;
	transition: all 0.6s ease;
}

.grid-sect2-product>div:hover P {
	color: var(--white-color);
	transition: all 0.6s ease;
}

.go-back-arrow span {
	font-size: var(--content-font-size);
}

.product_detail-banner-img {
	width: 100%;
	aspect-ratio: 173/86;
	padding-top: 0 !important;
	background-color: #DEDEDE;
	overflow: hidden;
}

.product_detail-banner-img img {
	width: 100%;
	height: 100%;
}

.vertical-line {
	position: absolute;
	top: 38%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.inquire-now {
	position: absolute;
	bottom: 0;
	right: 0;
}

.inquire-now button {
	border-color: transparent;
}

.product_detail-img-2 {
	transform: translateY(10rem);
}

.product_detail-img-3 {
	padding: 16rem 0 2rem;
}

.product_detail-img-g3 {
	width: 92%;
	margin: 0 auto;
	align-items: flex-end;
}

#stonedge-product_detail-wrapper textarea,
#stonedge-product_detail-wrapper input {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--grey-color);
	height: 100%;
	width: 100%;
	font-size: var(--subtitle-font-size);
	padding: 0rem 0 1rem;
	color: var(--white-color);
	overflow: visible;
	transition: var(--common-transition);
}

#stonedge-product_detail-wrapper textarea::placeholder,
#stonedge-product_detail-wrapper input::placeholder {
	color: var(--grey-color);
	font-family: var(--regular-font-family);
	font-style: italic;
	position: relative;
	transition: var(--common-transition);
}

#stonedge-product_detail-wrapper textarea:focus,
#stonedge-product_detail-wrapper textarea:focus-visible,
#stonedge-product_detail-wrapper input:focus,
#stonedge-product_detail-wrapper input:focus-visible {
	border-color: var(--white-color) !important;
	outline: 0;
	transition: var(--common-transition);
}

#stonedge-product_detail-wrapper textarea:focus::placeholder,
#stonedge-product_detail-wrapper textarea:focus-visible::placeholder,
#stonedge-product_detail-wrapper input:focus::placeholder,
#stonedge-product_detail-wrapper input:focus-visible::placeholder {
	color: var(--white-color);
	transition: var(--common-transition);
}

.form-abs {
	position: absolute;
	top: 20%;
	left: 12%;
	width: 40%;
}

/* Project page */
.stonedge-section-1-project .flex-row-sect1>div:nth-child(1) {
	width: 25%;
}

.stonedge-section-1-project .flex-row-sect1>div:nth-child(2) {
	width: 65%;
}

.stonedge-section-1-project .grid-sect1-project {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.stonedge-section-1-project.banner-padding {
	padding: 10rem 0 8rem;
}


/* Project-detail page */

/* Section 1 */
.stonedge-section-1-project_detail .company-logo-project_detail {
	width: 5rem;
	margin: 0 auto;
}

/* Section 2 */
.stonedge-section-2-project_detail .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #000;
	opacity: .2;
	margin: 0 5px;
}

.stonedge-section-2-project_detail .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--white-color);
}

.stonedge-section-2-project_detail .swiper-pagination {
	position: absolute;
	text-align: center;
	width: 100%;
	-webkit-transition: .3s;
	transition: .3s;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	z-index: 10;
	bottom: 10%;
}

/* Section 3 */

.stonedge-section-3-project_detail .sect3-img2-project_detail {
	transform: translateY(20%);
}

.stonedge-section-3-project_detail .sect3-content2-project_detail {
	align-items: flex-end;
	padding: 10rem 0 10rem
}

.stonedge-section-3-project_detail .sect3-img4-container-project_detail {
	transform: translateY(20%);
}

/* Section 4 */

.stonedge-section-4-project .project-detail-swiper {
	overflow: hidden;
}

.stonedge-section-4-project_detail .project_detail-arrow {
	position: absolute;
	width: 95%;
	top: 50%;
	left: 50%;
	margin: 0 auto;
	transform: translate(-50%, -50%);
	z-index: 123;
}

.stonedge-section-4-project_detail .project_detail-arrow .material-symbols-outlined {
	font-size: 2.5rem;

}

/* Section 5 */

.stonedge-section-5-project_detail .material-symbols-outlined {

	font-size: var(--bannertitle-font-size)
}

.stonedge-section-5-project_detail .grid-sect5-project_detail {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	place-items: center;
	width: 70%;
	margin: 0 auto;
}

.stonedge-section-5-project_detail .sect5-inner-flex-project_detail {
	padding: 0 0 0 5rem;
	border-left: 1px solid var(--black-color);
}

/* Contact Page */
.stonedge-section-1-contact {
	padding-top: 30rem;
	padding-bottom: 0;
}

.get_in_touch-txt {
	position: absolute;
	top: 17rem;
	left: 5rem;
}

.contact-page-form {
	position: absolute;
	top: 36%;
	left: 12%;
	width: 38%;
}

.form_grid_block {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(1, 1fr);
	row-gap: var(--medium-gap-size);
}

.form_grid_block input,
.form_grid_block textarea {
	padding: 1rem 1rem 1rem 0;
	border: none;
	color: var(--secondary-color);
	font-size: var(--subtitle-font-size);
	font-family: var(--medium-font-family);
	border-bottom: 1px solid var(--black-color);
	width: 100%;
}

.form_grid_block input::placeholder,
.form_grid_block textarea::placeholder {
	font-style: italic;
}

.form_grid_block input:focus-visible,
.form_grid_block textarea:focus-visible {
	outline: none;
}

#contact_no-error,
#contact_no-error,
#email-error {
	position: absolute;
	width: max-content;
	left: 0;
	bottom: -1.5rem;
}

button.contact_button {
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--grey-color);
	background-color: transparent;
	display: flex;
	gap: 1.5rem;
	transition: var(--common-transition);
	align-items: center;
}

button.contact_button:hover {
	transition: var(--common-transition);
	background-color: var(--black-color);
	border-color: var(--black-color);
}

button.contact_button:hover p {
	color: var(--white-color);
	transition: var(--common-transition);
}

.view-map {
	width: fit-content;
	margin-top: 1rem;
	margin-right: 0;
	margin-left: auto;
}

.right-arrow-map>span {
	font-size: 3rem;
}

.contact-detail {
	position: absolute;
	bottom: 10%;
	left: 12%;
	width: 80%;
}

/* product-detail */
.flex-btn-product {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	justify-content: center;
}

.down-arrow {
	cursor: pointer;
}

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

.header-wrapper.black-header {
	filter: invert(1);
}

.header-wrapper.header_change.black-header {
	filter: unset;
}

.mobile-menu-wrapper {
	display: none;
}

.material-symbols-outlined {
	font-family: 'Material Symbols Outlined' !important;
}

.black-text>span {
	-webkit-text-stroke-color: #000 !important;
}

.image-changing {
	aspect-ratio: 1;
	overflow: hidden;
	background-image: url('../images/home/products-image.jpg');
	background-size: cover;
}

.image-changing img {
	height: 100%;
}

.footer_wrapper {
	filter: invert(1);
	transition: all 0.6s ease;
}

.footer_wrapper.footer-real-color {
	filter: unset;
	transition: all 0.6s ease;
}

.home-project-img-1 {
	aspect-ratio: 750/751;
	background-color: var(--placeholder-color);
	overflow: hidden;
}

.home-project-img-2 {
	aspect-ratio: 5/8;
	overflow: hidden;
	background-color: var(--placeholder-color);
}

.home-project-img-3 {
	aspect-ratio: 5/8;
	overflow: hidden;
	background-color: var(--placeholder-color);
}

.about-sect2-img {
	width: 100%;
	overflow: hidden;
	background-color: var(--placeholder-color);
	aspect-ratio: 48/25;
}

.about-sect2-img img {
	height: 100%;
}

.home-project-img-4 {
	aspect-ratio: 62/39;
	background-color: var(--placeholder-color);
	overflow: hidden;
}


.home-project-img-5 {
	aspect-ratio: 16/10;
	overflow: hidden;
	background-color: var(--placeholder-color);
}


.home-project-img-6 {
	aspect-ratio: 310/193;
	background-color: var(--placeholder-color);
	overflow: hidden;
}


.home-project-img-7 {
	aspect-ratio: 615/812;
	background-color: var(--placeholder-color);
	overflow: hidden;
}

.home-project-img img {
	height: 100%;
}

.home-project-img {
	width: 100%;
}

.project-list-img {
	aspect-ratio: 289/155;
	background-color: var(--placeholder-color);
	overflow: hidden;
}

.project-list-img img {
	height: 100%;
}

.project-list-card:hover .project-list-img img {
	transform: scale(1.03);
}

.row-link-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.section-arrow h2 span {
	font-size: 5rem;
	transform: translateX(-1rem);
	transition: all 0.6s ease;
}

.project-list-card:hover .section-arrow h2 span {
	transform: translateX(0rem);
	transition: all 0.6s ease;
}

.project-list-card .section-title h2 span {
	transition: all 0.6s ease;
}

.project-list-card:hover .section-title h2 span {
	color: #000 !important;
	-webkit-text-fill-color: #000 !important;
}

.project-detail-banner-img {
	aspect-ratio: 16/6;
	background-color: var(--placeholder-color);
	overflow: hidden;
	width: 100%;
}

.project-detail-banner-img img {
	height: 100%;
}

.sect3-img1-project_detail {
	aspect-ratio: 4/3;
	background-color: var(--placeholder-color);
	overflow: hidden;
}


.sect3-img2-project_detail {
	aspect-ratio: 3/4;
	background-color: var(--placeholder-color);
	overflow: hidden;
}

.detail-page-img {
	width: 50%;
}

.detail-page-img img {
	height: 100%;
}

.sect3-img3-project_detail img {
	aspect-ratio: 5/8;
	background-color: var(--placeholder-color);
}

.sect3-img4-project_detail img,
.sect3-img5-project_detail img {
	aspect-ratio: 62/39;
	background-color: var(--placeholder-color);
}

.sect3-img3-project_detail {
	width: 40%;
}

.next-project-detaiol {
	aspect-ratio: 3/2;
	background-color: var(--placeholder-color);
	overflow: hidden;
}

.next-project-detaiol img {
	height: 100%;
}
label.error{
	color: #ff0000;
}
md-toast{
	position: fixed;
}