body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

header {
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 2rem 0;
    animation: slideDown 1s ease-out;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header h1, header p {
    margin: 0;
}

header p {
    margin-bottom: 1rem;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

nav {
    margin-top: 1rem;
}

nav a {
    margin: 0 1rem;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #ffdd57;
}

#hero {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #fff;
    animation: fadeInUp 1.5s ease-out;
}

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

#hero h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

#hero p {
    font-size: 1.1rem;
}

#hero img {
    margin-top: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

#hero img:hover {
    transform: scale(1.05);
}

#features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: #f4f4f4;
}

.feature {
    background-color: white;
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 300px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
    animation: none; /* Remove CSS animation, use JS */
}

.feature:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.feature h3 {
    margin-top: 0;
    color: #007bff;
}

.feature img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.feature img:hover {
    transform: scale(1.1);
}

#security {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #fff;
    animation: fadeInUp 1.5s ease-out;
}

#security h2 {
    color: #007bff;
    margin-bottom: 1rem;
}

#about, #help, #contact {
    padding: 3rem 1rem;
    background-color: #fff;
    text-align: center;
    animation: fadeInUp 1.5s ease-out;
}

#help .faq {
    text-align: left;
    max-width: 800px;
    margin: 1rem auto;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 1rem;
}

#help .faq h3 {
    color: #007bff;
    margin-top: 0;
}

#help .faq p {
    margin-bottom: 0;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.nav-menu {
    display: flex;
}

.nav-menu a {
    margin: 0 1rem;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #ffdd57;
}

footer {
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: white;
    animation: fadeIn 1s ease-in;
}

#opensource {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #fff;
    animation: fadeInUp 1.5s ease-out;
}

#opensource h2 {
    color: #007bff;
    margin-bottom: 1rem;
}

#opensource p {
    max-width: 800px;
    margin: 0 auto 1rem auto;
}

/* New sections styles */
#workflow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: #f4f4f4;
}

.step {
    background-color: white;
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 300px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.step h3 {
    margin-top: 0;
    color: #007bff;
}

.step img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.step img:hover {
    transform: scale(1.1);
}

#gallery {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #fff;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.image-gallery img {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

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

#getting-started {
    padding: 3rem 1rem;
    background-color: #fff;
    text-align: center;
}

.guide {
    text-align: left;
    max-width: 800px;
    margin: 1rem auto;
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.guide h3 {
    color: #007bff;
    margin-top: 0;
}

.guide p {
    margin-bottom: 0;
}

#resources {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #fff;
}

#team {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 3rem 1rem;
    background-color: #f4f4f4;
}

.team-member {
    background-color: white;
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 300px;
    text-align: center;
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-10px);
}

.team-member h3 {
    margin-top: 0;
    color: #007bff;
}

.team-member img {
    max-width: 100%;
    height: auto;
    border-radius: 50%;
    margin-bottom: 1rem;
}

#support {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #fff;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    header h1 {
        font-size: 2rem;
    }

    header p {
        font-size: 1rem;
    }

    #hero h2 {
        font-size: 1.5rem;
    }

    #hero p {
        font-size: 1rem;
    }

    #hero img {
        width: 100%;
        max-width: 400px;
    }

    .feature, .step, .team-member {
        max-width: 100%;
        margin: 0.5rem 0;
    }

    .image-gallery img {
        max-width: 150px;
    }

    nav {
        display: flex;
        flex-direction: column;
    }

    nav a {
        margin: 0.25rem 0;
    }

    .hamburger {
        display: block;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #007bff;
        flex-direction: column;
        padding: 1rem 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        margin: 0.5rem 1rem;
        padding: 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }

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

@media (max-width: 480px) {
    header {
        padding: 1rem 0;
    }

    #hero {
        padding: 2rem 0.5rem;
    }

    .feature, .step, .team-member {
        padding: 1rem;
    }

    nav {
        display: flex;
        flex-direction: column;
    }

    nav a {
        margin: 0.25rem 0;
    }
}

/* New section styles */
#technology, #workflow, #requirements {
    background-color: white;
    margin: 2rem 0;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.tech-info h3, .workflow-step h3, .security-details h3, 
.server-requirements h3, .client-requirements h3, .deployment-options h3 {
    color: #007bff;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.tech-info h3:first-child, .security-details h3:first-child {
    margin-top: 0;
}

.workflow-steps {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
}

.workflow-step {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.workflow-step h3 {
    margin-top: 0;
    font-size: 1.1rem;
}

.security-details ul, .server-requirements ul, .client-requirements ul, .deployment-options ul {
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.security-details ul li, .server-requirements ul li, .client-requirements ul li, .deployment-options ul li {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.security-details ul li strong, .server-requirements ul li strong, 
.client-requirements ul li strong, .deployment-options ul li strong {
    color: #007bff;
}

.requirements-info {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
}

.server-requirements, .client-requirements, .deployment-options {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .requirements-info {
        grid-template-columns: 1fr 1fr;
    }
    
    .deployment-options {
        grid-column: 1 / -1;
    }
    
    .workflow-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .workflow-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}