--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}
.nav-wrapper .logo {
	display: flex;
}
.nav-wrapper .logo a{
	line-height: 0;
}
.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}
a.custom-logo-link img {
    max-width: 75px !important;
}
.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}
p {
    margin-bottom: 1.5em;
    font-size: 1.2em;
}
body.single img {
    border-radius: 10px;
    margin: 10px 0;
}
pre.wp-block-code, .has-background {
    border-radius: 10px;
}
@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

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

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 900 !important;
}
/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
/* --- CSS Variables & Base --- */
:root {
	--gradient-start: #6a11cb;
	--gradient-end: #2575fc;
	--gradient-angle: 110deg;
	--gradient-text: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
	--gradient-bg: linear-gradient(var(--gradient-angle), var(--gradient-start) 0%, var(--gradient-end) 100%);
	--gradient-bg-soft: linear-gradient(var(--gradient-angle), #ede4ff 0%, #e1eafc 100%); /* Softer version */
	--gradient-bg-dark: linear-gradient(var(--gradient-angle), #2c0b50 0%, #11316c 100%);

	--color-text: #333;
	--color-text-muted: #555;
	--color-text-inverse: #ffffff;
	--color-bg: #ffffff;
	--color-bg-alt: #f8f9fe; /* Slightly off-white */
	--color-border: #e0e5f2;
	--color-primary: var(--gradient-start); /* Fallback or solid color */
	--color-accent: #ff4081; /* Example accent */

	--font-body: 'Inter', sans-serif;
	--font-heading: 'Inter', sans-serif; /* Could use a different heading font */

	--shadow-sm: 0 2px 10px rgba(100, 100, 150, 0.08);
	--shadow-md: 0 5px 20px rgba(100, 100, 150, 0.12);
	--shadow-lg: 0 10px 35px rgba(100, 100, 150, 0.18);	
	
	--gradient-bg-dark-footer: #8e2de2; /* Brighter purple start */
	--gradient-bg-dark-end-footer: #4a00e0; /* Brighter purple end */

	--border-radius: 12px;
	--transition-speed: 0.3s;
}

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

html { scroll-behavior: smooth; }

body {
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
}

/* --- Header --- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
/* 	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-border); */
	transition: box-shadow var(--transition-speed) ease;
}
/* Add shadow on scroll - Requires JS or use :has() if support allows */
.site-header--scrolled .nav-wrapper {
	 box-shadow: var(--shadow-sm);
}

.header-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
}

.logo {
	font-size: 1.8em;
	font-weight: 900;
	text-decoration: none;
	color: var(--color-text); /* Or use gradient below */
	/* Optional Gradient Logo Text
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent; */
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 30px;
}

.nav-links a {
	text-decoration: none;
	color: var(--color-text-muted);
	font-weight: 500;
	position: relative;
	transition: color var(--transition-speed) ease;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--gradient-bg);
	transition: width var(--transition-speed) ease;
}

.nav-links a:hover, .nav-links .dropdown:hover > a {
	color: var(--color-text);
}
.nav-links a:hover::after, .nav-links .dropdown:hover > a::after {
	width: 100%;
}

.nav-links .dropdown > a::after { content: none; /* Remove underline for dropdown parent */ }
.nav-links .dropdown i { margin-left: 4px; font-size: 1em; vertical-align: middle; }

/* Basic Dropdown - enhance further if needed */
.dropdown { position: relative; }
/* .dropdown-content { display: none; position: absolute; ... } */
/* .dropdown:hover .dropdown-content { display: block; } */

/* --- Buttons --- */
.button {
	display: inline-block;
	padding: 12px 28px;
	border-radius: var(--border-radius);
	text-decoration: none;
	font-weight: 700;
	font-size: 1em;
	border: none;
	cursor: pointer;
	transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, background-size var(--transition-speed) ease, color var(--transition-speed) ease;
	text-align: center;
}

.button--primary {
	color: var(--color-text-inverse);
	background: var(--gradient-bg);
	background-size: 100% 100%; /* For hover effect */
}
.button--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(106, 17, 203, 0.3);
	 background-size: 150% 150%; /* Subtle gradient shift */
}
.button--primary:active {
	 transform: translateY(0px);
	 box-shadow: 0 4px 10px rgba(106, 17, 203, 0.2);
}


