@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.particles-container{position:relative;width:100%;height:100%}.StartAnimation{display:flex;position:absolute;width:100%;height:100vh;overflow:hidden}.StartAnimation>div{height:100vh;width:20%;flex-wrap:1;z-index:1000;background-color:#00b4d8}html{scroll-behavior:smooth}.App{display:flex;flex-direction:column;position:relative;gap:40px;padding-bottom:150px}.AppBackGround1{width:99.5%;height:100vh;position:absolute}.FontHead{font-family:Space Grotesk,sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal;color:#fff}.FontNormal{font-family:Inter,sans-serif;font-optical-sizing:auto;font-weight:300;font-style:normal;color:#fff}.Hemail{position:fixed;top:60%;left:-130px;rotate:90deg;font-size:1.2em;color:#00b4d8;opacity:.8}.Hemail:hover{cursor:pointer;opacity:1}.ScrollBar{width:5px;height:120px;position:fixed;left:98%;top:250px;border-radius:5px;background-color:#303030}.ScrollBar>div{width:100%;border-radius:inherit;background-color:#00b4d8}.AMidSec{width:90%;align-self:center;height:300px;display:flex;justify-content:center;align-items:center;margin-bottom:50px}.AMidText{font-size:3.5em;text-align:center;color:#00b4d8}@media screen and (max-width:710px){.Hemail{display:none}.AMidText{font-size:3em}}@media screen and (max-width:600px){.AMidText{font-size:2.5em}}@media screen and (max-width:450px){.AMidText{font-size:2em}}.Contact{margin-top:40px;display:flex;flex-direction:column;gap:20px;width:90%;align-items:center;align-self:center;text-align:center}.Contact h1{font-size:3em}.Contact h2{font-size:1.5em}@media screen and (max-width:450px){.Contact{font-size:.9em}}.HeroSection{align-self:center;height:98vh;width:90%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:40px}.HSection1{display:flex;flex-direction:column;gap:30px;max-width:600px}.HSection1 h1{font-size:3.5em}.HSection1 h4{line-height:30px;font-size:1.2em;opacity:.8}.button{height:50px;width:200px;position:relative;background-color:transparent;cursor:pointer;border:2px solid #00B4D8;overflow:hidden;border-radius:5px;color:#00b4d8;transition:all .5s ease-in-out}.btn-txt{z-index:1;letter-spacing:2px;font-family:Space Grotesk,sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal;font-size:1.2em}.type1:after{content:"";position:absolute;left:0;top:0;transition:all .5s ease-in-out;background-color:#00b4d8;border-radius:30px;visibility:hidden;height:10px;width:10px;z-index:-1}.button:hover{box-shadow:1px 1px 200px #252525;color:#fff;border:none}.type1:hover:after{visibility:visible;transform:scale(100) translate(2px)}.HSection2{display:flex;flex-direction:column;gap:10px;align-self:flex-end;margin-bottom:40px;gap:50px;flex-wrap:wrap;text-align:end}.HSection2>div{display:flex;flex-direction:column;gap:10px}.HSection2 h1{font-size:2.8em;color:#00b4d8}.HSection2 h4{font-size:1.1em;opacity:.8}@media screen and (max-width:900px){.HeroSection{justify-content:center;margin-top:100px}.HSection2{flex-direction:row;justify-content:center;text-align:center}}@media screen and (max-width:610px){.HeroSection{font-size:.9em}}@media screen and (max-width:500px){.HeroSection{font-size:.8em;text-align:center}}.Navbar{position:fixed;right:30px;top:20px;display:flex;flex-direction:column;z-index:500;height:90vh;gap:30px;align-items:center;width:70px}.Navbar>svg:hover{cursor:pointer;scale:1.04}.Navbar>div{width:100%;height:70%;border-radius:20px;background:#7b7a7a73;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(42,41,41,.225);display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding-left:1px;padding-right:4px}.Navbar>div div{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:50px;height:50px;border-radius:20px;padding:8px;opacity:.8}.Navbar>div div:hover{background-color:#01404e;cursor:pointer}.Navbar>div>div h4{font-size:.7em}.Project{display:flex;flex-direction:column;gap:40px;width:90%;align-self:center}.Project>div:nth-child(1){display:flex;gap:10px;align-items:center}.Project>div:nth-child(1) h1{font-size:1.7em}.pSection{display:flex;flex-direction:column;gap:10px;width:100%;border-bottom:1px solid rgb(67,66,66);padding-bottom:20px;margin-bottom:30px}.pSection:hover{cursor:pointer}.pSection h1{font-size:2.5em;transition:all .5s}.pSection h1:hover{color:#0a88a1}.pSection svg:hover{cursor:pointer;scale:1.04}.pSection>div{display:flex;align-items:center;gap:10px}.pTag{background-color:#303030;padding:5px 8px;border-radius:5px}.ProjectView{height:80vh;margin-top:10vh;width:90%;align-self:center;z-index:100000;background-color:#1b1b1b;position:fixed;border-top-left-radius:50px;border-top-right-radius:50px;padding:50px;display:flex;flex-direction:column;gap:20px;overflow:scroll}.ProjectView::-webkit-scrollbar{display:none}.CloseButton{background-color:inherit;border:none;position:absolute;right:30px;top:30px;opacity:.7}.CloseButton:hover{opacity:1;cursor:pointer;scale:1.04}.ProjectView h1{font-size:2em}.PVContainer{display:flex;gap:40px;flex-wrap:wrap}.PVContainer>div:nth-child(1){width:50%;display:flex;flex-direction:column;gap:30px;flex-grow:1}.PVContainer>div:nth-child(2){display:flex;flex-direction:column;gap:20px}.PVContainer>div:nth-child(2)::-webkit-scrollbar{display:none}.PVContainer img{max-width:500px;max-height:350px;min-width:300px;min-height:210px;margin-bottom:100px;padding:10px;border:1px solid white;border-radius:10px}.PVContent>div:nth-child(1){display:flex;gap:10px;align-items:center}.PVContent>div:nth-child(1) svg:hover{cursor:pointer;scale:1.04}.PVContent h2{color:#fff;font-size:1.4em}.PVContent>div:nth-child(2){display:flex;flex-direction:column;gap:10px}.PVContent>div:nth-child(3){display:flex;flex-direction:column;gap:10px}.PVContent>div:nth-child(3)>div{display:flex;gap:20px;flex-wrap:wrap}.PVContent>div:nth-child(4){display:flex;flex-direction:column;gap:10px}@media screen and (max-width:400px){.Project{font-size:.9em}}.loader{width:40px;aspect-ratio:1;color:#0a88a1;--_c:no-repeat radial-gradient(farthest-side,currentColor 92%,#0000);background:var(--_c) 50% 0 /12px 12px,var(--_c) 50% 100%/12px 12px,var(--_c) 100% 50%/12px 12px,var(--_c) 0 50%/12px 12px,var(--_c) 50% 50%/12px 12px,conic-gradient(from 90deg at 4px 4px,#0000 90deg,currentColor 0) -4px -4px/ calc(50% + 2px) calc(50% + 2px);animation:l8 3s infinite linear}@keyframes l8{to{transform:rotate(.5turn)}}.Skill{display:flex;flex-direction:column;gap:20px;width:90%;align-self:center}.Skill>div:nth-child(1){display:flex;gap:10px;align-items:center}.Skill>div:nth-child(1) h1{font-size:1.7em}.SkillSection{display:flex;flex-wrap:wrap;width:100%;gap:40px;justify-content:space-between;margin-bottom:150px}.SkillSection>h1{font-size:3em}.SkillSection>div{align-self:center;display:flex;gap:50px;flex-wrap:wrap;max-width:800px;flex-grow:1;justify-content:center}.SkillSection h4{font-size:1.7em}.SkillSection>div>div{display:flex;align-items:center;gap:10px}.SkillSection>div img{height:50px;border-radius:10px}@media screen and (max-width:800px){.Skill{font-size:.9em}}@media screen and (max-width:500px){.Skill{font-size:.8em}.SkillSection>div img{height:40px}}@media screen and (max-width:400px){.Skill{font-size:.7em}}body{background-color:#212121}body::-webkit-scrollbar{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}