:root {
    --primary: #1C1F3A;
    --accent: #00FFF0;
    --dark-bg: #0F111A;
    --light-text: #F3F4F9;
    --muted-text: #9DA3B4;
    --gradient-start: rgba(0, 255, 240, 0.1);
    --gradient-end: rgba(28, 31, 58, 0.8);
    --accent-glow: rgba(0, 255, 240, 0.4);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
    --shadow-glow: 0 0 15px var(--accent-glow);

    --font-main: 'Space Grotesk', sans-serif;
    --font-heading: 'Syncopate', sans-serif;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

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



body {
    font-family: var(--font-main);
    background-color: var(--dark-bg);
    color: var(--light-text);
    font-size: 16px;
    line-height: 1.6;
    position: relative;
}

.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,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');
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}

.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: all var(--transition-normal);
}

a:hover {
    text-shadow: 0 0 8px var(--accent-glow);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    position: relative;
    z-index: 2;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--light-text);
}

h1 {
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

h3 {
    font-size: 1.5rem;
    letter-spacing: 0.01em;
}

h4 {
    font-size: 1.2rem;
}

p {
    margin-bottom: var(--space-md);
}

section {
    padding: var(--space-xl) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.separator {
    width: 80px;
    height: 4px;
    background: var(--accent);
    margin: var(--space-md) auto;
    position: relative;
    overflow: hidden;
}

.separator::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: separator-shine 3s infinite;
}

@keyframes separator-shine {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: var(--border-radius-md);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    z-index: 1;
    text-align: center;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: all var(--transition-slow);
    z-index: -1;
}

.btn:hover::before {
    left: 100%;
}

.primary-btn {
    background-color: var(--accent);
    color: var(--primary);
    box-shadow: 0 0 10px var(--accent-glow);
}

.primary-btn:hover {
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-2px);
}

.secondary-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--light-text);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.outline-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.outline-btn:hover {
    background-color: rgba(0, 255, 240, 0.1);
    transform: translateY(-2px);
}

.small-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
}

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--space-md) 0;
    z-index: 100;
    transition: all var(--transition-normal);
}

.header.scrolled {
    background: rgba(15, 17, 26, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: var(--space-sm) 0;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-md);
}

.logo {
    position: relative;
    z-index: 101;
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--light-text);
    letter-spacing: 0.05em;
}

.logo-accent {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--accent);
    border-radius: 50%;
    margin-left: 4px;
    box-shadow: 0 0 10px var(--accent-glow);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 var(--accent-glow);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 255, 240, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 240, 0);
    }
}

.menu-toggle {
    display: flex;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 102;
}

.menu-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--light-text);
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: all var(--transition-fast);
}

.menu-icon span:nth-child(1) {
    top: 0px;
}

.menu-icon span:nth-child(2) {
    top: 10px;
}

.menu-icon span:nth-child(3) {
    top: 20px;
}

.menu-active .menu-icon span:nth-child(1) {
    top: 10px;
    transform: rotate(135deg);
    background: var(--accent);
}

.menu-active .menu-icon span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.menu-active .menu-icon span:nth-child(3) {
    top: 10px;
    transform: rotate(-135deg);
    background: var(--accent);
}

.main-nav {
    display: flex;
}

.nav-list {
    display: flex;
    list-style: none;
}

.nav-list li {
    margin-left: var(--space-lg);
}

.nav-list li a {
    color: var(--light-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all var(--transition-normal);
    position: relative;
}

.nav-list li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width var(--transition-normal);
}

.nav-list li a:hover {
    color: var(--accent);
}

.nav-list li a:hover::after {
    width: 100%;
}

.hero {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: url("../images/hero-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 255, 240, 0.05) 0%, rgba(28, 31, 58, 0) 70%);
    z-index: 0;
    animation: pulse-bg 6s ease-in-out infinite alternate;
}

@keyframes pulse-bg {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.6;
    }
}

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

.hero-content {
    width: 50%;
    position: relative;
    z-index: 2;
}

.hero h1 {
    margin-bottom: var(--space-md);
    line-height: 1.1;
    animation: fade-up 0.8s ease-out;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--muted-text);
    margin-bottom: var(--space-lg);
    animation: fade-up 0.8s ease-out 0.2s backwards;
}

