*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}:root{--primary-main-color: #232323;--primary-color: #333333;--text-blue-current: #1e90ff;--text-white: #fff;--primary-font: "Inter", sans-serif;--secondary-font: "Poppins", sans-serif;--heading-font: "Montserrat", sans-serif;--body-font: "Open Sans", sans-serif}body{font-family:var(--primary-font);color:var(--text-white)}.header-parent{background-color:var(--primary-color);display:flex;justify-content:space-between;align-items:center;height:80px;padding:0 40px;color:var(--text-white);position:sticky;top:0;z-index:10}.header-parent .header-logo img{border-radius:50%;width:60px;height:60px;transition:transform .3s ease-in-out}.header-parent .header-logo img:hover{cursor:pointer;transform:rotate(-5deg)}.header-parent .header-title ul{display:flex;list-style:none;gap:20px;margin:0;padding:0}.header-parent .header-title ul li{display:flex;gap:.5rem;padding:10px;border-bottom:2px solid transparent;border-right:2px solid transparent;transition:transform .2s ease-in-out,border-bottom .2s ease-in-out,border-right .2s ease-in-out,color .2s ease-in-out}.header-parent .header-title ul li a{text-align:center}.header-parent .header-title ul li:hover{border-right:2px solid var(--text-blue-current);border-bottom:2px solid var(--text-blue-current);cursor:pointer;transform:rotate(5deg)}a{text-decoration:none;color:inherit}.header-menu{display:none}@media screen and (max-width: 893px){.header-parent{justify-content:space-between;padding:0 20px}.header-title{display:none}.responsive-header-title{display:flex;flex-direction:column;position:absolute;top:80px;right:0;background-color:var(--primary-color);width:100%;padding:20px;text-align:center;box-shadow:0 5px 10px #0003}.responsive-header-title ul{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:15px;list-style:none;padding:0;margin:0}.responsive-header-title ul li{width:40%;display:flex;flex-direction:row;gap:10px;justify-content:start;align-items:center;padding:10px 20px;transition:background-color .3s}.responsive-header-title ul li a{text-align:center}.responsive-header-title ul li:hover{background-color:#ffffff1a}.header-menu{display:inline-block}.header-menu button{background:none;border:none;cursor:pointer}.responsive-header-title ul li svg{width:28px!important;height:28px!important}}.footer{background-color:var(--primary-color);color:var(--text-white);text-align:center;padding:1.5rem}.contact-main{height:100%;background-color:var(--primary-main-color);display:flex;justify-content:center;width:100%;align-items:start}.contact-parent{margin:1rem 0;padding:4rem 0;border-top:2px solid var(--primary-color);display:flex;gap:2rem;width:80%}.contact-info{flex:1;display:flex;flex-direction:column;gap:1rem}.contact-info h2{font-size:xx-large}.me{color:var(--text-blue-current)}.contact-info p{display:flex;align-items:center;gap:.5rem}.contact-form-parent{max-width:530px;width:100%;display:flex;flex-direction:column;align-items:start;justify-content:center;gap:1rem}.contact-form-parent .contact-name{display:flex;gap:1rem;width:100%;justify-content:center;align-items:center}.common-input{flex:1;min-width:250px;width:100%;margin:.5rem 0;padding:.6rem .3rem;border-radius:.3rem;border:1px solid #ccc}.message-input{width:100%;height:90px;border-radius:.3rem}.submit-button{margin-top:4rem;padding:.6rem 1rem;border:none;border-radius:.3rem;cursor:pointer;font-size:1rem;font-weight:700;color:#fff;background:linear-gradient(45deg,#1e90ff,#0077b5);transition:all .3s ease-in-out;box-shadow:0 4px 10px #0003;position:relative;overflow:hidden;width:100%;max-width:250px}.submit-button:hover{background:linear-gradient(45deg,#0077b5,#1e90ff);transform:scale(1.05);box-shadow:0 6px 15px #0077b566}.submit-button:active{transform:scale(.95);box-shadow:0 2px 5px #0077b580}.submit-button:after{content:"";position:absolute;top:50%;left:50%;width:300%;height:300%;background:radial-gradient(circle,#ffffff4d 10%,#0000 70%);transition:all .4s ease-out;transform:tr}.message-text-area{width:100%;height:inherit}.error-msg{color:red;margin:.2rem 0;min-height:1rem;font-size:.875rem;visibility:hidden}.error-msg:empty{display:block;visibility:hidden}.error-msg:not(:empty){visibility:visible}@media screen and (max-width: 768px){.contact-parent{flex-direction:column;align-items:center;justify-content:center}.contact-form{display:flex;justify-content:center;align-items:center;padding:2rem 0;border-top:2px solid var(--primary-color)}.contact-name{flex-direction:column}.input-field,.common-input,.message-input{width:100%}.submit-button{width:50%}}.home-main{height:100%;background-color:var(--primary-main-color);display:flex;justify-content:center;width:100%;align-items:start}.main-container{margin:5rem 0;display:flex;width:80%}.main .main-content{display:flex;flex-direction:column;flex:1}.main .main-image-wrapper{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:start}.main-image-wrapper .main-image{width:400px;height:400px;border-radius:50%;animation:float 3s ease-in-out infinite}.main-description{font-size:1rem;color:#e8e8e8;font-weight:400;line-height:1.5rem;max-width:600px;margin:1rem 0}.main-highlight{color:var(--text-blue-current);font-size:large;font-family:var(--heading-font)}.icons{margin:1rem 0;display:flex;gap:2rem}.linkedin,.github,.mail{font-size:3rem;cursor:pointer;transition:transform .3s ease-in-out}.linkedin{color:#5858ff}.mail{color:#ffa080}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.main-title,.main-description,.main-greeting,.linkedin,.github,.mail{opacity:0;animation:fadeIn 1s ease-in-out forwards}@keyframes flip{0%{transform:rotateX(0)}to{transform:rotateX(360deg)}}.main-highlight{display:inline-block;animation:flip 1s ease-in-out forwards;animation-delay:3s}@keyframes typing{0%{width:0}to{width:67%}}@keyframes typing-name{0%{width:0}to{width:25%}}@keyframes blink{50%{border-color:transparent}}.main-greeting{display:inline-block;font-size:1.5rem;font-weight:600;color:var(--text-white);white-space:nowrap;overflow:hidden;width:0;opacity:1;animation:typing-name 1s steps(15,end) forwards,blink .7s infinite 2s}.main-title{display:inline-block;font-size:2rem;font-weight:700;color:var(--text-blue-current);white-space:nowrap;overflow:hidden;width:0;opacity:1;animation:typing 2s steps(25,end) forwards 1s,blink .7s infinite 5.5s}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@media screen and (max-width: 1024px){.main-image-wrapper .main-image{width:300px;height:300px}}@media screen and (max-width: 893px){.main-container{flex-direction:column;align-items:center;text-align:center;width:90%}.main{flex-direction:column;align-items:center}.main-image-wrapper{margin-bottom:2rem}.main-image-wrapper .main-image{width:250px;height:250px}.main-description{font-size:.9rem;text-align:start;max-width:100%}.icons{gap:1rem}.linkedin,.github,.mail{font-size:2rem}.main-title{text-align:start;font-size:1.5rem}.main-greeting{text-align:start;font-size:1.2rem}.main-title,.main-greeting{display:inline-block;text-align:center;width:100%;white-space:normal;border-right:none;animation:fadeIn 1.5s ease-in-out forwards}}.project-cards{margin:2rem 0;display:flex;justify-content:center;gap:20px}.project-card img{width:100%;height:auto;object-fit:cover;margin-bottom:1rem}.project-card{background-color:#1a1a2e;border:2px solid #1e90ff;border-radius:15px;padding:0 0 20px;width:50%;overflow:hidden;text-align:center;color:#fff;transition:.3s ease-in-out;box-shadow:0 0 10px #1e90ff80}.project-card:hover{transform:translateY(-5px);box-shadow:0 0 20px #1e90ffb3}.project-card h3{margin-bottom:10px;font-size:22px}.project-card p{font-size:14px;line-height:1.5;color:#dcdcdc}@media (max-width: 1024px){.project-cards{flex-direction:row;flex-wrap:wrap;width:90%;justify-content:center}}@media (max-width: 768px){.services-cards{flex-direction:column;align-items:center}.project-card{width:90%;max-width:400px}}@media (max-width: 480px){.project-card{width:95%;padding:15px}.service-icon{font-size:40px}.project-card h3{font-size:20px}.project-card p{font-size:13px}}.project-link{display:inline-block;margin-top:1rem;padding:.6rem 1.2rem;border-radius:8px;font-size:.95rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary-color),var(--primary-main-color));text-decoration:none;text-align:center;transition:all .3s ease;box-shadow:0 4px 8px #00000026}.project-link:hover{background:linear-gradient(135deg,var(--primary-main-color),var(--primary-color));transform:translateY(-3px);box-shadow:0 6px 12px #00000040}.project-link:active{transform:translateY(-1px);box-shadow:0 3px 6px #0003}.projects-container{height:100%;background-color:var(--primary-main-color);display:flex;justify-content:center;width:100%;align-items:start}.project-card-parent{margin:1rem 0;padding:2rem 0;width:80%;border-top:2px solid var(--primary-color)}.project-card-parent h1{text-align:center}.project-card-content{display:flex;justify-content:center;margin:2rem auto;font-size:1.2rem;font-weight:500;color:var(--text-color);opacity:.8}.project-card-soon{text-align:center;padding:4rem 2rem;width:100%;border:2px solid var(--primary-color);border-radius:10px;box-shadow:0 4px 10px #0000001a;background:#ffffff0d}@media (max-width: 768px){.project-card-parent{width:90%;padding:3rem 1.5rem}.section-title{font-size:1.8rem}.project-card-content{font-size:1rem}}.services-parent{height:100%;background-color:var(--primary-main-color);display:flex;justify-content:center;width:100%;align-items:start}.service-child{margin:1rem 0;padding:4rem 0;width:80%;border-top:2px solid var(--primary-color)}.service-child h1{text-align:center}.service-cards{margin:2rem 0;display:flex;justify-content:center;gap:20px}.service-card img{width:100%;height:auto;border-radius:10px}.service-card{background-color:#1a1a2e;border:2px solid #1e90ff;border-radius:15px;padding:20px;width:300px;text-align:center;color:#fff;transition:.3s ease-in-out;box-shadow:0 0 10px #1e90ff80}.service-card:hover{transform:translateY(-5px);box-shadow:0 0 20px #1e90ffb3}.service-icon{font-size:50px;color:#1e90ff;margin-bottom:10px}.service-card h3{margin-bottom:10px;font-size:22px}.service-card p{font-size:14px;line-height:1.5;color:#dcdcdc}@media (max-width: 1024px){.service-cards{flex-direction:row;flex-wrap:wrap;width:90%;justify-content:center}}@media (max-width: 768px){.services-cards{flex-direction:column;align-items:center}.service-card{width:90%;max-width:400px}}@media (max-width: 480px){.service-card{width:95%;padding:15px}.service-icon{font-size:40px}.service-card h3{font-size:20px}.service-card p{font-size:13px}}.skills-main{height:100%;background-color:var(--primary-main-color);display:flex;justify-content:center;width:100%;align-items:start}.skills-parent{margin:1rem 0;padding:4rem 0;display:flex;flex-direction:column;gap:2rem;width:80%;border-top:2px solid var(--primary-color)}.skills{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;width:100%}.skills div{display:flex;flex:1 1 calc(25% - 20px);flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:200px;height:180px;background-color:var(--primary-color);padding:1rem;border-radius:.3rem;transition:all .3s ease-in-out}.skills div:hover{transform:scale(1.05);box-shadow:0 8px 20px #89898983;cursor:pointer;transition:all .3s ease-in-out}.skills-parent h1{text-align:center}@media screen and (max-width: 768px){.skills-parent{width:90%}.skills div{flex:1 1 calc(50% - 20px);padding:20px;height:150px}.skills{flex-direction:row;gap:1rem}}.express>img{height:200px;width:200px}.main{height:100%;background-color:var(--primary-main-color);display:flex;flex-direction:column;justify-content:center;width:100%;align-items:start}
