@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: 'Poppins', sans-serif;
	line-height: 1.6;
	color: #333;
	background-color: #f4f7f6;
	scroll-behavior: smooth;
	font-size: 14px;
}
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
/* Typography */
    h1, h2, h3 {
	color: black;
	margin-bottom: 15px;
}
h1 {
	font-size: 3.5em;
	font-weight: 700;
}
h2 {
	font-size: 2.5em;
	font-weight: 600;
	text-align: center;
	margin-bottom: 40px;
}
h3 {
	font-size: 20px;
	font-weight: 600;
	color: #007bff; /* Primary brand color for headings */
}
p {
	margin-bottom: 1.2em;
}
.highlight-brand {
	color: #4CAF50; /* A contrasting color for the platform name */
}
a {
	text-decoration: none;
}
.logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.logo-icon {
	display: inline-block;
	width: 80px;
	height: auto;
	overflow: hidden;
}
.logo-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Buttons */
    .btn-primary, .btn-secondary {
	display: inline-block;
	padding: 15px 30px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.3s ease, transform 0.2s ease;
	text-align: center;
}
.btn-primary {
	background-color: #007bff;
	color: #fff;
	margin-right: 15px;
}
.btn-primary:hover {
	background-color: #0056b3;
	transform: translateY(-2px);
}
.btn-secondary {
	background-color: #4CAF50; /* A secondary, inviting call to action color */
	color: #fff;
	margin-top: 20px;
}
.btn-secondary:hover {
	background-color: #388e3c;
	transform: translateY(-2px);
}
.logo-name {
	font-size: 1.4em;
}
.nav-wrapper {
	/* Takes the full width of the header section */
    width: 100%;
	/* Position it at the top */
    position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	/* Give it a subtle background, blending with the hero section */
    background-color: rgba(26, 43, 66, 0.95);
	padding: 15px 0; /* Vertical padding */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Optional: slight shadow */
}
.nav-bar {
	/* Limits the content width to center it, but the wrapper is full width */
    max-width: 1920px;
	margin: 0 auto;
	padding: 0 5%; /* Horizontal padding to match other sections */
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1em;
}
.nav-links {
	font-size: 1.2em;
	display: flex;
	flex-direction: row;
	gap: 20px;
}
.nav-links a {
	color: white;
}
@media (orientation: portrait) {
 .nav-bar {
 flex-direction: column;
 justify-content: flex-start;
 font-size: 1em;
 gap: 10px;
}
 .nav-links {
 gap: 10px;
 font-size: 0.8em;
}
}
/* Header/Hero Section */
    .hero-section {
	background: linear-gradient(135deg, #1A2B42 0%, #294060 50%, #35507C 100%);
	color: #fff;
	padding: 80px 5%;
	display: flex;
	flex-wrap: wrap; /* Allows stacking on smaller screens */
	justify-content: center;
	align-items: center;
	gap: 40px;
	min-height: 40vh;
	text-align: center; /* Default for mobile */
}
.hero-content {
	flex: 1 1 200px; /* Allows content to take space, but not less than 500px before wrapping */
	max-width: 600px;
	padding-top: 50px;
}
.hero-title {
	font-size: clamp(2.5em, 5vw, 3.5em); /* Responsive font size */
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 1.2;
	color: antiquewhite
}
.hero-subtitle {
	font-size: clamp(1.2em, 2.5vw, 1.8em);
	margin-bottom: 30px;
	opacity: 0.9;
}
.hero-graphic {
	flex: 1 1 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 700px; /* Limit graphic size */
}
.hero-graphic img {
	max-width: 100%;
	height: auto;
	border-radius: 10px; /* Optional: subtle rounded corners */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Soft shadow for depth */
}
/* Main Content Sections */
    .main-content {
	padding: 60px 5%;
	max-width: 1200px;
	margin: 0 auto;
}
.intro-text {
	text-align: center;
	margin-bottom: 60px;
	font-size: 1.3em;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-bottom: 60px;
}
.feature-item {
	background-color: #fff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: center;
}
.feature-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.feature-item h3 {
	margin-bottom: 10px;
	color: #2c3e50;
	font-size: 1.6em;
}
.call-to-action {
	background-color: #e9f7ef; /* Light green background */
	padding: 60px 5%;
	text-align: center;
	border-radius: 10px;
	margin-bottom: 40px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.call-to-action blockquote {
	font-size: 1.8em;
	font-style: italic;
	color: #4CAF50;
	margin-bottom: 30px;
	position: relative;
	padding: 0 20px;
}
 .call-to-action blockquote::before, .call-to-action blockquote::after {
 content: '"';
 font-size: 3em;
 position: absolute;
 color: rgba(76, 175, 80, 0.2);
 top: -10px;
}
 .call-to-action blockquote::before {
 left: 0;
}
 .call-to-action blockquote::after {
 right: 0;
 transform: scaleX(-1);
}
/* Footer */
    footer {
	background-color: #2c3e50;
	color: #fff;
	text-align: center;
	padding: 30px 20px;
	font-size: 0.9em;
}
    
    /* Responsive Adjustments */
    @media (min-width: 768px) {
 .hero-section {
 text-align: left;
 padding: 100px 5%;
}
 .hero-content {
 order: 0; /* Content first */
}
 .hero-graphic {
 order: 1; /* Graphic second */
}
}
 @media (max-width: 767px) {
 h1 {
 font-size: 2.5em;
}
 h2 {
 font-size: 2em;
}
 .hero-section {
 flex-direction: column; /* Stack on small screens */
}
 .hero-graphic {
 margin-top: 40px;
}
 .main-content {
 padding: 40px 2%;
}
 .features-grid {
 grid-template-columns: 1fr;
}
}
 @media (min-width: 1024px) {
 .hero-section {
 padding: 120px 5%;
}
}
/* --- NEW PRICING STYLES --- */
.pricing-section {
	padding: 60px 0;
	text-align: center;
	background-color: #fcfcfc; /* Slightly lighter than the background */
	border-top: 1px solid #eee;
	margin-bottom: 60px;
}
.pricing-intro {
	font-size: 1.2em;
	margin-bottom: 40px;
	color: #555;
}
.pricing-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
}
.price-card {
	background-color: #fff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	max-width: 300px;
	text-align: center;
	transition: transform 0.3s ease;
}
.price-card:hover {
	transform: translateY(-5px);
}
.price-card h3 {
	color: #2c3e50;
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.8em;
}
.price-value {
	font-size: 2.5em;
	font-weight: 700;
	color: #007bff;
	margin-bottom: 5px;
}
.price-unit {
	font-size: 0.4em;
	font-weight: 400;
	opacity: 0.8;
}
.price-desc {
	margin-bottom: 20px;
	font-style: italic;
	color: #777;
}
.featured-card {
	background: linear-gradient(145deg, #4CAF50, #388e3c);
	color: #fff;
	transform: scale(1.05); /* Make it stand out */
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.featured-card h3, .featured-card .price-value, .featured-card .price-unit, .featured-card .price-desc {
	color: #fff;
}
.features-list {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
	text-align: left;
	color: inherit;
}
.features-list li {
	padding: 8px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.2); /* For featured card */
	border-bottom: 1px dashed #eee; /* For regular card */
	font-size: 0.95em;
}
.featured-card .features-list li {
	border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
}
.features-list li:last-child {
	border-bottom: none;
}
.pricing-cta {
	margin-top: 30px;
	/* Adjusting to match btn-primary styles */
    background-color: #007bff;
	color: #fff;
}
/* --- END PRICING STYLES --- */


/* --- NEW CONTACT US STYLES --- */
.contact-section {
	padding: 80px 5%;
	background-color: #f4f7f6; /* Matching the main body background */
	text-align: center;
}
.contact-intro {
	font-size: 1.2em;
	margin-bottom: 40px;
	color: #555;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.contact-content-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
}
.contact-form {
	max-width: 100%;
	background-color: #fff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
	width: 100%;
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1em;
	font-family: 'Poppins', sans-serif;
}
.contact-form textarea {
	resize: vertical;
}
.contact-form .btn-primary {
	width: 100%;
	border: none;
	cursor: pointer;
	margin-right: 0; /* Override default button margin */
}
.contact-info {
	flex: 1 1 300px;
	padding: 30px;
	background-color: #e9f7ef; /* Match CTA background for visual consistency */
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.contact-info h3 {
	color: #4CAF50;
	margin-top: 0;
	margin-bottom: 20px;
}
.contact-info p {
	margin-bottom: 10px;
}
.contact-info a {
	color: #007bff;
	text-decoration: none;
}
.contact-info a:hover {
	text-decoration: underline;
}
.css-subtext {
	font-size: 0.7em;
}
/* --- END CONTACT US STYLES --- */

/* --- NEW REQUEST DEMO STYLES --- */
.demo-section {
	padding: 80px 5%;
	text-align: center;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.demo-intro {
	font-size: 1.2em;
	margin-bottom: 40px;
	color: #555;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
#demo-form {
	max-width: 800px;
	margin: 0 auto;
	padding: 30px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	text-align: left;
}
.form-group {
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 20px;
	margin-bottom: 30px;
}
.form-group legend {
	font-size: 1.2em;
	font-weight: 600;
	color: #007bff;
	padding: 0 10px;
}
#demo-form input[type="text"], #demo-form input[type="tel"], #demo-form input[type="email"], #demo-form input[type="url"], #demo-form select {
	width: 100%;
	padding: 15px;
	margin-bottom: 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1em;
	font-family: 'Poppins', sans-serif;
	box-sizing: border-box; /* Crucial for responsive width */
}
#demo-form select {
	appearance: none; /* Removes default OS styling for a cleaner look */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%232c3e50" d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>');
	background-repeat: no-repeat;
	background-position: right 15px top 50%;
	background-size: 0.8em;
}
.form-row {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}
.form-row input, .form-row select {
	margin-bottom: 0;
}
.form-row > * {
	flex: 1;
}
#demo-form .btn-secondary {
	width: 100%;
	border: none;
	cursor: pointer;
	margin-top: 20px;
	padding: 15px 30px;
}
/* --- END REQUEST DEMO STYLES --- */
/* --- NEW FUNCTIONAL OVERVIEW STYLES --- */
.features-cta-container {
	text-align: center;
	margin-bottom: 60px;
}
.functional-overview-section {
	padding: 60px 5%;
	background-color: #f4f7f6; /* Matching the main content background */
	text-align: center;
}
.overview-intro {
	font-size: 1.2em;
	margin-bottom: 40px;
	color: #555;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.overview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
}
.pillar-card {
	background-color: #fff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-align: left;
	border-top: 5px solid #007bff; /* Primary color accent */
}
.pillar-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.pillar-icon {
	font-size: 2.5em;
	margin-bottom: 10px;
}
.pillar-card h3 {
	margin-top: 0;
	margin-bottom: 15px;
	color: #2c3e50;
	font-size: 1.5em;
}
.pillar-card ul {
	list-style: none;
	padding: 0;
}
.pillar-card ul li {
	padding: 8px 0;
	font-size: 0.95em;
	border-bottom: 1px dashed #eee;
}
.pillar-card ul li:last-child {
	border-bottom: none;
}
/* --- END FUNCTIONAL OVERVIEW STYLES --- */

.comparison-container {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #dee2e6;
}
.comparison-table {
	margin-bottom: 0;
	background: white;
	table-layout: fixed;
	min-width: 100%; /* Ensures the table doesn't get too squished */
}
/* Sticky First Column */
.comparison-table td:first-child, .comparison-table th:first-child {
	position: sticky;
	left: 0;
	background-color: #f8f9fa;
	z-index: 0;
	width: 300px;
	border-right: 2px solid #dee2e6;
}
.feature-label {
	font-weight: 600;
	color: #495057;
	padding: 15px !important;
	text-align: left !important;
}
.comparison-table th, .comparison-table td {
	text-align: center;
	vertical-align: middle;
	padding: 15px !important;
}
/* Plan Headers */
.plan-header {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 5px;
}
.plan-price-small {
	font-size: 0.9rem;
	color: #6c757d;
}
/* Highlighted Column (Professional) */
.featured-col {
	background-color: #eef6ff !important;
	border-top: 4px solid #0d6efd;
}
.comparison-table tr:hover td {
	background-color: #f1f3f5;
}
/* Checkmark Icon */
.check {
	color: #198754;
	font-weight: bold;
}
.action-row td {
	background: #fff !important;
	padding-top: 25px !important;
	padding-bottom: 25px !important;
}

/* Mobile specific shadow for sticky col */
@media (max-width: 768px) {
 .comparison-table td:first-child {
 box-shadow: 5px 0 10px rgba(0, 0, 0, 0.05);
}
}
.select-plan {
	font-size: 1.4rem;
	padding: 5px 20px;
	border-radius: 20px;
}
.select-plan:hover {
	background-color: #0056b3;
	color: white;
	transform: translateY(-2px);
}
.css-contact-quotation {
	color: red;
}
.fast-registration-section {
	padding: 60px 5%;
	background-color: #f4f7f6; /* Matching the main content background */
	text-align: center;
}
#improve-registration {
	background-color: beige;
	margin-top: 100px;
	margin-bottom: 100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
#improve-registration h2 {
	color: crimson;
}
#improve-registration .features-cta-container {
	margin-bottom: 0;
}