@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
	--primary: #031053;
	--primary-dark: #0869d5;
	--secondary: #0869d5;
	--accent: #f59e0b;
	--green: #046104;
	--light-green: #27b849;
	--dark: #000000;
	--gray: #64748b;
	--light: #f8fafc;
	--white: #ffffff;
	--glass: rgba(0, 0, 0, 0.25);
	--glass-border: rgba(255, 255, 255, 0.18);
	--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	background: var(--light);
	color: var(--dark);
	overflow-x: hidden;
	line-height: 1.6;
}

/* Advanced Navbar with Logo */
.navbar {
	width: 100%;
	z-index: 1000;
	backdrop-filter: blur(20px);
	background: #d3e0ee;
	border-bottom: 1px solid var(--glass-border);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 15px 0;
	position: fixed;
}



.navbar-scrolled {
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	padding: 10px 0;
}

.navbar-brand {
	font-size: 1.5rem; 
	font-weight: 800;
/*            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);*/
	-webkit-background-clip: text;
	background-clip: text;
	color: var(--dark) !important;
	display: flex;
	align-items: center;
	gap: 12px;
}

.navbar-brand img {
	height: 35px; 
	width: auto;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.nav-link {
	font-weight: 600;
	color: var(--primary) !important;
	margin: 0 15px;
	position: relative;
	transition: all 0.3s ease;
	font-size: 14px;
}

li a.btn{
	font-size: 14px;
}

.navbar-scrolled{
	.nav-link {
		color: var(--dark) !important;
	}

	.logo-name{
		color: var(--dark);
	}
}

.logo-name{
	color: var(--primary);
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary);
	transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active::after {
	width: 100%;
}

.main-container{
	padding-top: 150px;
}

.color-primary{
	color: var(--primary)
}

.bg-gradient {
    background-color: var(--primary) !important;
    background-image: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%) !important;
}

.title-gradient {
	background: -webkit-linear-gradient(var(--primary), var(--secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    width: auto;
    display: inline-block;
    color: var(--light);
	font-weight: 900;
}

.title-gradient-green {
	background: linear-gradient(var(--green), var(--light-green));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
    width: auto;
    display: inline-block;
    color: var(--light);
	font-weight: 900;
}

.cta-button {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: white !important;
	padding: 12px 30px !important;
	border-radius: 50px;
	box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
	transition: all 0.3s ease;
	border: 0px;
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
}

.btn-login {
	background: linear-gradient(135deg, var(--green) 0%, var(--light-green) 100%);
	color: white !important;
	padding: 12px 30px !important;
	border-radius: 50px;
	box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
	transition: all 0.3s ease;
	border: 0px;
}

.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
}


.hero-section {
	height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1920&q=80') center/cover;
	opacity: 0.3;
}

.hero-particles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.particle {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	animation: float 20s infinite linear;
}

@keyframes float {
	0% { transform: translateY(0) translateX(0); }
	25% { transform: translateY(-100px) translateX(100px); }
	50% { transform: translateY(0) translateX(200px); }
	75% { transform: translateY(100px) translateX(100px); }
	100% { transform: translateY(0) translateX(0); }
}

.hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 900px; 
	padding: 0 20px;
}

.hero-badge {
	background: var(--glass);
	backdrop-filter: blur(10px);
	border: 1px solid var(--glass-border);
	padding: 10px 25px;
	border-radius: 50px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 25px; 
	font-weight: 600;
	color: white;
	font-size: 0.9rem; 
}

.hero-title {
	font-size: 2rem 
	font-weight: 800;
	color: white;
	margin-bottom: 20px; 
	line-height: 1.2;
}

