App.css body,html{scroll-behavior:smooth;margin:0;padding:0;font-family:Arial,sans-serif}.App{color:#fff;background-color:#0f172a}.navbar{z-index:1000;background:#0f172a;width:100%;padding:10px 20px;position:fixed;top:0;left:0}.nav-container{justify-content:space-between;align-items:center;display:flex}.nav-links{padding-right:50px}.nav-links a{color:#fff;cursor:pointer;margin-left:30px;text-decoration:none}.nav-links a:hover{color:#00bcd4}.skills-list{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}@media (width<=768px){.nav-container{text-align:center;display:inline}.nav-links{margin-right:20px;padding-right:10px}.nav-links a{margin-left:10px}}.home-section{background-color:#01b586;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:100px 10%;display:flex}.home-content{max-width:550px}.home-content h1{margin-bottom:10px;font-size:3rem}.home-content h3{margin-bottom:20px;font-size:1.5rem;font-weight:500}.home-content p{margin-bottom:30px;font-size:1rem;line-height:1.7}.work{cursor:pointer;background-color:#fff;border:none;border-radius:6px;margin:10px;padding:12px 28px;font-size:1rem;transition:all .3s}.work a{color:#000;text-decoration:none}.work:hover{background-color:#475569;transform:translateY(-2px)}.profile-pic img{border:6px solid #475569;border-radius:50%;width:320px;height:320px;animation:4s ease-in-out infinite float;box-shadow:0 0 40px #38bdf84d}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}@media (width<=900px){.home-section{text-align:center;flex-direction:column}.home-content{margin-bottom:40px}.profile-pic img{width:250px;height:250px}}.about-section{text-align:center;padding:80px 10%}.about-section h2{margin-bottom:25px;font-size:36px;position:relative}.about-section h2:after{content:"";border-radius:2px;width:70px;height:4px;margin:10px auto 0;display:block}.about-section p{max-width:750px;margin:auto;font-size:18px;line-height:1.7}.about-me{text-align:center;padding:60px 10%}.about-me h1{margin-bottom:20px;font-size:30px}.about-me p{max-width:750px;margin:auto;font-size:17px;line-height:1.7}.Exp-Edu{text-align:center;grid-template-columns:1fr;gap:50px;padding:60px 10%;display:grid}.Experience h1,.Education h1{text-align:center;margin-bottom:25px;font-size:26px}.Experience div,.qualification{color:#000;background:#fff;border-radius:8px;margin-bottom:20px;padding:20px;font-weight:bolder;box-shadow:0 6px 15px #00000014}.title{color:#031f67;font-size:20px;font-weight:600}.company{margin-top:5px;font-size:15px}.year{margin-top:4px;font-size:14px}.qualification h1{color:#031f67;margin-bottom:5px;font-size:18px}@media (width<=768px){.Exp-Edu{grid-template-columns:1fr}.about-me h1{font-size:26px}}.skills-section{text-align:center;padding:80px 10%}.skills-section h2{margin-bottom:50px;font-size:36px}.frontEnd,.framework,.others,.technical{background:#fff;border-radius:10px;padding:25px;box-shadow:0 8px 18px #00000014}.skills-section{grid-template-columns:repeat(2,1fr);gap:30px;display:grid}.skills-section h2{grid-column:span 2}.frontEnd h1,.framework h1,.others h1,.technical h1{color:#031f67;margin-bottom:10px;font-size:20px}.frontEnd h3,.framework h3,.others h3,.technical h3{color:#000;font-size:16px;font-weight:bolder;line-height:1.6}.frontEnd:hover,.framework:hover,.others:hover,.technical:hover{transition:all .3s;transform:translateY(-5px)}.skills-section h3{flex-wrap:wrap;gap:10px;display:flex}.skills-section h3 span{background:#38bdf826;border-radius:20px;padding:6px 12px;font-size:.9rem}@media (width<=768px){.skills-section{grid-template-columns:1fr}.skills-section h2{grid-column:span 1}}.projects-section{color:#f8fafc;text-align:center;background-color:#0f172a;padding:4rem 2rem}.projects-section h2{margin-bottom:2rem;font-size:2.5rem}.project{flex-wrap:wrap;justify-content:center;gap:2rem;display:flex}.project>div{background-color:#1e293b;border-radius:1rem;flex-direction:column;flex:300px;justify-content:space-between;max-width:350px;padding:1.5rem;transition:transform .3s,box-shadow .3s;display:flex}.project>div h2{color:#f8fafc;margin-bottom:.5rem;font-size:1.5rem}.project>div p:first-of-type{color:#60a5fa;margin-bottom:.5rem;font-weight:500}.project>div p:nth-of-type(2){margin-bottom:1rem;font-size:.95rem;line-height:1.4}.links{justify-content:space-between;display:flex}.gitlink,.livelink{color:#f8fafc;border-radius:.5rem;margin-right:.5rem;padding:.5rem 1rem;font-weight:500;text-decoration:none;transition:background .3s;display:flex}.gitlink{background-color:#334155;padding:10px 30px}.gitlink:hover{background-color:#475569}.livelink{background-color:#3b82f6}.livelink:hover{background-color:#2563eb}.project>div{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:20px;transition:all .4s}.project>div:hover{transform:rotateX(5deg)rotateY(5deg)scale(1.03);box-shadow:0 25px 50px #0006}.project>div:before{content:"";opacity:0;pointer-events:none;background:linear-gradient(120deg,#0000,#38bdf833,#0000);transition:all .4s;position:absolute;inset:0}.project>div:hover:before{opacity:1}.project>div:hover{transform:translateY(-8px)}@media (width<=768px){.project{flex-direction:column;align-items:center}}.contact-section{text-align:center;padding:80px 10%}.contact-section h2{margin-bottom:40px;font-size:36px}.contact-form{flex-direction:column;gap:15px;max-width:500px;margin:auto;display:flex}.contact-form input,.contact-form textarea{border:1px solid #ccc;border-radius:6px;padding:12px;font-size:16px}.contact-form textarea{resize:none}.contact-form button{color:#fff;cursor:pointer;background-color:#3b82f6;border:none;border-radius:6px;padding:12px;font-size:16px;transition:all .3s}.contact-form button:hover{background:#3730a3}.details p,.message{font-size:20px}.footer-box{justify-content:space-between;padding:20px;display:flex}.social-link a{color:#fff;padding:10px;font-size:20px}.social-link a :hover{color:gray}@media (width<=768px){.footer-box{text-align:center;display:inline}}