.button--secondary {
	color: var(--color-primary);
	background-color: transparent;
	border: 2px solid var(--color-border); /* Subtle border */
	position: relative;
	overflow: hidden;
	z-index: 1;
}
 .button--secondary::before { /* Gradient fill effect */
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: var(--gradient-bg);
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-speed) ease;
}
.button--secondary:hover {
	color: var(--color-text-inverse);
	border-color: transparent; /* Hide border as bg fills */
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm);
}
.button--secondary:hover::before {
	transform: scaleX(1);
}

/* --- Hero Section --- */
.hero {
	padding: 20px 0 80px 0;
	text-align: center;
	position: relative;
	overflow: hidden;
	 background: radial-gradient(circle at 50% 0%, rgba(237, 228, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%), var(--color-bg); /* Subtle top glow */
}
/* Optional: Add animated background shapes */
/* .hero::before, .hero::after { content: ''; position: absolute; ... animation: float 6s ease-in-out infinite; } */

.hero__title {
	font-size: clamp(2.5rem, 6vw, 4.5rem); /* Responsive font size */
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 20px;
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	 animation: fadeInUp 1s ease-out forwards;
	 opacity: 0;
}

.hero__subtitle {
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	color: var(--color-text-muted);
	max-width: 750px;
	margin: 0 auto 35px auto;
	animation: fadeInUp 1s 0.2s ease-out forwards;
	opacity: 0;
}

.hero__form {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
	animation: fadeInUp 1s 0.4s ease-out forwards;
	opacity: 0;
}

.hero__input {
	padding: 14px 20px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	font-size: 1rem;
	min-width: 300px;
	transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.hero__input:focus {
	outline: none;
	border-color: var(--gradient-start);
	box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2);
}

.hero__disclaimer {
	font-size: 0.8em;
	color: #999;
	animation: fadeInUp 1s 0.6s ease-out forwards;
	opacity: 0;
}
.hero__visual img {
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-md);
}
.hero__visual {
	margin-top: 60px;
	 animation: fadeInUp 1s 0.8s ease-out forwards;
	 opacity: 0;
}

/* --- Section Styles --- */
.section {
	padding: 80px 0;
}
.section--alt {
	background-color: var(--color-bg-alt);
	 /* background: var(--gradient-bg-soft); Optional gradient bg */
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
	animation: fadeInScroll 0.8s ease-out forwards;
}
.section-header__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 900;
	margin-bottom: 10px;
	line-height: 1.3;
	/* Optional Gradient Title
	background: var(--gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent; */
}
.section-header__subtitle {
	font-size: 1.1em;
	color: var(--color-text-muted);
	max-width: 650px;
	margin: 0 auto;
}

/* --- Grid & Cards --- */
.grid {
	display: grid;
	gap: 30px;
}
.grid--3-cols { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--2-cols { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); align-items: center;}

.card {
	background-color: var(--color-bg);
	border-radius: var(--border-radius);
	padding: 30px;
	box-shadow: var(--shadow-sm);
	text-align: center;
	transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
	border: 1px solid var(--color-border);
	 position: relative;
	 overflow: hidden; /* For potential pseudo-element effects */
	 animation: fadeInScroll 0.8s ease-out forwards;
}

/* Card Hover Enhancement */
.card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-lg);
}
/* Optional: Subtle gradient border on hover */
/* .card::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	border-radius: var(--border-radius);
	border: 2px solid transparent;
	background: var(--gradient-bg) border-box;
	-webkit-mask:
	   linear-gradient(#fff 0 0) padding-box,
	   linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--transition-speed) ease;
}
.card:hover::after {
	 opacity: 1;
} */

.card__visual {
	height: 150px;
	background-color: var(--color-bg-alt);
	border-radius: calc(var(--border-radius) - 4px); /* Inner radius */
	margin-bottom: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Replace with actual images/graphics */
}
.card__visual img { /* If using img tag */
	 max-width: 100%; height: auto; display: block;
	 border-radius: calc(var(--border-radius) - 4px);
}

.card__title {
	font-size: 1.4em;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 1.3;
}
.card__description {
	color: var(--color-text-muted);
	font-size: 0.95em;
	margin-bottom: 25px;
	min-height: 50px; /* Prevent layout shifts */
	height: 76px;
    overflow: hidden;
}