.hero-title .gradient-text {
	background: linear-gradient(135deg, var(--accent) 0%, #f97316 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-description {
	font-size: 1.2rem; 
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 30px; 
	font-weight: 300;
}

.btn-primary-saas {
	background: white;
	color: var(--secondary);
	padding: 15px 30px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 15px; 
	border: none;
	transition: all 0.3s ease;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-primary-saas:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: white !important;
}

.btn-outline-saas {
	background: transparent;
	color: white;
	padding: 16px 45px; 
	border-radius: 50px;
	font-weight: 700;
	font-size: 1rem; 
	border: 2px solid white;
	transition: all 0.3s ease;
}

.btn-outline-saas:hover {
	background: white;
	color: var(--primary);
	transform: translateY(-5px);
}

.core-section2 {
  height: 200vh; 
/*		  position: relative;*/
}

.core-section {
	padding: 20px 0; 
	background: var(--white);
/*			position: sticky;*/
	top: 0px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	transform: scale(0.95)

}

/*       .core-section:nth-child(even) {
	background: var(--light);
}
*/

/*
 .core-section {
	position: sticky;
	top: 0;
	min-height: 100vh;
	background: var(--white);
	z-index: 1;
	padding: 100px 0;
	transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	 display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
}
*/

.core-section:nth-child(odd) {
	background: var(--light);
}

.core-section:nth-child(even) {
	background: var(--white);
}

.section-header {
	text-align: center;
	margin-bottom: 30px; 
}

.section-number {
	display: inline-block;
	background: linear-gradient(135deg, var(--green) 0%, var(--light-green) 100%);
/*	background: linear-gradient(135deg, var(--bs-purple) 0%, var(--bs-pink) 100%);*/
	color: white;
	width: 70px; 
	height: 70px; 
	border-radius: 50%;
	line-height: 70px; 
	text-align: center;
	font-weight: 800;
	font-size: 1.8rem; 
	margin-bottom: 15px; 
	box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.section-title {
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: 0px;
	color: var(--dark);
}

.section-subtitle {
	font-size: 1.2rem; 
	color: var(--gray);
	max-width: 700px;
	margin: 0 auto;
}

.section-title2 {
	font-size: 1.7rem;
	font-weight: 400;
	margin-bottom: 0px;
	color: var(--green);
}

.section-subtitle2 {
	font-size: 1rem; 
	color: var(--dark);
	max-width: 700px;
	margin: 0 auto;
}

.card-saas {
	background: var(--white);
	border-radius: 25px; 
	padding: 35px; 
	height: 100%;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08); 
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.core-card-saas {
	background: var(--white);
	border-radius: 25px; 
	padding: 35px; 
	height: 100%;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08); 
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.core-card-saas:hover {
	transform: translateY(-8px); 
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); 
}

.core-icon-saas {
	width: 85px; 
	height: 85px; 
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
	border-radius: 20px; 
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem; 
	color: white;
	margin-bottom: 25px; 
	box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3); 
	float: left;
	margin-right: 21px;
}

.core-title-saas {
	font-size: 1.3rem; 
	font-weight: 700;
	margin-bottom: 5px; 
	color: var(--dark);
}

.core-description-saas {
	font-size: 0.9rem; 
	color: var(--dark);
	margin-bottom: 25px; 
	font-weight: 400; 
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
	gap: 15px; 
	margin-top: 15px; 
}

.feature-item {
	background: var(--light);
	padding: 20px; 
	border-radius: 12px; 
	display: flex;
/*            align-items: center;*/
	gap: 12px; 
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.feature-item:hover {
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
	color: white;
	transform: translateY(-3px);
}

.feature-item i {
	font-size: 1.5rem; 
	color: var(--primary);
	transition: color 0.3s ease;
}

.feature-item:hover i {
	color: white;
}

.stats-saas {
	background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
	padding: 80px 0; 
	color: white;
	position: relative;
	overflow: hidden;
}

.stats-saas::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
	animation: rotate 30s linear infinite;
}

@keyframes rotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.stat-card {
	background: var(--glass);
	backdrop-filter: blur(10px);
	border: 1px solid var(--glass-border);
	border-radius: 18px; 
	padding: 30px; 
	text-align: center;
	position: relative;
	z-index: 2;
}

.stat-number-saas {
	font-size: 3rem; 
	font-weight: 800;
	display: block;
	margin-bottom: 8px; 
}

