/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:root{--bg-gray-900: #111827;--bg-gray-800: #1f2937;--bg-gray-700: #374151;--bg-blue-900: #1e3a8a;--text-blue-500: #3b82f6;--color-blue-600: #2563eb;--color-blue-700: #1d4ed8;--text-gray-300: #d1d5db;--text-gray-400: #9ca3af}*{margin:0;line-height:calc(1em + .5rem);scroll-padding-top:2em}html{scroll-behavior:smooth;scroll-padding-top:48px}img,picture{display:block;object-fit:cover;-webkit-user-select:none;user-select:none;width:100%}ul{padding:0}ul li{list-style:none}a{text-decoration:none;color:unset;display:inline-block}button,input,textarea{all:unset}textarea{resize:vertical;height:160px}::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background-color:#f5f5f5}::-webkit-scrollbar-thumb{background-color:var(--text-blue-500)}#header{background-color:var(--bg-gray-900);color:var(--text-gray-300);position:sticky;top:0;z-index:1}#header .container .mobile-menu{text-align:right;font-size:30px}#header .container .mobile-menu iconify-icon{border:1px solid;border-radius:7px;padding:2px}#header .header-container{padding:1em 0}#header nav{transition:all .236s ease-in-out}#header nav{position:absolute;top:70px;left:0;right:0;background-color:var(--bg-gray-900);overflow:hidden;max-height:0px}.show-menu{max-height:319px!important}#header nav ul li a{display:block;padding:16px 20px;text-transform:capitalize;transition:all .236s ease;font-size:17px}#header nav ul li a:hover{background-color:var(--bg-gray-700);color:var(--text-blue-500)}@media screen and (min-width: 768px){#header .container{padding:.3em 0}#header .container .mobile-menu{display:none}#header nav{position:unset;overflow:unset;max-height:unset}#header nav ul{display:flex;flex-direction:row;column-gap:40px;justify-content:end}#header nav ul li a{display:block;padding:0;text-transform:capitalize;transition:all .236s ease;font-size:18px;font-weight:500}#header nav ul li a:hover{background-color:unset;color:var(--text-blue-500)}}#home{background-image:linear-gradient(to bottom right,var(--bg-gray-900),var(--bg-gray-800),var(--bg-blue-900));color:#fff}#home .container .home-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.7em 0;text-align:center}#home .container .home-container .img-container{width:300px;height:300px;overflow:hidden;border-radius:50%;border:4px solid var(--color-blue-700);padding:10px}#home .container .home-container .img-container img{width:100%;height:100%;object-fit:cover;transform:scale(1.5)}#home .social-links-container .social-icon{font-size:30px;display:flex;justify-content:center;align-items:center;gap:0 20px}#home .container .home-container h1{font-size:48px}#home .container .home-container h1 span{color:var(--text-blue-500)}#home .container .home-container p{font-size:20px;margin:10px 0}#home .container .home-container .cta-btn{background-color:var(--color-blue-600);padding:8px 20px;font-weight:500;font-size:18px;letter-spacing:1.3px;border-radius:22px;transition:all .236s linear;display:inline-block}#home .container .home-container .cta-btn:hover{background-color:var(--color-blue-700)}@media screen and (min-width: 768px){#home .container .home-container h1{font-size:72px}#home .container .home-container p{font-size:20px}}#about{background-color:var(--bg-gray-800)}#about .container .section-container h2{color:#fff;margin-bottom:18px;font-size:32px;text-align:center}#about .container .section-container p{color:var(--text-gray-300);font-size:20px}#about .container .section-container p strong{color:var(--text-blue-500)}#skills{background-color:var(--bg-gray-900)}#skills .container .section-container h2{color:#fff;margin-bottom:48px;font-size:32px;text-align:center}#skills .card-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}#skills .card{background-color:#f8fafc;padding:24px;display:flex;flex-direction:column;row-gap:16px;align-items:center;justify-content:center;border-radius:50%;width:140px;height:140px}#skills .card iconify-icon{font-size:60px}#skills .card h3{font-size:20px;font-weight:600;color:var(--color-blue-600);-webkit-user-select:none;user-select:none}@media screen and (min-width: 768px){#skills .card-container{gap:28px}#skills .card{width:160px;height:160px}}#project{background-color:var(--bg-gray-800)}#project .container .section-container h2{color:#fff;margin-bottom:36px;font-size:32px;text-align:center}#project .card-container{display:flex;flex-direction:column;row-gap:20px}#project .card{border-radius:5px;overflow:hidden}#project .card img{height:170px;max-width:inherit;object-fit:cover}#project .card .card-body{padding:16px;background-color:var(--bg-gray-900);display:flex;flex-direction:column;row-gap:5px;font-size:18px}#project .card .card-body strong{color:#fff}#project .card .card-body p{color:var(--text-gray-400)}#project .card .card-body a{background-color:var(--color-blue-700);color:#fff;padding:2px 6px;border-radius:2px;margin-top:4px;font-size:19px;transition:all .236s ease-in-out}#project .card .card-body a:hover{background-color:var(--color-blue-600)}@media screen and (min-width: 480px){#project .card-container{flex-direction:row;gap:20px;flex-wrap:wrap}#project .card-container .card{flex:1;flex-basis:47%}}@media screen and (min-width: 1024px){#project .card-container{flex-direction:row;gap:20px;flex-wrap:wrap}#project .card-container .card{flex-basis:33.33%;flex:1}}#contact{background-image:linear-gradient(to bottom right,var(--bg-gray-900),var(--bg-gray-800),var(--bg-blue-900));color:#fff}#contact .container .section-container h2{margin-bottom:48px;font-size:36px;text-align:center}#contact .form-container .input-group{position:relative;margin-bottom:25px;padding:6px 0}#contact .form-container .input-group .input{border-bottom:2px solid var(--text-gray-300);width:100%;background-color:transparent}#contact .form-container .input-group .input::placeholder{color:transparent}#contact .form-container .input-group label{position:absolute;left:2px;top:-3.5px;color:var(--text-gray-400);transition:all .1236s ease-in-out;font-size:19px}#contact .form-container .input-group .input:focus{border-bottom:2px solid var(--text-blue-500)}#contact .form-container .input-group .input:not(:placeholder-shown)+label,#contact .form-container .input-group .input:focus+label,.input:is(:placeholder-shown)+label{left:2px;top:-22.5px;font-size:15px;color:var(--text-blue-500)}#contact .form-container .input-group .input:not(:placeholder-shown){border-bottom:2px solid var(--text-blue-500)}#contact .form-container .form-btn{display:flex;align-items:center;justify-content:center;font-size:18px;gap:0 8px;background-color:var(--color-blue-600);padding:12px 24px;border-radius:6px;font-weight:500;cursor:pointer;transition:all .1236s linear}#contact .form-container .form-btn:hover{background-color:var(--color-blue-700)}#contact .form-container .form-btn iconify-icon{font-size:20px;transition:all .236s ease}@media screen and (min-width: 900px){#contact .form-container .form-btn iconify-icon{transition:all .236s ease;transform:rotate(45deg)}#contact .form-container .form-btn:hover iconify-icon{transform:rotate(0)}}#footer{background-color:var(--bg-gray-900);color:var(--text-gray-300)}#footer .container .section-container{padding:1.2em 0;display:flex;flex-direction:column;row-gap:12px}#footer .container .section-container p{text-align:center}.container{width:90%;margin:0 auto}.section-container{padding:3em 0}@media screen and (min-width: 768px){.container{width:80%}}