.hero-buttons {
    display: flex;
    gap: var(--space-md);
    animation: fade-up 0.8s ease-out 0.4s backwards;
}

.hero-image {
    width: 50%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-wrapper {
    width: 400px;
    height: 400px;
    position: relative;
}

.floating-cube {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    animation: float 6s ease-in-out infinite;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.floating-cube::before,
.floating-cube::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(28, 31, 58, 0.4) 0%, rgba(0, 255, 240, 0.1) 100%);
    border: 1px solid rgba(0, 255, 240, 0.3);
    animation: cube-rotation 20s linear infinite;
}

.floating-cube::before {
    transform: translateZ(-125px);
    filter: blur(2px);
}

.floating-cube::after {
    transform: translateZ(125px);
    filter: blur(4px);
}

@keyframes float {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(45deg) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) rotate(45deg) translateY(-20px);
    }
}

@keyframes cube-rotation {
    0% {
        transform: rotateX(0deg) rotateY(0deg) translateZ(125px);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg) translateZ(125px);
    }
}

.scroll-indicator {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.mouse {
    width: 26px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    position: relative;
    margin-bottom: var(--space-sm);
}

.wheel {
    width: 4px;
    height: 8px;
    background-color: var(--accent);
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 1.5s ease infinite;
}

@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }
}

.arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.arrow span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
    transform: rotate(45deg);
    animation: arrow 1.5s infinite;
    opacity: 0;
}

.arrow span:nth-child(2) {
    animation-delay: 0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes arrow {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about {
    background-color: rgba(28, 31, 58, 0.3);
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--dark-bg) 0%, transparent 10%, transparent 90%, var(--dark-bg) 100%);
    pointer-events: none;
}

.about-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xl);
}

.about-text {
    flex: 1;
}

.about-cards {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.feature-card {
    background: rgba(15, 17, 26, 0.5);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 255, 240, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-slow);
    z-index: -1;
    transform: scale(0.5);
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 240, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.feature-card:hover::before {
    opacity: 1;
    transform: scale(1);
}

.feature-card i {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: var(--space-sm);
    display: block;
}

.feature-card h3 {
    font-size: 1rem;
    margin-bottom: var(--space-sm);
}

.feature-card p {
    color: var(--muted-text);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.courses {
    position: relative;
    overflow: hidden;
}

.courses::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(ellipse at right, rgba(0, 255, 240, 0.03) 0%, transparent 70%);
    z-index: 0;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}

.course-card {
    background-color: rgba(28, 31, 58, 0.3);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 255, 240, 0.2);
}

.course-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, #2a2f54 100%);
    position: relative;
    overflow: hidden;
}

.image-placeholder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(0, 255, 240, 0.2) 0%, transparent 40%);
    animation: rotate 20s linear infinite;
}

.image-placeholder.advanced {
    background: linear-gradient(135deg, #2a2f54 0%, #434a7c 100%);
}

.image-placeholder.expert {
    background: linear-gradient(135deg, #434a7c 0%, #5d66a4 100%);
}

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

.course-level {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background-color: var(--primary);
    color: var(--accent);
    padding: 0.25rem 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.course-content {
    padding: var(--space-md);
}

.course-content h3 {
    font-size: 1.2rem;
    margin-bottom: var(--space-sm);
}

.course-features {
    list-style: none;
    margin: var(--space-md) 0;
}

.course-features li {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-xs);
    color: var(--muted-text);
    font-size: 0.875rem;
}

.course-features li i {
    color: var(--accent);
    margin-right: var(--space-sm);
    font-size: 0.75rem;
}

.testimonials {
    background-color: rgba(28, 31, 58, 0.3);
    position: relative;
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--dark-bg) 0%, transparent 10%, transparent 90%, var(--dark-bg) 100%);
    pointer-events: none;
}

.testimonial-slider {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-slide {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all var(--transition-slow);
}

.testimonial-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.testimonial-content {
    background-color: rgba(15, 17, 26, 0.5);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.quote-icon {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    color: rgba(0, 255, 240, 0.2);
    font-size: 2rem;
}

.testimonial-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.testimonial-author h4 {
    font-size: 1.1rem;
    margin-bottom: 0;
}

.testimonial-author p {
    color: var(--muted-text);
    font-size: 0.875rem;
    margin-bottom: 0;
    padding-left: 0;
}

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-lg);
}