/* Footer - Reduced */
.footer-saas {
	background: #d3e0ee;
	color: white;
	padding: 0px; 
	
	h3{
		font-size: 18px;
	}

	.container, a{
		color: #0a223a !important;
	}
	
	p{
		font-size: 14px;
		margin-top: 10px;
	}
	
	i{
		font-size: 16px !important;
	}

	
	.footer-menu{
		justify-content: center;
		display: flex;
		margin-top: 25px;
		
		a{
			float: left;
			margin: 0 25px 0 0px;
			font-size: 14px !important;
		}
		
		a:hover{
			color: var(--green) !important;
		}
	}
		
	
}

.display-desktop{
	display: block;
}

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

.mobile-display-flex{
	display: none !important;
}

.accordion p{
	color: #000 !important;
	font-size: 15px;
}

@media (max-width:786px){
	.display-desktop{
		display: none !important;
	}
	.mobile-display{
		display: block !important;
	}
	
	.mobile-display-flex{
		display: flex !important;
	}
}

.footer-logo{
	position: relative;
	top: -129px;
}

.wave-container2{
	position: absolute;
	width: 100%;
	z-index: -2;
	height: 180px;
}

.wave-container{
	height: 180px;
	position: relative;
	bottom: -15px;
	z-index: -1;
}

.footer-last{
	background: #b3c3d9;
	padding: 30px;
	margin-top: 20px;
}

.footer-content {
	position: relative;
	z-index: 2;
}

/* Responsive */
@media (max-width: 768px) {
	.section-title {
		font-size: 1.8rem; 
	}

	.core-icon-saas {
		width: 70px; 
		height: 70px;
		font-size: 2rem;
		margin-bottom: 0px;
	}

	.core-title-saas {
		font-size: 1.5rem; 
	}

	.hero-description {
		font-size: 1.1rem; 
	}

	.hero-title {
		font-size: clamp(1.8rem, 4vw, 2.8rem); 
	}

	.stat-number-saas {
		font-size: 2.5rem; 
	}
	
	.navbar-collapse .align-items-center{
		align-items: flex-start !important;
		background: #fff;
		padding: 20px;
		border-radius: 22px;
		margin: 20px 0px;
	}
	
	.pt-20 {
		padding-top: 8rem !important;
	}
	
	.cta-button, .btn-login{
		margin-top: 10px;
	}
	
	.nav-item{
		
	}
	
	.pb-5{
		padding-bottom: 0px !important;
	}
	
	.py-5{
		padding-bottom: 0px !important;
	}
	
	.justify-content-center .btn-login{
		margin-bottom: 20px;
	}
	
	.mb-5 {
		margin-bottom: 0rem !important;
	}
	
	.nav-link::after{
		display: none;
	}
	
	.core-section {
		padding: 20px 0 0px 0 !important;
	}
	
	.footer-saas .mb-5{
		margin-bottom: 3rem !important;
	}
	
	.mobile-mrg-top{
		margin-top: 40px;
	}
	
	.position-sticky img{
		margin-bottom: 20px;
	}
	
}

.clearfix{
	margin: 0px;
	padding: 0px;
	display: block;
	width: 100%;
	height: 0px;
	clear: both;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	z-index: 2;
}

#bg-video{
	width: 100% !important;
	height: auto;
}

@media (max-width:786px){
	#bg-video{
		width: auto !important;
		height: 100% !important;
	}

	.core-video{
		width: 100%;
		height: auto;
		margin-top: 15px;
	}
}

.core-video{
	width: 100%;
	height: auto;
}

.modal-img {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
}
/* Styling for the next and previous arrows */
.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color: #fff;
  background-color: transparent;
  border: none;
  padding: 0.5rem;
  z-index: 1050;
  border-radius: 10px;
}
.modal-arrow-left {
  left: 10px;
}
.modal-arrow-right {
  right: 10px;
}

.modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: var(--bs-modal-padding);
}

.modal-body-inner{
	padding: 0.5rem;
}

.carousel {
	position: relative;
}

.bg-carousel{
	 background: #C8D6E6; 
	 background: linear-gradient(90deg, rgba(200, 214, 230, 1) 0%, rgba(255, 255, 255, 1) 54%, rgba(200, 214, 230, 1) 100%); 
	border-radius: 25px;
}