/* --- Features Section Specific --- */
.feature-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 30px;
	 animation: fadeInScroll 0.8s ease-out forwards;
}
.feature-item:last-child,.feature-item:last-child p {
	margin-bottom: 0;
}
.feature-item__icon {
	font-size: 2.5em; /* Adjust size as needed */
	padding: 10px;
	background: var(--gradient-bg-soft);
	border-radius: var(--border-radius);
	color: var(--color-primary);
	flex-shrink: 0;
	display: inline-flex; /* Centers icon if using font icon */
	align-items: center;
	justify-content: center;
	width: 60px; height: 60px; /* Fixed size */
}
.feature-item__title {
	font-size: 1.2em;
	font-weight: 700;
	margin-bottom: 5px;
	line-height: 1.3;
}
.feature-item__text {
	color: var(--color-text-muted);
	font-size: 0.95em;
}
.features__visual img {
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-md);
}
 .features__visual { /* Placeholder for the side image */
	 animation: fadeInScroll 0.8s ease-out forwards;
}
a.box-link {
    text-decoration: none;
    color: inherit;
}
/* --- Testimonial Section --- */
.testimonial {
	background: var(--gradient-bg-soft);
	padding: 50px;
	border-radius: var(--border-radius);
	text-align: center;
	box-shadow: var(--shadow-md);
	position: relative; /* For quotes */
	 animation: fadeInScroll 0.8s ease-out forwards;
}
 .testimonial::before { /* Quote marks */
	content: '“';
	position: absolute;
	top: 10px; left: 20px;
	font-size: 5em;
	color: rgba(106, 17, 203, 0.1);
	font-family: Georgia, serif;
	line-height: 1;
}

.testimonial__avatar {
	width: 80px; height: 80px;
	border-radius: 50%;
	margin: 0 auto 20px auto;
	box-shadow: 0 0 0 5px var(--color-bg); /* White ring */
	object-fit: cover;
}
.testimonial__quote {
	font-size: 1.2em;
	font-style: italic;
	color: var(--color-text-muted);
	max-width: 700px;
	margin: 0 auto 20px auto;
}
.testimonial__author {
	font-weight: 700;
	margin-bottom: 2px;
}
.testimonial__title {
	font-size: 0.9em;
	color: var(--color-text-muted);
}
/* Add slider controls styling here */
.testimonial-controls { margin-top: 30px; }
.testimonial-controls button {
	background: none; border: none; font-size: 1.5em; cursor: pointer;
	 color: rgba(106, 17, 203, 0.5); transition: color var(--transition-speed) ease; padding: 5px;
}
.testimonial-controls button:hover { color: var(--color-primary); }


/* --- Final CTA Section --- */
.final-cta {
	background: var(--gradient-bg-dark);
	color: var(--color-text-inverse);
}
.final-cta .section-header__title { color: var(--color-text-inverse); background: none; line-height: 1.3; } /* Override gradient text if used */
.final-cta .section-header__subtitle { color: rgba(255, 255, 255, 0.8); }
.final-cta__form { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 15px;}
.final-cta__input {
	 padding: 14px 20px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--color-text-inverse);
	border-radius: var(--border-radius);
	font-size: 1rem;
	min-width: 300px;
	transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}
.final-cta__input::placeholder { color: rgba(255, 255, 255, 0.6); }
.final-cta__input:focus {
	outline: none;
	border-color: var(--color-text-inverse);
	 background-color: rgba(255, 255, 255, 0.2);
	 box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
.final-cta__disclaimer { font-size: 0.8em; color: rgba(255, 255, 255, 0.6); text-align: center;}

/* --- Footer --- */
.site-footer {
	background-color: #1a0d34; /* Dark base */
	color: rgba(255, 255, 255, 0.7);
	padding: 60px 0 30px 0;
	font-size: 0.9em;
	max-width: 1240px;
    margin: 30px auto;
}
.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}
.footer-col__title {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-text-inverse);
	margin-bottom: 15px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color var(--transition-speed) ease;
}
.footer-links a:hover { color: var(--color-text-inverse); }
.footer-social-icons { display: flex; gap: 15px; }
.footer-social-icons a { font-size: 1.4em; }
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 30px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
}

