:root {
	--primary-gradient: linear-gradient(135deg, #6e8efb, #a777e3);
	--secondary-gradient: linear-gradient(135deg, #4facfe, #00f2fe);
	--tertiary-gradient: linear-gradient(135deg, #a18cd1, #fbc2eb);

	
	--color1: #ced4da;
	--color2: #DCE7EC;
	--color3: #272E34;
	--color4: #F5F7F9;
	--color5: #7ab1dd;
	--borderRadius: 14px;
}

body {padding-top: 86px; color: var(--color3) !important; font-size: 1rem; background: url("../images/bg-dot.png");}

.poppins-bold {font-family: "Poppins", sans-serif; font-weight: 700; font-style: normal;}
.poppins-regular {font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal;}
.poppins-medium {font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal;}
.poppins-semibold {font-family: "Poppins", sans-serif; font-weight: 600; font-style: normal;}

.lineSplit {width: 60%; height: 1px; background: rgba(0,0,0,0.1); margin: 0 auto;}
.middleSplitBump {width: 100px; height: 5px; margin: 0 auto; position: relative; top: -2px;}

.btn {border-radius: 10px;}
.btn:hover {background: var(--color3); color: #fff;}

.gradientBg {background: linear-gradient(135deg, #F5F7F9, #E8EDF1, #DDE3E8);}

.color2Bg {background: var(--color2);}
.color3Bg {background: var(--color3);}
.color4Bg {background: var(--color4);}
.color5Bg {background: var(--color5);}
.color3Text {color: var(--color3);}
.color5Text {color: var(--color5);}

#swirlBg {position: absolute; width: 100%; height: 100%; z-index: 1; top: 0; padding: 4rem 0; transition: filter 0.5s ease;}

.swirl-container {position: relative; width: 100%;height: 100%;	filter: blur(30px) brightness(1.1);}

.gradient {position: absolute; width: 100%; height: 100%; border-radius: 50%; mix-blend-mode: screen; opacity: 0.8; background: radial-gradient(
		circle at center, rgba(166, 214, 242, 0.9) 0%, rgba(122, 177, 221, 0.7) 30%, rgba(94, 138, 180, 0.5) 60%);
}

/* Layer 1 - Slow drifting */
.gradient:nth-child(1) {
	animation: 
		drift-1 27s ease-in-out infinite alternate,
		pulse-1 19s ease-in-out infinite alternate;
}

/* Layer 2 - Medium wandering */
.gradient:nth-child(2) {
	background: radial-gradient(
		circle at 30% 70%,
		rgba(166, 214, 242, 0.7) 0%,
		rgba(122, 177, 221, 0.5) 40%,
		rgba(94, 138, 180, 0.3) 70%
	);
	animation: 
		drift-2 23s ease-in-out infinite alternate-reverse,
		pulse-2 17s ease-in-out infinite alternate;
}

/* Layer 3 - Fast meandering */
.gradient:nth-child(3) {
	background: radial-gradient(
		circle at 70% 30%,
		rgba(166, 214, 242, 0.6) 0%,
		rgba(122, 177, 221, 0.4) 50%,
		rgba(94, 138, 180, 0.2) 80%
	);
	animation: 
		drift-3 19s ease-in-out infinite alternate,
		pulse-3 13s ease-in-out infinite alternate-reverse;
}

/* Drift animations */
@keyframes drift-1 {
	0%, 100% { transform: translate(-15%, -5%) rotate(0deg) scale(1); }
	25% { transform: translate(5%, 10%) rotate(5deg) scale(1.05); }
	50% { transform: translate(10%, -8%) rotate(10deg) scale(0.95); }
	75% { transform: translate(-8%, 5%) rotate(-5deg) scale(1.1); }
}

@keyframes drift-2 {
	0%, 100% { transform: translate(10%, 15%) rotate(10deg) scale(1.1); }
	33% { transform: translate(-12%, 5%) rotate(-8deg) scale(0.9); }
	66% { transform: translate(5%, -10%) rotate(15deg) scale(1.05); }
}

@keyframes drift-3 {
	0%, 100% { transform: translate(-5%, -12%) rotate(-15deg) scale(0.9); }
	20% { transform: translate(15%, 8%) rotate(25deg) scale(1.15); }
	40% { transform: translate(-10%, 15%) rotate(-10deg) scale(0.95); }
	60% { transform: translate(8%, -5%) rotate(5deg) scale(1.05); }
	80% { transform: translate(-15%, 5%) rotate(-20deg) scale(1.1); }
}

/* Pulsing animations */
@keyframes pulse-1 {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 0.9; }
}

@keyframes pulse-2 {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 0.8; }
}

@keyframes pulse-3 {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 0.7; }
}

/* Fixed header */
.fixed-header {position: fixed;	top: 0;	left: 0; right: 0; z-index: 1030; box-shadow: 0 2px 10px rgba(0,0,0,0.1); background: linear-gradient(135deg, var(--color1), var(--color2)); border-bottom: 1px solid #fff;}

.navbar-brand {width: 200px;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .nav-link {color: var(--color3);}
.nav-link {font-size: 1rem;}
.nav-link.active {font-weight: 600;}
.navLinkPush {margin-top: 9px;}
.nav-link:focus, .nav-link:hover {color: var(--color3);}

/*.slickIcon {width: 40px; margin-right: 10px;}*/
.slickLogo {width: 200px;}

/* Hero Slider */
.hover-3d-effect {transition: all 0.3s ease; transform-style: preserve-3d; cursor: pointer;}
.hero-slide {color: white; min-height: 55vh; display: flex;	align-items: center; padding: 4rem 0; background: transparent !important;}
.hero-content {padding: 0 2rem;}
.hero-image {max-width: 100%; height: auto; border-radius: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); border: 4px solid #fff;}
.swiper-wrapper, .tagline-panel {z-index: 3; position: relative;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 23px;}

/* Dynamic Tagline Panel */
.tagline-panel {padding: 0 0 4rem 0; color: var(--color3); text-align: center;}
.tagline-panel h3 {font-weight: 700; margin: 0;	font-size: 2.5rem;}

/* Swiper customization */
.swiper-pagination-bullet {background: white; opacity: 0.5;	width: 12px; height: 12px;}
.swiper-pagination-bullet-active {background: white; opacity: 1;}
.swiper-button-next, .swiper-button-prev {color: white;	width: 50px;	height: 50px; border-radius: 50%; display: flex;
	align-items: center; justify-content: center;}
.swiper-button-next::after, .swiper-button-prev::after {font-size: 1.5rem;}

/* Features */

.feature-icon {font-size: 2rem;	margin-bottom: 1rem;}

/* Alternating Content Section */
.zoomIcon {position: absolute; z-index: 1; bottom: 0; background: var(--color5); padding: 4px 6px 2px 8px; border-radius: 10px 0px 0px 0px; color: #fff; right: 0; font-size: 1.25rem; border-left: 4px solid #fff; border-top: 4px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}
.zoomIconLeft {right: auto; border-radius: 0px 10px 0px 0px; border-right: 4px solid #fff; border-left: none;}

.video-container {width: 95%; max-width: 800px; margin: 40px auto; background: #fff; position: relative; border: 4px solid white; border-radius: var(--borderRadius);	overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.video-placeholder {width: 100%; height: 100%;	background: #fff; color: white;	display: flex;	justify-content: center; align-items: center; border-radius: var(--borderRadius); transition: .3s all;}
video {width: 101%; display: block; border-radius: var(--borderRadius);; /* Matches the placeholder */}


 /* Overlay styles */
.video-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 100000; display: none; justify-content: center; align-items: center; cursor: pointer;}

.overlay-video-container {width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 1200px;}
.overlay-video {width: 100%; height: 100%; max-height: 90vh; object-fit: contain;}

.close-btn {position: absolute;	top: 20px; right: 20px;	color: white; font-size: 30px; cursor: pointer; z-index: 1001;}
.content-row {margin-bottom: 3rem; align-items: center;}
.content-row:last-child {margin-bottom: 0;}
/*.content-text {padding: 2rem;}*/
.content-image {border-radius: var(--borderRadius); width: 100%; overflow: hidden; padding: 0; /*box-shadow: 0 10px 30px rgba(0,0,0,0.1);*/}
.content-image img {width: 100%; height: auto; border: 4px solid #fff; border-radius: var(--borderRadius); transition: transform 0.3s ease;}
/*.content-image:hover img {transform: scale(1.03);}*/

/* Sector Slider */

.card {border-radius: var(--borderRadius); width: 100%;}
.card-body {padding: 0;}
.card-body img {width: 100%; height: 300px; object-fit: cover; border-radius: 12px 12px 0px 0px; border: 4px solid #fff;}

.slider-outer-container {position: relative; margin: 0 60px;}
        
.sector-slider {width: 100%; padding: 20px 0; overflow: hidden;} 
.sector-slider .swiper-wrapper {align-items: stretch;}
.sector-slider .swiper-slide {display: flex; justify-content: center; align-items: center; background: #f8f9fa; border-radius: var(--borderRadius);	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease; min-height: 200px; height: auto;}

.card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

        
.sector-sliderOuter .swiper-button-next,
.sector-sliderOuter .swiper-button-prev {width: 40px; height: 40px; top: 50%; transform: translateY(-50%); color: var(--color5);}
       
.sector-sliderOuter .swiper-button-next {right: -50px;}
.sector-sliderOuter .swiper-button-prev {left: -50px;}
.sector-sliderOuter .swiper-button-next::after,
.sector-sliderOuter .swiper-button-prev::after {font-size: 1.2rem; font-weight: bold;}

@media (max-width: 768px) {
	.slider-outer-container {margin: 0 40px;}
	.sector-sliderOuter .swiper-button-next {right: -40px;}
	.sector-sliderOuter .swiper-button-prev {left: -40px;}
}

/* Testimonials Section */
.testimonial-slider .swiper-container {height: auto;}
.testimonial-slider .swiper-slide {height: auto; display: flex;}
.testimonial-slider {padding-bottom: 40px;}
.testimonial-card {background: var(--color4); border: 3px solid #fff; border-radius: var(--borderRadius); padding: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.05); height: 100%;	margin: 0 10px;}
.testimonial-text {font-style: italic; margin-bottom: 1.5rem;}
.testimonial-author {font-weight: 600;}
.testimonial-role {color: #6c757d; font-size: 0.9rem;}
.testimonials-section .swiper-pagination-bullet {background: var(--color5); opacity: 0.5;	width: 12px; height: 12px;}
.testimonials-section .swiper-pagination-bullet-active {background: var(--color5); opacity: 1;}

.testimonials-section .swiper-horizontal>.swiper-pagination-bullets, .testimonials-section .swiper-pagination-bullets.swiper-pagination-horizontal, .testimonials-section .swiper-pagination-custom, .testimonials-section .swiper-pagination-fraction {bottom: -6px;}

/* Explore */
.explore-section .swiper-container {height: auto;}
.explore-section .swiper-slide {height: auto; display: flex;}
.explore-section .testimonial-text {font-style: normal;}
.explore-section .swiper-wrapper {padding-bottom: 40px;}
.explore-section .swiper-pagination-bullet {background: var(--color5); opacity: 0.5;	width: 12px; height: 12px;}
.explore-section .swiper-pagination-bullet-active {background: var(--color5); opacity: 1;}
.explore-section .swiper-horizontal>.swiper-pagination-bullets, .explore-section .swiper-pagination-bullets.swiper-pagination-horizontal,  .explore-section.swiper-pagination-custom, .explore-section .swiper-pagination-fraction {bottom: -6px;}

/* Clients Logo Section */
.clients-section {padding: 3rem 0; background: white;}
.client-logo {height: 80px;	display: flex;	align-items: center; justify-content: center; padding: 0 2rem;}
.client-logo img {max-height: 60px;	max-width: 100%; width: auto;}

/* FAQ Section */
.faq-item {margin-bottom: 25px; cursor: pointer; background-color: var(--color4); border-radius: var(--borderRadius);; border: 3px solid white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.faq-question {padding: 10px 15px; transition: all 0.3s; overflow: hidden;}
.faq-answer {padding: 15px;	background-color: #fff;	display: none;}
.faqQuestionHolder {width: 96%;}
.faqIcon {width: 4%; transition: 0.3s all;}
.faqIconRotate {transform: rotate(45deg);}

/* Book a demo */

#contactForm input, #contactForm textarea {box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: var(--borderRadius); padding: 10px 15px; background: var(--color4); border: 2px solid #fff; margin-bottom: 25px;}
/* Style for the select dropdown */
select.custom-select,
.custom-select {margin-bottom: 25px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 	border-radius: var(--borderRadius);  appearance: none; -webkit-appearance: none; /* For Safari */
  -moz-appearance: none;  background-color: var(--color4);  border: 2px solid #fff; padding: 10px 30px 10px 15px; font-size: 1rem;  cursor: pointer; width: 100%; outline: none; transition: all 0.3s ease; /* Smooth transition for hover/focus */
}

/* Custom dropdown arrow */
select.custom-select,
.custom-select {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23272E34' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center;  background-size: 16px 12px;}

footer {font-size: 0.9rem;}


@media (max-width: 768px) {
	.hero-content {order: 2; text-align: center; margin-top: 2rem;}
	.hero-image-col {order: 1;}
	/*.swiper-button-next, .swiper-button-prev {display: none;}*/
	.tagline-panel h3 {font-size: 1.5rem;}	
	.content-row {flex-direction: column; opacity: 0;}
	/*.content-row .order-md-1 {order: 2 !important; margin-top: 2rem;}
	.content-row .order-md-2 {order: 1 !important;}*/
	.testimonial-slider .swiper-slide {width: 100% !important;}
	.client-logo {height: 60px;	padding: 0 1rem;}
}

@media (min-width: 820px) {
	body {font-size: 1.25rem;}
}




@media (min-width: 1100px) {
	body {font-size: 1.15rem;}

	.hero-slider-container p {font-size: 1.4rem;}
	.video-container:hover .video-placeholder {cursor: zoom-in; transform: scale(1.1);}
}

@media (min-width: 1440px) {
	.hero-image {height: 530px;}
}

@media (min-width: 1600px) {
	.hero-image {height: auto;}
	body {font-size: 1.25rem;}
}