.modal{
	backdrop-filter: blur(15px);
}

.modal-content{
/*			background: linear-gradient(90deg, rgba(200, 214, 230, 0.7) 0%, rgba(255, 255, 255, 0.7) 54%, rgba(200, 214, 230, 0.7) 100%);*/
	background: #fff;
	backdrop-filter: blur(20px);
/*
	backdrop-filter: blur(15px) !important;
	background: rgb(230, 225, 225, .7) !important;
*/
}

.feature-grid-modal{
	.feature-item{
		max-width: 49%;
		float: left;
		margin: 5px;
	}

	@media (max-width:1024px){
		.feature-item{
			max-width:100% !important;
		}
	}
}

.color-red{
	color: red;
}

/* Testimonials Section Styles */
.testimonials-saas {
padding: 50px 0 0px 0;
background: var(--light);
position: relative;
}

.testimonial-carousel-wrapper {
max-width: 900px;
margin: 0 auto;
}

.testimonial-card {
	background: var(--white);
	border-radius: 25px;
	padding: 40px;
	margin: 20px;
	box-shadow: 6px 6px 8px #f2f2f2;
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	border-left: 5px solid var(--accent);
	min-height: 325px;
}

.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 6px 6px 8px #f2f2f2;
}

.testimonial-card::before {
content: '"';
position: absolute;
top: 20px;
right: 30px;
font-size: 5rem;
color: var(--primary);
opacity: 0.1;
font-family: Georgia, serif;
line-height: 1;
}

.testimonial-video-section{
justify-content: center;
align-items: center;
display: flex;
}

.testimonial-video{
max-width: 60%;
}

@media (max-width:768px){
	.testimonial-video{
		max-width: 100% !important;
	}
}

.testimonial-header {
display: flex;
align-items: center;
margin-bottom: 25px;
}

.testimonial-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
margin-right: 20px;
border: 3px solid var(--primary);
}

.testimonial-info {
flex: 1;
}

.testimonial-name {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 5px;
color: var(--dark);
}

.testimonial-role {
font-size: 0.9rem;
color: var(--gray);
margin-bottom: 8px;
}

.testimonial-rating {
color: var(--accent);
font-size: 0.9rem;
}

.testimonial-rating i {
margin-right: 2px;
}

.testimonial-text {
font-size: 0.85rem;
line-height: 1.7;
color: var(--dark);
font-style: italic;
margin: 0;
}

/* Carousel Controls Customization */
#testimonialCarousel .carousel-indicators {
bottom: -50px;
}

#testimonialCarousel .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--gray);
margin: 0 6px;
opacity: 0.5;
}

#testimonialCarousel .carousel-indicators button.active {
opacity: 1;
background-color: var(--primary);
}

#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
width: 50px;
height: 50px;
background: var(--white);
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
opacity: 1;
top: 50%;
transform: translateY(-50%);
}

#testimonialCarousel .carousel-control-prev {
left: -70px;
}

#testimonialCarousel .carousel-control-next {
right: -70px;
}

#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon {
filter: invert(1);
width: 1.5rem;
height: 1.5rem;
}

/* Responsive */
@media (max-width: 992px) {
#testimonialCarousel .carousel-control-prev {
	left: 0px;
}
#testimonialCarousel .carousel-control-next {
	right: 0px;
}
}

@media (max-width: 768px) {
.testimonial-card {
	margin: 10px;
	padding: 30px;
}

.testimonial-avatar {
	width: 60px;
	height: 60px;
	margin-right: 15px;
}

.testimonial-card::before {
	font-size: 4rem;
	top: 15px;
	right: 20px;
}

.testimonials-saas {
	padding: 0px 0;
}
}

	/* Video Testimonial Styles */
.video-testimonial-card {
cursor: pointer;
}

.video-thumbnail-container {
position: relative;
width: 100%;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease;
}

.video-thumbnail-container:hover {
transform: translateY(-5px);
}

.video-thumbnail {
width: 100%;
height: auto;
display: block;
}

