:root {
    --primary-color: #1a1a2e;
    --secondary-color: #00f2fe;
    --accent-color: #4facfe;
    --text-color: #e6e6e6;
    --light-bg: #16213e;
    --card-bg: rgba(255, 255, 255, 0.05);
    --glow-color: rgba(0, 242, 254, 0.5);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: linear-gradient(45deg, rgba(49, 49, 49, 0.1) 0%, rgba(129, 129, 129, 0.1) 100%), linear-gradient(135deg, var(--primary-color) 0%, var(--light-bg) 100%); /* Gradiente metálico + fundo escuro */
    overflow-x: hidden;
}

/* Cursor Glow Effect */
.cursor-glow {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--glow-color);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    z-index: 9999;
    filter: blur(5px);
}

/* Header e Navegação */
header {
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 242, 254, 0.1);
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    max-width: 100%;
    column-gap: 40%;
}

.logo h1 {
    color: white;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.tech-text {
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

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

.menu li a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.menu li a:hover::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8)), url('https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 0 1rem;
    position: relative;
}

.tech-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px var(--glow-color);
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.8;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2rem;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    color: white;
    text-decoration: none;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px var(--glow-color);
}

.cta-button span {
    margin-right: 0.5rem;
}

.cta-button i {
    transition: transform 0.3s ease;
}

.cta-button:hover i {
    transform: translateX(5px);
}

/* Estilo para o ícone de check no botão após o envio */
.cta-button.sent i.fas.fa-paper-plane {
    display: none;
}

.cta-button.sent i.fas.fa-check-circle {
    display: inline-block;
    margin-left: 0.5rem; /* Aumenta o espaçamento à esquerda do ícone */
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid var(--secondary-color);
    border-radius: 15px;
    margin: 0 auto 10px;
    position: relative;
}

.mouse::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--secondary-color);
    border-radius: 50%;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, 20px); opacity: 0; }
}

/* Serviços */
.services {
    padding: 5rem 1rem;
    background-color: var(--light-bg);
}

.services h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 3rem;
}

.service-card {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px var(--glow-color);
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px var(--glow-color);
}

.service-icon i {
    font-size: 2rem;
    color: white;
}

.service-features {
    list-style: none;
    margin-top: 1rem;
    text-align: left;
}

.service-features li {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.service-features li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
}

/* Tecnologias */
.technologies {
    padding: 5rem 1rem;
    background-color: var(--primary-color);
}

.technologies h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    margin-top: 3rem;
}

.tech-item {
    text-align: center;
    padding: 2.5rem;
    background: var(--card-bg);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--glow-color);
}

.tech-item i {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sobre */
.about {
    padding: 5rem 1rem;
    background-color: #f4f4f4;
    color: #333;
    position: relative;
    overflow: hidden;
}

.about::before {
    content: "NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS NIDY TECNOLOGIAS";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 8rem;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: 1px rgba(101, 101, 101, 0.1);
    opacity: 0.6;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: center;
    line-height: 0.8;
    z-index: 1;
    pointer-events: none;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    z-index: 2; /* Garante que o conteúdo fique acima do texto de fundo */
    position: relative; /* Necessário para z-index funcionar */
}

.about-content h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, #333, #555);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-text {
    margin: 2rem 0 4rem;
}

.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.9;
    margin-bottom: 1rem;
    color: #555;
}

.about-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2.5rem;
    margin: 4rem 0;
}

.feature {
    padding: 2rem;
    background: rgba(99, 99, 99, 0.02);
    border-radius: 10px;
    transition: all 0.3s ease;
}

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

.feature i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

/* Contato */
.contact {
    padding: 5rem 1rem;
    background-color: var(--primary-color);
}

.contact h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    align-items: start;
}

.contact-card {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.contact-item:last-of-type {
    margin-bottom: 0;
}

.contact-item:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.1);
}

.contact-item i {
    font-size: 1.5rem;
    margin-right: 1.2rem;
    color: var(--secondary-color);
    min-width: 30px;
    text-align: center;
}

.contact-details {
    flex: 1;
}

.contact-label {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-bottom: 0.3rem;
    text-transform: none;
    letter-spacing: 0.5px;
}

.contact-value {
    margin: 0.2rem 0;
    opacity: 0.9;
    font-size: 1.1rem;
}

.form-container {
    background: var(--card-bg);
    padding: 2.5rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    width: 100%;
    text-align: center;
}

.form-group {
    position: relative;
    margin-bottom: 1.5rem;
    width: 100%;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

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

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 10px var(--glow-color);
    background: rgba(255, 255, 255, 0.1);
}

.focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    transition: 0.4s;
}

.form-group input:focus ~ .focus-border,
.form-group textarea:focus ~ .focus-border {
    width: 100%;
}

.contact-form {
    width: 100%;
}

#contactForm {
    width: 100%;
}

.form-container h3 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-align: center;
}

.form-description {
    margin-bottom: 2rem;
    opacity: 0.8;
    text-align: center;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
    border-radius: 25px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    flex: 1;
}

.social-link.whatsapp {
    background: linear-gradient(45deg, #25D366, #128C7E);
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px var(--glow-color);
}

.social-link.whatsapp:hover {
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.5);
}

.social-link i {
    font-size: 1.2rem;
}