.prev-btn, .next-btn {
    background: none;
    border: none;
    color: var(--light-text);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.prev-btn:hover, .next-btn:hover {
    color: var(--accent);
}

.testimonial-indicators {
    display: flex;
    gap: var(--space-sm);
    margin: 0 var(--space-md);
}

.indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.indicator.active {
    background-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

.cta {
    padding: var(--space-xl) 0;
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(28, 31, 58, 0.8) 0%, rgba(15, 17, 26, 0.8) 100%);
    z-index: 0;
}

.cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 255, 240, 0.1) 0%, transparent 70%);
    z-index: 0;
    animation: pulse-bg 6s ease-in-out infinite alternate;
}

.cta-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta-content h2 {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.cta-content p {
    max-width: 600px;
    margin: 0 auto var(--space-lg);
    color: var(--muted-text);
}

.cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.footer {
    background-color: rgba(15, 17, 26, 0.9);
    padding: var(--space-lg) 0 var(--space-md);
    position: relative;
    z-index: 10;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.footer-logo {
    margin-bottom: var(--space-md);
}

.footer-contact p {
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
    color: var(--muted-text);
    display: flex;
    align-items: center;
}

.footer-contact i {
    color: var(--accent);
    margin-right: var(--space-sm);
}

.footer-nav ul {
    list-style: none;
}

.footer-nav li {
    margin-bottom: var(--space-xs);
}

.footer-nav a {
    color: var(--muted-text);
    font-size: 0.875rem;
    transition: all var(--transition-normal);
}

.footer-nav a:hover {
    color: var(--accent);
}

.footer-bottom {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.footer-bottom p {
    font-size: 0.75rem;
    color: var(--muted-text);
    margin-bottom: 0;
}

.cookie-consent {
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2 * var(--space-md));
    max-width: 500px;
    background-color: rgba(28, 31, 58, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--border-radius-md);
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
}

.cookie-consent.active {
    display: block;
    animation: slide-up 0.5s ease-out forwards;
}

@keyframes slide-up {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.cookie-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cookie-content p {
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
    text-align: center;
}

@media (max-width: 1024px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    .hero .container {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .hero-content,
    .hero-image {
        width: 100%;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .about-content {
        flex-direction: column;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-contact p {
        justify-content: center;
    }
}

.menu-toggle {
    display: block;
}

.main-nav {
    position: fixed;
    top: 0;
    display: none;
    width: 100%;
    max-width: 300px;
    height: 100vh;
    background-color: rgba(15, 17, 26, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 5rem var(--space-lg) var(--space-lg);
    transition: right var(--transition-normal);
    z-index: 101;
}

.menu-active .main-nav {
    right: 0;
    display: block;
}

.nav-list {
    flex-direction: column;
}

.nav-list li {
    margin-left: 0;
    margin-bottom: var(--space-md);
}

.nav-list li a {
    font-size: 1.2rem;
}


@media (max-width: 768px) {

    .logo-text{
        font-size: 1rem;
    }

    .hero {
        height: auto;
        min-height: 100vh;
        padding: 100px 0 var(--space-xl);
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .about-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .thank-you-title{
        font-size: 1.5rem; !important;
    }

    .legal-content h3{
        font-size: 1rem; !important;
    }

}
@media (max-width: 480px) {


    .contact-info h3{
        font-size: 1.2rem;
    }

    .logo-text{
        font-size: 0.8rem;
    }

    h1 {
        font-size: 1.2rem;
    }

    h2 {
        font-size: 1rem;
    }

    .hero {
        padding-top: 80px;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
    }

    .btn {
        width: 100%;
    }

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

    .cta-buttons {
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
    }
}

@media (max-width: 320px) {
    .container {
        padding: 0 var(--space-sm);
    }

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    section {
        padding: var(--space-lg) 0;
    }

    .header-inner {
        padding: 0 var(--space-sm);
    }
}

.contact-page {
    min-height: 100vh;
    padding-top: 100px;
    position: relative;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.contact-info {
    background-color: rgba(28, 31, 58, 0.3);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.contact-info::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 255, 240, 0.05) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
    z-index: 0;
}

.contact-info h3 {
    margin-bottom: var(--space-lg);
    position: relative;
}

.contact-info-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-md);
    position: relative;
}

.contact-info-item i {
    color: var(--accent);
    font-size: 1.2rem;
    margin-right: var(--space-md);
    width: 24px;
    text-align: center;
}

.contact-form {
    background-color: rgba(15, 17, 26, 0.5);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.contact-form::before {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 255, 240, 0.05) 0%, transparent 70%);
    z-index: 0;
}

.contact-form h3 {
    margin-bottom: var(--space-lg);
    position: relative;
}

.form-group {
    margin-bottom: var(--space-md);
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
    color: var(--muted-text);
}

.form-control {
    width: 100%;
    padding: 0.75rem var(--space-md);
    border-radius: var(--border-radius-md);
    background-color: rgba(15, 17, 26, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--light-text);
    transition: all var(--transition-normal);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 255, 240, 0.2);
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-md);
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-right: var(--space-sm);
    appearance: none;
    background-color: rgba(15, 17, 26, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    position: relative;
    transition: all var(--transition-normal);
}

.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:checked::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary);
    font-size: 0.75rem;
}

.form-check-label {
    font-size: 0.875rem;
    color: var(--muted-text);
}

.form-check-label a {
    color: var(--accent);
    text-decoration: underline;
}

.map-container {
    height: 300px;
    margin-top: var(--space-lg);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    position: relative;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.pricing-page {
    min-height: 100vh;
    padding-top: 100px;
}

.pricing-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.pricing-card {
    background-color: rgba(28, 31, 58, 0.3);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 240, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.pricing-card.popular::after {
    content: 'Populär';
    position: absolute;
    top: 15px;
    right: -30px;
    background-color: var(--accent);
    color: var(--primary);
    padding: 0.25rem 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(45deg);
}

.pricing-name {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: var(--space-md);
    position: relative;
    display: inline-block;
}

.pricing-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--muted-text);
}

.pricing-description {
    color: var(--muted-text);
    margin-bottom: var(--space-lg);
    font-size: 0.875rem;
}

.pricing-features {
    list-style: none;
    margin-bottom: var(--space-lg);
    text-align: left;
}

.pricing-features li {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
}

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

.pricing-features li i {
    color: var(--accent);
    margin-right: var(--space-sm);
    font-size: 0.75rem;
}

.pricing-cta {
    margin-top: auto;
}

.projects-page {
    min-height: 100vh;
    padding-top: 100px;
}

.projects-filter {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.filter-btn {
    background: none;
    border: none;
    color: var(--muted-text);
    padding: var(--space-xs) var(--space-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    font-size: 0.875rem;
    position: relative;
}

.filter-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: all var(--transition-normal);
    transform: translateX(-50%);
}

.filter-btn.active {
    color: var(--accent);
}

.filter-btn.active::after {
    width: 30px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
}

.project-card {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
}

.project-image {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, var(--primary) 0%, #2a2f54 100%);
    position: relative;
    overflow: hidden;
}

.project-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 17, 26, 0.2);
    z-index: 1;
    opacity: 0;
    transition: all var(--transition-normal);
}

.project-card:hover .project-image::before {
    opacity: 1;
}

.project-image.design {
    background: linear-gradient(135deg, #2a2f54 0%, #434a7c 100%);
}

.project-image.architecture {
    background: linear-gradient(135deg, #434a7c 0%, #5d66a4 100%);
}

.project-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-md);
    background: linear-gradient(to top, rgba(15, 17, 26, 0.9) 0%, transparent 100%);
    transition: all var(--transition-normal);
    transform: translateY(calc(100% - 60px));
    z-index: 2;
}

.project-card:hover .project-content {
    transform: translateY(0);
}

.project-title {
    font-size: 1.1rem;
    margin-bottom: var(--space-sm);
}

.project-category {
    display: inline-block;
    background-color: rgba(0, 255, 240, 0.2);
    color: var(--accent);
    padding: 0.1rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    margin-bottom: var(--space-md);
}

.project-description {
    color: var(--muted-text);
    font-size: 0.875rem;
    opacity: 0;
    transition: all var(--transition-normal) 0.1s;
}

.project-card:hover .project-description {
    opacity: 1;
}

.project-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 17, 26, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.project-modal {
    background-color: rgba(28, 31, 58, 0.9);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: fade-up 0.5s ease-out;
}

.close-modal {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    color: var(--light-text);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1;
    transition: all var(--transition-normal);
}

.close-modal:hover {
    color: var(--accent);
    transform: rotate(90deg);
}

.modal-image {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--primary) 0%, #2a2f54 100%);
}