.play-button-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
transition: background 0.3s ease;
}

.play-button-overlay i {
font-size: 4rem;
margin-bottom: 1rem;
transition: transform 0.3s ease;
}

.video-thumbnail-container:hover .play-button-overlay i {
transform: scale(1.1);
}

.play-button-overlay span {
font-size: 1.2rem;
font-weight: 600;
}

/* Video Modal Styles */
.video-modal .modal-content {
border: none;
border-radius: 12px;
overflow: hidden;
}

.video-modal .modal-header {
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
padding: 1rem 1.5rem;
}

.video-modal .modal-body {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}

.video-modal .video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.video-modal iframe,
.video-modal video {
width: 100%;
height: 100%;
border: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.play-button-overlay i {
	font-size: 3rem;
}

.play-button-overlay span {
	font-size: 1rem;
}

#video_testimonial{
	max-width: 100% !important;
	width: 100%;
}
}

.videoModal-main{
.modal-body{
	display: flex;
	justify-content: center;
}
}

#video_testimonial{
max-width: 80%;
width: 100%;
border-radius: 25px;
}

#video_home{
max-height: 70% !important;
height: 100%;
width: auto;
}

/* Custom FAQ styling */
.faq-section {
background: #f8f9fa;
padding: 60px 0;
}

.faq-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 2rem;
}

/* Plus/Minus Icon Styles */
.accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
transition: all 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

/* Optional: Enhance button appearance */
.accordion-button {
font-weight: 600;
color: #2c3e50;
background-color: white;
padding: 1.2rem 2.0rem;
}

.accordion-button:not(.collapsed) {
color: #0d6efd;
background-color: #e7f1ff;
}

.accordion-body {
color: #6c757d;
line-height: 1.7;
padding: 1.5rem 1.25rem;
}

.accordion-item {
margin-bottom: 1rem;
border: 1px solid #dee2e6;
border-radius: 30px !important;
overflow: hidden;
border-right: 0;
border-left: 0;
border-radius: 0;
box-shadow: 0 4px 20px rgba(200, 200, 200, 0.40) !important;

}

.accordion-button:not(.collapsed) {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white !important;
}

.accordion-item:last-child {
	margin-bottom: 0;
}

.carousel-item img {
      object-fit: cover; /* Maintain aspect ratio and cover space */
    }


.footer {
    background: url(https://vixcon-bootstrap.vercel.app/images/bg/footer-bg.jpg) no-repeat;
    background-image: cover;
    padding-bottom: 35px;
}
.sub-form {
    position: relative;
}

.footer-socails a i {
    font-size: 20px;
    color: #ffffff;
	margin: 10px;
}

.footer-socails2 {
	margin-bottom: 0px;
}

.footer-socails2 a i {
    font-size: 20px;
	margin: 10px 10px 10px;
}

.sub-form .form-control {
    border-color: var(--green);
    height: 51px;
	border-radius: 25px 25px;
}

.sub-form .btn {
    position: absolute;
    top: 0px;
    right: 0;
    margin-top: 0px !important;
    display: inline-block;
    padding: 13px 36px;
    border-radius: 0px 25px 25px 0px;
	color: var(--light) !important;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--green) 0%, var(--light-green) 100%);
    color: #ffffff;
	border: 0px;
}



/*---------------------------*/

