:root {
	    --primary-gradient: linear-gradient(135deg, #7751BC 0%, #9871CA 100%);
	    --primary: #7751BC;
	    --primary-dark: #5a67d8;
	    --primary-accent: #764ba2;

	    --text-dark: #2c3e50;
	    --text-muted: #666;
	    --bg-light: #f8f9fa;
	}

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

	a {
	    text-decoration: none;
	    color: inherit;
	}

	body {
	    font-family: "Raleway", sans-serif;
	    font-optical-sizing: auto;
	    font-weight: 300;
	    font-style: normal;
	    line-height: 2;
	    font-size: medium;
	    color: #333;
	}

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

	/* Navigation */
	.navbar {
	    background: var(--primary-gradient);
	    color: white;
	    padding: 0;
	    position: sticky;
	    top: 0;
	    z-index: 100;
	}

	.navbar .container {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}

	.logo {
	    display: flex;
	    align-items: center;
	}

	.logo img {
	    height: 48px;
	    width: auto;
	    max-width: 100%;
	    object-fit: contain;
	}

	.nav-wrapper {
	    display: flex;
	    align-items: center;
	    gap: 2rem;
	}

	.menu-toggle {
	    display: none;
	    flex-direction: column;
	    background: none;
	    border: none;
	    cursor: pointer;
	    padding: 0.5rem;
	}

	.menu-toggle span {
	    width: 25px;
	    height: 3px;
	    background: white;
	    margin: 3px 0;
	    transition: 0.3s;
	}

	.nav-menu {
	    display: flex;
	    list-style: none;
	    gap: 2rem;
	}

	.nav-link {
	    color: white;
	    text-decoration: none;
	    transition: color 0.3s;
	}

	.nav-link:hover,
	.nav-link.active {
	    color: #e0d7ff;
	}

	.auth-buttons {
	    display: flex;
	    gap: 1rem;
	}

	.btn-auth {
	    background: rgba(255, 255, 255, 0.15);
	    border: 1px solid rgba(255, 255, 255, 0.3);
	    color: white;
	    padding: 0.5rem 1rem;
	    border: none;
	    border-radius: 4px;
	    cursor: pointer;
	    font-size: 0.9rem;
	    transition: background 0.3s;
	}

	.btn-auth:hover {
	    background: rgba(255, 255, 255, 0.25);
	}

	/* Login Modal */
	.modal {
	    display: none;
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.7);
	    z-index: 1001;
	    align-items: center;
	    justify-content: center;
	}

	.modal.active {
	    display: flex;
	}

	.modal-content {
	    background: white;
	    padding: 2rem;
	    border-radius: 8px;
	    max-width: 400px;
	    width: 90%;
	    position: relative;
	}

	.modal-close {
	    position: absolute;
	    top: 1rem;
	    right: 1rem;
	    font-size: 1.5rem;
	    cursor: pointer;
	    color: #7f8c8d;
	}

	.modal-close:hover {
	    color: #2c3e50;
	}

	.modal-content h2 {
	    margin-bottom: 1.5rem;
	    color: #2c3e50;
	}

	/* Sections */
	.section {
	    display: none;
	    padding: 4rem 0;
	    min-height: calc(100vh - 200px);
	}

	.section.active {
	    display: block;
	}

	h1 {
	    margin-bottom: 2rem;
	    color: #2c3e50;
	}

	h2 {
	    margin-bottom: 1rem;
	    color: #34495e;
	}

	.image-wrapper {
	    float: right;
	    margin: 0 0 20px 20px;
	    width: 300px;
	}

	.image-wrapper img {
	    width: 100%;
	    height: auto;
	    aspect-ratio: 3 / 4;
	    object-fit: cover;
	    border-radius: 8px;
	    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	/* Appointments & Events */
	.events-section {
	    margin-bottom: 3rem;
	}

	.events-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	    gap: 20px;
	}

	.event-card {
	    background: white;
	    border-radius: 15px;
	    padding: 30px;
	    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	    border: 2px solid transparent;
	    position: relative;
	    overflow: hidden;
	    transition: all 0.35s ease;
	}

	.event-card::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 4px;
	    width: 100%;
	    background: var(--primary-gradient);
	    transform: scaleX(0);
	    transform-origin: left;
	    transition: transform 0.35s ease;
	}

	.event-card:hover {
	    transform: translateY(-10px);
	    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
	    border-color: var(--primary);
	}

	.event-card:hover::before {
	    transform: scaleX(1);
	}

	.event-header {
	    display: flex;
	    justify-content: space-between;
	    align-items: start;
	    margin-bottom: 1rem;
	}

	.event-title {
	    color: var(--primary);
	}


	.event-badge {
	    background: #17bd27;
	    color: white;
	    padding: 0.25rem 0.75rem;
	    border-radius: 12px;
	    font-size: 0.85rem;
	}

	.event-badge.limited {
	    background: #e74c3c;
	}

	.event-date-time {
	    display: flex;
	    gap: 1rem;
	    margin-bottom: 1rem;
	    color: #555;
	}

	.event-date-time span {
	    display: flex;
	    align-items: center;
	    gap: 0.5rem;
	}

	.event-description {
	    margin-bottom: 1rem;
	    line-height: 1.5;
	}

	.event-description,
	.event-date-time {
	    color: var(--text-muted);
	}

	.event-footer {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-top: 1rem;
	    padding-top: 1rem;
	    border-top: 1px solid #ddd;
	}

	.capacity-info {
	    color: #7f8c8d;
	    font-size: 0.9rem;
	}

	.btn-book {
	    background: var(--primary-gradient);
	    color: white;
	    padding: 0.5rem 1.25rem;
	    border: none;
	    border-radius: 4px;
	    cursor: pointer;
	    transition: background 0.3s;
	}

	.btn-book:disabled {
	    background: #95a5a6;
	    cursor: not-allowed;
	}

	.booking-section {
	    background: #f8f9fa;
	    padding: 2rem;
	    border-radius: 8px;
	    margin-top: 2rem;
	}

	#selectedEventTitle {
	    color: var(--primary);
	}

	#selectedEventDetails {
	    color: #7f8c8d;
	    margin-bottom: 2rem;
	}

	.event-card {
	    opacity: 0;
	    animation: fadeUp 0.6s ease forwards;
	}

	.event-card:nth-child(1) {
	    animation-delay: 0.1s;
	}

	.event-card:nth-child(2) {
	    animation-delay: 0.2s;
	}

	.event-card:nth-child(3) {
	    animation-delay: 0.3s;
	}

	@keyframes fadeUp {
	    from {
	        opacity: 0;
	        transform: translateY(20px);
	    }

	    to {
	        opacity: 1;
	        transform: translateY(0);
	    }
	}

	.participant-form {
	    background: white;
	    padding: 1.5rem;
	    border-radius: 8px;
	    margin-bottom: 1rem;
	}

	.participant-form h4 {
	    margin-bottom: 1rem;
	    color: #2c3e50;
	}

	.form-row {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	    gap: 1rem;
	}

	.btn-secondary {
	    background: #95a5a6;
	    color: white;
	    padding: 0.75rem 1.5rem;
	    border: none;
	    border-radius: 4px;
	    cursor: pointer;
	    font-size: 1rem;
	    margin-top: 1rem;
	}

	.btn-secondary:hover {
	    background: #7f8c8d;
	}

	.form-actions {
	    display: flex;
	    gap: 1rem;
	    margin-top: 2rem;
	}

	.form-actions button {
	    margin-top: 0;
	}

	/* Gallery */
	.gallery-grid,
	.video-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	    gap: 1.5rem;
	}

	.gallery-item {
	    position: relative;
	    overflow: hidden;
	    border-radius: 8px;
	    cursor: pointer;
	    background: #f0f0f0;
	}

	.gallery-item img {
	    width: 100%;
	    height: 500px;
	    object-fit: cover;
	    transition: transform 0.3s;
	}

	.gallery-item:hover img {
	    transform: scale(1.05);
	}

	.gallery-overlay {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background: rgba(0, 0, 0, 0.5);
	    color: white;
	    padding: 1rem;
	    transform: translateY(100%);
	    transition: transform 0.3s;
	}

	.gallery-item:hover .gallery-overlay {
	    transform: translateY(0);
	}

	.video-thumbnail {
	    cursor: pointer;
	    border-radius: 8px;
	    padding: 5px;
	    transition:
	        opacity 0.45s ease,
	        transform 0.45s ease;
	}

	.video-thumbnail.fade-out {
	    opacity: 0;
	    transform: scale(0.01);
	}

	.video-thumbnail.hidden {
	    display: none;
	}

	.video-thumbnail:hover {
	    background-color: #e1e1e1;
	}

	.thumbnail-wrapper {
	    position: relative;
	    width: 100%;
	    aspect-ratio: 9 / 16;
	    border-radius: 8px;
	    overflow: hidden;
	    background: linear-gradient(180deg, #111, #000);
	}

	/* Előnézeti kép – NINCS crop */
	.thumbnail-wrapper img {
	    width: 100%;
	    height: 100%;
	    object-fit: contain;
	    /* 🔑 9:16 → középen */
	    object-position: center;
	    display: block;
	}

	/* Play ikon */
	.play-icon {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    font-size: 64px;
	    color: white;
	    opacity: 0.9;
	    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
	    pointer-events: none;
	    transition: transform 0.2s ease;
	}

	.video-thumbnail:hover .play-icon {
	    transform: translate(-50%, -50%) scale(1.1);
	}

	/* Szöveg rész */
	.video-text {
	    padding: 10px 2px;
	}

	.video-text h3 {
	    font-size: 15px;
	    font-weight: 600;
	    margin: 0 0 4px 0;
	    color: #0f0f0f;
	    line-height: 1.3;
	}

	.video-text p {
	    font-size: 13px;
	    color: #606060;
	    margin: 0;
	}

	/* Contact */
	.contact-content {
	    display: grid;
	    grid-template-columns: 1fr 1fr;
	    gap: 2rem;
	}

	.contact-info {
	    background: #f8f9fa;
	    padding: 2rem;
	    border-radius: 8px;
	}

	.contact-info p {
	    margin-bottom: 1rem;
	}

	.contact-form {
	    background: #f8f9fa;
	    padding: 2rem;
	    border-radius: 8px;
	}

	/* Admin */
	.pending-booking-card {
	    background: #f8f9fa;
	    padding: 1.5rem;
	    margin-bottom: 1.5rem;
	    border-radius: 8px;
	    border-left: 4px solid #f39c12;
	}

	.booking-header {
	    display: flex;
	    justify-content: space-between;
	    align-items: start;
	    margin-bottom: 1rem;
	}

	.booking-info h3 {
	    margin-bottom: 0.5rem;
	    color: #2c3e50;
	}

	.booking-date {
	    color: #7f8c8d;
	    font-size: 0.9rem;
	}

	.booking-status {
	    background: #f39c12;
	    color: white;
	    padding: 0.25rem 0.75rem;
	    border-radius: 12px;
	    font-size: 0.85rem;
	}

	.participants-list {
	    background: white;
	    padding: 1rem;
	    border-radius: 4px;
	    margin-bottom: 1rem;
	}

	.participant-item {
	    padding: 0.5rem 0;
	    border-bottom: 1px solid #eee;
	}

	.participant-item:last-child {
	    border-bottom: none;
	}

	.booking-actions {
	    display: flex;
	    gap: 1rem;
	    margin-top: 1rem;
	}

	.btn-approve {
	    background: #27ae60;
	    color: white;
	    padding: 0.5rem 1.25rem;
	    border: none;
	    border-radius: 4px;
	    cursor: pointer;
	    transition: background 0.3s;
	}

	.btn-approve:hover {
	    background: #229954;
	}

	.btn-reject {
	    background: #e74c3c;
	    color: white;
	    padding: 0.5rem 1.25rem;
	    border: none;
	    border-radius: 4px;
	    cursor: pointer;
	    transition: background 0.3s;
	}

	.btn-reject:hover {
	    background: #c0392b;
	}

	/* Footer */
	footer {
	    background: var(--primary-gradient);
	    color: white;
	    color: white;
	    text-align: center;
	    padding: 0.5rem 0;
	    margin-top: 1rem;
	}

	.social-links {
	    display: flex;
	    justify-content: center;
	    gap: 2rem;
	    margin-bottom: 0.3rem;
	}

	.social-links a {
	    color: white;
	    font-size: 1.8rem;
	    transition: all 0.3s ease;
	    display: inline-block;
	}

	.social-links a:hover {
	    transform: translateY(-5px);
	    opacity: 0.8;
	}

	.social-links .fa-facebook:hover {
	    color: #1877f2;
	}

	.social-links .fa-instagram:hover {
	    color: #E4405F;
	}

	.social-links .fa-x-twitter:hover {
	    color: #000000;
	}

	.social-links .fa-tiktok:hover {
	    color: #000000;
	}

	footer p {
	    font-size: 0.95rem;
	    opacity: 0.9;
	}

	/* Form elements */
	.form-group {
	    margin-bottom: 1rem;
	}

	.form-group label {
	    display: block;
	    margin-bottom: 0.5rem;
	    font-weight: bold;
	}

	.form-group input,
	.form-group textarea {
	    width: 100%;
	    padding: 0.5rem;
	    border: 1px solid #ddd;
	    border-radius: 4px;
	    font-size: 1rem;
	}

	.btn-primary {
	    background: var(--primary-gradient);
	    color: white;
	    padding: 0.75rem 1.5rem;
	    border: none;
	    border-radius: 4px;
	    cursor: pointer;
	    font-size: 1rem;
	    margin-top: 1rem;
	}

	.btn-book:hover:not(:disabled),
	.btn-primary:hover {
	    filter: brightness(1.15);
	}

	#addParticipant {
	    display: none;
	}

	.btn-submit {
	    background-color: #4CAF50;
	    color: white;
	    padding: 12px 30px;
	    border: none;
	    border-radius: 4px;
	    cursor: pointer;
	    font-size: 16px;
	    margin-top: 20px;
	}

	.btn-submit:hover {
	    background-color: #45a049;
	}

	.cards-grid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	    gap: 20px;
	    margin: 20px 0;
	}

	.card {
	    background: white;
	    border-radius: 15px;
	    padding: 30px;
	    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	    transition: all 0.3s ease;
	    border: 2px solid transparent;
	    position: relative;
	    overflow: hidden;
	}

	.card::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 4px;
	    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
	    transform: scaleX(0);
	    transform-origin: left;
	    transition: transform 0.3s ease;
	}

	.card:hover::before {
	    transform: scaleX(1);
	}

	.card:hover {
	    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
	    border-color: #667eea;
	}

	.card h3 {
	    font-size: 1.4rem;
	    margin-bottom: 15px;
	    color: #667eea;
	}

	.card p {
	    color: #666;
	    font-size: 0.95rem;
	}

	.process-container {
	    margin: 60px 0;
	}

	.process-intro {
	    text-align: center;
	    margin-bottom: 50px;
	    color: #555;
	    font-size: 1.1rem;
	    max-width: 800px;
	    margin-left: auto;
	    margin-right: auto;
	}

	.process-steps {
	    position: relative;
	    max-width: 900px;
	    margin: 0 auto;
	}

	.process-step {
	    display: flex;
	    align-items: flex-start;
	    margin-bottom: 50px;
	    position: relative;
	    opacity: 0;
	    animation: fadeInUp 0.6s ease forwards;
	}

	.process-step:nth-child(1) {
	    animation-delay: 0.2s;
	}

	.process-step:nth-child(2) {
	    animation-delay: 0.4s;
	}

	.process-step:nth-child(3) {
	    animation-delay: 0.6s;
	}

	.process-step:nth-child(4) {
	    animation-delay: 0.8s;
	}

	.process-step:nth-child(5) {
	    animation-delay: 0.10s;
	}

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

	    to {
	        opacity: 1;
	        transform: translateY(0);
	    }
	}

	.step-number {
	    flex-shrink: 0;
	    width: 60px;
	    height: 60px;
	    border-radius: 50%;
	    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	    color: white;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 1.5rem;
	    font-weight: bold;
	    margin-right: 25px;
	    position: relative;
	    z-index: 2;
	    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
	}

	.step-connector {
	    position: absolute;
	    left: 30px;
	    top: 60px;
	    width: 2px;
	    height: 100%;
	    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
	    z-index: 1;
	}

	.process-step:last-child .step-connector {
	    display: none;
	}

	.step-content {
	    background: white;
	    border-radius: 15px;
	    padding: 30px;
	    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	    border: 2px solid transparent;
	    position: relative;
	    overflow: hidden;
	    transition: all 0.35s ease;
	}

	.step-content:hover {
	    box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3);
	    border-color: var(--primary);
	}

	.card:hover::before {
	    transform: scaleX(1);
	}

	.step-content h3 {
	    color: #667eea;
	    margin-bottom: 12px;
	    font-size: 1.3rem;
	}

	.step-content p {
	    color: #666;
	    line-height: 1.7;
	}

	#articlesGrid {
	    display: grid;
	    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	    gap: 25px;
	}

	.article-item {
	    background: white;
	    border-radius: 16px;
	    overflow: hidden;
	    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	    transition: all 0.35s ease;
	    position: relative;
	    border: 2px solid transparent;
	}

	.article-item::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 4px;
	    width: 100%;
	    background: var(--primary-gradient);
	    transform: scaleX(0);
	    transform-origin: left;
	    transition: transform 0.35s ease;
	}

	.article-item:hover {
	    transform: translateY(-10px);
	    box-shadow: 0 18px 35px rgba(102, 126, 234, 0.25);
	    border-color: var(--primary);
	}

	.article-item:hover::before {
	    transform: scaleX(1);
	}

	.article-item img {
	    width: 100%;
	    aspect-ratio: 16 / 9;
	    /* vagy 4 / 3, 1 / 1 stb. */
	    object-fit: cover;
	    display: block;
	}

	.article-info {
	    padding: 22px;
	}

	.article-info h3 {
	    font-size: 1.2rem;
	    margin-bottom: 10px;
	    color: var(--primary);
	    line-height: 1.35;
	}

	.article-lead {
	    color: var(--text-muted);
	    font-size: 0.95rem;
	    line-height: 1.6;
	    margin-bottom: 12px;
	}

	.article-date {
	    font-size: 0.8rem;
	    color: #999;
	}

	.article-item {
	    opacity: 0;
	    animation: fadeUp 0.6s ease forwards;
	}

	.article-item:nth-child(1) {
	    animation-delay: 0.1s;
	}

	.article-item:nth-child(2) {
	    animation-delay: 0.2s;
	}

	.article-item:nth-child(3) {
	    animation-delay: 0.3s;
	}

	.article-item:nth-child(4) {
	    animation-delay: 0.4s;
	}

	.article-full {
	    margin: 0 auto;
	    background: white;
	    padding: 20px;
	    border-radius: 18px;
	    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	}

	.article-image {
	    width: 100%;
	    aspect-ratio: 16 / 9;
	    object-fit: cover;
	    border-radius: 14px;
	    margin-bottom: 30px;
	}

	.article-full h1 {
	    color: var(--primary);
	    margin-bottom: 10px;
	}

	.article-meta {
	    color: #999;
	    font-size: 0.9rem;
	    margin-bottom: 25px;
	}

	.article-lead-full {
	    font-size: 1.1rem;
	    line-height: 1.8;
	    color: #555;
	    margin-bottom: 30px;
	    padding-left: 18px;
	    border-left: 4px solid var(--primary);
	}

	.article-body {
	    font-size: 1rem;
	    line-height: 1.8;
	    color: #444;
	}

	.article-body p {
	    margin-bottom: 1.2rem;
	}

	.back-btn {
	    background: var(--primary-gradient);
	    color: white;
	    border: none;
	    border-radius: 30px;
	    padding: 10px 22px;
	    cursor: pointer;
	    font-size: 0.9rem;
	    margin-bottom: 25px;
	    transition: transform 0.25s ease, box-shadow 0.25s ease;
	}

	.back-btn:hover {
	    transform: translateY(-2px);
	    box-shadow: 0 8px 18px rgba(102, 126, 234, 0.3);
	}

	.article-view {
	    margin: 0 auto;
	}

	.video-search {
	    display: flex;
	    align-items: center;
	    gap: 6px;
	    margin-bottom: 16px;
	}

	#videoSearchInput {
	    flex: 1;
	    padding: 8px 10px;
	    font-size: 14px;
	}

	#clearVideoSearch {
	    padding: 8px 10px;
	    cursor: pointer;
	}

	.fslightbox-source video {
	    width: auto !important;
	    height: 100% !important;
	    max-width: 100% !important;
	    max-height: 100% !important;
	    object-fit: contain !important;
	}
	
	
	
	       .highlight {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 40px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }

        .highlight h2 {
            font-size: 1.6em;
            margin-bottom: 10px;
        }

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

        .service-card {
            background: white;
            padding: 35px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
        }

        .service-card h3 {
       
            font-size: 1.2em;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .service-card .icon {
            font-size: 1.4em;
        }

        .service-card p {
            margin-bottom: 20px;
            color: #555;
            font-size: 1.05em;
        }

        .features-list {
            list-style: none;
            padding: 0;
        }

        .features-list li {
            padding: 12px 0;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .features-list li:last-child {
            border-bottom: none;
        }

        .features-list .emoji {
            font-size: 1.3em;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .features-list .text {
            flex: 1;
        }
		

	/* Responsive */
	@media (max-width: 768px) {
		
		   .services-grid {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 2em;
            }

            .intro-section {
                padding: 25px;
            }

            .service-card {
                padding: 25px;
            }

	    .logo img {
	        height: 56px;
	    }

	    .image-wrapper {
	        float: none;
	        margin: 0 0 20px 0;
	        width: 100%;

	    }

	    .image-wrapper img {
	        aspect-ratio: 16 / 9;
	        object-position: top;
	        mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent 100%);
	        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent 100%);
	        border-radius: 0;

	    }

	    .container {
	        padding: 0 5px;
	    }

	    .article-full {
	        padding: 10px;
	    }

	    .menu-toggle {
	        display: flex;
	    }

	    .nav-wrapper {
	        position: absolute;
	        top: 100%;
	        left: 0;
	        right: 0;
	        background: var(--primary);
	        flex-direction: column;
	        gap: 0;
	        max-height: 0;
	        overflow: hidden;
	        transition: max-height 0.3s ease-in-out;
	    }

	    .nav-wrapper.active {
	        max-height: 500px;
	    }

	    .nav-menu {
	        flex-direction: column;
	        padding: 1rem;
	        gap: 0;
	        width: 100%;
	    }

	    .nav-menu li {
	        padding: 0.75rem 0;
	        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	    }

	    .nav-menu li:last-child {
	        border-bottom: none;
	    }

	    .social-links {
	        gap: 1.5rem;
	    }

	    .social-links a {
	        font-size: 1.5rem;
	    }

	    .auth-buttons {
	        padding: 1rem;
	        width: 100%;
	        border-top: 1px solid rgba(255, 255, 255, 0.1);
	    }

	    .btn-auth {
	        width: 100%;
	    }

	    .contact-content,
	    .form-row {
	        grid-template-columns: 1fr;
	    }

	    .events-grid {
	        grid-template-columns: 1fr;
	    }

	    .cards-grid {
	        grid-template-columns: 1fr;
	        gap: 20px;
	    }

	    .card {
	        padding: 25px;
	    }

	    .process-step {
	        flex-direction: column;
	        margin-bottom: 40px;
	    }

	    .step-number {
	        margin-bottom: 15px;
	        margin-right: 0;
	    }

	    .step-connector {
	        display: none;
	    }

	    .step-content {
	        width: 100%;
	    }
	}

	@media (min-width: 1024px) {
	    .logo img {
	        height: 64px;
	    }
	}