.modal-content {
    padding: var(--space-lg);
}

.modal-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.modal-category {
    display: inline-block;
    background-color: rgba(0, 255, 240, 0.2);
    color: var(--accent);
    padding: 0.1rem 0.5rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    margin-bottom: var(--space-md);
}

.modal-description {
    margin-bottom: var(--space-md);
}

.modal-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.detail-group h4 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.detail-group p {
    color: var(--muted-text);
    font-size: 0.875rem;
    margin-bottom: var(--space-xs);
}

.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl) 0;
}

.error-content {
    max-width: 600px;
    margin: 0 auto;
}

.error-code {
    font-size: 8rem;
    font-family: var(--font-heading);
    background: linear-gradient(135deg, var(--accent) 0%, #4dffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: var(--space-lg);
    text-shadow: 0 0 20px rgba(0, 255, 240, 0.5);
    position: relative;
}

.error-code::before,
.error-code::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--accent);
    border-radius: 50%;
    animation: float-particle 8s ease-in-out infinite alternate;
    opacity: 0.5;
}

.error-code::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.error-code::after {
    bottom: 10%;
    right: 15%;
    animation-delay: 2s;
}

@keyframes float-particle {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(20px, -20px);
    }
}

.error-title {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.error-description {
    color: var(--muted-text);
    margin-bottom: var(--space-lg);
}

.thank-you-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl) 0;
}

