.heroSection{grid-template-columns:1fr 1fr;align-items:center;gap:20px;max-width:1300px;margin:100px 70px auto;font-family:poppins;display:grid;overflow:hidden}.heroSection img{border:2px solid var(--accent);border-radius:50%;width:98%}.heroSection h1{margin-bottom:-25px;font-size:70px;font-weight:900;line-height:80px}.heroSection .title{margin-bottom:-5px;font-size:30px}.heroBreak{display:block}.heroButtons{width:180px}.heroButtons a{color:#000;text-decoration:none;transition:all .4s}.heroButtons button{background-color:var(--accent);color:#000;border:1px solid var(--accent);cursor:pointer;justify-content:center;align-items:center;gap:5px;width:180px;height:50px;font-size:18px;font-weight:800;transition:all .4s;display:flex}.heroButtons button:hover{color:#fff;background-color:#000}.heroButtons button:hover a{color:#fff}@media (min-width:500px) and (max-width:991px){.heroBreak{display:none}}@media (max-width:767px){.heroSection{gap:0;margin-right:0}.heroSection h1{font-size:50px;line-height:55px}.heroSection .title{margin-top:30px;font-size:20px}}@media (max-width:991px){.heroSection{flex-direction:column-reverse;justify-content:center;align-items:center;display:flex}.heroSection h1{font-size:50px}.heroSection .title{font-size:25px}}@media (min-width:992px) and (max-width:1199.98px){.heroSection{max-width:1050px}}@media (min-width:1200px) and (max-width:1366px){.heroSection{max-width:1300px;margin-top:80px}}@media (min-width:1367px){.heroSection{height:100vh;margin-top:10px}}
.container{max-width:1300px;margin:auto}@media (max-width:1366px){.container{max-width:1200px}}
footer{text-align:center;font-family:poppins}@media (max-width:470px){footer{margin-left:70px;margin-right:20px}}
.navbar{flex-direction:column;font-family:poppins;font-size:18px;display:flex}.topNavbar{z-index:998;background-color:var(--navbarBackground);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-between;align-items:center;width:100%;margin:auto;padding:10px 0;transition:all .4s ease-in-out;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}.topNavbar img{width:100%;padding-left:10px}.image{max-width:52px;transform:translateY(3px)}.darkButton{color:var(--accent);align-items:center;gap:5px;margin-right:10px;display:flex}.darkButton .darkToggleButton{overflow:visible!important}.navItemsTop{gap:20px;margin-top:10px;font-size:30px;display:flex}.navItemsTop a{color:var(--navItemColor);border-bottom:2px solid #0000;text-decoration:none;transition:all .4s ease-in-out}.navItemsTop a:hover{border-bottom:2px solid var(--accent);color:var(--accent);transform:translateY(-3px)}.leftNavbar{background-color:var(--navbarBackground);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:997;height:100vh;transition:all .4s ease-in-out;position:fixed;top:77px;left:0}.navItems{cursor:pointer}.navItems .active{border-right:2px solid var(--accent);color:var(--activeNavColor)}.navItems a{color:var(--navItemColor);writing-mode:vertical-lr;border-right:2px solid #0000;padding:20px;text-decoration:none;transition:all .4s ease-in-out;display:block}.navItems a:hover{border-right:2px solid var(--accent);color:var(--accent)}@media (max-width:767px){.topNavbar{align-items:center}.topNavbar img{width:80%;padding-left:10px}.navItemsTop{font-size:20px}.leftNavbar{font-size:14px;top:68.59px}}
.progress-circle{z-index:999;border-radius:50%;justify-content:center;align-items:center;display:flex;position:fixed}.progress-circle svg{transform:rotate(-90deg)}.progress-circle .bg{fill:none;stroke:var(--navbarBackground);stroke-width:2px}.progress-circle .indicator{fill:none;stroke:var(--navItemColor);stroke-width:2px}.up-arrow{z-index:999;color:var(--navItemColor);font-size:24px;position:fixed}
.about{max-width:1300px;margin:100px 70px auto;font-family:poppins}.about .commonHeading{font-size:70px;font-weight:900}.aboutContainer{grid-template-columns:1fr 1fr;align-items:center;gap:100px;display:grid}.aboutContainer img{border:2px solid var(--accent);border-radius:50%;width:100%}@media (max-width:767px){.about{margin-right:10px;padding-top:100px}.about .commonHeading{font-size:47px}}@media (max-width:991px){.about{padding-top:40px}.about .commonHeading{font-size:50px}.aboutContainer{flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}}
.skillsContainer{max-width:1300px;margin:150px 70px auto;font-family:poppins}.skillsContainer .commonHeading{justify-content:flex-end;font-size:70px;font-weight:900;display:flex}.skillsContainer h4{text-align:center;margin-top:-15px;margin-bottom:0}.skillContainer{text-align:center;grid-template-columns:repeat(4,1fr);margin:0 100px;display:grid}.skillContainer p{color:var(--accent);margin-bottom:0;font-size:40px}.logo{flex-direction:column;align-items:center;display:flex}@media (max-width:767px){.skillsContainer{margin-right:10px;padding-top:40px;padding-bottom:40px}.skillsContainer .commonHeading{justify-content:center;font-size:47px}.skillsContainer h4{font-size:14px}.skillContainer{margin:0;display:grid}.skillContainer p{font-size:20px}.skillContainer small{font-size:10px}}
.marquee-container{background-color:var(--accent);width:100%;margin-top:150px;padding:20px 0;font-family:poppins;font-weight:900;overflow:hidden}.marquee-content{white-space:nowrap;animation:600s linear infinite marqueeAnimation;display:inline-block}.marquee-content span{text-transform:uppercase;letter-spacing:5px;color:#0000;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#000;margin-right:5px;font-size:110px}@media (max-width:767px){.marquee-content span{font-size:35px}}@media (min-width:768px) and (max-width:991px){.marquee-content span{font-size:65px}}@keyframes marqueeAnimation{0%{transform:translate(0%)}to{transform:translate(-100%)}}
.experienceContainer{max-width:1300px;margin:150px 70px auto;font-family:poppins}.experienceContainer .commonHeading{font-size:70px;font-weight:900}.experienceContainer a{font-size:23px;font-weight:800}.experience{grid-template-columns:repeat(2,1fr);row-gap:40px;display:grid}.singleExperience{border-left:1px solid var(--accent);height:100%;padding:0 30px}.workplace{width:95%;line-height:20px}.flexDesign{align-items:center;gap:10px;display:flex}.place{border-bottom:1px solid var(--accent);align-items:center;gap:5px;padding-bottom:10px;display:flex}.place a{color:var(--color);text-decoration:none;transition:all .4s;position:relative}.place a:hover{color:var(--activeNavColor)}.place a:after{content:"";background-color:var(--color);width:0;height:1px;transition:all .4s;position:absolute;bottom:-5px;left:0}.place a:hover:after{width:100%}@media (max-width:767px){.experienceContainer{margin-right:10px;padding-top:40px}.experienceContainer .commonHeading{text-align:center;font-size:47px}.experienceContainer a{font-size:20px}.experience{grid-template-columns:repeat(1,1fr)}.singleExperience{border-left:none;padding:0}}
.projectsContainer{max-width:1300px;margin:150px 70px auto;font-family:poppins}.projectsContainer .commonHeading{justify-content:flex-end;font-size:70px;font-weight:900;display:flex}.projectsContainer h2{line-height:24px}.projectsContainer a{color:var(--accent);align-items:center;gap:5px;font-weight:bolder;text-decoration:none;transition:all .4s;display:flex;position:relative}.projectsContainer a:after{content:"";background-color:var(--accent);width:0;height:1px;transition:all .7s;position:absolute;bottom:-5px;left:0}.projectsContainer a:hover:after{width:100%}.projects{grid-template-columns:repeat(2,1fr);row-gap:40px;display:grid}.singleProject{border-left:1px solid var(--accent);height:100%;padding:0 30px}.projectHeader{border-bottom:1px solid var(--accent);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:5px;padding-bottom:8px;display:flex}.projectName{justify-content:space-between;align-items:center;gap:10px;display:flex}.technologiesContainer{flex-wrap:wrap;gap:6px;margin-top:20px;display:flex}.technologiesContainer li{background-color:var(--accent);color:var(--background);border-radius:25px;padding:3px 8px;font-size:12px;font-weight:600}.source{gap:10px;display:flex}.source a{color:var(--accent)}@media (max-width:767px){.projectsContainer{margin-right:10px;padding-top:40px}.projectsContainer .commonHeading{justify-content:center;font-size:47px}.projectsContainer h2{font-size:20px}.projects{grid-template-columns:repeat(1,1fr)}.singleProject{border-left:none;padding:0}}
.contactContainer{gap:30px;max-width:1300px;margin:auto 70px;padding-top:150px;padding-bottom:200px;font-family:poppins}.contactContainer .commonHeading{text-align:center;font-size:70px;font-weight:900}.contactContainer p{text-align:center;max-width:700px;margin:auto}.contactContainer a{color:#000;align-items:center;gap:5px;font-weight:800;text-decoration:none;transition:all .4s;display:flex}.contactContainer button{background-color:var(--accent);color:#000;border:1px solid var(--accent);cursor:pointer;justify-content:center;align-items:center;width:180px;height:50px;margin:auto;font-size:18px;font-weight:600;transition:all .4s;display:flex}.contactContainer button:hover{color:#fff;background-color:#000}.contactContainer button:hover a{color:#fff}.contact{flex-direction:column;justify-content:center;padding-top:30px;padding-bottom:50px;display:flex}@media (max-width:767px){.contactContainer{margin-right:8px;padding-top:250px}.contactContainer .commonHeading{font-size:47px}}@media (min-width:1367px){.contactContainer{height:700px;margin-top:100px;padding-bottom:0}}
.loading__container_true,.loading__container_false{background-color:var(--background);z-index:9999;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:40px;width:100%;height:100vh;max-height:100vh;transition:height .5s linear;display:flex;position:fixed;top:0;left:0}.loading__text{text-align:center}.loading__text h2{font-family:poppins;font-size:15px}.loading__text span{font-size:20px}.loading__container_false{height:0}.loading__container_false .loading__text{opacity:0;transition:opacity .15s linear}