.social-link span {
    font-size: 1rem;
    font-weight: 500;
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: white;
    padding: 2rem 1rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

.company-info {
    padding-right: 1rem;
}

.company-description {
    margin: 0.5rem 0 0.8rem;
    font-size: 1.1rem;
    opacity: 0.8;
    max-width: 400px;
}

.footer-contact {
    margin: 0.8rem 0;
}

.footer-contact p {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0.4rem 0;
    opacity: 0.8;
    font-size: 1.1rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.footer-contact p:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.footer-contact p i {
    color: var(--secondary-color);
    font-size: 1.2rem;
    min-width: 20px;
    text-align: center;
}

.cnpj {
    margin: 0.5rem auto 1rem;
    font-size: 0.9rem;
    opacity: 0.7;
    text-align: center;
}

.footer-section h3 {
    margin-bottom: 0.8rem;
    color: var(--secondary-color);
    font-size: 1.2rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(45deg, var(--secondary-color), var(--accent-color));
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin: 0.4rem 0;
}

.footer-section ul li a {
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    opacity: 0.8;
    font-size: 1.1rem;
    display: inline-block;
    padding: 0.5rem;
    border-radius: 8px;
}

.footer-section ul li a:hover {
    color: var(--secondary-color);
    opacity: 1;
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.05);
}

.footer-bottom {
    text-align: center;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Responsividade */
@media (max-width: 768px) {
    .menu {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .company-info {
        padding-right: 0;
    }
    
    .company-description {
        max-width: 100%;
    }
    
    .footer-contact p {
        font-size: 1rem;
    }
    
    .footer-section ul li a {
        font-size: 1rem;
    }
    
    .cnpj {
        max-width: 100%;
    }
}

/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 1s ease-out;
}

/* Scroll Animations */
.scroll-up {
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.scroll-down {
    transform: translateY(0);
    transition: transform 0.3s ease;
}

/* Ajustes de espaçamento geral */
section {
    padding: 6rem 1rem;
}

.services-grid,
.tech-grid {
    gap: 2.5rem;
    margin-top: 3rem;
}

.service-card,
.tech-item {
    padding: 2.5rem;
}

.about-features {
    gap: 2.5rem;
    margin: 4rem 0;
}

.feature {
    padding: 2rem;
}

.footer-section {
    padding: 0 0;
}

.footer-section ul li {
    margin: 0 0;
}

/* Portfólio */
.portfolio {
    padding: 6rem 1rem;
    background-color: var(--light-bg); /* Fundo azul claro */
    color: var(--text-color);
    text-align: center;
    overflow: hidden; /* Garante que a sombra do card não vaze */
}

.portfolio h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    background: linear-gradient(45deg, var(--primary-color), #555);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.portfolio-subtitle {
    text-align: center;
    font-size: 1.2rem;
    opacity: 0.7; /* Opacidade ajustada */
    margin-bottom: 3rem; /* Reduzido o espaçamento */
    color: #555; /* Cor do texto ajustada */
}

.portfolio-card {
    background-color: white; /* Fundo branco para o card */
    padding: 3rem 5%; /* Mantido o padding lateral interno */
    border-radius: 20px; /* Bordas mais arredondadas */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada e suave */
    color: #333; /* Cor do texto dentro do card */
    text-align: center; /* Centralizar conteúdo dentro do card */
    max-width: 90%; /* Aumentei o max-width para usar mais espaço */
    margin: 0 auto; /* Centralizar o card na página */
    position: relative;
    z-index: 2;
    transition: all 0.5s ease;
}

.portfolio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.05) 0%, rgba(79, 172, 254, 0.05) 100%); /* Gradiente sutil de fundo */
    border-radius: 20px;
    z-index: -1;
}

.portfolio-card .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    max-width: 100%; /* Garante que a grid se ajuste à largura do card */
    margin: 0 auto; /* Centralizar a grid dentro do card */
}

.portfolio-item {
    background: #ffffff; /* Fundo branco puro para os itens */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Sombra mais suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição no hover */
    border: none;
    backdrop-filter: none;
    text-align: left;
}

.portfolio-item:hover {
    transform: translateY(-8px); /* Animação de hover ajustada */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra no hover ajustada */
}

.portfolio-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.item-info {
    padding: 1.5rem;
}

.item-info h3 {
    font-size: 1.4rem; /* Tamanho da fonte ajustado */
    margin-bottom: 0.6rem;
    color: var(--primary-color); /* Cor do título mais escura */
}

.item-info p {
    font-size: 0.95rem; /* Tamanho da fonte ajustado */
    opacity: 0.9;
    color: #555; /* Cor do texto ajustada */
}

@media (max-width: 768px) {
    .portfolio {
        padding: 4rem 0.5rem; /* Ajustar padding da seção em mobile */
    }

    .portfolio-card {
        padding: 2rem 1rem; /* Padding ajustado para telas menores */
        border-radius: 15px; /* Bordas ajustadas em mobile */
        max-width: 95%; /* Ajuste do max-width para mobile */
    }

    .portfolio-card .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes pulse-central {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* Modal Styles - CORRIGIDO */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.modal-overlay.active {
    display: flex;
}

.modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    margin: auto;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.modal-content img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    background: #fff;
    display: block;
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 100001;
}

.modal-close:hover {
    color: #ff6b6b;
}

.modal-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 20px;
    z-index: 100001;
}

.modal-nav button {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.modal-nav button:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.1);
}

.modal-nav button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    .modal-content img {
        max-width: 98vw;
        max-height: 60vh;
    }
    .modal-content {
        max-width: 98vw;
        max-height: 70vh;
    }
    .modal-close {
        top: -30px;
        right: 0;
        font-size: 26px;
    }
}

.portfolio-item {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: scale(1.02);
}