/* --- Animations --- */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Basic scroll animation trigger - replace with Intersection Observer JS for reliability */
@keyframes fadeInScroll {
	 from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}
/* Apply to elements you want animated on scroll - add a class like 'animate-on-scroll' */
.animate-on-scroll {
	 opacity: 0; /* Initially hidden */
	 /* Animation will be applied by JS when element is in view */
}


/* --- Responsiveness --- */
@media (max-width: 992px) {
	.grid--2-cols { grid-template-columns: 1fr; }
	.features__visual { height: 350px; margin-top: 40px; order: -1; /* Move image above text on mobile */ }
}

@media (max-width: 768px) {
	.nav-links { display: none; /* Implement mobile menu toggle */ }
	.hero__form { flex-direction: column; align-items: stretch; }
	.hero__input { min-width: unset; width: 100%; }
	.grid--3-cols { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.final-cta__form { flex-direction: column; align-items: stretch; }
	 .final-cta__input { min-width: unset; width: 100%;}
	div.single-card-header {
		padding: 20px;
	}
	.single-card-header h1.heading {
    font-size: 2.5rem;
}
}

/* Accessibility: Improve focus visibility */
:focus-visible {
	 outline: 2px solid var(--gradient-start);
	 outline-offset: 2px;
	 border-radius: 4px; /* Optional: slightly rounded outline */
}
/* Hide default outline when :focus-visible is supported */
*:focus:not(:focus-visible) {
	outline: none;
}
.site-header {
  padding: 1rem;
}

.nav-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  padding: 0.75rem 2rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* .logo {
  width: 48px;
  height: 48px;
  background-color: #3b82f6;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
} */
.logo a {
	text-decoration: none;
	font-size: 28px;
	text-transform: uppercase;
	color: #000;
}

/* Menu */
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  text-decoration: none;
  color: #64748b;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-menu li a:hover {
  color: #1e293b;
}

/* CTA */
.cta-button {
  background-color: #3b82f6;
  color: white;
  padding: 0.5rem 1.25rem;
  border-radius: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.cta-button:hover {
  background-color: #2563eb;
}

.site-footer {
	 background: linear-gradient(to bottom, var(--gradient-bg-dark-footer), var(--gradient-bg-dark-end-footer));
	 color: rgba(255, 255, 255, 0.7);
	 padding: 60px 0 30px 0;
	 font-size: 0.9em;
	 border-radius: var(--border-radius); /* Optional: Rounded corners for the entire footer box */
	 box-shadow: var(--shadow-md); /* Optional: Adds a subtle shadow */
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}

.footer-col {
	/* Removed borders around individual columns */
	/*border: 1px solid rgba(255, 255, 255, 0.15);*/
	padding: 20px;
	border-radius: var(--border-radius);
}

.footer-col__title {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--color-text-inverse);
	margin-bottom: 15px;
}

.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	margin-bottom: 10px;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color var(--transition-speed) ease;
}

.footer-links a:hover {
	color: var(--color-text-inverse);
}

/* === Newsletter Signup === */
.newsletter-signup {
	margin-bottom: 20px;
}

.newsletter-signup label {
	display: block;
	font-weight: 500;
	margin-bottom: 5px;
	color: var(--color-text-inverse);
}

.newsletter-signup input[type="email"] {
	padding: 10px 15px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--color-text-inverse);
	border-radius: var(--border-radius);
	width: 100%;
	margin-bottom: 10px;
	transition: border-color var(--transition-speed) ease, background-color var(--transition-speed) ease;
}

.newsletter-signup input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.newsletter-signup input[type="email"]:focus {
	outline: none;
	border-color: var(--color-text-inverse);
	background-color: rgba(255, 255, 255, 0.2);
}

.newsletter-signup button {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--border-radius);
	background: #fff;
	color: #000;
	text-decoration: none;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background-color var(--transition-speed) ease;
}
 .newsletter-signup button:hover {
	 background: linear-gradient(120deg, #6a11cb, #2575fc); /* Different angle or shift */
 }

/* === Social Media Icons === */
.footer-social-icons {
	display: flex;
	gap: 15px;
	font-size: 1.5em;
	margin-top: 20px;
}

.footer-social-icons a {
	color: rgba(255, 255, 255, 0.7);
	transition: color var(--transition-speed) ease;
}

.footer-social-icons a:hover {
	color: var(--color-text-inverse);
}

/* === Footer Bottom === */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 30px;
	text-align: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.8em;
}

