/* OMG Creative Agency Business HTML-5 Template */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header
5. Banner One
6. Services One
7. Gallery One
8. journal One
9. Testimonial One
10. Counter One
11. Awards One
12. Main Footer
13. Page Title
14. Team One
15. journal Detail
16. Work One
17. Work Detail
18. Contact Info
19. Contact Form

====================================================================
	Attachment Css Files
====================================================================

***/

@import url('global.css');
@import url('header.css');
@import url('footer.css');
@import url('animate.css');
@import url('swiper-bundle.min.css');
@import url('font-awesome.css');
@import url('custom-animate.css');

/*** 

====================================================================
	Banner One
====================================================================

***/

@font-face {
	font-family: 'digital-7';
	src: url("../fonts/Doto.ttf") format("truetype");
}

.ai-home-page {
	position: relative;
	padding: 120px 0px 80px;
	background: url(../images/bg-radial.svg) no-repeat bottom center / cover, linear-gradient(0deg, rgba(34, 3, 67, 1) 0%, rgba(14, 20, 136, 1) 87.15%);
	min-height: 720px;
	max-width: 100%;
}
.breadcumb-wrapper{
    background-color: #000;
    padding: 0;
}
.breadcumb-menu{
    margin: 15px 0 5px 0;
}
.breadcumb-menu li:last-child{
    color: #fff;
}
.header-top{
    background-color: #000000f2;
}
.banner-one_content {
	position: relative;
	z-index: 2;
	overflow: hidden;
}

.banner-one_content-inner {
	position: relative;
	overflow: hidden;
}

.banner-one_content-inner video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	overflow: hidden;
}

.banner-one_heading {
	font-weight: 700;
	text-align: center;
	margin-bottom: 80px;
	color: #490534;
	text-transform: uppercase;
	opacity: 0;
}

.banner-one_text {
	position: relative;
	font-size: 30px;
	line-height: 40px;
	padding-top: 20px;
	padding-right: 180px;
	color: var(--white-color);
	border-top: 1px solid #540045;
}

.banner-one_text-two {
	position: relative;
	font-size: 30px;
	line-height: 40px;
	padding-bottom: 20px;
	padding-right: 180px;
	color: var(--white-color);
	border-bottom: 1px solid #540045;
}

.banner-one .down-box {
	position: absolute;
	left: 47%;
	bottom: 65px;
	z-index: 10;
	width: 125px;
	height: 125px;
	cursor: pointer;
	-webkit-animation: icon-bounce 0.8s ease-out infinite;
	animation: icon-bounce 0.8s ease-out infinite;
}

/*** 

====================================================================
	Services One
====================================================================

***/
.about-header-section {
	background:
		url(../images/circle-top-right.svg) no-repeat right -200px top -300px / contain,
		url(../images/circle-left.svg) no-repeat left -70px top 0px / 800px;
	padding-bottom: 100px;
}

.vid-section {
	min-height: 300px;
	width: 100%;
	padding: 0;
	object-fit: cover;
}

#about-video {
	object-fit: cover;
}

.top-logo {
	width: 33%;
	margin-top: 40px;
}

.about-header-title {
	font-family: "MuseoSans-black", sans-serif;
	color: #fff;
	text-transform: uppercase;
	text-align: left;
	font-size: 34px;
	line-height: 34px;
	margin-bottom: 20px;
}

.about-header-text {
	font-family: "MuseoSans 100", sans-serif;
	color: #fff;
}

.about-header-section span {
	color: #e21a3f;
}

.about-titles {
	padding: 5px 25px;
	width: fit-content;
	left: 0;
	right: 0;
	margin: 20px auto;
	color: #fff;
	text-align: center;
	background: -moz-linear-gradient(0% 50% 0deg, rgba(25, 36, 198, 1) 0%, rgba(28, 24, 151, 0.65) 34.87%, rgba(34, 3, 67, 0) 100%);
	background: -webkit-linear-gradient(0deg, rgba(25, 36, 198, 1) 0%, rgba(28, 24, 151, 0.65) 34.87%, rgba(34, 3, 67, 0) 100%);
	background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0, rgba(25, 36, 198, 1)), color-stop(0.3487, rgba(28, 24, 151, 0.65)), color-stop(1, rgba(34, 3, 67, 0)));
	background: -o-linear-gradient(0deg, rgba(25, 36, 198, 1) 0%, rgba(28, 24, 151, 0.65) 34.87%, rgba(34, 3, 67, 0) 100%);
	background: -ms-linear-gradient(0deg, rgba(25, 36, 198, 1) 0%, rgba(28, 24, 151, 0.65) 34.87%, rgba(34, 3, 67, 0) 100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1924C6', endColorstr='#220343' ,GradientType=0)";
	background: linear-gradient(90deg, rgba(25, 36, 198, 1) 0%, rgba(28, 24, 151, 0.65) 34.87%, rgba(34, 3, 67, 0) 100%);
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1924C6', endColorstr='#220343', GradientType=1);
	transition: all 0.3s ease;
	cursor: help;
}

.about-titles:hover {
	padding: 5px 30px;
	transition: all 0.3s ease;
}

.about-titles span {
	color: #e21a3f;
}

.about-desc {
	font-family: "MuseoSans-med", sans-serif;
	background: url(../images/page-about/about-desc-bg.svg) no-repeat bottom center / cover;
	overflow: hidden;
}

.about-desc p {
	color: #fff;
	text-align: center;
	margin-bottom: 50px;
}

.about-desc h5 {
	color: #e21a3f;
	text-align: center;
	margin-bottom: 5px;
}

.about-header-section .float-circle {
	width: 150px;
	position: absolute;
	transform: translate(0%, 7%);
	top: 16%;
	right: 5%;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.about-header-section .float-circle:hover {
	mix-blend-mode: difference;
	cursor: pointer;
	transition: all 0.3s ease;
}

.content-boxes {
	position: relative;
}

.about-desc .grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	padding: 50px 30px;
	margin-bottom: 200px;
}

