body{margin:0;font-family:Arial,sans-serif;background-color:#0c0c21;color:#fff;padding-top:40px}main{flex:1}section{scroll-margin-top:60px}footer{width:100%;text-align:center;padding:15px 0;background-color:#0c0c21;border-top:2px solid #f0b634}html,body{height:100%;width:100%;overflow-x:hidden!important;max-width:100vw!important}*{box-sizing:border-box;max-width:100vw!important}.container,.section{width:100%;max-width:100%;overflow-x:hidden!important}section h2{font-size:3rem;text-align:center;color:#f0b634;margin-bottom:20px}section#aboutme h2,section#experience h2,section#projects h2,section#contactme h2{font-size:3rem;color:#fff;text-align:center;margin-bottom:20px;max-width:80%}#aboutme p{max-width:800px!important;font-size:1.5rem;line-height:1.5;margin:20px auto;color:#fff}.navbar{position:fixed;top:0;left:0;width:100%;background-color:#0c0c21;z-index:1000;border-bottom:4px solid #f0b634}.nav-container{display:flex;align-items:center;justify-content:space-between;padding:15px 3%}.logo{font-size:20px;font-weight:700;color:#f0b634}.nav-links{display:flex;gap:20px}.nav-links a{text-decoration:none;color:#f0b634;font-size:16px;font-weight:700;transition:color .3s}.nav-links a:hover{color:#fff}.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;border:none;background:none}.hamburger span{display:block;width:25px;height:3px;background-color:#f0b634;transition:all .3s ease-in-out}.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}.mobile-nav{display:none;flex-direction:column;position:absolute;top:60px;right:10px;width:80%;max-width:250px;background-color:#0c0c21f2;text-align:center;padding:12px 0;border-radius:10px;box-shadow:0 4px 6px #00000080;opacity:0;transform:scale(.95);transition:opacity .3s ease,transform .3s ease}.mobile-nav.open{display:flex;opacity:1;transform:scale(1)}.mobile-nav a{font-size:1.2rem;padding:12px;color:#f0b634;text-decoration:none;transition:background .3s}.mobile-nav a:hover{background:#ffffff1a;border-radius:5px}@media (max-width: 768px){.hamburger{display:flex}.nav-links{display:none}}@media (max-width: 768px){h1,.typing{font-size:2rem!important;text-align:center;line-height:1.2;margin:0;padding:0}@media screen and (max-width: 768px){#about-me-gallery{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px!important;margin:0 auto;width:100%;text-align:center}.about-image{display:none}.about-image:nth-child(2),.about-image:nth-child(3){display:block;width:300px;max-width:250px!important;border-radius:30px}}@media (min-width: 1200px){#aboutme{max-width:800px!important;margin:0 auto;text-align:center}.experience-container{max-width:600px}.experience-card{max-width:550px}#about-me-gallery{width:80%;max-width:800px!important;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}}h2{font-size:1.4rem!important}.container,.section{padding:20px 10px}body{padding-top:30px}}.typing-container{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:#0c0c21;position:relative}.typing{display:inline-block;white-space:nowrap;overflow:hidden;max-width:fit-content;text-align:center;font-size:5rem;position:relative;animation:typing 2s steps(24,end) forwards}.typing:after{content:"|";position:relative;right:-3px;top:-5px;width:2px;height:1em;color:#f0b634;font-weight:700;animation:blink .8s step-end infinite}.typing.animate{width:100%;animation:typing 2s steps(24,end) forwards}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink{50%{opacity:0}}.fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s ease-out,transform .8s ease-out}.fade-in.visible{opacity:1;transform:translateY(0)}#about-me-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:30px;width:90%;max-width:900px!important;margin-left:auto;margin-right:auto}.about-image{width:100%;max-width:300px;border-radius:15px;object-fit:cover;box-shadow:0 4px 10px #f0b6344d;transition:transform .3s ease,filter .3s ease}.about-image:hover{transform:scale(1.1)!important;filter:brightness(1.2)!important}.about-image:nth-child(1){grid-column:1;grid-row-end:span 3;transform:translateY(40px)}.about-image:nth-child(2){grid-column:2;grid-row-end:span 2}.about-image:nth-child(3){grid-column:2;grid-row-end:span 2}.about-image:nth-child(5){grid-column:3;grid-row-start:1;grid-row-end:span 1;transform:translateY(40px)}.about-image:nth-child(6){grid-column:3;grid-row-end:span 1}.experience-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;max-width:400px;margin:0 auto}.experience-card{background-color:#1a1a1a;border-radius:10px;box-shadow:0 0 15px #f0b6344d;text-align:left;max-width:700px!important;width:100%;display:flex;flex-direction:column;align-items:center;padding:30px}.experience-card:hover{transform:translateY(-5px)}.experience-card h3{color:#f0b634;font-size:1.8rem;margin-bottom:5px;text-align:center}.company{color:#fff;font-size:1.2rem;margin-bottom:5px;text-align:center}.date{color:#fff;font-size:1rem;margin-bottom:10px;text-align:center}.experience-card ul{list-style-type:disc;padding-left:20px;text-align:center;margin-left:0}.experience-card b{color:#f0b634}.experience-card li{font-size:1.1rem;margin-bottom:5px;color:#fff;text-align:left}button{background-color:transparent;border:2px solid #f0b634;color:#f0b634;padding:10px 15px;text-transform:uppercase;font-weight:700;transition:all .3s ease-in-out;border-radius:5px}button:hover{background-color:#f0b634;color:#0c0c21;border-color:#fff}.projects-container{display:flex;flex-direction:column;gap:20px;max-width:700px!important;margin:0 auto}.project-card{background-color:#1a1a1a;padding:20px;border-radius:8px;box-shadow:0 0 15px #f0b6344d;transition:transform .3s ease}.project-card:hover{transform:translateY(-5px)}.project-card h3{color:#f0b634;font-size:1.8rem;margin-bottom:10px}.project-description{font-size:1.1rem;color:#fff;margin-bottom:10px}.tech-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;justify-content:center}.tech-badge{display:inline-block;padding:5px 10px;font-size:.9rem;font-weight:700;border-radius:12px;color:#0c0c21;background-color:#f0b634;text-transform:uppercase}.tech-badge.react{background-color:#61dbfb;color:#0c0c21}.tech-badge.vite{background-color:#646cff;color:#fff}.tech-badge.flask{background-color:#000;color:#fff}.tech-badge.api{background-color:#ff9800;color:#fff}.tech-badge.python{background-color:#3776ab;color:#fff}.tech-badge.node{background-color:#68a063;color:#fff}.tech-badge.express{background-color:#303030;color:#fff}.tech-badge.jwt{background-color:#fc0;color:#000}.project-links{margin-top:10px}.project-button{display:inline-block;padding:8px 15px;background-color:#f0b634;color:#09090f;text-decoration:none;font-weight:700;border-radius:5px;transition:background .3s ease-in-out}.project-button:hover{background-color:#fff;color:#09090f}.contact-container{display:flex;justify-content:center;gap:30px;margin-top:20px}.contact-icon{font-size:2.5rem;color:#f0b634;text-decoration:none;transition:transform .3s ease,color .3s ease}.contact-icon:hover{transform:scale(1.2);color:#fff}.language-stats{text-align:center;margin-top:50px;padding:20px;background-color:#0c0c21;color:#f0b634;border-top:2px solid #f0b634}.language-stats h3{font-size:1.5rem;margin-bottom:10px}.language-bar{display:flex;height:12px;border-radius:5px;overflow:hidden;width:80%;margin:10px auto}.language-segment{height:100%}.language-list{list-style:none;padding:0;margin-top:10px}.language-list li{display:inline-block;margin:0 15px;font-size:1rem}.language-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px}.scroll-indicator{font-size:2.5rem;color:#f0b634;text-align:center;position:absolute;bottom:10rem;left:50%;transform:translate(-50%);opacity:0;animation:fadeIn 1s ease-in-out 1s forwards,bounce 1s infinite alternate;cursor:pointer}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes bounce{0%{transform:translate(-50%) translateY(0)}to{transform:translate(-50%) translateY(10px)}}.hidden{opacity:0;pointer-events:none}
