.hero{background-color:var(--color-background);text-align:center;justify-content:flex-start;align-items:center;max-width:1200px;height:100vh;padding:0 1rem;display:flex;position:relative;overflow:hidden}.hero-content{z-index:1;text-align:left;flex-direction:column;align-items:flex-start;width:50%;display:flex;position:relative}.hero h1{color:var(--text-color);margin-bottom:1rem;font-size:4rem;font-weight:400}.hero-buttons{gap:1rem;margin-top:2rem;display:flex}.dark .hero h1{color:var(--color-dark-foreground)}.blob-container{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}@media (max-width:1024px){.hero-content{width:70%}.hero h1{font-size:3rem}.btn-primary{padding-left:2.5rem;padding-right:2.5rem;font-size:1.1rem}}@media (max-width:768px){.hero{text-align:center;justify-content:center;padding:0 1.5rem}.hero-content{width:90%}.hero h1{font-size:2.5rem}.hero-buttons{flex-direction:column;gap:1rem;width:80%}.hero .btn-primary,.hero .btn-secondary{width:100%}.btn-primary,.btn-secondary{padding-left:1.5rem;padding-right:1.5rem;font-size:1rem}}@media (max-width:480px){.hero h1{font-size:2rem}.hero-buttons{gap:.75rem}}
.about{text-align:left;flex-direction:row;align-items:center;gap:2rem;max-width:1200px;padding:2rem;display:flex}.about-content{text-align:left;max-width:600px}.about h2{color:var(--text-color);margin-bottom:1.5rem;font-size:3rem;font-weight:400}.about h2:after{content:"";background:linear-gradient(90deg,#2563eb 35%,rgba(37,99,235,.5) 100%);border-radius:2px;width:8rem;height:5px;margin-top:.5rem;display:block}.about p{margin-bottom:1.5rem;font-size:1.15rem;line-height:1.6}.about p:last-child{color:var(--text-color)}.dark .about p{color:var(--color-dark-text)}.dark .about h2,.dark .about p:last-child{color:var(--color-dark-foreground)}.about-image{justify-content:flex-start;width:50%;display:flex}.about-image img{border-radius:var(--border-radius-3xl);object-fit:cover;justify-content:flex-start;width:24rem;height:24rem;padding-left:0;box-shadow:0 0 20px 15px rgba(37,99,235,.6)}@media (max-width:768px){.about{text-align:center;flex-direction:column;height:auto}.about-content{text-align:left;max-width:100%}.about h2{font-size:2.2rem}.about h2:after{width:6rem}.about p{font-size:1rem}.about-image{justify-content:center;width:100%}.about-image img{width:32rem;height:32rem}}@media (max-width:480px){.about h2{font-size:1.8rem}.about h2:after{width:4rem}.about p{font-size:.95rem}.about-image img{width:18rem;height:18rem}}
.cards-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;padding:2rem 0;display:grid}@media (max-width:768px){.cards-container{grid-template-columns:1fr;gap:1.5rem;padding:1.5rem 0}}.projects{background-color:var(--background-color);padding:4rem 2rem}@media (max-width:768px){.projects{padding:2rem 1rem}}.projects h2{text-align:center;margin-bottom:1rem;font-size:2.25rem;font-weight:400}@media (max-width:480px){.projects h2{font-size:1.75rem}}.projects h2:after,.projects .projects-grid__title:after{content:"";background:linear-gradient(90deg,#2563eb 35%,rgba(37,99,235,.5) 100%);border-radius:2px;width:8rem;height:5px;margin:.5rem auto 0;display:block}.projects h3{text-align:center;margin-bottom:.5rem;font-size:1.875rem;font-weight:400}@media (max-width:480px){.projects h3{font-size:1.5rem}}.projects h2,.projects h3{color:var(--text-color)}.dark .projects h2,.dark .projects h3{color:var(--color-dark-foreground)}.projects-sub-description{text-align:center;margin-bottom:2rem;font-size:1.125rem}@media (max-width:480px){.projects-sub-description{margin-bottom:1.5rem;padding:0 1rem;font-size:1rem}}
.card{background-color:var(--color-card);border:1px solid var(--color-border);border-radius:var(--border-radius-xl);width:100%;max-width:25rem;max-height:-moz-fit-content;max-height:fit-content;transition:all .3s}.card:hover{transition:all .3s;transform:translateY(-5px);box-shadow:0 10px 20px -2px rgba(37,99,235,.6)}.dark .card{background-color:var(--color-dark-card);color:var(--color-dark-card-text)}.card-header{border-bottom:var(--color-primary)1px solid;border-radius:var(--border-radius-xl)var(--border-radius-xl)0 0;height:15rem;overflow:hidden}.card-header img{object-fit:cover;border-radius:var(--border-radius-xl)var(--border-radius-xl)0 0;width:100%;height:15rem}.card-body{padding:1rem}.card-overlays .card-title{text-align:left;margin:.5rem 0;font-size:1.3rem;font-weight:600}.dark .card-title{color:var(--color-dark-card-text)}.card-overlays{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.category{padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--border-radius-2xl);text-transform:uppercase;height:1rem;font-size:.7rem;font-weight:500}.category-design{color:#00442f;background-color:rgba(36,255,167,.39)}.dark .category-design{color:#79f7cf}.category-development{color:#00225d;background-color:rgba(41,121,255,.39)}.dark .category-development{color:#82b1ff}.category-3d{color:#5a001f;background-color:rgba(255,61,127,.39)}.dark .category-3d{color:#ff8aa3}.card-description{font-size:.875rem}.card-technologies{flex-wrap:wrap;gap:.5rem;margin-top:1rem;margin-bottom:1rem;display:flex}.tech-badge{padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--border-radius-2xl);text-transform:uppercase;background-color:var(--color-primary-hover);height:1rem;font-size:.7rem;font-weight:500}.card-actions{grid-template-columns:1fr 1fr;gap:1rem;width:100%;display:grid}.card-actions>:nth-child(3){grid-column:1/-1;justify-self:stretch}@media (max-width:768px){.card{max-width:100%}.card-header,.card-header img{height:12rem}.card-title{font-size:1.75rem}.card-overlays{flex-direction:column;align-items:flex-start}.card-actions{grid-template-columns:1fr}.card-actions>:nth-child(3){grid-column:1/-1}}@media (max-width:480px){.card-title{font-size:1.5rem}.card-body{padding:.75rem}.category,.tech-badge{height:auto;padding:.25rem .5rem;font-size:.6rem}}
.skills{background-color:var(--background-color);padding:4rem 2rem}.skills h2{text-align:center;color:var(--text-color);margin-bottom:1rem;font-size:2.25rem;font-weight:400}.dark .skills h2{color:var(--color-dark-foreground)}.skills h2:after{content:"";background:linear-gradient(90deg,#2563eb 35%,rgba(37,99,235,.5) 100%);border-radius:2px;width:8rem;height:5px;margin:.5rem auto 0;display:block}.skills-sub-description{text-align:center;margin-bottom:2rem;font-size:1.125rem}.skills-grid{grid-template-columns:repeat(4,1fr);gap:1rem;width:100%;display:grid}@media (max-width:1024px){.skills-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.skills-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.skills-grid{grid-template-columns:1fr}}
.skill-card{background-color:var(--color-card);color:var(--color-card-text);border:1px solid var(--color-border);text-align:center;border-radius:6px;height:12.5rem;padding:1rem;transition:transform .3s,box-shadow .3s}.skill-card:hover{transition:all .3s;transform:translateY(-5px);box-shadow:0 10px 20px -2px rgba(37,99,235,.6)}.skill-card:hover p{color:var(--color-primary);transition:color .3s}.skill-card p{display:inline-block;position:relative}.skill-card p:after{content:"";background:linear-gradient(90deg,#2563eb 35%,rgba(37,99,235,.5) 100%);border-radius:2px;width:0;height:3px;transition:width .3s;position:absolute;bottom:-6px;left:0}.skill-card:hover p:after{width:100%}.skill-card svg{width:5rem;height:5rem;fill:var(--color-dark-background);border:var(--color-primary)1px solid;background-color:var(--color-primary-hover);border-radius:var(--border-radius-2xl);margin-bottom:.5rem;padding:1rem;transition:fill .3s}.dark .skill-card svg{fill:var(--color-dark-foreground)}.dark .skill-card{background-color:var(--color-dark-card);color:var(--color-dark-card-text)}.skill-card-title{margin-top:.5rem;font-size:1.1rem;font-weight:600}.skill-card.php:hover svg{fill:#777bb4}.skill-card.react-js:hover svg{fill:#61dafb}.skill-card.next-js:hover svg{fill:#000}.skill-card.javascript:hover svg{fill:#f7df1e}.skill-card.figma:hover svg{fill:#f24e1e}.skill-card.drupal:hover svg{fill:#0678be}.skill-card.blender:hover svg{fill:#f5792a}.skill-card.html-css:hover svg{fill:#e34f26}@media (max-width:480px){.skill-card svg{width:4rem;height:4rem;padding:.5rem}.skill-card{height:auto;padding:.75rem}}
.contact{border-radius:8px;flex-direction:column;align-items:center;gap:20px;padding:20px;display:flex}.contact h2{text-align:center;color:var(--text-color);margin-bottom:1rem;font-size:2.25rem;font-weight:400}.dark .contact h2{color:var(--color-dark-foreground)}.contact h2:after{content:"";background:linear-gradient(90deg,#2563eb 35%,rgba(37,99,235,.5) 100%);border-radius:2px;width:8rem;height:5px;margin:.5rem auto 0;display:block}.contact .contact-sub-description{text-align:center;margin-bottom:3rem;font-size:1.125rem}.contact-methods{flex-direction:row;gap:3rem;width:100%;display:flex}.contact-form,.contact-info{width:50%}.contact-info{width:40%}.contact-form{color:var(--color-dark-foreground);border-radius:1rem;flex-direction:column;gap:1rem;width:100%;max-width:500px;height:25rem;padding:2rem;display:flex;box-shadow:0 4px 20px rgba(37,99,235,.6)}.dark .contact-form{background-color:var(--color-dark-card);box-shadow:0 4px 20px rgba(37,99,235,.3)}.contact-form label{color:var(--text-color);font-size:1.125rem;font-weight:500}.dark .contact-form label{color:var(--color-dark-foreground)}.contact-form input,.contact-form textarea{background-color:var(--color-muted);color:var(--text-color);border:none;border-radius:.7rem;padding:.8rem 1rem;font-size:.95rem}.dark .contact-form input,.dark .contact-form textarea{background-color:var(--color-dark-background);color:var(--color-dark-foreground)}.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--color-muted-foreground)}.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--color-primary)}.contact-info h3{color:var(--text-color);margin-top:0;margin-bottom:1.5rem;font-size:2rem}.dark .contact-info h3{color:var(--color-dark-foreground)}.contact-info p{margin-bottom:3rem;font-size:1.125rem}.contact-info h4{color:var(--text-color);margin-bottom:1rem;font-size:1.25rem}.dark .contact-info h4{color:var(--color-dark-foreground)}.social-links{align-items:center;gap:2rem;margin-bottom:4rem;padding:0;display:flex}.social-links li{list-style:none}.social-links a{border:1px solid var(--text-color);background-color:var(--color-light-background);width:3rem;height:3rem;color:var(--text-color);border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex}.social-links a:hover{border-color:var(--color-primary);background-color:var(--color-primary-transparent);transform:scale(1.05);box-shadow:0 4px 15px rgba(37,99,235,.4)}img.social-icon{object-fit:contain;width:1rem;height:1rem}.dark img.social-icon{filter:invert()}.dark .social-links a{border-color:var(--color-dark-foreground);background-color:var(--color-dark-background);color:var(--color-dark-foreground)}.dark .social-links a:hover{border-color:var(--color-primary);background-color:var(--color-primary-transparent)}.direct-contact{border-radius:var(--border-radius-xl);padding:var(--spacing-lg)var(--spacing-lg);background-image:linear-gradient(to bottom,var(--color-primary-hover),var(--color-light-background));border-top:1px solid rgba(37,99,235,.4);margin-bottom:2rem;font-size:1.125rem}.dark .direct-contact{background-image:linear-gradient(to bottom,var(--color-primary-hover),var(--color-dark-background))}.direct-contact h3{color:var(--text-color);margin-bottom:1rem;font-size:1.5rem}.dark .direct-contact h3{color:var(--color-dark-foreground)}.direct-contact p,.direct-contact a{color:var(--text-color);margin-bottom:.5rem;padding-bottom:1rem;text-decoration:none}.dark .direct-contact p,.dark .direct-contact a{color:var(--color-dark-card-text)}@media (max-width:768px){.contact{gap:15px;height:auto;padding:15px}.contact h2{font-size:1.75rem}.contact-methods{flex-direction:column;align-items:center;gap:2rem}.contact-form,.contact-info{width:100%;max-width:500px;margin:0 auto}.social-links{gap:1rem}.direct-contact{padding:var(--spacing-md);font-size:1rem}.direct-contact h3{font-size:1.25rem}}@media (max-width:480px){.contact h2{font-size:1.5rem}.contact .contact-sub-description{margin-bottom:2rem;font-size:1rem}.contact-form{width:80%;height:auto;padding:1.5rem}.social-links a{width:2.5rem;height:2.5rem}.social-links img.social-icon{width:.9rem;height:.9rem}}