.about-desc .grid-5 .grid-item {
	background: linear-gradient(0deg, #49053300 0%, #220343 100%);
	padding: 25px;
	border-radius: 20px;
	position: relative;
	height: 350px;
	transition: all 0.3s ease;
}


.about-desc .grid-5 .grid-item:hover {
	background: -moz-linear-gradient(50% 100% 90deg, rgba(73, 5, 52, 0) 0%, rgba(104, 9, 54, 0.15) 15.21%, rgba(156, 16, 58, 0.43) 43.45%, rgba(194, 22, 61, 0.68) 68.01%, rgba(217, 25, 62, 0.88) 87.68%, rgba(226, 26, 63, 1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(73, 5, 52, 0) 0%, rgba(104, 9, 54, 0.15) 15.21%, rgba(156, 16, 58, 0.43) 43.45%, rgba(194, 22, 61, 0.68) 68.01%, rgba(217, 25, 62, 0.88) 87.68%, rgba(226, 26, 63, 1) 100%);
	background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0, rgba(73, 5, 52, 0)), color-stop(0.1521, rgba(104, 9, 54, 0.15)), color-stop(0.4345, rgba(156, 16, 58, 0.43)), color-stop(0.6801, rgba(194, 22, 61, 0.68)), color-stop(0.8768, rgba(217, 25, 62, 0.88)), color-stop(1, rgba(226, 26, 63, 1)));
	background: -o-linear-gradient(90deg, rgba(73, 5, 52, 0) 0%, rgba(104, 9, 54, 0.15) 15.21%, rgba(156, 16, 58, 0.43) 43.45%, rgba(194, 22, 61, 0.68) 68.01%, rgba(217, 25, 62, 0.88) 87.68%, rgba(226, 26, 63, 1) 100%);
	background: -ms-linear-gradient(90deg, rgba(73, 5, 52, 0) 0%, rgba(104, 9, 54, 0.15) 15.21%, rgba(156, 16, 58, 0.43) 43.45%, rgba(194, 22, 61, 0.68) 68.01%, rgba(217, 25, 62, 0.88) 87.68%, rgba(226, 26, 63, 1) 100%);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#490534', endColorstr='#E21A3F' ,GradientType=0)";
	background: linear-gradient(0deg, rgba(73, 5, 52, 0) 0%, rgba(104, 9, 54, 0.15) 15.21%, rgba(156, 16, 58, 0.43) 43.45%, rgba(194, 22, 61, 0.68) 68.01%, rgba(217, 25, 62, 0.88) 87.68%, rgba(226, 26, 63, 1) 100%);
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E21A3F', endColorstr='#490534', GradientType=0);
	cursor: pointer;
	border-radius: 20px 20px 0px 0px;
	transition: all 0.3s ease;
	/* border: 1px solid #fff; */
	border-bottom: none;
}


.about-desc .grid-5 .grid-item-2,
.about-desc .grid-5 .grid-item-4 {
	margin-top: 120px;
}

.about-desc .grid-5 .grid-item-3 {
	margin-top: -100px;
}

.about-desc .grid-5 .grid-item img {
	width: 60px;
	margin-bottom: 20px;
}

.about-desc .grid-5 .grid-item:hover img {
	filter: invert(1);
	mix-blend-mode: color-dodge;
	cursor: pointer;
}

.about-desc .grid-5 .grid-item .grid-item-title {
	color: #fff;
}

.about-desc .grid-5 .grid-item .grid-item-text {
	color: #fff;
	text-align: left;
	margin-bottom: 20px;
}

.stroke {
	border: 3px solid #3b3b70;
	border-radius: 3px;
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 90%;
}

.about-desc .grid-5 .grid-item:hover:hover .stroke {
	border: 2px solid #fff;
}

.video-container {
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	height: 400px;
}

