*{box-sizing:border-box;padding:0;margin:0;transition:all 1s ease-in-out}html{font-size:64%;scroll-behavior:smooth}li,ul{list-style:none}a{text-decoration:none;color:inherit}img,svg{width:100%;height:100%;object-fit:cover}button{outline:none}.container{max-width:1200px;width:90%;margin:0 auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background-color:#d5d5d5;border-radius:20px}::-webkit-scrollbar-track{background-color:#fff;border-radius:20px}body{font-family:Poppins,sans-serif;background-color:#fff;color:rgb(var(--foreground-rgb))}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.nav{z-index:100;top:0;left:0;width:100%;height:8rem;padding:1rem 0;background-color:#ffffffd4;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:fixed;box-shadow:0 0 15px #0000001a}#darkmode .nav{background-color:#0000007a;box-shadow:0 0 15px #ffffff34}.navItems{max-width:1200px;margin:0 auto;width:90%;text-align:center}.nav__li{display:inline-block;border-radius:8px;font-weight:800}.nav__li a:hover{color:#086bff;-webkit-text-decoration:underline 5px;text-decoration:underline 5px;transition:.5s}.nav__li a{display:inline-block;padding:1rem 2rem;font-size:2rem;color:#2d2e32;outline:none}#darkmode .nav__li a{color:#fafafa}#darkmode .nav__li a:hover,.active{color:#086bff}.mobile__menu__icon{position:absolute;right:1rem;top:1rem;width:4rem;cursor:pointer;display:none;outline:none;color:#2d2e32;transition:0s;z-index:10}#darkmode .mobile__menu__icon{color:#fafafa}@media only screen and (max-width:900px){.nav{padding:0;height:6rem}#hide__item{transform:translateY(-106%)}.mobile__menu__icon{display:block}.navItems{transition:transform .3s ease;background-color:#fff;box-shadow:0 0 15px #00000048;padding:2rem;width:90%;max-width:300px;border-radius:12px;border-top-right-radius:0;border-top-left-radius:0;position:absolute;right:6rem;top:0;z-index:10}#darkmode .navItems{background-color:#070707;box-shadow:0 0 15px #ffffff34}.closeNavIcon{display:block;width:3rem;margin:0 0 0 auto;cursor:pointer}.nav__li{display:block;margin-bottom:1rem}}.hero{background-color:#f9f9f9;display:flex;flex-direction:column;height:auto;position:relative;width:100%;padding-bottom:10rem}#darkmode .hero{background-color:#000000e5}.hero__container{margin:0 auto;max-width:107rem;padding:0 4rem}.hero__content{height:65rem}.hero__content,.hero__main{align-items:center;display:flex;gap:10rem;justify-content:center;position:relative}.hero__text{display:flex;flex-direction:column;max-width:50rem;position:relative}.hero__image{background-image:url(/_next/static/media/Joa.2dfa37d0.jpeg);background-position:50%;background-repeat:no-repeat;background-size:cover;border:3px solid #2d2e32;height:35rem;width:35rem;animation:morph 7s ease-in-out infinite}#darkmode .hero__image{border:3px solid #fafafa}.hero__text h1{color:#2d2e32;font-size:5.5rem;line-height:1.2;margin-bottom:2rem;margin-top:2rem}.hero__icon-button{color:#2d2e32;transition:0s;font-size:3rem;padding:0}#darkmode .hero__icon-button,#darkmode .hero__text h1{color:#fafafa}.hero__text img{position:absolute;right:13rem;top:8.7rem;width:6rem;height:6rem}.hero__text p{color:#767676;font-family:Mulish,sans-serif;font-size:1.8rem;font-weight:500;line-height:1.6}#darkmode .hero__text p{color:#dcdcdc}.hero__text span{cursor:pointer;gap:1.3rem;display:flex;margin:2.5rem 0}#hero__button{border-radius:.4rem;border:.3rem solid #2d2e32;color:#2d2e32;font-size:2rem;padding:.5rem;margin-left:.5rem}#darkmode #hero__button{border:.3rem solid #fafafa;color:#fafafa}.hero__text span a:hover{transform:scale(1.1);transition:all .5s ease-in-out}.skills{align-items:center;bottom:1rem;display:flex;font-size:1.7rem;left:0;position:absolute}.skills p{border-right:3px solid rgba(45,46,50,.5);color:#2d2e32;font-weight:600;margin-right:7rem;padding-right:2rem}#darkmode .skills p{color:#fafafa;border-color:#fafafa}.skills ul{display:flex;flex-wrap:wrap;gap:2.5rem;list-style:none}.skills ul li{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.09);display:flex;height:6.5rem;justify-content:center;width:6.5rem}.hero__icon{height:auto;width:3.9rem}@media only screen and (max-width:900px){.hero{height:auto;padding:11rem 0}.hero__content{flex-direction:column}.hero__content,.hero__main{gap:3rem;height:auto;text-align:center}.hero__main{flex-direction:column-reverse}.hero__text img{right:3rem}.hero__text p{margin-bottom:5rem}.hero__text span{gap:1.6rem;justify-content:center;margin-bottom:4rem;margin-top:-2rem}.hero__text span a{font-size:3rem}.skills{flex-direction:column;position:static}.skills p{border-bottom:2px solid rgba(45,46,50,.5);border-right:none;margin-bottom:3rem;margin-right:0;padding-bottom:1rem;padding-right:0}.skills ul{justify-content:center}}@media only screen and (max-width:500px){.hero__image{height:28rem;width:28rem}.hero__container{padding:0 1.7rem}.hero__text h1{font-size:4rem}.hero__text img{right:2rem;top:6.4rem;width:4.5rem;height:4.5rem}}.about{padding:15rem 0;background-color:#fff}#darkmode .about{background-color:#000000f3}.about__container{margin:0 auto;max-width:107rem;padding:0 4rem}.about__content{align-items:center;display:grid;grid-template-columns:1fr 1fr;justify-content:center}.img__side{position:relative}.img__side__main-img{background-image:url(/_next/static/media/Joa.2dfa37d0.jpeg);background-position:50%;background-repeat:no-repeat;background-size:cover;border:3px solid #2d2e32;height:45rem;width:35rem;animation:morph 7s ease-in-out infinite}#darkmode .img__side__main-img{border:3px solid #fafafa}.text__side{padding-right:1.5rem}.text__side h4{color:#147efb;font-size:3.6rem;font-weight:700;margin-bottom:1rem;text-transform:uppercase}.text__side h3{color:#2d2e32;font-size:2rem;line-height:1.4;margin-bottom:2rem}#darkmode .text__side h3{color:#fafafa}.text__side p{color:#767676;font-family:Mulish,sans-serif;font-size:1.8rem;line-height:1.5}#darkmode .text__side p{color:#dcdcdc}.about__info__item{margin:10rem auto;max-width:107rem;padding:0 4rem}.about__info__heading{font-size:3.6rem;text-transform:uppercase;color:#147efb}@keyframes morph{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}to{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}}@media only screen and (max-width:1020px){.about__container{padding:0 1.7rem}.about__content{grid-template-columns:1fr;text-align:center}.img__side__main-img{margin-bottom:3.5rem;width:auto}.text__side{margin:0 auto;max-width:54rem}.about__info__heading{font-size:3rem;text-align:center}}@media only screen and (max-width:460px){.img-side__main-img{height:auto;width:90%}}#projects{padding:10rem 0;background-color:#f9f9f9;text-align:center}#darkmode #projects{background-color:#000000e5}#projects h2{color:#147efb;font-size:3.6rem}#projects P{color:#767676;font-family:Mulish,sans-serif;font-size:1.8rem;margin-bottom:2rem}#darkmode #projects P{color:#dcdcdc}.project__img{height:20rem;object-fit:contain;cursor:pointer;padding-top:1rem}.projectItem__info{padding:1rem;border-radius:12px;cursor:pointer;position:relative}.projectItem__title{font-size:2.2rem;text-align:center;color:#2d2e32}#darkmode .projectItem__title{color:#fafafa}.projectItem__desc{font-size:1.6rem;font-family:Mulish,sans-serif;margin-top:1rem;text-align:center}@media only screen and (max-width:1050px){.project__img{height:14rem}.projectItem__title{font-size:1.9rem}.projectItem__desc{font-size:1.4rem}}.contactBanner__wrapper{background-color:#fff;box-shadow:0 0 15px #0000001a;padding:5rem;text-align:center;color:#2d2e32}#darkmode .contactBanner__wrapper{background-color:#000000f3;box-shadow:0 0 15px #ffffff1a;color:#fafafa}.contactBanner__wrapper h3{font-size:4rem;transition:0s}.contacBanner__button{border:none;color:#086bff;cursor:pointer;background-color:#fff;border-radius:50%;box-shadow:0 0 10px #0000001a;padding:1.5rem}#darkmode .contacBanner__button{background-color:#2d2e32;box-shadow:0 0 7px #ffffffc3}.contactBanner__wrapper button:hover{transform:scale(1.1);transition:all .5s ease-in-out}.contactBanner__wrapper p{max-width:500px;font-size:1.8rem;line-height:1.3em;color:#767676;font-family:Mulish,sans-serif;margin:0 auto 2rem}#darkmode .contactBanner__wrapper p{color:#dcdcdc}.contactbanner__icon{width:9rem}@media only screen and (max-width:768px){.contactBanner__wrapper h3{font-size:2.4rem}.contactBanner__wrapper p{font-size:1.2rem}.contactbanner__icon{width:6rem}}#contactComponent h2{color:#147efb;font-size:3.6rem;margin-top:2rem;text-transform:uppercase}.contact__boxItem{padding:2rem;background-color:#fff;gap:2rem;border-radius:8px;margin-bottom:2rem}.contact__boxItem,.contact__icon{box-shadow:0 0 10px rgba(0,0,0,.09);display:flex;align-items:center}.contact__icon{padding:1.3rem;justify-content:center;border-radius:50%;background-color:#fafafa}#darkmode .contact__boxItem{background-color:#000000ae;box-shadow:0 0 15px #ffffff34}.icon-c{width:32px}.contactSection__wrapper{display:flex;gap:5rem;margin-top:7rem;justify-content:space-between;position:relative}.contactSection__wrapper:after{position:absolute;content:"";width:2px;height:50%;background-color:#2d2e32;left:50%;top:30%;transform:translate(-50%,-50%)}.left,.right{width:100%;max-width:500px}.right{border-radius:12px}.contact-form{width:100%}.form-group{width:100%;margin-bottom:2rem}.contact-label{font-size:2rem;font-family:Mulish,sans-serif;color:#222}#darkmode .contact-label{color:#fafafa}.input-textarea{width:100%;font-size:2rem;padding:1.2rem;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.09);outline:none;border:none;margin-top:1rem;border-radius:8px}textarea{min-height:250px;resize:vertical}#darkmode .input-textarea{background-color:#000000ae;color:#fafafa;box-shadow:0 0 15px #ffffff34}.contact-form button{background-color:#086bff;color:#fff;font-size:2rem;font-weight:900;display:inline-block;width:90%;padding:1.5rem 0;outline:none;border:none;border-radius:0;cursor:pointer;border-radius:8px;transition:all .5s ease-in-out}.contact__boxItem a{font-size:1.4rem}.contact__text{font-size:1.7rem;line-height:1.3em;color:#222}#darkmode .contact__text{color:#fafafa}@media only screen and (max-width:1050px){.contact__comeBack{position:absolute;left:3rem;top:3rem;padding:1rem 2rem}.container__contact{margin:1rem}.section__title p{font-size:1.4rem}.contactSection__wrapper{flex-direction:column}.contactSection__wrapper:after{display:none}.left,.right{max-width:100%}.right{padding:4rem 2rem 2rem}.contact__text{font-size:1.4rem;line-height:1.3em}.contact__boxItem a{font-size:1rem}}.btn{background:#c1dee8;width:8em;height:4em;border-radius:10em;padding:0 .5em;box-shadow:inset 0 0 20px 0 rgba(0,0,0,.43);-webkit-box-shadow:inset 0 0 20px 0 rgba(0,0,0,.43);-moz-box-shadow:inset 0 0 20px 0 rgba(0,0,0,.43);position:absolute;top:20px;right:30px;display:flex;align-items:center;cursor:pointer}.btn__indicator{background-color:#fafafa;width:3em;height:3em;border-radius:50%;position:absolute;box-shadow:0 8px 40px rgba(0,0,0,.2)}.btn__icon-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.btn__icon{color:#e8d90f;width:70%;height:70%}.btn__icon .animated{animation:spin .5s}@keyframes spin{to{transform:rotate(1turn)}}#darkmode .btn{background:#514980;box-shadow:inset 0 0 20px 0 rgba(0,0,0,.69);-webkit-box-shadow:inset 0 0 20px 0 rgba(0,0,0,.69);-moz-box-shadow:inset 0 0 20px 0 rgba(0,0,0,.69)}#darkmode .btn__indicator{transform:translateX(4em);background-color:#222;box-shadow:0 8px 40px rgba(0,0,0,.3)}#darkmode .btn__icon{color:#beb7f2}@media screen and (max-width:768px){.btn{top:10px;left:10px}}.select{position:absolute;width:auto;height:auto;top:20px;left:30px;align-items:center;display:flex}.select select{padding:1rem .5rem;width:auto;background-color:#fafafa;box-shadow:inset 0 0 20px 0 rgba(0,0,0,.43);-webkit-box-shadow:inset 0 0 20px 0 rgba(0,0,0,.43);-moz-box-shadow:inset 0 0 20px 0 rgba(0,0,0,.43);border:none;border-radius:.5rem;outline:none;cursor:pointer;height:auto}#darkmode .select select{background-color:#3e3e3e;box-shadow:inset 0 0 20px 0 rgba(0,0,0,.69);-webkit-box-shadow:inset 0 0 20px 0 rgba(0,0,0,.69);-moz-box-shadow:inset 0 0 20px 0 rgba(0,0,0,.69);color:#fafafa}.select img{width:30px;height:30px;margin-right:.5rem}.select option{font-weight:700;font-size:1.5rem}@media screen and (max-width:768px){.select{top:10px;left:0;width:100%;justify-content:center}}