.project-card{width:20%;height:100%;background-color:#f0f0f0;border-radius:10px;overflow:hidden;position:relative;margin:20px;box-shadow:0 4px 8px #0000001a;transition:transform .3s ease}@media(max-width:768px){.project-card{width:calc(50% - 40px)}}@media(max-width:480px){.project-card{width:calc(100% - 40px)}}.project-card:hover{transform:translateY(-5px);box-shadow:0 6px 12px #00000026}.project-image{width:100%;height:100%;overflow:hidden;border-top-left-radius:10px;border-top-right-radius:10px}.project-image img{width:100%;height:100%;object-fit:cover}.project-info{padding:2px 5px;text-align:center;width:100%;height:100%}.project-info h3{font-size:1.5em;margin-bottom:10px}.project-info p{font-size:1em;color:#666;width:100%;height:100%}.project-info a{display:inline-block;padding:8px 20px;border-radius:5px;background-color:#3498db;color:#fff;text-decoration:none;transition:background-color .3s ease;margin:10px}.project-info a:hover{background-color:#2980b9}.projects-container{padding:50px 20px;text-align:center}.projects-container h2{font-size:2.5em;margin-bottom:30px}.projects-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:20px;justify-items:center}.project{background-color:#f9f9f9;padding:20px;border-radius:8px;box-shadow:0 4px 8px #0000001a;text-align:left}.project img{width:100%;border-radius:8px;margin-bottom:15px}.project h3{margin-top:0;font-size:1.5em}.project p{margin-bottom:15px}.project a{display:inline-block;padding:8px 16px;background-color:#3498db;color:#fff;text-decoration:none;border-radius:4px;transition:background-color .3s ease}.project a:hover{background-color:#2980b9}.projects-container{max-width:1200px;margin:0 auto;padding:20px}.projects-heading{text-align:center;margin-bottom:40px;font-size:2em}.project-list{display:flex;flex-wrap:wrap;justify-content:center}body{margin:0;font-family:Arial,sans-serif;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;--background-color: #fcfcfc;--primary-color: #000;color:var(--primary-color);background-color:var(--background-color)}[data-theme=dark]{--background-color: #121212;--text-color: #ffffff;--button-background: #0a58ca;--button-text-color: #ffffff}.hero-section{background-image:url(path/to/your/hero-image.jpg);background-size:cover;background-position:center;height:500px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--primary-color)}.hero-content{max-width:800px;margin:0 auto}.hero-content h1{font-size:3em;margin-bottom:20px;color:var(--primary-color)}.hero-content p{font-size:1.2em;color:var(--primary-color)}.section{padding:50px 0}.section h2{font-size:2em;margin-bottom:20px}.section p{font-size:1.2em}@media screen and (max-width:768px){.hero-content h1{font-size:2.5em}.hero-content p{font-size:1em}.section{padding:30px 0}.section h2{font-size:1.8em;margin-bottom:15px}.section p{font-size:1em}}.contact-section{background-color:var(--background-color);padding:50px 20px;text-align:center}.contact-section h2{font-size:2em;margin-bottom:20px;color:#333}.contact-section p{font-size:1.2em;color:#555}.about-section{padding:50px 20px;text-align:center;background-color:#f9f9f9;color:#333}.about-section h2{font-size:2em;margin-bottom:20px}.about-section p{font-size:1.2em}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.home-container{text-align:center;padding:20px}.info-container{max-width:400px;margin:0 auto}.input-field{width:100%;margin-bottom:10px;padding:8px}.preview-container{margin-top:20px;border-top:2px solid #ccc;padding-top:20px}