.legal-links {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 15px;
}

.legal-links a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color var(--transition-speed) ease;
}

.legal-links a:hover {
	color: rgba(255, 255, 255, 0.8);
}
.overflow-hidden {
  overflow: hidden;
}

.tool-tests .card__visual img {
  height: 110px;
  object-fit: contain;
}


/*Single Automation Tools*/

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .heading {
      font-size: 3.5rem;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 20px;
      background: linear-gradient(90deg, #2B59FF, #BB2BFF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
		text-align: center;
    }

    .subheading {
      font-size: 1.25rem;
      color: #6b7280;
      margin-bottom: 32px;
	  text-align: center;
	  line-height: 1.4;
    }
	.automatisierung-content :is(h2,h3,h4,h5,h6) {
		margin-bottom: 20px;
	}
    .tags {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    .tag {
      background: #f3f4f6;
      color: #374151;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: default;
    }

    .tag:hover {
      background: #e0e7ff;
      color: #1e40af;
    }

    .meta {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      font-size: 0.9rem;
      color: #6b7280;
      align-items: center;
    }

    .meta span {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pill {
      background-color: #d1fae5;
      color: #047857;
      padding: 4px 12px;
      border-radius: 999px;
      font-weight: 500;
      font-size: 0.875rem;

    
    }

    .author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

.author-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #ffffff;
}

.author-name {
  font-weight: 600;
  font-size: 1rem;
  color: #111827;
}

.author-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 400;
  margin-bottom: 2px;
}

.pill.intermediate {
  background-color: #E0E7FF;
  color: #1e40af;
}
.pill.expert {
  background-color: #BB2BFF36;
  color: #BB2BFF;
}
container.blog-single {
  padding-bottom: 50px;
}
.mobile-menu-toggle {
	display: none;
}
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
    
 .nav-menu {
    position: fixed;
    top: 150px;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: ;
    background: #fff;
    flex-direction: column;
    padding: 5rem 2rem 2rem;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
	 opacity: 0;
    visibility: hidden;
  }
	.nav-wrapper {
		padding: 0;
	}
    .nav-menu.active {
        top: 80px;
		opacity: 1;
		visibility: visible;
    }
    
    
    /* Hamburger to X animation */
    .mobile-menu-toggle[aria-expanded="true"] .hamburger {
        background: transparent;
    }
    
    .mobile-menu-toggle[aria-expanded="true"] .hamburger:before {
        transform: rotate(45deg);
        top: 0;
    }
    
    .mobile-menu-toggle[aria-expanded="true"] .hamburger:after {
        transform: rotate(-45deg);
        top: 0;
    }
	.main-nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
	}

	.mobile-menu-toggle {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0.5rem;
		z-index: 1000;
	}

	.hamburger {
		display: block;
		width: 24px;
		height: 2px;
		background: #333;
		position: relative;
		transition: all 0.3s ease;
	}

	.hamburger:before,
	.hamburger:after {
		content: '';
		position: absolute;
		width: 24px;
		height: 2px;
		background: #333;
		transition: all 0.3s ease;
	}

	.hamburger:before {
		top: -8px;
	}

	.hamburger:after {
		top: 8px;
	}

	.nav-menu {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		transition: all 0.3s ease;
		gap: 10px !important;
		padding: 20px;
	}

	.nav-menu .menu-item a {
		text-decoration: none;
		color: #333;
		font-weight: 500;
		transition: color 0.3s ease;
	}

	.nav-menu .menu-item a:hover {
		color: #0073aa;
	}
	.single-automatisierung .pill {
	  width: 100%;
	  border-radius:0;
	  justify-content: center;
	}
}

input.hero__input, input.final-cta__input {
    padding: 8px 15px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}
.single-card-header {
    padding: 5px 50px 50px 50px;
    margin: 50px 0;
    border-radius: 20px;
    box-shadow: 0 0px 20px 14px rgba(100, 100, 150, 0.08)
}
.single_custom {
    max-width: 850px;
}
.single_custom :is(ol,ul) li {
    font-size: 19px !important;
}
.hero__title span.fill {
    color: #fff;
}