/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
}

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

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    color: white;
    padding: 20px;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/* Buttons */
.btn-primary {
    background-color: #3f51b5;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #303f9f;
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 1px solid white;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: white;
    color: #333;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    padding: 1rem 0;
}

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

.logo a {
    color: #3f51b5;
    font-size: 1.5rem;
    font-weight: 700;
    border-left: 4px solid #f44336;
    padding-left: 10px;
    text-decoration: unset;
}

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

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

.nav a:hover {
    color: #3f51b5;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: #333;
    margin: 3px 0;
    transition: 0.3s;
}

/* Hero Section */
.hero {
    margin-top: 80px;
    padding: 60px 0;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}

.hero-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.2;
    text-align: center;
}

.hero-content p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
    text-align: center;
}

/* Registration Form */
.registration-form {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3f51b5;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Hero Images */
.hero-images {
    display: flex;
    justify-content: center;
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.image-grid img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.image-grid img:hover {
    transform: translateY(-5px);
}

/* Services Section */
.services {
    padding: 80px 0;
    background: white;
}

.services h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 10px;
    border-left: 4px solid #3f51b5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.service-card h3 {
    color: #333;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.service-card p {
    color: #666;
    line-height: 1.6;
}

/* Learning Process Section */
.learning-process {
    padding: 80px 0;
}

.learning-process h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.learning-block{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.process-step {
    background: rgba(255, 255, 255, 1);
box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.09),
0px 30px 30px 0px rgba(0, 0, 0, 0.08),
 0px 67px 40px 0px rgba(0, 0, 0, 0.05),
 0px 119px 48px 0px rgba(0, 0, 0, 0.01),
 0px 186px 52px 0px rgba(0, 0, 0, 0);

    padding: 25px;
    backdrop-filter: blur(10px);
}

.process-step h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.process-step p {
    line-height: 1.6;
    opacity: 0.9;
}

.process-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.process-image img {
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

/* About Section */
.about {
    padding: 80px 0;
    background: white;
}

.about h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 50px;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}

.about-card {
    text-align: center;
    padding: 30px;
    background: #fff;
    box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.09),
     0px 30px 30px 0px rgba(0, 0, 0, 0.08),
      0px 67px 40px 0px rgba(0, 0, 0, 0.05),
       0px 119px 48px 0px rgba(0, 0, 0, 0.01),
        0px 186px 52px 0px rgba(0, 0, 0, 0);
    transition: transform 0.3s ease;
}

.about-card:hover {
    transform: translateY(-5px);
}

.about-card h3 {
    color: #3f51b5;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.about-card p {
    color: #666;
    line-height: 1.6;
}

/* Contact Section */
.contact {
    padding: 80px 0;
    background: #f8f9fa;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-info h2 {
    color: #333;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.contact-info p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.contact-details {
    background: white;
    padding: 25px;
    border-radius: 10px;
    margin: 30px 0;
    border-left: 4px solid #3f51b5;
}

.contact-details p {
    margin-bottom: 10px;
    color: #333;
}

.contact-details strong {
    color: #3f51b5;
}

.contact-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Footer */
.footer {

    padding: 40px 0 20px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo a {
    color: #3f51b5;
    text-decoration: unset;
}

.footer-links {
    display: flex;
    gap: 30px;
}

.footer-links a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #3f51b5;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #555;
    color: #999;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .nav.active {
        display: block;
    }
    
    .nav ul {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }
    
    .hero .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .hero-content h2 {
        font-size: 2rem;
    }
    
    .image-grid {
        grid-template-columns: 1fr 1fr;
        max-width: 300px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .learning-process .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .process-grid {
        grid-template-columns: 1fr;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .footer-links {
        flex-direction: column;
        gap: 15px;
    }
    
    .cookie-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .cookie-buttons {
        justify-content: center;
    }
    .learning-block {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-content h2 {
        font-size: 1.5rem;
    }
    
    .services h2,
    .about h2,
    .learning-process h2 {
        font-size: 2rem;
    }
    
    .image-grid {
        grid-template-columns: 1fr;
        max-width: 200px;
    }
    
    .image-grid img {
        height: 120px;
    }
    
    .registration-form {
        padding: 20px;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body::-webkit-scrollbar-thumb {
    background: #3f51b5;
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #303f9f;
}

/* Form Validation Styles */
.form-group input.valid,
.form-group textarea.valid {
    border-color: #4caf50;
    background-color: #f1f8e9;
}

.form-group input.invalid,
.form-group textarea.invalid {
    border-color: #f44336;
    background-color: #ffebee;
}

.form-group input.valid:focus,
.form-group textarea.valid:focus {
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.form-group input.invalid:focus,
.form-group textarea.invalid:focus {
    border-color: #f44336;
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.2);
}

.policy-section {
  margin-top: 100px;
  padding-top: 60px;
  padding-bottom: 60px;
}

.policy-section h1 {
  margin-bottom: 20px;
}

.policy-section a {
  text-decoration: unset;
  color: inherit;
}