@media (min-width: 1024px) {
  .lg\:h2 {
    font-size: 2.239488rem;
  }
  @media (min-width: 768px) {

    .lg\:h2 {
      font-size: 2.48832rem;
    }
  }
}
@media (min-width: 1280px) {
  .xl\:h1 {
    font-size: 2.6873856rem;
  }
  @media (min-width: 768px) {

    .xl\:h1 {
      font-size: 2.9859839999999997rem;
    }
  }
}
@media (min-width: 540px) {

  .sm\:col-10 {
    flex: 0 0 auto;
    width: 83.33333333333334%;
  }
}
@media (min-width: 768px) {

  .md\:col-4 {
    flex: 0 0 auto;
    width: 33.333333333333336%;
  }

  .md\:col-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .md\:col-7 {
    flex: 0 0 auto;
    width: 58.333333333333336%;
  }

  .md\:col-8 {
    flex: 0 0 auto;
    width: 66.66666666666667%;
  }

  .md\:col-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .md\:col-11 {
    flex: 0 0 auto;
    width: 91.66666666666667%;
  }

  .md\:order-2 {
    order: 2;
  }
}
@media (min-width: 1024px) {

  .lg\:col-2 {
    flex: 0 0 auto;
    width: 16.666666666666668%;
  }

  .lg\:col-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .lg\:col-4 {
    flex: 0 0 auto;
    width: 33.333333333333336%;
  }

  .lg\:col-5 {
    flex: 0 0 auto;
    width: 41.66666666666667%;
  }

  .lg\:col-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .lg\:col-7 {
    flex: 0 0 auto;
    width: 58.333333333333336%;
  }

  .lg\:col-8 {
    flex: 0 0 auto;
    width: 66.66666666666667%;
  }

  .lg\:col-10 {
    flex: 0 0 auto;
    width: 83.33333333333334%;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-3 {
    order: 3;
  }
}
@media (min-width: 1280px) {

  .xl\:col-4 {
    flex: 0 0 auto;
    width: 33.333333333333336%;
  }

  .xl\:col-5 {
    flex: 0 0 auto;
    width: 41.66666666666667%;
  }

  .xl\:col-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(58 134 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:shadow-hover:hover {
    box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.13);
  }
.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-transparent:focus {
  --tw-ring-color: transparent;
}
.group:hover .group-hover\:block {
  display: block;
}
.group:hover .group-hover\:scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(58 134 255 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:blur-none {
  --tw-blur:  ;
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
@media not all and (min-width: 1280px) {

  .max-xl\:gap-y-3 {
    row-gap: 0.75rem;
  }
}
@media not all and (min-width: 1024px) {

  .max-lg\:mb-20 {
    margin-bottom: 5rem;
  }

  .max-lg\:mt-4 {
    margin-top: 1rem;
  }

  .max-lg\:flex {
    display: flex;
  }

  .max-lg\:hidden {
    display: none;
  }

  .max-lg\:w-20 {
    width: 5rem;
  }

  .max-lg\:gap-x-8 {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  .max-lg\:gap-y-2 {
    row-gap: 0.5rem;
  }
}
@media (min-width: 540px) {

  .sm\:block {
    display: block;
  }

  .sm\:hidden {
    display: none;
  }


  .sm\:h-\[400px\] {
    height: 400px;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:bg-red-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
  }

  .sm\:text-\[5rem\] {
    font-size: 5rem;
  }
}
@media (min-width: 768px) {

  .md\:order-2 {
    order: 2;
  }

  .md\:block {
    display: block;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[450px\] {
    height: 450px;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:bg-yellow-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
  }

  .md\:pt-40 {
    padding-top: 10rem;
  }
}
@media (min-width: 1024px) {

  .lg\:invisible {
    visibility: hidden;
  }

  .lg\:absolute {
    position: absolute;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:order-3 {
    order: 3;
  }

  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .lg\:-mt-8 {
    margin-top: -2rem;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .lg\:ml-0 {
    margin-left: 0px;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-screen {
    height: 100vh;
  }

  .lg\:w-auto {
    width: auto;
  }

  .lg\:translate-y-10 {
    --tw-translate-y: 2.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .lg\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .lg\:bg-green-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
  }

  .lg\:bg-transparent {
    background-color: transparent;
  }

  .lg\:px-28 {
    padding-left: 7rem;
    padding-right: 7rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pb-32 {
    padding-bottom: 8rem;
  }

  .lg\:pt-16 {
    padding-top: 4rem;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:text-\[9rem\] {
    font-size: 9rem;
  }

  .lg\:opacity-0 {
    opacity: 0;
  }

  .group:hover .lg\:group-hover\:visible {
    visibility: visible;
  }

  .group:hover .lg\:group-hover\:opacity-100 {
    opacity: 1;
  }
}
@media (min-width: 1280px) {

  .xl\:-mt-1 {
    margin-top: -0.25rem;
  }

  .xl\:block {
    display: block;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:translate-y-1\/4 {
    --tw-translate-y: 25%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:flex-row {
    flex-direction: row;
  }

  .xl\:items-start {
    align-items: flex-start;
  }

  .xl\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .xl\:bg-blue-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
  }

  .xl\:pt-20 {
    padding-top: 5rem;
  }

  .xl\:text-\[6rem\] {
    font-size: 6rem;
  }
}
@media (min-width: 1536px) {

  .\32xl\:block {
    display: block;
  }

  .\32xl\:hidden {
    display: none;
  }

  .\32xl\:bg-pink-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 207 232 / var(--tw-bg-opacity, 1));
  }
}

@media not all and (min-width: 768px) {

  .tools-icons {
    display: none;
  }
}
.tools-icons img:nth-child(1) {
  position: absolute;
  top: 5.5rem;
  left: 6rem;
  width: 60px;
}
@media (min-width: 1024px) {

  .tools-icons img:nth-child(1) {
    width: 130px;
  }
}
.tools-icons img:nth-child(2) {
  position: absolute;
  top: 13rem;
  left: 0px;
  width: 60px;
}
@media (min-width: 1024px) {

  .tools-icons img:nth-child(2) {
    width: 130px;
  }
}
.tools-icons img:nth-child(3) {
  position: absolute;
  top: 21rem;
  left: 4rem;
  width: 60px;
}
@media (min-width: 1024px) {

  .tools-icons img:nth-child(3) {
    width: 130px;
  }
}
.tools-icons img:nth-child(4) {
  position: absolute;
  top: 30rem;
  left: 0px;
  width: 60px;
}
@media (min-width: 1024px) {

  .tools-icons img:nth-child(4) {
    width: 130px;
  }
}
.tools-icons img:nth-child(5) {
  position: absolute;
  top: 5.5rem;
  right: 6rem;
  width: 60px;
}
@media (min-width: 1024px) {

  .tools-icons img:nth-child(5) {
    width: 130px;
  }
}
.tools-icons img:nth-child(6) {
  position: absolute;
  top: 13rem;
  right: 0px;
  width: 60px;
}
@media (min-width: 1024px) {

  .tools-icons img:nth-child(6) {
    width: 130px;
  }
}
.tools-icons img:nth-child(7) {
  position: absolute;
  top: 21rem;
  right: 6rem;
  width: 60px;
}
@media (min-width: 1024px) {

  .tools-icons img:nth-child(7) {
    width: 130px;
  }
}
.tools-icons img:nth-child(8) {
  position: absolute;
  top: 30rem;
  right: 0px;
  width: 60px;
}
@media (min-width: 1024px) {

  .tools-icons img:nth-child(8) {
    width: 130px;
  }
}

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

.pt-20 {
    padding-top: 5rem;
}

.book-demo-mobile {
	display: none;
}

@media(max-width:768px){
	.book-demo-mobile {
		position: fixed;
		bottom: 20px;
		right: 20px;
		z-index: 999;
		display: block;
	}

	.book-demo-mobile .btn {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease;
		background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
		border: 0px;
	}

}

.text-book-demo{
	position: absolute;
    top: 12px;
    white-space: nowrap;
    right: 34px;
    text-decoration: none;
    background: #fff;
    padding: 5px 37px 5px 20px;
    border-radius: 20px;
    z-index: -1;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
    border: solid 1px var(--primary);
    color: var(--primary);
}

	
.whatsapp-float {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 999;
}

.whatsapp-float .btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.whatsapp-float .btn:hover {
	transform: scale(1.1);
}

.accordion-flush{
	.accordion-body{
		white-space: pre-line;
		color: #000 !important;
	}
}

.card-modern {
    background: var(--white);
    border: none;
    border-radius: 20px;
    transition: all 0.4s ease;
    height: 100%;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    padding: 30px;
}

.icon-box {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2.2rem;
    color: var(--white);
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.3);
}

.icon-box-green {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--green) 0%, var(--light-green) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2.2rem;
    color: var(--white);
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(0, 110, 0, 0.3);
}

.features-list {
    margin: 10px 0px 20px 0px;
    clear: both;
    width: 100%;
    
    ul {
        margin: 0px !important;
        padding: 0px !important;
        justify-content: center;
        display: flex;
        
        li {
            float: left;
            font-size: 16px;
            font-weight: bold;
            color: var(--primary);
            list-style: none;
            display: flex;
            justify-content: center;
            padding: 5px 20px;
            
            &::before {
                content: "\f00c";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                margin-right: 8px;
				color: var(--green);
            }
        }
    }
    
    .last-clear {
        clear: both;
    }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) brightness(0);
}

.about-sub-title{
	margin-bottom: 20px;	
}

.main-title{
	background: -webkit-linear-gradient(var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.position-sticky{
	position: sticky;
}

.sub-company{
	padding: 20px 0px;
	h5{
		background: -webkit-linear-gradient(var(--primary), var(--secondary));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 800;
	}
	
	p{
		background: linear-gradient(135deg, var(--green) 0%, var(--light-green) 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		padding: 0px;
		margin: 0px;
	}
}

.company-list{
	margin-bottom: 10px !important;
	
	li{
		align-items: center;
		display: flex;
	}
}

.last-tab-icon{
	margin-top: -85px !important;
    z-index: 9999;
    position: absolute;
    text-align: center;
    right: 0px;
    left: 0px;
}

.logo-img {
  max-height: 200px;
  transition: 0.3s ease;
}

.logo-img:hover {
  transform: scale(0.9);
}

@media(max-width:768px){
	.btn-home-mobile{
		margin-top: 58px;
	}
	
	.btn-demo-mobile{
		position: absolute;
		left: 12px;
		top: 90px;
	}
	
	.btn-login-mobile{
		position: absolute;
		right: 28px;
		top: 90px;
	}
}



@media(max-width:991px){
	.navbar {
		background: rgba(0, 0, 0, 0.1);
	}


}

/* Modern nav-pills styling */
.nav-pills .nav-link {
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 1rem;
  color: #495057;
  font-weight: 500;
  transition: all 0.3s;
  position: relative;
  white-space: nowrap;
  text-align: left;
}

.nav-pills .nav-link:hover {
  background-color: #f8f9fa;
  color: #0d6efd;
}

.nav-pills .nav-link.active {
	background-color: var(--gray);
	color: #fff !important;
}

/* Active indicator bar */
.nav-pills .nav-link.active::after {
  display: none !important;
}

/* Responsive: horizontal scroll on mobile */
@media (max-width: 767.98px) {
  .nav-pills {
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	background: white;
	padding: 10px 0px;
	border-radius: 10px;
	box-shadow: 0 0 10px 0px #eee;
  }
  .nav-pills .nav-link {
	flex: 0 0 auto;
	margin-right: 0.5rem;
	margin-bottom: 0;
  }
  .nav-pills .nav-link.active::before {
	left: auto;
	top: -5px;
	width: 100%;
	height: 4px;
	border-radius: 2px 2px 0 0;
  }
}

/* Play Button */

.video-btn-section{
	position: absolute;
    z-index: 99999999;
    right: 0px;
    left: 0px;
	top: 45%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.video-play-btn {
    width: 90px;
    height: 90px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: pulse 2s infinite;
    transition: transform 0.3s ease;
}

@media(max-width:768px){
	.video-btn-section{
		top: 24%;
	}
	.video-play-btn {
		width: 60px !important;
		height: 60px !important;
	}
	
	#videoModalMain{
		.modal-dialog{
			max-width: 85% !important;
			margin: auto;
		}
	}
	
}

.video-play-btn span {
    width: 0;
    height: 0;
    border-left: 22px solid #fff;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 5px;
}

.video-play-btn:hover {
    transform: scale(1.15);
}

/* Pulse Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0,100,255,0.7);
    }
    70% {
        box-shadow: 0 0 0 30px rgba(0,0,255,0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0,0,255,0);
    }
}

#videoModalMain{
	.modal-dialog{
		margin: auto;
	}
}