body{position:relative;margin:0;background:#000;color:#fff;overflow-x:hidden;font-family:Noto Sans,sans-serif}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(52,152,219,.35) 0%,transparent 70%),radial-gradient(circle,rgba(46,204,113,.3) 0%,transparent 60%),radial-gradient(circle,rgba(155,89,182,.25) 0%,transparent 80%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.03)' /%3E%3C/svg%3E");background-repeat:no-repeat,no-repeat,no-repeat,repeat;background-position:20% 30%,70% 60%,50% 80%,0 0;background-size:300px 300px,400px 400px,250px 250px,100px 100px;animation:floatBackground 15s infinite alternate}@keyframes floatBackground{0%{background-position:10% 20%,60% 50%,40% 70%,0 0}25%{background-position:30% 40%,80% 30%,50% 60%,0 0}50%{background-position:20% 60%,70% 70%,60% 50%,0 0}75%{background-position:40% 50%,50% 80%,30% 30%,0 0}to{background-position:20% 20%,70% 60%,50% 80%,0 0}}@font-face{font-family:Noto Sans;src:url(/francis-portfolio-frontend/assets/NotoSans-VariableFont_wdth_wght-CYoOFcCZ.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.header{position:fixed;top:0;left:0;width:100%;display:flex;flex-direction:row;padding:.5rem 2rem;background:#ffffff08;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 6px #0000001a;transition:transform .4s ease,opacity .4s ease;z-index:1000}.header.header--hidden{transform:translateY(-100%);opacity:0}.header__nav{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto}.header__logo{margin:0;display:flex;align-items:center;z-index:1001}.header__logo-image{height:50px;width:auto;display:block}.header__nav-links{display:flex;gap:2rem;list-style:none;margin:0;padding:0;align-items:center}.header__nav-links a{text-decoration:none;color:#fff;transition:color .3s;font-weight:500}.header__nav-links a:hover{color:#ffffff8c}.header__contact-container a{display:flex;align-items:center;justify-content:center;width:auto;height:auto;border-radius:50px;background-color:#2f40d433;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);color:#fff;text-decoration:none;transition:all .3s;font-weight:500;font-size:.9rem;padding:.4rem 1.5rem}.header__contact-container a:hover{background-color:#557be6;color:#fff;transform:scale(1.05)}.header__hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:.5rem;z-index:1001}.header__hamburger-line{width:25px;height:3px;background-color:#fff;border-radius:2px;transition:all .3s ease}.header__hamburger.active .header__hamburger-line:nth-child(1){transform:rotate(45deg) translateY(8px) translate(-1.5px)}.header__hamburger.active .header__hamburger-line:nth-child(2){opacity:0}.header__hamburger.active .header__hamburger-line:nth-child(3){transform:rotate(-45deg) translateY(-13px) translate(2px)}@media (max-width: 768px){.header{padding:.5rem 1.5rem}.header__logo-image{height:45px}.header__hamburger{display:flex;margin-right:1.7rem}.header__nav-links{position:fixed;top:0;right:0;height:100vh;width:70%;max-width:300px;flex-direction:column;background:#14141efa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:5rem 2rem 2rem;gap:2.5rem;box-shadow:-4px 0 15px #0000004d;transition:transform .4s ease;align-items:flex-start;transform:translate(100%)}.header__nav-links.active{transform:translate(0)}.header__nav-links li{width:100%}.header__nav-links a{display:block;width:100%;font-size:1.1rem;padding:.5rem 0}.header__contact-container{width:70%}.header__contact-container a{width:100%;justify-content:center;padding:.7rem 1.5rem;font-size:1rem;margin-left:-25px}}@media (max-width: 480px){.header{padding:.5rem 1rem}.header__hamburger{margin-right:1.2rem}.header__logo-image{height:40px}.header__hamburger-line{width:22px}.header__nav-links{width:80%;padding:4.5rem 1.5rem 2rem;gap:2rem}.header__nav-links a{font-size:1rem}.header__contact-container a{padding:.6rem 1.2rem;font-size:.95rem}}@media (max-width: 360px){.header{padding:.4rem .75rem}.header__contact-container{width:60%}.header__contact-container a{padding:.5rem;margin-left:-10px}.header__logo-image{height:36px}.header__nav-links{width:85%;padding:4rem 1.2rem 1.5rem}}.home{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:100vh;gap:2rem;padding:2rem 1rem;padding-top:120px}.home__profile{display:flex;flex-direction:column;align-items:center;gap:1rem}.home__profile_picture{width:108px;height:108px;border-radius:50%;object-fit:cover}.home__name_box{margin-top:-30px;background:#fff;color:#000;padding:.6rem 1rem;border-radius:12px;box-shadow:0 4px 10px #0000004d;text-align:center;font-weight:650;font-size:1rem;white-space:nowrap}.home-heading{font-size:2.5rem;font-weight:700;background:linear-gradient(270deg,#3498db,#2ecc71,#b3c2cb);background-size:600% 600%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientMove 10s ease infinite;text-align:center;padding:0 1rem;line-height:1.2}.home-subheading{text-align:center;padding:0 1rem;max-width:600px;font-size:1.1rem;color:#fffc}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.tech-icons{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:3rem;margin-top:1.5rem;flex-wrap:wrap;padding:0 1rem}.icon{font-size:4rem;transition:transform .9s ease,opacity .9s ease;opacity:.8;cursor:default}.icon:hover{transform:scale(1.2);opacity:1}.html{color:#e44d26}.css{color:#1572b6}.js{color:#f7df1e}.react{color:#61dafb}.node{color:#68a063}.mongo{color:#4db33d}.github{color:#fff}.home_projects{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:3rem;overflow:hidden;max-width:1000px;padding:2rem 1rem;background:#ffffff0d;border-radius:15px;box-shadow:0 4px 12px #0000004d}.home_projects-heading{text-align:center;margin-bottom:2rem;font-size:1.8rem;padding:0 1rem}.projects-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;width:100%;margin-bottom:2rem}.preview-project-card{background:#ffffff14;border-radius:12px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}.preview-project-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px #3498db4d}.preview-project-image{width:100%;height:180px;overflow:hidden}.preview-project-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.preview-project-card:hover .preview-project-image img{transform:scale(1.1)}.preview-project-content{padding:1.2rem}.preview-project-title{font-size:1.2rem;font-weight:600;color:#fff;margin-bottom:.8rem}.preview-project-technologies{display:flex;gap:.6rem;align-items:center}.project-tech-icon{font-size:1.4rem;transition:transform .3s ease}.project-tech-icon:hover{transform:scale(1.15)}.explore-more-link{display:inline-block;padding:.8rem 2rem;background:linear-gradient(90deg,#3498db,#2ecc71);color:#fff;text-decoration:none;border-radius:10px;font-weight:600;font-size:1rem;transition:all .3s ease;margin-top:1rem}.explore-more-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3498db66}.home_about{width:100%;display:flex;justify-content:center;margin-top:5rem;padding:0 1rem}.about_content{display:flex;align-items:center;gap:2rem;max-width:900px;width:100%;padding:2rem;background:#ffffff0d;border-radius:15px;box-shadow:0 4px 12px #0000004d}.about_image{width:200px;height:200px;border-radius:12px;object-fit:cover;flex-shrink:0}.about_text{display:flex;flex-direction:column;gap:1rem;color:#fff}.about_text h2{font-size:1.8rem;margin:0}.about_text p{font-size:1rem;line-height:1.6;margin:0}.about_button{align-self:flex-start;background:linear-gradient(90deg,#3498db,#2ecc71);color:#fff;text-decoration:none;padding:.6rem 1.2rem;border-radius:8px;font-weight:600;transition:transform .3s ease,box-shadow .3s ease;display:inline-block}.about_button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #2ecc714d}.fade-section{opacity:0;transform:translateY(50px);transition:opacity 1s ease,transform 1s ease}.fade-section.visible{opacity:1;transform:translateY(0)}.preview-project__github-button{display:inline-flex;align-items:center;gap:.5rem;margin-top:.8rem;padding:.5rem 1.2rem;background-color:#24292f;color:#fff;text-decoration:none;border-radius:6px;font-weight:600;font-size:.95rem;transition:all .2s ease;box-shadow:0 2px 6px #0003}.preview-project__github-button:hover{background-color:#333;transform:translateY(-1px);box-shadow:0 4px 10px #0000004d}.preview-project__github-icon{font-size:1rem}@media (max-width: 768px){.home{padding-top:100px;gap:1.5rem}.home-heading{font-size:2rem}.home-subheading{font-size:1rem}.tech-icons{gap:2rem}.icon{font-size:3rem}.home_projects{padding:1.5rem 1rem;margin-top:2rem}.home_projects-heading{font-size:1.5rem}.projects-preview-grid{grid-template-columns:1fr;gap:1.2rem}.preview-project-image{height:160px}.about_content{flex-direction:column;text-align:center;padding:1.5rem}.about_image{width:150px;height:150px}.about_text h2{font-size:1.5rem}.about_button{align-self:center}.home_about{margin-top:3rem}}@media (max-width: 480px){.home{padding:1rem .75rem;padding-top:90px;gap:1.25rem}.home__profile_picture{width:90px;height:90px}.home__name_box{font-size:.9rem;padding:.5rem .8rem;margin-top:-25px}.home-heading{font-size:1.5rem;padding:0 .5rem}.home-subheading{font-size:.9rem;padding:0 .5rem}.tech-icons{gap:1.5rem;margin-top:1rem}.icon{font-size:2.5rem}.home_projects{padding:1rem .5rem;margin-top:1.5rem;border-radius:10px}.home_projects-heading{font-size:1.3rem;margin-bottom:1rem}.projects-preview-grid{gap:1rem}.preview-project-image{height:140px}.preview-project-content{padding:1rem}.preview-project-title{font-size:1.1rem}.project-tech-icon{font-size:1.2rem}.explore-more-link{padding:.6rem 1.5rem;font-size:.9rem}.home_about{margin-top:2rem;padding:0 .5rem}.about_content{padding:1rem;gap:1.5rem;border-radius:10px}.about_image{width:120px;height:120px}.about_text h2{font-size:1.3rem}.about_text p{font-size:.9rem}.about_button{padding:.5rem 1rem;font-size:.9rem}}@media (max-width: 360px){.home-heading{font-size:1.3rem}.tech-icons{gap:1rem}.icon{font-size:2rem}.projects-preview-grid{grid-template-columns:1fr}.preview-project-image{height:130px}}footer{text-align:center;padding:10px;margin:0;font-size:15px}.about-container{min-height:100vh;padding:120px 2rem 4rem;display:flex;justify-content:center;align-items:flex-start;animation:fadeInContainer .6s ease}.about-content-wrapper{max-width:1200px;width:100%}.about-hero{animation:fadeInUp 1s ease .2s both}.about-title{font-size:3rem;font-weight:700;text-align:center;background:linear-gradient(270deg,#3498db,#2ecc71,#b3c2cb);background-size:600% 600%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientMove 10s ease infinite,slideDown .8s ease;margin-bottom:3rem}.about-bio-section{display:grid;grid-template-columns:350px 1fr;gap:3rem;background:#ffffff0d;padding:2.5rem;border-radius:15px;box-shadow:0 4px 12px #0000004d;margin-bottom:4rem}.about-image-wrapper{width:100%;height:400px;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px #0000004d}.about-main-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.about-image-wrapper:hover .about-main-image{transform:scale(1.05)}.about-story{display:flex;flex-direction:column;gap:1rem;color:#fff}.about-story-title{font-size:2rem;margin-bottom:.5rem;background:linear-gradient(90deg,#3498db,#2ecc71);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.about-story-text{font-size:1.05rem;line-height:1.8;color:#ffffffd9;text-align:justify;margin:0}.about-certifications{animation:fadeInUp 1s ease .4s both}.certifications-title{font-size:2.5rem;font-weight:700;text-align:center;color:#fff;margin-bottom:1rem}.certifications-subtitle{text-align:center;max-width:700px;margin:0 auto 3rem;font-size:1.05rem;line-height:1.7;color:#ffffffbf}.certifications-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem}.certification-card{background:#ffffff0d;border-radius:15px;padding:2rem;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 12px #0000004d;display:flex;flex-direction:column;gap:1.5rem;animation:fadeInCard .6s ease both;cursor:pointer;position:relative;overflow:hidden}.certification-card__overlay{position:absolute;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;pointer-events:none}.certification-card__overlay span{color:#fff;font-size:1rem;font-weight:600;padding:.8rem 1.5rem;border:2px solid white;border-radius:8px;transition:all .3s ease}.certification-card:hover .certification-card__overlay{opacity:1}.certification-card:hover .certification-card__overlay span{background:#fff;color:#000}.certification-card:nth-child(1){animation-delay:0s}.certification-card:nth-child(2){animation-delay:.1s}.certification-card:nth-child(3){animation-delay:.2s}.certification-card:nth-child(4){animation-delay:.3s}.certification-card:nth-child(5){animation-delay:.4s}.certification-card:nth-child(6){animation-delay:.5s}.certification-card:hover{transform:translateY(-8px);box-shadow:0 8px 24px #3498db4d}.certification-logo{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background:#ffffffe6;border-radius:10px;padding:1rem}.certification-logo img{max-width:100%;max-height:100%;object-fit:contain}.certification-content{display:flex;flex-direction:column;gap:.5rem}.certification-name{font-size:1.2rem;font-weight:600;color:#fff;margin:0}.certification-institution{font-size:1rem;color:#3498db;font-weight:500;margin:0}.certification-date{font-size:.9rem;color:#fff9;margin:0}.certification-skills{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}.skill-tag{background:#3498db33;color:#3498db;padding:.3rem .8rem;border-radius:20px;font-size:.85rem;font-weight:500;border:1px solid rgba(52,152,219,.3)}.certification-modal{position:fixed;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem;animation:fadeIn .3s ease}.certification-modal__content{background:#14141efa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease}.certification-modal__content::-webkit-scrollbar{width:8px}.certification-modal__content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:10px}.certification-modal__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.certification-modal__close{position:absolute;top:1rem;right:1rem;background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:10}.certification-modal__close:hover{background:#fff3;transform:rotate(90deg)}.certification-modal__header{display:flex;align-items:center;gap:1.5rem;padding:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.certification-modal__logo{width:80px;height:80px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:.8rem;flex-shrink:0}.certification-modal__logo img{max-width:100%;max-height:100%;object-fit:contain}.certification-modal__info{flex:1}.certification-modal__title{font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 .5rem;line-height:1.3}.certification-modal__institution{font-size:1.1rem;color:#3498db;font-weight:500;margin:0 0 .3rem}.certification-modal__date{font-size:.9rem;color:#fff9;margin:0}.certification-modal__body{padding:2rem;display:flex;flex-direction:column;gap:1.5rem}.certification-modal__description{font-size:1.05rem;line-height:1.7;color:#ffffffd9;margin:0}.certification-modal__skills{display:flex;flex-direction:column;gap:1rem}.certification-modal__skills-title{font-size:1.1rem;font-weight:600;color:#fff;margin:0}.certification-modal__skills-list{display:flex;gap:.6rem;flex-wrap:wrap}.certification-modal__skill-tag{background:#3498db33;color:#3498db;padding:.4rem 1rem;border-radius:20px;font-size:.9rem;font-weight:500;border:1px solid rgba(52,152,219,.3)}.certification-modal__button{display:block;text-align:center;padding:.9rem 2rem;background:linear-gradient(90deg,#3498db,#2ecc71);color:#fff;text-decoration:none;border-radius:10px;font-weight:600;font-size:1rem;transition:all .3s ease;margin-top:.5rem}.certification-modal__button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #3498db66}@media (max-width: 968px){.about-bio-section{grid-template-columns:1fr;gap:2rem}.about-image-wrapper{height:350px;margin:0 auto;max-width:400px}.about-story{text-align:center}.about-story-text{text-align:justify}}@media (max-width: 768px){.about-container{padding:100px 1.5rem 3rem}.about-title{font-size:2.5rem}.about-bio-section{padding:2rem}.about-story-title{font-size:1.7rem}.about-story-text{font-size:1rem}.certifications-title{font-size:2rem}.certifications-subtitle{font-size:1rem}.certifications-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}}@media (max-width: 480px){.about-container{padding:90px 1rem 2rem}.about-title{font-size:2rem}.about-bio-section{padding:1.5rem;gap:1.5rem}.about-image-wrapper{height:280px}.about-story-title{font-size:1.5rem}.about-story-text{font-size:.95rem;line-height:1.6}.certifications-title{font-size:1.7rem}.certifications-subtitle{font-size:.95rem;margin-bottom:2rem}.certifications-grid{grid-template-columns:1fr;gap:1.2rem}.certification-card{padding:1.5rem}.certification-logo{height:70px}.certification-name{font-size:1.1rem}.skill-tag{font-size:.8rem;padding:.25rem .6rem}}@media (max-width: 360px){.about-title{font-size:1.8rem}.about-image-wrapper{height:250px}.certification-card{padding:1.2rem}.certification-modal__content{max-width:95%;border-radius:15px}.certification-modal__close{width:36px;height:36px;top:.75rem;right:.75rem}.certification-modal__header{flex-direction:column;text-align:center;padding:1.5rem}.certification-modal__logo{width:70px;height:70px}.certification-modal__title{font-size:1.3rem}.certification-modal__institution{font-size:1rem}.certification-modal__body{padding:1.25rem}.certification-modal__description{font-size:.95rem}.certification-modal__skill-tag{font-size:.85rem;padding:.35rem .8rem}.certification-modal__button{padding:.75rem 1.5rem;font-size:.95rem}}.projects-container{min-height:100vh;padding:120px 2rem 4rem;display:flex;justify-content:center;align-items:center;animation:fadeInContainer .6s ease}@keyframes fadeInContainer{0%{opacity:0}to{opacity:1}}.projects-content{max-width:1200px;width:100%}.projects-title{font-size:3rem;font-weight:700;text-align:center;background:linear-gradient(270deg,#3498db,#2ecc71,#b3c2cb);background-size:600% 600%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientMove 10s ease infinite,slideDown .8s ease;margin-bottom:1.5rem}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.projects-description{text-align:center;max-width:800px;margin:0 auto 4rem;font-size:1.1rem;line-height:1.8;color:#fffc;animation:fadeInUp 1s ease .3s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin-top:3rem}.project-card{background:#ffffff0d;border-radius:15px;overflow:hidden;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 12px #0000004d;animation:fadeInCard .6s ease both}@keyframes fadeInCard{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.project-card:hover{transform:translateY(-8px);box-shadow:0 8px 24px #3498db4d}.project-card-image{position:relative;width:100%;height:220px;overflow:hidden}.project-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.project-card:hover .project-card-image img{transform:scale(1.1)}.project-card-overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.project-card:hover .project-card-overlay{opacity:1}.project-card-overlay span{color:#fff;font-size:1.1rem;font-weight:600;padding:.8rem 1.5rem;border:2px solid white;border-radius:8px;transition:all .3s ease}.project-card:hover .project-card-overlay span{background:#fff;color:#000}.project-card-content{padding:1.5rem}.project-card-title{font-size:1.3rem;font-weight:600;color:#fff;margin-bottom:1rem}.project-card-technologies{display:flex;gap:.8rem;flex-wrap:wrap}.tech-icon-wrapper{display:flex;align-items:center;justify-content:center}.tech-icon{font-size:1.5rem;transition:transform .3s ease}.tech-icon:hover{transform:scale(1.2)}.modal-overlay{position:fixed;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:1rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#14141efa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease}.modal-subtitle{font-size:.9rem;color:#9ca3af;margin-top:-6px;margin-bottom:12px}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:10px}.modal-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:10px}.modal-close{position:absolute;top:1rem;right:1rem;background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:10}.modal-close:hover{background:#fff3;transform:rotate(90deg)}.modal-image{width:100%;height:300px;overflow:hidden;border-radius:20px 20px 0 0}.modal-image img{width:100%;height:100%;object-fit:cover}.modal-body{padding:2rem;color:#fff}.modal-title{font-size:2rem;font-weight:700;margin-bottom:1rem;background:linear-gradient(90deg,#3498db,#2ecc71);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.modal-technologies{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.modal-tech-icon{font-size:2rem}.modal-description{font-size:1.05rem;line-height:1.8;color:#ffffffd9;margin-bottom:2rem;text-align:justify}.modal-links{display:flex;gap:1rem;flex-wrap:wrap}.modal-link{flex:1;min-width:150px;padding:.8rem 1.5rem;border-radius:10px;text-decoration:none;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .3s ease}.modal-link-github{background:#ffffff1a;color:#fff;border:2px solid rgba(255,255,255,.3)}.modal-link-github:hover{background:#fff;color:#000;transform:translateY(-2px)}.modal-link-live{background:linear-gradient(90deg,#3498db,#2ecc71);color:#fff}.modal-link-live:hover{box-shadow:0 4px 15px #3498db66;transform:translateY(-2px)}@media (max-width: 768px){.projects-container{padding:100px 1.5rem 3rem}.projects-title{font-size:2.5rem}.projects-description{font-size:1rem;margin-bottom:3rem}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.modal-content{max-width:90%}.modal-image{height:250px}.modal-body{padding:1.5rem}.modal-title{font-size:1.7rem}}@media (max-width: 480px){.projects-container{padding:90px 1rem 2rem}.projects-title{font-size:2rem}.projects-description{font-size:.95rem;line-height:1.6;margin-bottom:2rem}.projects-grid{grid-template-columns:1fr;gap:1.25rem}.project-card-image{height:180px}.project-card-content{padding:1.2rem}.project-card-title{font-size:1.1rem}.modal-overlay{padding:.5rem}.modal-content{max-width:95%;border-radius:15px}.modal-close{width:36px;height:36px;top:.75rem;right:.75rem}.modal-image{height:200px;border-radius:15px 15px 0 0}.modal-body{padding:1.25rem}.modal-title{font-size:1.5rem}.modal-technologies{gap:.8rem}.modal-tech-icon{font-size:1.6rem}.modal-description{font-size:.95rem}.modal-links{flex-direction:column}.modal-link{min-width:100%}}@media (max-width: 360px){.projects-title{font-size:1.8rem}.modal-title{font-size:1.3rem}.modal-description{font-size:.9rem}}.contact-section{text-align:center;padding:4rem 1rem;max-width:600px;margin:auto;animation:fadeInContainer .6s ease}.contact-title{font-size:2rem;margin-bottom:.5rem}.contact-subtitle{color:#9ca3af;margin-bottom:2rem}.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:2rem}.contact-links a{display:flex;align-items:center;gap:6px;color:#61dafb;text-decoration:none;transition:.2s}.contact-links a:hover{color:#fff}.contact-form{display:flex;flex-direction:column;gap:1rem}.contact-form input,.contact-form textarea{padding:.8rem;border:1px solid #333;border-radius:8px;background:#1e1e1e;color:#fff}.contact-form button{background:#61dafb;color:#000;font-weight:700;padding:.8rem;border:none;border-radius:8px;cursor:pointer;transition:.2s}.contact-form button:hover{background:#4dbce9}.sent-msg{color:#34d399;font-weight:700;margin-top:1rem}.preloader{position:fixed;top:0;left:0;width:100%;height:100vh;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeOut .5s ease 1.8s forwards}@keyframes fadeOut{to{opacity:0;visibility:hidden}}.preloader-content{display:flex;flex-direction:column;align-items:center;gap:2rem}.preloader-spinner{position:relative;width:120px;height:120px}.spinner-ring{position:absolute;width:100%;height:100%;border:4px solid transparent;border-radius:50%;animation:rotate 1.5s linear infinite}.spinner-ring:nth-child(1){border-top-color:#3498db;animation-delay:0s}.spinner-ring:nth-child(2){border-right-color:#2ecc71;animation-delay:.3s;width:90%;height:90%;top:5%;left:5%}.spinner-ring:nth-child(3){border-bottom-color:#b3c2cb;animation-delay:.6s;width:80%;height:80%;top:10%;left:10%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader-text{font-size:2rem;font-weight:700;background:linear-gradient(270deg,#3498db,#2ecc71,#b3c2cb);background-size:600% 600%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientMove 3s ease infinite;letter-spacing:2px}@keyframes gradientMove{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.preloader-dots{display:flex;gap:.5rem}.preloader-dots span{width:12px;height:12px;background:#3498db;border-radius:50%;animation:bounce 1.4s infinite ease-in-out}.preloader-dots span:nth-child(1){animation-delay:0s;background:#3498db}.preloader-dots span:nth-child(2){animation-delay:.2s;background:#2ecc71}.preloader-dots span:nth-child(3){animation-delay:.4s;background:#b3c2cb}@keyframes bounce{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}@media (max-width: 768px){.preloader-spinner{width:100px;height:100px}.preloader-text{font-size:1.5rem}.preloader-dots span{width:10px;height:10px}}@media (max-width: 480px){.preloader-spinner{width:80px;height:80px}.preloader-text{font-size:1.3rem}.preloader-dots span{width:8px;height:8px}}