.thank-you-content {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.thank-you-icon {
    font-size: 5rem;
    color: var(--accent);
    margin-bottom: var(--space-lg);
    display: inline-block;
    animation: scale-in 1s ease-out;
}

.thank-you-title {
    margin-bottom: var(--space-md);
    animation: fade-up 0.8s ease-out 0.2s backwards;
}

.thank-you-description {
    color: var(--muted-text);
    margin-bottom: var(--space-lg);
    animation: fade-up 0.8s ease-out 0.4s backwards;
}

.thank-you-cta {
    animation: fade-up 0.8s ease-out 0.6s backwards;
}

@keyframes scale-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    70% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.legal-page {
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: var(--space-xl);
}

.legal-content {
    background-color: rgba(28, 31, 58, 0.3);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.legal-content h2 {
    font-size: 1.75rem;
    margin-bottom: var(--space-md);
}

.legal-content h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.legal-content p,
.legal-content ul {
    margin-bottom: var(--space-md);
    color: var(--muted-text);
}

.legal-content ul {
    padding-left: var(--space-lg);
}

.legal-content ul li {
    margin-bottom: var(--space-xs);
}

.legal-content .updated-date {
    font-size: 0.875rem;
    color: var(--muted-text);
    margin-bottom: var(--space-lg);
}

.home-button {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-lg);
    color: var(--muted-text);
    transition: all var(--transition-normal);
}

.home-button:hover {
    color: var(--accent);
}

.privacy-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
}

.privacy-table th,
.privacy-table td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
}

.privacy-table th {
    color: var(--light-text);
    font-weight: 600;
}

.privacy-table td {
    color: var(--muted-text);
}

@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr;
    }

    .privacy-table {
        display: block;
        overflow-x: auto;
    }

    .projects-filter {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
}

@media (max-width: 480px) {
    .pricing-container {
        grid-template-columns: 1fr;
    }

    .legal-content {
        padding: var(--space-md);
    }
}

@media (max-width: 1024px) {
    .hero .container {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .hero-content,
    .hero-image {
        width: 100%;
        text-align: center;
    }

    .image-wrapper {
        width: min(100%, 400px);
        height: auto;
        margin: 0 auto;
    }

    .floating-cube {
        width: 200px;
        height: 200px;
    }

    .floating-cube::before {
        transform: translateZ(-100px);
    }

    .floating-cube::after {
        transform: translateZ(100px);
    }

    .menu-toggle {
        display: block;
    }
}

html, body {


    width: 100%;

    box-sizing: border-box;

}

.menu-active{
    overflow: hidden;
}