:root{--navy: #09192e;--light-navy: #112240;--green: #64ffda;--slate: #8892b0;--light-slate: #a8b2d1;--white: #e6f1ff;--light-blue: #233554}html{scroll-behavior:smooth}body{margin:0;background-color:var(--navy);color:var(--slate);font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.3}.green-text{color:var(--green)}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-fade-up{opacity:0;animation:fadeUp .5s cubic-bezier(.645,.045,.355,1) forwards}@media(max-width:768px){html,body{overflow-x:hidden!important;width:100%!important}.hero-container,.about-container,.experience-container,.projects-container,.contact-container{padding:80px 20px!important;height:auto!important;min-height:auto!important;box-sizing:border-box!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .about-title,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .experience-title,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .projects-title{white-space:normal!important;font-size:24px!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .about-title:after,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .experience-title:after,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .projects-title:after{display:none!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .description-text,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .about-description,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .job-description,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .contact-container p{width:100%!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .projects-content{margin:0!important;max-width:100%!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .project-box,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .project-box.reverse{display:flex!important;flex-direction:column!important;margin-bottom:80px!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .project-pic,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .project-box.reverse .project-pic{width:100%!important;margin:0!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .project-about,:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .project-box.reverse .project-about{position:relative!important;width:100%!important;top:auto!important;right:auto!important;left:auto!important;transform:none!important;align-items:flex-start!important;text-align:left!important;margin-top:20px!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .project-description{width:100%!important;background-color:transparent!important;padding:10px 0!important;margin-top:-5px!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .project-title{margin-bottom:0}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .about-inner{flex-direction:column!important;gap:40px!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .about-photo{width:100%!important;max-width:300px!important;margin:0 auto!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) ul{flex-wrap:wrap!important;padding-left:0!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .about-skills ul{margin-left:20px!important}:is(.hero-container,.about-container,.experience-container,.projects-container,.contact-container) .contact-description{font-size:15px!important;width:100%!important}}