.video-container video {
	margin-top: -50%;
	mix-blend-mode: difference;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(5px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/*** 

====================================================================
	Our Clients
====================================================================

***/

.clients-section {
	position: relative;
	padding: 30px 0px 30px;
	background: linear-gradient(45deg, #490534 10%, #220343 70%);
	max-width: 100%;
}

.clients-section .auto-container {
	max-width: 1200px;
}

.clients-swiper {
	margin-bottom: 50px;
	overflow: hidden;
}

.clients-swiper .swiper-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-y: visible;
}

/* Swiper container styles */
.clients-swiper.swiper {
	width: 100%;
	height: auto;
	padding: 20px 0px;
	scrollbar-width: none;
	/* For Firefox */
	-ms-overflow-style: none;
	/* For Internet Explorer and Edge */

}

/* Logo slide styles */
.clients-swiper .swiper-slide {
	width: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transform: scale(0.8);
	filter: brightness(0.8);
	opacity: 0.8;
	transition: all 0.4s ease-out;
}

.clients-swiper .swiper-slide .client-logo {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Center position styles (applied via JS based on position) */
.clients-swiper .swiper-slide.center-position {
	transform: scale(1.2);
	filter: brightness(1);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	z-index: 10;
	opacity: 1;
	margin: 0 20px;
}

/* Center main slide (largest) */
.clients-swiper .swiper-slide.center-main {
	transform: scale(1.3) !important;
	filter: brightness(1) !important;
	z-index: 10 !important;
	opacity: 1 !important;
	transition: all 0.6s ease-in-out !important;
}

/* Center secondary slides (slightly smaller) */
.clients-swiper .swiper-slide.center-secondary {
	transform: scale(1.2) !important;
	filter: brightness(1) !important;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
	z-index: 5 !important;
	opacity: 1 !important;
	margin: 0 30px !important;
}

/* Logo image styles */
.clients-swiper .swiper-slide img {
	width: 100%;
	object-fit: contain;
	padding: 20px;
	transition: transform 0.3s ease;
}

/* Navigation buttons */
.clients-swiper .swiper-button-next,
.clients-swiper .swiper-button-prev {
	color: #333;
	background: rgba(255, 255, 255, 0.8);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	backdrop-filter: blur(5px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.clients-swiper .swiper-button-next::after,
.clients-swiper .swiper-button-prev::after {
	font-size: 1.5rem;
	font-weight: bold;
}

/* Pagination dots */
.clients-swiper .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: #ccc;
	opacity: 1;
}

.clients-swiper .swiper-pagination-bullet-active {
	background: #eaeaea;
}

/* Controls container */
.clients-swiper .carousel-controls {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin-top: 30px;
}

.clients-swiper .control-btn {
	background: #545454;
	color: white;
	border: none;
	padding: 10px 25px;
	border-radius: 30px;
	cursor: pointer;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 20px;
	transition: all 0.3s ease;
}

/*** 

====================================================================
	Services One
====================================================================

***/
.services-section {
	background:
		url(../images/circle-top-right.svg) no-repeat right -300px top -400px / contain,
		url(../images/page-about/about-desc-bg.svg) no-repeat bottom center / cover,
		url(../images/circle-left.svg) no-repeat left 30px top 50px / contain;
	height: 100%;
}

.services-section .float-circle {
	position: absolute;
	top: 530px;
	right: 40px;
	width: 100px;
	rotate: 90deg;
}

.our-solution-title {
	margin-top: 20px;
}

.our-solution-title .float-circle-top-center {
	width: 160px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: -80px;
	rotate: 210deg;
}

.our-solution-title h2 {
	line-height: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	background: none;
}

.our-solution-title h2 p {
	color: #fff;
	font-family: "MuseoSans-light", sans-serif;
}

.solutions {
	margin-bottom: 40px;
}

.solutions .solution .item {
	position: relative;
	background: linear-gradient(0deg, #49053300 0%, #220343 100%);
	border-radius: 20px;
	padding: 20px;
	transition: all 0.3s ease;
	height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: "MuseoSans-light", sans-serif;
	font-size: 22px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: 100px;
	transition: all 0.4s ease;
}

.solutions .solution .item::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
	background: linear-gradient(0deg, #e21a3f00 0%, #e21a3f 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 0;
}

.solutions .solution .item:hover::before {
	opacity: 1;
	z-index: -1;
}

.solutions .solution .item>* {
	position: relative;
	z-index: 1;
}

.solutions .solution .item:hover {
	transform: scale(1.05);
	font-family: "MuseoSans-black", sans-serif;
	margin-top: 50px;
	transition: all 0.1s ease;
}

.service-list {
	color: #fff;
	margin-top: 50px;
	font-size: 1.5em;
	line-height: 30px;
}

.service-list li {
	cursor: pointer;
	font-family: "MuseoSans-med", sans-serif;
	position: relative;
	transition: all 0.3s ease;
}

.service-list li:hover {
	color: var(--red-color);
	font-weight: bold;
	transition: all 0.3s ease;
}

.service-list li::before {
	content: '';
	width: 25px;
	height: 4px;
	background-color: #fff;
	position: absolute;
	left: -30px;
	top: 12px;
	rotate: 0deg;
	border-radius: 4px;
	transition: all 0.3s ease;
}

.service-list li:hover::before {
	background-color: #e21a3f;
	rotate: 90deg;
	height: 5px;
	transition: all 0.3s ease;
}

.service-list li.active {
	color: #e21a3f;
	font-family: "MuseoSans-black", sans-serif;
}


/* products popup setup */

.products-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: #0b0016cf;
	backdrop-filter: blur(4px);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	scale: 0.8;
	transition: opacity 0.4s ease, scale 0.4s ease;
}

.products-popup.active {
	display: flex;
	visibility: visible;
	opacity: 1;
	scale: 1;
}

.products-popup .product-content {
	width: 80%;
	min-height: 80%;
	border-radius: 35px;
	background: linear-gradient(0deg, #49053329, #490534);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 25px 30px;
	position: relative;
	transform: scale(0.8);
	opacity: 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.products-popup.active .product-content {
	transform: scale(1);
	opacity: 1;
}

.products-popup .product-content .close {
	color: var(--red-color);
	font-family: 'FontAwesome';
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -25px;
	right: -25px;
	font-size: 2em;
	/* border: 1px solid var(--red-color); */
	background-color: #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.products-popup .product-content .close:hover {
	background-color: var(--red-color);
	color: #fff;
	transform: rotate(90deg);
}

.products-popup .product-content .icon {
	width: 140px;
	margin: 25px auto;
	margin-top: -60px;
	max-height: 70px;
	mix-blend-mode: color-dodge;
}

.products-popup .product-content .sec-title_heading {
	align-self: flex-start;
}

.products-popup .product-content .solution-txt p {
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 30px;
}

.products-popup .product-gallery {
	max-width: 1000px;
}

.product-swiper {
	position: relative;
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.product-swiper .swiper-slide img {
	width: 100%;
	border-radius: 10px;
	display: block;
}

.products-popup .swiper .swiper-slide {
	max-width: 430px;
	padding: 10px;
}

.products-popup .swiper img {
	width: 100%;
	/* filter: grayscale(1); */
	border-radius: 15px;
	cursor: pointer;
	transition: all 0.4s ease;
}

.swiper-button-prev,
.swiper-button-next {
	color: #fff;
	transition: opacity 0.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	opacity: 0.7;
}

.products-popup .swiper img.current {
	filter: grayscale(0);
}

.products-popup .swiper img:hover {
	filter: grayscale(0);
	scale: 1.1;
	transition: all 0.4s ease;
}

/* Allow Fancybox to escape Swiper and popup boundaries */
.fancybox__container {
	z-index: 999999 !important;
}

.products-popup .product-content {
	overflow: visible !important;
}

/* Sometimes swiper container has overflow hidden that causes the clipping */
.product-swiper {
	overflow: visible !important;
}


/* products popup end */



.video-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* fills background */
}

.service-page-section {
	padding: 0px 10px 20px;
	min-height: 400px;
	max-width: 100%;
}

.service-page-section .para1 {
	font-size: 18px;

}

.service-page-section .para1 b {
	margin-top: 10px;
	display: block;
	word-spacing: 5px;
}

.service-txt-para {
	position: relative;

}

.service-txt-para p {
	font-family: "MuseoSans-med", sans-serif;
	font-size: 20px;
	top: 80px;
	line-height: 1.2;
}

.service-txt-para::before {
	content: "";
	position: absolute;
	left: -20%;
	top: -30%;
	rotate: 45deg;
	width: 600px;
	height: 600px;
	background: url(../images/bg-circle.svg) no-repeat center center;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}


/*** 

====================================================================
	Gallery One
====================================================================

***/

.gallery-one {
	position: relative;
	padding: 100px 0px 70px;
	background-color: var(--color-four);
}

.gallery-block_one {
	position: relative;
	margin-bottom: 30px;
}

.gallery-block_one-inner {
	position: relative;
}

.gallery-block_one-content {
	position: relative;
	padding: 25px 25px;
	border: 1px solid rgba(var(--white-color-rgb), 0.20);
}

.gallery-block_one-content:before {
	position: absolute;
	content: '';
	left: -1px;
	top: -1px;
	right: -1px;
	bottom: -1px;
	opacity: 0;
	transform: scale(0.2, 1);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
}

.gallery-block_one-inner:hover .gallery-block_one-content:before {
	opacity: 1;
	transform: scale(1, 1);
}

.gallery-block_one-image {
	position: relative;
	overflow: hidden;
	margin-bottom: 25px;
}

.gallery-block_one-inner:hover .gallery-block_one-image:before {
	-webkit-animation: shine 1s;
	animation: shine 1s;
}

.gallery-block_one-image:before {
	position: absolute;
	top: 0;
	left: -85%;
	z-index: 99;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
	background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .7)));
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
	-webkit-transform: skewX(-25deg);
	-ms-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

.gallery-block_one-image img {
	position: relative;
	width: 100%;
	display: block;
}

.gallery-block_one-title {
	position: relative;
	font-size: 18px;
	text-transform: capitalize;
	color: rgba(var(--white-color-rgb), 0.50);
}

.gallery-block_one-heading {
	position: relative;
	font-weight: 600;
	margin-top: 10px;
	text-transform: uppercase;
}

.gallery-block_one-heading a {
	position: relative;
	color: rgba(var(--white-color-rgb), 1);
}

.gallery-block_one-heading a:hover {
	color: rgb(255 255 255);
}

.service-block_one-more {
	position: relative;
	margin-left: 25px;
}

.service-block_one-more .view-more {
	position: relative;
	font-size: 16px;
	line-height: 1em;
	display: inline-block;
	padding: 9px 45px 9px 10px;
	color: var(--color-four);
	text-transform: uppercase;
	background-color: var(--white-color);
}

.service-block_one-more .view-more i {
	position: absolute;
	right: 1px;
	top: 1px;
	bottom: 1px;
	width: 35px;
	font-size: 18px;
	line-height: 33px;
	color: var(--white-color);
	background-color: var(--color-four);
}

/*** 

====================================================================
	journal One
====================================================================

***/

.journal-one {
	position: relative;
	padding: 100px 0px 70px;
	background-attachment: fixed;
	background-size: cover;
}

.journal-one:before {
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0.70;
	background-color: var(--color-four);
}

.journal-one .journal-block_one {
	width: 20%;
	float: left;
	padding: 0px 15px;
}

.journal-block_one {
	position: relative;
	margin-bottom: 30px;
}

.journal-block_one-inner {
	position: relative;
	padding: 25px 25px;
	background-color: rgba(var(--black-color-rgb), 0.50);
}

.journal-block_one-inner:before {
	position: absolute;
	content: '';
	left: -1px;
	top: -1px;
	right: -1px;
	bottom: -1px;
	opacity: 0;
	transform: scale(0.2, 1);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
}

.journal-block_one-inner:hover::before {
	opacity: 1;
	transform: scale(1, 1);
}

.journal-block_one-title {
	position: relative;
	font-size: 14px;
	padding: 5px 15px;
	text-transform: capitalize;
	color: var(--white-color);
	display: inline-block;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	border: 1px solid rgba(var(--white-color-rgb), 0.50);
}

.journal-block_one-inner:hover .journal-block_one-title {
	color: var(--white-color);
	border-color: var(--color-four);
	background-color: var(--color-four);
}

.journal-block_one-heading {
	position: relative;
	font-weight: 400;
	margin-top: 18px;
	max-width: 220px;
	margin-bottom: 110px;
}

.journal-block_one-heading a {
	position: relative;
	color: var(--white-color);
}

.journal-block_one-arrow {
	position: absolute;
	right: 10px;
	bottom: 15px;
	line-height: 1em;
	font-size: 30px;
	display: inline-block;
	color: var(--white-color);
	transform: rotate(45deg);
}

.journal-block_one-arrow:hover {
	color: var(--color-four);
}

/*** 

====================================================================
	Testimonial One
====================================================================

***/

.testimonial-one {
	position: relative;
	padding: 100px 0px 70px;
	background-color: var(--color-four);
}

.testimonial-one.style-two {
	padding-top: 0px;
	background: none;
}

.testimonial-block_one {
	position: relative;
	margin-bottom: 30px;
}

.testimonial-block_one-inner {
	position: relative;
}

.testimonial-block_one-content {
	position: relative;
	padding: 25px 25px;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	border: 1px solid rgba(var(--white-color-rgb), 0.10);
}

.testimonial-block_one-content:before {
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0;
	background-color: var(--white-color);

	-webkit-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
	transition: all 900ms ease;
	-webkit-transform: perspective(400px) rotateX(-90deg);
	-moz-transform: perspective(400px) rotateX(-90deg);
	-ms-transform: perspective(400px) rotateX(-90deg);
	-o-transform: perspective(400px) rotateX(-90deg);
	transform: perspective(400px) rotateX(-90deg);
	-webkit-transform-origin: top;
	-moz-transform-origin: top;
	-ms-transform-origin: top;
	-o-transform-origin: top;
	transform-origin: top;
	-ms-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.testimonial-block_one-inner:hover .testimonial-block_one-content:before {
	opacity: 1;
	-webkit-transform: perspective(400px) rotateX(0deg);
	-moz-transform: perspective(400px) rotateX(0deg);
	-ms-transform: perspective(400px) rotateX(0deg);
	-o-transform: perspective(400px) rotateX(0deg);
	transform: perspective(400px) rotateX(0deg);
}

.testimonial-block_one-author {
	position: relative;
	width: 70px;
	height: 70px;
	display: inline-block;
}

.testimonial-block_one-name {
	position: relative;
	font-weight: 500;
	margin-top: 25px;
	color: var(--white-color);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.testimonial-block_one-inner:hover .testimonial-block_one-designation,
.testimonial-block_one-inner:hover .testimonial-block_one-name {
	color: var(--color-four);
}

.testimonial-block_one-designation {
	position: relative;
	font-weight: 400;
	font-size: 15px;
	margin-top: 5px;
	opacity: 0.30;
	color: var(--white-color);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.testimonial-block_one-number {
	position: relative;
	font-weight: 700;
	font-size: 40px;
	margin-top: 30px;
	opacity: 0.10;
	text-align: right;
	color: var(--white-color);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.testimonial-block_one-inner:hover .testimonial-block_one-number {
	opacity: 1;
	color: var(--color-four);
}

.testimonial-block_one-lower {
	position: relative;
	margin-left: 30px;
	margin-top: 25px;
	font-size: 18px;
	line-height: 28px;
	padding-left: 70px;
	color: var(--white-color);
}

.testimonial-block_one-lower .quote_icon {
	position: absolute;
	left: 0px;
	top: 6px;
	line-height: 1em;
}

/*** 

====================================================================
	stats One
====================================================================

***/

.stats-one {
	position: relative;
	padding: 100px 0px 100px;
	background-attachment: fixed;
	background-size: cover;
}

.stats-one.style-two::before {
	display: none;
}

.stats-one:before {
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0.90;
	background-color: var(--color-four);
}

.stats-one .inner-container {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(var(--white-color-rgb), 1);
	border-bottom: 0px;
}

.stats-one .counter-block_one {
	float: left;
	padding: 0px 0px;
}

.counter-block_one {
	position: relative;
}

.counter-block_one-inner {
	position: relative;
	padding: 35px 55px;
	border-right: 1px solid rgba(var(--white-color-rgb), 1);
	border-bottom: 1px solid rgba(var(--white-color-rgb), 1);
}

.counter-block_one-inner:before {
	position: absolute;
	content: '';
	right: 20px;
	top: 20px;
	width: 15px;
	height: 15px;
	border-radius: 50px;
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
}

.counter-block_one-counter {
	position: relative;
	font-size: 75px;
	font-weight: 500;
	line-height: 1em;
	color: var(--white-color);
}

.counter-block_one-text {
	position: relative;
	font-size: 20px;
	margin-top: 0px;
	color: var(--white-color);
	text-transform: capitalize;
}

.stats-one_contact-column {
	padding: 0px 0px;
	float: left;
}

.stats-one .stats-one_contact-column {
	position: relative;
}

.stats-one_contact-inner {
	position: relative;
	padding: 35px 35px;
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
}

.stats-one_contact-content {
	position: relative;
	padding: 19px 30px 19px 80px;
	background-color: var(--color-four);
}

.stats-one_contact-icon {
	position: absolute;
	left: 25px;
	top: 40px;
	font-size: 34px;
	line-height: 1em;
	color: var(--white-color);
}

.stats-one_contact-content h3 {
	position: relative;
	font-size: 30px;
	font-weight: 500;
	color: var(--white-color);
	text-transform: uppercase;
}

.stats-one_contact-content .text {
	position: relative;
	font-size: 20px;
	font-weight: 400;
	color: var(--white-color);
	text-transform: capitalize;
}

/*** 

====================================================================
	Awards One
====================================================================

***/

.awards-one {
	position: relative;
	padding: 100px 0px 100px;
	background-color: var(--color-four);
}

.awards-one.style-two {
	padding-top: 0px;
	background: none;
}

.awards-block_one {
	position: relative;
	margin-bottom: 10px;
}

.awards-block_one-inner {
	position: relative;
	padding: 10px 10px;
	min-height: 122px;
	border: 1px solid rgba(var(--white-color-rgb), 0.10);
}

.awards-block_one-inner:before {
	position: absolute;
	content: '';
	left: -1px;
	top: -1px;
	right: -1px;
	bottom: -1px;
	opacity: 0;
	transform: scale(1, 0.2);
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
}

.awards-block_one-inner:hover::before {
	opacity: 1;
	transform: scale(1, 1);
}

.awards-block_one-content {
	position: relative;
	padding-top: 25px;
	padding-left: 125px;
}

.awards-block_one-number {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100px;
	height: 100px;
	font-size: 40px;
	line-height: 98px;
	text-align: center;
	display: inline-block;
	color: var(--white-color);
	background-color: var(--black-color);
	border: 1px solid rgba(var(--white-color-rgb), 0.10);
}

.awards-block_one-title {
	position: relative;
	font-weight: 400;
	color: var(--white-color);
	text-transform: uppercase;
}

.awards-block_one-title span {
	position: relative;
	font-size: 17px;
	top: -5px;
	opacity: 0;
	margin-left: 10px;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.awards-block_one-inner:hover .awards-block_one-title span {
	opacity: 1;
}

.awards-block_one-arrow {
	position: absolute;
	right: 25px;
	top: 25px;
	z-index: 1;
	font-size: 44px;
	line-height: 1em;
	color: var(--white-color);
}

.awards-block_one-link {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 10;
	display: block;
}

/*** 

====================================================================
	Page Title
====================================================================

***/

.page-title {
	position: relative;
	text-align: center;
	padding: 150px 0px 90px;
}

.page-title.about-page-title {
	position: relative;
	text-align: center;
	padding: 120px 0px 30px;
}

.page-title_heading {
	position: relative;
	color: var(--white-color);
	text-transform: uppercase;
	margin-top: 100px;
	margin-bottom: 10px;
	text-align: center;
}

.page-title_heading span {
	color: var(--main-color)
}

.page-title_text {
	position: relative;
	font-size: 16px;
	margin-top: 10px;
	color: var(--white-color);
	text-align: center;
	margin-bottom: 50px;
}

/*** 

====================================================================
	Team One
====================================================================

***/

.team-one {
	position: relative;
}

.team-one .title-box {
	position: relative;
}

.team-one .title-box h2 {
	position: relative;
	font-size: 40px;
	font-weight: 400;
	line-height: 50px;
	max-width: 670px;
	margin-bottom: 40px;
	color: var(--white-color);
}

.team-block_one {
	position: relative;
	margin-bottom: 40px;
}

.team-block_one-inner {
	position: relative;
	padding-left: 25px;
	padding-bottom: 40px;
}

.team-block_one-inner:before {
	position: absolute;
	content: '';
	left: 0px;
	top: 45px;
	right: 0px;
	bottom: 0px;
	border: 1px solid rgba(var(--white-color-rgb), 0.10);
}

.team-block_one-socials {
	position: relative;
	width: 172px;
	margin-top: 70px;
	display: inline-block;
	padding: 10px 9px 4px;
	background-color: var(--black-color);
	border: 1px solid rgba(var(--white-color-rgb), 0.10);
}

.team-block_one-socials a {
	position: relative;
	width: 70px;
	height: 40px;
	margin: 0px 2px 5px;
	line-height: 38px;
	text-align: center;
	display: inline-block;
	border: 1px solid rgba(var(--white-color-rgb), 0.10);
}

.team-block_one-socials a img {
	position: relative;
	width: 24px;
	top: -1px;
}

.team-block_one-socials a:hover {}

.team-block_one-image {
	position: absolute;
	right: 30px;
	bottom: 0px;
}

.team-block_one-heading {
	position: relative;
	font-weight: 500;
	margin-top: 35px;
}

.team-block_one-heading a {
	position: relative;
	color: var(--white-color);
}

.team-block_one-designation {
	position: relative;
	font-size: 16px;
	margin-top: 0px;
	opacity: 0.50;
	color: var(--white-color);
}

/*** 

====================================================================
	Contact One
====================================================================

***/

.contact-one {
	position: relative;
	padding: 30px 0px 70px;
	background:
		url(../images/circle-top-right.svg) no-repeat right -200px top -300px / contain,
		url(../images/circle-left.svg) no-repeat left -70px top 0px / 800px;
	height: 100%;
}

.contact-one_info-column {
	position: relative;
	margin-bottom: 30px;
}

.contact-one_info-outer {
	position: relative;
}

.contact-one_heading {
	position: relative;
	color: var(--white-color);
	font-family: MuseoSans-med;
	text-transform: capitalize;
}

.contact-one_list {
	position: relative;
	margin-top: 25px;
	padding: 20px 0px;
	/* border-top: 1px solid rgba(var(--white-color-rgb), 0.50); */
	border-bottom: 1px solid rgba(var(--white-color-rgb), 0.50);
}

.contact-one_list li {
	position: relative;
	font-size: 22px;
	line-height: 32px;
	margin-bottom: 20px;
	color: var(--white-color);
}

.contact-one_list li a {
	position: relative;
	color: var(--white-color);
}

.contact-one_list li:nth-child(2) {
	margin-bottom: 0px;
}

.contact-one_list li:last-child {
	margin-bottom: 0px;
}

.contact-one_socials {
	position: relative;
	margin-top: 25px;
}

.contact-one_socials li {
	position: relative;
	margin-right: 10px;
	display: inline-block;
}

.contact-one_socials li a {
	position: relative;
	font-size: 18px;
	font-weight: 400;
	color: var(--white-color);
}

.contact-one_form-column {
	position: relative;
	margin-bottom: 30px;
}

.contact-one_form-outer {
	position: relative;
}

.contact-one_form-outer h3 {
	position: relative;
	margin-bottom: 20px;
	color: var(--white-color);
	font-family: MuseoSans-med;
	text-transform: capitalize;
}

.info-details {
	background-color: #000000bf;
    border-bottom: 1px solid #ffffff26;
    height: 40px;
}

.info-details .phone-email-omg {
	max-width: 1300px;
	padding: 0px 15px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.phone-email-omg a {
	color: #fff;
}

.phone-email-omg a:hover {
	color: var(--main-color);
}

.social-links {
	display: flex;
}

.social-links a {
	font-size: 16px;
	width: auto;
}

.back2solutions {
	position: absolute;
	color: #fff;
	font-size: 40px;
	top: 70px;
	cursor: pointer;
	z-index: 9;
}

.back2solutions:hover {
	color: var(--main-color);
}


/*** 

====================================================================
	Contact Form
====================================================================

***/

.contact-form .form-group {
	position: relative;
	margin-bottom: 20px;
}

.contact-form .form-group:last-child {
	margin-bottom: 0px;
}

.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="password"],
.contact-form .form-group input[type="tel"],
.contact-form .form-group input[type="email"],
.contact-form .form-group select {
	position: relative;
	display: block;
	width: 100%;
	line-height: 28px;
	padding: 10px 20px;
	height: 60px;
	border-radius: 0px;
	font-weight: 400;
	font-size: 20px;
	color: var(--white-color);
	-webkit-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
	background: none;
	border: 1px solid rgba(var(--white-color-rgb), 0.10);
}

.contact-form .form-group textarea::-webkit-input-placeholder,
.contact-form .form-group input::-webkit-input-placeholder {
	color: var(--white-color);
}

.contact-form .form-group input[type="text"]:focus,
.contact-form .form-group input[type="password"]:focus,
.contact-form .form-group input[type="tel"]:focus,
.contact-form .form-group input[type="email"]:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus {
	border-color: var(--white-color);
}

.contact-form .form-group textarea {
	position: relative;
	display: block;
	width: 100%;
	font-size: 20px;
	line-height: 24px;
	padding: 15px 20px 25px;
	color: var(--white-color);
	height: 180px;
	resize: none;
	border-radius: 0px;
	font-weight: 400;
	-webkit-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
	background: none;
	border: 1px solid rgba(var(--white-color-rgb), 0.10);
}

.contact-form .form-group button {
	margin-top: 0px;
	position: relative;
	padding: 17px 40px;
	border-radius: 0px;
	font-weight: 400;
	font-size: 20px;
	color: var(--white-color);
	display: inline-block;
	text-transform: uppercase;
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
}

.contact-form .form-group button:hover {
	background-color: var(--color-two);
}

.contact-form input.error,
.contact-form select.error,
.contact-form textarea.error {
	border-color: #ff0000 !important;
}

.contact-form label.error {
	display: block;
	line-height: 24px;
	padding: 5px 0px 0px;
	margin: 0px;
	text-transform: uppercase;
	font-size: 12px;
	color: #ff0000;
	font-weight: 500;
}

/*** 

====================================================================
	journal One
====================================================================

***/

.journal-two {
	position: relative;
	padding: 30px 0px 70px;
}

.journal-two .journal-block_one {
	width: 20%;
	float: left;
	padding: 0px 15px;
}

/*** 

====================================================================
	journal Detail
====================================================================

***/

.journal-detail {
	position: relative;
	padding: 180px 0px 50px;
}

.journal-detail .column {
	position: relative;
	margin-bottom: 30px;
}

.journal-detail_image {
	position: relative;
	padding-right: 30px;
	margin-bottom: 30px;
}

.journal-detail_image img {
	position: relative;
	width: 100%;
	display: block;
}

.journal-detail_title {
	position: relative;
	font-weight: 400;
	font-size: 50px;
	line-height: 60px;
	margin-bottom: 15px;
	color: var(--white-color);
}

.journal-detail p {
	position: relative;
	font-size: 18px;
	line-height: 28px;
	margin-bottom: 15px;
	color: var(--white-color);
}

/*** 

====================================================================
	Single Work
====================================================================

***/

.single-work {
	position: relative;
	padding: 180px 0px 50px;
}

.single-work .column {
	position: relative;
	margin-bottom: 30px;
}

.single-work_image {
	position: relative;
	padding-right: 30px;
	margin-bottom: 30px;
}

.single-work_image img {
	position: relative;
	width: 100%;
	display: block;
}

.single-work_title {
	position: relative;
	font-size: 60px;
	font-weight: 600;
	line-height: 70px;
	margin-bottom: 15px;
	color: var(--white-color);
	text-transform: uppercase;
}

.single-work p {
	position: relative;
	font-size: 18px;
	line-height: 28px;
	margin-bottom: 15px;
	color: var(--white-color);
}

.single-work_list {
	position: relative;
	margin-top: 30px;
	border: 1px solid rgba(var(--white-color-rgb), 1);
	border-bottom: 0px;
}

.single-work_list li {
	position: relative;
	padding: 20px 20px;
	font-size: 26px;
	font-weight: 500;
	color: var(--white-color);
	text-transform: uppercase;
	border-bottom: 1px solid rgba(var(--white-color-rgb), 1);
}

.single-work_list li span {
	position: relative;
	display: block;
	font-size: 18px;
	margin-top: 6px;
	text-transform: capitalize;
}

/*** 

====================================================================
	Work One
====================================================================

***/
.basic-bg {
	color: #fff;
}

.to-play-voice {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	background-color: #070978cf;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(5px);
	text-align: center;
	padding: 15px 25px;
}

.to-play-voice h2 {
	color: #fff;
}

.work-one {
	position: relative;
	padding: 40px 0px 100px;
}

.page-home-title {
	position: relative;
	padding: 20px 0px;
}

.page-home-title img {
	width: 70%;
	max-width: 600px;
}
.home-section{
    height: 100vh;
}
.robot {
    position: absolute;
	width: 100%;
	height: 100vh;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 0;
	overflow: hidden;
	/* mix-blend-mode: lighten; */
}
.robot spline-viewer {
    position: absolute;
	display: block;
	margin-top: 0px;
	top: 0;
	right: 0;
	object-fit: cover;
    aspect-ratio: 1 / 1;
    min-height: 600px;
	height: 100vh;
    width: 90vw;
	touch-action: auto;
    overflow: hidden;
}

.chatbot-popup {
	display: none;
	z-index: 1000;
}

.chatbot-popup .close {
	position: absolute;
	right: -5px;
	top: -5px;
	background: #fff;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-family: 'MuseoSans-med';
	cursor: pointer;
	font-weight: 600;
	padding: 5px 7px 3px;
}

.chatbot-header {
	background: #6faaee29;
	color: #fff;
	padding: 10px;
	font-weight: bold;
	text-align: center;
}

.chatbot-body {
	padding: 10px;
	min-height: 300px;
	overflow-y: auto;
}

.how-proceeds {
	color: #fff;
    font-size: 38px;
    line-height: 40px;
    font-family: digital-7, sans-serif;
    z-index: 2;
}

.how-proceeds a {
	color: #fff;
	font-size: 34px;
}

.how-proceeds .menu-ai-items {
	margin-top: 30px;
	margin-left: 20px;
	display: block !important;
}

.how-proceeds .menu-ai-items li {
	line-height: 30px;
	list-style: disc;
}

.how-proceeds .menu-ai-items li a {
	font-size: 30px;
    font-family: digital-7, sans-serif;
}

.how-proceeds .menu-ai-items li:last-child a {
	line-height: 12px;
}

.how-proceeds .menu-ai-items li:hover a {
	color: var(--red-color);
	cursor: pointer;
	font-weight: 700;
}

.how-proceeds .menu-ai-items li::marker {
	font-size: 30px;
}

.how-proceeds a span {
	font-size: 3.5em;
}


.chatbot-body .message {
	position: relative;
	color: #fff;
	/* height: 160px; */
	margin: 10px auto;
	padding: 20px 20px;
	font-size: 24px;
	line-height: 28px;
	/* background: linear-gradient(0deg, rgba(73, 5, 52, 1) 0%, rgba(66, 5, 55, 1) 14.07%, rgba(43, 3, 64, 1) 66.85%, rgba(34, 3, 67, 1) 100%); */
	border-radius: 18px;
	animation: fadeIn 0.4s ease;
	font-family: digital-7, sans-serif;
}

/* .chatbot-body .message::after {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	margin: 15px auto;
	width: 86%;
	height: 5px;
	background-color: #ffffffa5;
	transition: background-color 0.3s ease, width 0.3s ease;
}
.chatbot-body .message:hover::after {
    background-color: #fff;
	width: 98%;
	transition: background-color 0.3s ease, width 0.3s ease;
} */
.chatbot-body .message a {
	color: #fff;
}

.chatbot-body .message:hover a {
	color: #fff;
}

.chatbot-footer {
	padding: 10px;
	border-top: 1px solid #dddddd4e;
}

.chatbot-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	text-align: center;
}

.chatbot-footer ul li {
	margin: 6px 0;
}

.chatbot-footer ul li a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
}

.single-work_list a {
	color: #fff;
}

.single-work_list a:hover {
	color: #ba024a;
}


a.backtop {
	background: transparent;
	position: fixed;
    width: 60px;
    height: 60px;
    bottom: 90px;
    right: 30px;
	text-align: center;
	line-height: 60px;
	border: 1px solid #770147;
	font-size: 24px;
	color: #930148;

	transition: background 0.5s ease, color 0.5s ease;
}

a.backtop:hover {
	background: linear-gradient(45deg, #b9074c, #540045);
	color: #fff;
}

.service-block_one-more {
	position: relative;
	z-index: 1;
	opacity: 0;
	transform: translateY(-50px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-block_one-inner:hover .service-block_one-more {
	opacity: 1;
	transform: translateY(0);
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.team-block_one {
	transition: opacity 0.3s, filter 0.3s;
}

.team-block_one-socials a {
	transition: opacity 0.3s;
	opacity: 0;
}

.team-block_one:hover .team-block_one-socials a {
	opacity: 1;
}

.team-block_one:hover {
	opacity: 1;
	filter: blur(0);
	z-index: 1;
	/* Bring the hovered block to the front */
}

/* General sibling combinators to blur and fade out other team members */
.row:hover .team-block_one:not(:hover) {
	opacity: 0.5;
	filter: blur(2px);
}

.team-block_one {
	transition: transform 0.7s ease;
}

.team-block_one:hover {
	transform: translateY(-10px);
}

.team-block_one-socials a {
	transition: transform 0.7s ease, opacity 0.7s ease;
	transform: translateY(20px);
	opacity: 0;
}

.team-block_one:hover .team-block_one-socials a {
	transform: translateY(0);
	opacity: 1;
}

/* Define keyframes for the animated gradient */
@keyframes gradient-animation {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* Base styles for social icons */
.team-block_one-socials a {
	position: relative;

	background-size: 200% 200%;
	transition: transform 0.3s ease-in-out;
}

/* Apply animated gradient on hover */
.team-block_one-socials a:hover {
	animation: gradient-animation 2s ease infinite;
	transform: scale(1.1);
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
}

.team-block_one-socials a:hover {
	animation: gradient-animation 2s ease infinite;
	transform: scale(1.1);
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
	transition: background 1s ease;
	/* Slower transition for the background */
}

.team-block_one-socials a {
	position: relative;
	background-size: 200% 200%;
}

/* Create a pseudo-element for the gradient background */
.team-block_one-socials a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
	z-index: -1;
	opacity: 0;
	/* Initially hidden */
	transition: opacity 0.5s ease;
	/* Smooth transition for opacity */
}

/* Show the pseudo-element on hover */
.team-block_one-socials a:hover::before {
	opacity: 1;
	/* Show the gradient with transition */
}

/* Apply other styles */
.team-block_one-socials a:hover {
	animation: gradient-animation 2s ease infinite;
	transform: scale(1.1);
}

/* Customize scrollbar track */
::-webkit-scrollbar {
	width: 10px;
	/* Width of the scrollbar */
	background-color: transparent;
	/* Background color of the scrollbar track */
}

/* Customize scrollbar thumb */
::-webkit-scrollbar-thumb {
	background: var(--main-color);
	background: linear-gradient(to top, var(--main-color) 0%, var(--color-two) 100%);
	/* Gradient for the scrollbar thumb */
	border-radius: 10px;
	/* Rounded corners of the scrollbar thumb */
	border: 2px solid transparent;
	/* Border of the scrollbar thumb */
}

/* On hover, change thumb color */
::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to top, var(--color-two) 0%, var(--main-color) 100%);
	/* Gradient for the scrollbar thumb on hover */
}

/* Customize scrollbar track when scrollbar is actively being scrolled */
::-webkit-scrollbar-thumb:active {
	background: linear-gradient(to top, var(--color-two) 0%, var(--main-color) 100%);
	/* Gradient for the scrollbar thumb when actively scrolling */
}

/* Customize scrollbar corner */
::-webkit-scrollbar-corner {
	background-color: transparent;
	/* Background color of the scrollbar corner */
}

/* Add gradient to scrollbar track */
::-webkit-scrollbar-track {
	background: linear-gradient(to top, var(--color-three) 0%, var(--color-four) 100%) !important;
	/* Gradient for the scrollbar track */
}

html {
	scroll-behavior: smooth;
	/* Enable smooth scrolling behavior for the whole page */
}

/* Customer Experience */
.customer-experience-page {
	padding: 25px 0px;
}

.ce-title-heading {
	margin-top: 70px;
	color: #fff;
	text-align: center;
	font-weight: 900;
}

.ce-title-heading span {
	color: var(--main-color);
}

.collage {
	width: 100%;
	margin: 50px auto 150px;
}

.collage video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.3s ease, opacity 0.3s ease;
	cursor: pointer;
	height: 360px;
	border-radius: 25px;
	border: 1px solid #ffffffa4;
	transition: all 0.3s ease;
}

.collage video:hover {
	scale: 1;
	transition: all 0.3s ease;
}
.customer-ex {
	position: absolute;
	bottom: 10px;
	left: 20px;
	z-index: 99;
	color: #fff;
	font-size: 13px;
	line-height: 15px;
	text-transform: uppercase;
	opacity: 0;
}

.customer-ex span {
	color: var(--main-color);
}

.plyr__video-wrapper {
	border-radius: 25px;
}


.plyr__poster {
	height: fit-content;
}
.plyr--video{
	width: 100%;
}
.plyr__control,
.plyr--full-ui input[type=range] {
	display: none;
}

/* helper sizes (spans columns / rows) */
.tile {
	display: flex;
	/* align-items: center; */
	justify-content: center;
	background: #000;
	border-radius: 25px;
	/*border: 1px solid #ffffffa4;*/
}

.tile.square {
	grid-column: span 1;
	grid-row: span 1;
}

.tile.square2 {
	grid-column: span 2;
	grid-row: span 1;
}

.tile.big {
	grid-column: span 2;
	grid-row: span 2;
}

.tile.long {
	grid-column: span 2;
	grid-row: span 1;
}

.tile.medium {
	grid-column: span 1;
	grid-row: span 2;
}
/* .vid1{
	width: 90%;
}
.vid2{
	margin-left: -10%;
}

.vid3{
	width: 90%;
}

.vid4{
	width: 90%;
}

.vid5{
	width: 90%;
}

.vid6{
	width: 90%;
}

.vid7{
	width: 90%;
}

.vid8{
	width: 90%;
}

.vid9{
	width: 90%;
}

.vid10{
	width: 90%;
}

.vid11{
	width: 90%;
}

.vid12{
	width: 90%;
}

.vid13{
	width: 90%;
}

.vid14{
	width: 90%;
}

.vid15{
	width: 90%;
}

.vid16{
	width: 90%;
}

.vid17{
	width: 90%;
}

.vid18{
	width: 90%;
}

.vid19{
	width: 90%;
}

.vid20{
	width: 90%;
}

.vid21{
	width: 90%;
} */

@media(max-width: 599px) {
	.tile{
		width: 100%;
		margin: 0 auto;
		top: unset;
		left: unset;
	}
	.tile.medium {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.tile.tall {
	grid-column: span 1;
	grid-row: span 2;
}

.tile.small {
	grid-column: span 1;
	grid-row: span 1;
}


/* layout order to mimic image */
/* Row 1 */
.a {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}

/* large left */
.b {
	grid-column: 3 / span 2;
	grid-row: 1 / span 2;
}

/* large right */

/* Row 2 (under the large tiles) */
.c {
	grid-column: 1 / span 2;
	grid-row: 3 / span 1;
}

/* long orange */
.d {
	grid-column: 3 / span 1;
	grid-row: 3 / span 1;
}

/* small red */
.e {
	grid-column: 4 / span 1;
	grid-row: 3 / span 1;
}

/* small pink */

/* Row 3 */
.f {
	grid-column: 1 / span 1;
	grid-row: 4 / span 1;
}

/* small navy */
.g {
	grid-column: 2 / span 1;
	grid-row: 4 / span 1;
}

/* small purple */
.h {
	grid-column: 3 / span 1;
	grid-row: 4 / span 1;
}

/* small cyan */
.i {
	grid-column: 4 / span 1;
	grid-row: 4 / span 1;
}

/* small blue */

/* Row 4 (smaller tiles cluster at bottom) */
.j {
	grid-column: 1 / span 1;
	grid-row: 5 / span 1;
}

.k {
	grid-column: 2 / span 1;
	grid-row: 5 / span 1;
}

.l {
	grid-column: 3 / span 1;
	grid-row: 5 / span 1;
}

.m {
	grid-column: 4 / span 1;
	grid-row: 5 / span 1;
}

/* single column stack on very small screens */
@media (max-width:520px) {
	.collage {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.a,
	.b,
	.c,
	.d,
	.e,
	.f,
	.g,
	.h,
	.i,
	.j,
	.k,
	.l,
	.m {
		grid-column: auto !important;
		grid-row: auto !important;
	}

	.tile.big {
		grid-row: span 2;
	}
}

/* center text style */
.tile span {
	pointer-events: none;
}

.hide-three {
	margin-top: 30px;
    animation: fadeOut 0.5s ease 3s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Show dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove weird gap */
}

/* Keep link highlighted when menu is open */
.nav-item.dropdown:hover > .nav-link {
    color: #D60F5C !important; /* your active pink color */
}

.dropdown-menu {
    min-width: max-content; /* Fit longest text */
    width: auto;
}
.dropdown-item {
    white-space: nowrap; /* Keep text in single line */
}

.dropdown-menu {
    background-color: #343434; /* dark background */
    border: none;
    padding: 10px 0;
	color: #fff;
	border-radius: 0;
}

.dropdown-item {
    color: #fff;
    padding: 10px 20px;
}

.dropdown-item:hover {
    background-color: #1e1e1e;
    color: #fff;
}
.main-header .mobile-menu .mobile li > a {
	color: #fff;
}
.main-header .mobile-menu .navigation li > ul > li:first-child{
	border-top: none;
}