:root{--accent: #27a0d8ff;--accent-darker: #007a7fff;--accent2: #11b196ff;--accent2-darker: #0b816eff;--bg-main: #edf9fc;--bg-card: #d9f4ff;--bg-section: #92cbf1;--bg-header:#032a4e;--title: #42342d;--text-main: #000000ff;--text-alt: #ffffffff;--text-header:rgb(209, 250, 255)}body.dark-mode{--bg-main: #061122;--bg-card: #0b172e;--bg-section: #03304e;--bg-header:#71bcee;--title: #d6f2ff;--text-main: #f2f2f2;--text-alt: #222222ff;--text-header:#00162a}html,body,.content,#root{height:100%;margin:0;background:var(--bg-main);scroll-behavior:smooth}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--bg-header);display:flex;justify-content:space-between;align-items:center;padding:3vh 10%}.navbar a,.dark-theme-button{font-size:1.3rem;font-weight:700;color:var(--text-header);text-decoration:none;transition:all .3s ease}.nav-links{display:flex;gap:1vw;align-items:center}.nav-links :hover{color:var(--accent)}.dark-theme-button{display:flex;gap:1vw;align-items:center;padding:.5vh 1vw;border-radius:20px;cursor:pointer;background:var(--text-header);color:var(--accent);border:none;transition:all .3s ease}.dark-theme-button:hover{background:var(--accent);color:var(--bg-button-option);transition:all .3s ease}.dark-theme-button img{height:3vh}.logo{display:flex;align-items:center}.logo img{height:4vh}footer{text-align:center;justify-content:center;padding-top:2vh;padding-bottom:2vh;background-color:var(--bg-header);color:var(--text-header)}footer .social-links{margin:2vh auto 3vh;gap:5vw}section{margin:5vh 0;padding:5vh 0;background:var(--bg-section)}.section-title{font-size:2.2rem;font-weight:700;margin-bottom:3rem;color:var(--title);text-align:center}.section-intro{font-size:2rem;margin-left:10%}.cards-container{align-content:center;justify-items:center;display:grid;grid-template-columns:1fr 1fr;width:75%;margin:auto}.card{padding:1.5rem;border-radius:12px;background:var(--bg-card);width:100%;box-shadow:0 0 2px var(--bg-header)}.card-title{font-size:2rem;font-weight:600;color:var(--title);text-align:center}.card-text,.section-cta{font-size:1.5rem;color:var(--text-main)}.card-highlight{text-align:center;font-weight:700;color:var(--text-alt);background-color:var(--bg-header);border-radius:30px;padding:5%}.section-cta{text-align:center}.section-cta strong{color:var(--accent);font-weight:600;cursor:pointer}.section-note{font-size:1.2rem;color:var(--text-main);text-align:center;align-items:center}.pricing .cards-container,.projects .cards-container{display:grid;grid-template-columns:none;gap:1rem}.pricing .card{display:grid;grid-template-columns:2fr 4fr 1fr;align-items:center}.pricing .card-title{text-align:start;font-size:1.8rem}.pricing .card-text{width:80%;margin:auto}.workflow .cards-container{grid-template-columns:repeat(4,20%);gap:5%}.workflow .card{display:flex;flex-direction:column;gap:10%}.workflow .card-text{text-align:center}.services .cards-container{grid-template-columns:repeat(3,30%);gap:5%}.projects .cards-container{max-width:1100px;margin:0 auto}.projects .card{padding:2rem;display:flex;flex-direction:column;gap:1.2rem;align-items:center;text-align:center;width:auto}.projects .card:last-child{margin-bottom:5vh}.project-preview{width:100%;max-width:900px;border-radius:16px;object-fit:cover;box-shadow:0 2px 10px var(--bg-header);margin-bottom:.5rem}.projects .card{font-size:1.2rem;line-height:1.5;max-width:1040px;padding:2.5rem;margin:0 auto;opacity:.9;text-align:center}.tech-stack{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:.5rem}.tech-icon{height:3rem;opacity:.8;transition:opacity .2s ease,transform .2s ease}.tech-icon:hover{opacity:1;transform:scale(1.05)}.project-cta{display:flex;gap:1.5rem;align-items:center;margin-top:1rem}.project-cta{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.project-cta button,.project-cta a{padding:.5rem 1.5rem;font-size:1.2rem;min-height:44px;border-radius:999px;font-weight:600;cursor:pointer;transition:all .25s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.project-cta .primary{background:var(--accent);color:#fff;border:none}.project-cta .primary:hover{background:var(--accent-darker)}.project-cta .secondary,.tertiary{background:transparent;color:var(--bg-header);border:2px solid var(--accent)}.project-cta .secondary:hover,.tertiary:hover{background:#27a0d81a}@media(max-width:768px){.header{flex-direction:column;gap:1rem;padding:2vh 5%}.nav-links{flex-wrap:wrap;justify-content:center;gap:1rem}.navbar a{font-size:1rem}.logo img{height:5vh}section{margin:3vh 0;padding:3vh 5%}.section-title{font-size:1.6rem;margin-left:0;text-align:center}.section-intro{font-size:1.2rem;margin-left:0;text-align:center}.cards-container{grid-template-columns:1fr;width:100%;gap:1.5rem}.card{padding:1.2rem}.card-title{font-size:1.4rem}.card-text,.section-cta{font-size:1.1rem}.card-highlight{padding:3% 0;width:40%;margin:auto}.pricing .card{grid-template-columns:1fr;text-align:center;gap:1rem}.pricing .card-text{width:100%}.workflow .cards-container,.services .cards-container{grid-template-columns:1fr}.workflow .card,.services .card{gap:1rem}footer{padding:3vh 5%;font-size:.9rem}}@media(max-width:480px){.card-title{font-size:1.2rem}.section-title{font-size:1.4rem}}.workflow{background:var(--bg-section)}.workflow .section-title{margin-bottom:4rem}.workflow .card{padding:2rem 1.8rem;border-radius:16px;background:var(--bg-card);box-shadow:0 2px 10px var(--bg-header)}.workflow .card-title{font-size:1.6rem;font-weight:700;color:var(--title);margin-bottom:1rem;letter-spacing:.02em}.workflow .card-text{font-size:1.2rem;line-height:1.6;color:var(--text-main);text-align:center;max-width:90%;margin:0 auto}.workflow .cards-container{margin-top:2rem}@media(max-width:768px){.workflow .card{padding:1.5rem}.workflow .card-title{font-size:1.3rem}.workflow .card-text{font-size:1.05rem;max-width:100%}}.contact-container{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--bg-main)}.contact-form{background:var(--bg-card);width:100%;max-width:420px;padding:2rem;border-radius:12px;box-shadow:0 2px 10px var(--bg-header)}.contact-form h2{margin-bottom:1.5rem;font-size:1.6rem;text-align:center;color:var(--title);font-weight:600}.form-group{display:flex;flex-direction:column;margin-bottom:1rem}.form-group label{margin-bottom:.4rem;font-size:.9rem;font-weight:600;color:var(--text-main)}.form-group input,.form-group textarea{padding:.6rem .7rem;border:1px solid #ccc;border-radius:8px;font-size:.95rem;font-family:inherit;resize:vertical}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#000}.contact-form button{width:100%;padding:.7rem;margin-top:.5rem;border:none;border-radius:10px;background:var(--bg-header);color:#fff;font-size:1rem;cursor:pointer}.contact-form button:hover{background:var(--accent)}.status{margin-top:1rem;text-align:center;font-size:.9rem}.aboutme,.aboutme-short{background:var(--bg-main);margin:0;min-height:80vh}.aboutme-container{display:flex;margin:0 auto;justify-content:center;width:75%;gap:5%}.aboutme-title{font-size:2.2rem;color:var(--title)}.aboutme-text p{font-size:1.2rem;text-align:justify;color:var(--text-muted)}.tech-stack-list{color:var(--title)}.aboutme-img{margin:3vh auto}.aboutme-img img{width:100%}.aboutme-short-container{margin:auto;width:75%}.aboutme-short-text,.aboutme-short-cta,.aboutme-short-connect{width:60%;font-size:1.6rem;text-align:justify;color:var(--text-main)}.aboutme-short-intro{font-size:2.5rem;text-align:justify;color:var(--accent)}.aboutme-short-name,.aboutme-short-tag{padding-left:5%;margin:0;font-size:3rem;font-weight:600;color:var(--title)}.aboutme-short-tag{padding-left:10%;font-size:2.7rem;color:var(--bg-header)}.aboutme-short .tech-stack{justify-content:start;padding-bottom:3vh}.aboutme-short .tech-icon{height:2.2rem}.cta-buttons{display:flex;gap:2vw}.tellmemore-button{padding:1vh 2vh;font-size:1.5rem;font-weight:600;color:#fff;background:var(--accent2);border:none;border-radius:8px;cursor:pointer}.tellmemore-button:hover{background:var(--accent2-darker)}.tellmemore-button:nth-child(2){background:var(--accent)}.tellmemore-button:nth-child(2):hover{background:var(--accent-darker)}.aboutme-short-connect{margin-top:8vh}.social-links{display:flex;align-items:center;width:fit-content;gap:3vw}.social-links img{max-height:80px;min-height:40px}.social-links img:hover{transform:scale(1.1);transition:transform .5s}
