@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");ul{margin-bottom:0!important}.h-main{justify-content:center;position:-webkit-sticky;position:sticky;top:0;z-index:200}.h-main,.main{display:flex;align-items:center;width:100%}.main{justify-content:space-between;position:relative;padding:24px max(40px,env(safe-area-inset-left)) 24px max(40px,env(safe-area-inset-right));max-width:1980px;background-color:var(--header-bg-color);gap:24px}.main a{text-decoration:none}.header-logo-text{font-size:clamp(1.5rem,2.5vw,2.4em);font-weight:400;font-family:Satisfy,cursive;font-style:normal;cursor:pointer;color:var(--header-logo-color);line-height:1.2}.header-logo{flex:0 0 auto;min-width:0}.user-name{color:var(--title-bg-color);font-weight:700;line-height:35.42px}.links{display:flex;align-items:center;gap:clamp(20px,3vw,34px);margin:0;padding:0;flex:1 1 auto;justify-content:center}.labels,.links{list-style:none}.labels{font-size:16px;line-height:1.4;color:var(--header-options-color);cursor:pointer;white-space:nowrap}.btns-section{gap:16px}.btn-main,.btns-section{display:flex;align-items:center}.btn-main{gap:6px;width:109px;height:24px}.btn-bg{background-color:var(--header-button-bg-color)!important;padding:12px 18px;border:1px solid var(--title-bg-color);border-radius:66px;width:142px;height:48px}.btn-text{font-size:clamp(15px,2.5vw,18px);font-weight:500;line-height:1.35;color:var(--header-button-text-color)!important;width:100%}.btn-portfolio{background-color:var(--color-white);padding:17px 20px;border:1px solid var(--link-color);border-radius:66px;width:142px;height:48px}.btn-main-portfolio{display:flex;align-items:center;width:101px;height:13px}.btn-text-portfolio{font-size:clamp(15px,2.5vw,18px);font-weight:500;line-height:1.35;color:var(--title-bg-color);width:100%}.active-cls{border-bottom:2px solid var(--header-options-active-color);color:var(--header-options-active-color);font-size:18px;font-style:normal;font-weight:500;line-height:normal}.header-trailing{display:flex;align-items:center;gap:8px;flex:0 0 auto}.header-actions{display:flex;align-items:center;gap:12px}.theme-toggle-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;border-radius:12px;cursor:pointer;color:var(--header-options-color);transition:background-color .2s ease}.theme-toggle-btn:hover{background-color:rgba(0,0,0,.06)}[data-theme=dark] .theme-toggle-btn:hover{background-color:hsla(0,0%,100%,.08)}.theme-toggle-btn .DarkModeIcon{font-size:22px}.menu-icon{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--header-options-color);font-size:26px;line-height:1;cursor:pointer;border-radius:12px;transition:background-color .2s ease}.menu-icon:hover{background-color:rgba(0,0,0,.06)}[data-theme=dark] .menu-icon:hover{background-color:hsla(0,0%,100%,.08)}@media (max-width:1024px){.main{flex-wrap:wrap;padding:14px max(24px,env(safe-area-inset-left)) 16px max(24px,env(safe-area-inset-right));row-gap:0;column-gap:12px;align-items:center}.main>.header-logo{order:1;flex:0 1 auto;min-width:0}.header-trailing{order:2;margin-left:auto;gap:4px}.links{order:3;flex-basis:100%;width:100%;display:none;flex-direction:column;align-items:stretch;gap:4px;margin:12px 0 0;padding:8px;border-radius:16px;border:1px solid rgba(0,0,0,.06);background-color:var(--header-bg-color);box-shadow:0 12px 40px rgba(0,0,0,.08);list-style:none}[data-theme=dark] .links{border-color:hsla(0,0%,100%,.08);box-shadow:0 16px 48px rgba(0,0,0,.45)}.links.open{display:flex}.links li.labels{padding:14px 16px;border-radius:12px;text-align:center;font-size:15px;font-weight:500;letter-spacing:.01em;background-color:rgba(0,0,0,.03);border:none;box-shadow:none;transition:background-color .2s ease}[data-theme=dark] .links li.labels{background-color:hsla(0,0%,100%,.05)}.links li.labels:hover{background-color:rgba(0,0,0,.06);transform:none}[data-theme=dark] .links li.labels:hover{background-color:hsla(0,0%,100%,.1)}.links li.labels.active-cls{background-color:rgba(0,0,0,.08);color:var(--header-options-active-color);border-bottom:none}[data-theme=dark] .links li.labels.active-cls{background-color:color-mix(in srgb,var(--header-options-active-color) 18%,transparent);color:var(--header-options-active-color)}.menu-icon{display:flex}.btn-hidden{display:none}.btn-bg{width:auto;min-height:44px;height:auto;padding:10px 16px}.btn-text{font-size:15px}}@media (min-width:1025px){.menu-icon{display:none!important}.links{display:flex!important}}@media (max-width:768px){.main{padding:max(12px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) 16px max(28px,env(safe-area-inset-left))}.header-logo-text{font-size:clamp(1.2rem,5.2vw,1.5rem)}.theme-toggle-btn .DarkModeIcon{font-size:20px}.menu-icon,.theme-toggle-btn{width:40px;height:40px}.menu-icon{font-size:22px}}@media (min-width:1025px) and (max-width:1520px){.main{width:100%;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}}.modal-root-container{padding-left:0!important;padding-right:0!important;max-width:100%!important}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px max(16px,4vw)!important}[data-theme=dark] .modal-overlay{background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.modal-content{padding:40px!important;border-radius:15px!important;background-color:var(--projects-bg-color)!important;width:100%;max-width:1720px;max-height:95vh;overflow-y:auto!important;box-shadow:0 0 15px rgba(0,0,0,.3)!important;gap:70px;overflow-x:hidden!important}[data-theme=dark] .modal-content{background-color:#1e1e1e!important;border:1px solid hsla(0,0%,100%,.1);box-shadow:0 20px 60px rgba(0,0,0,.55)!important}.modal-content::-webkit-scrollbar{width:6px}.modal-content::-webkit-scrollbar-thumb{background-color:transparent;border-radius:10px}@-moz-document url-prefix(){.modal-content{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) rgba(0,0,0,.1)}}.m-title-main{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.close-btn{font-size:40px;background:none;border:none;cursor:pointer;background-color:var(--projects-bg-color)!important;color:var(--title-bg-color);flex-shrink:0;line-height:1;padding:0 4px;margin-top:-4px}[data-theme=dark] .close-btn{background-color:#1e1e1e!important}.close-btn:hover{color:red}.proj-name{color:var(--title-bg-color);font-size:clamp(1.35rem,4vw,2rem);font-style:normal;font-weight:700;line-height:1.2;flex:1 1 auto;min-width:0;margin:0}.modal-main{display:flex;flex-direction:column;gap:clamp(20px,4vw,60px)}.modal-des-outer{padding:20px 0 40px}.modal-des{color:var(--title-bg-color);font-size:clamp(15px,2.8vw,18px);font-style:normal;font-weight:450;line-height:1.65}.modal-des>:first-child{margin-top:0}[data-theme=dark] .modal-des,[data-theme=dark] .modal-des *{color:var(--title-bg-color)!important}[data-theme=dark] .modal-des a{color:#a5b4fc!important}[data-theme=dark] .modal-des a:hover{color:#c4b5fd!important}.video-modal{width:100%}.modal-video{display:block;width:100%;max-width:100%;height:auto;border-radius:12px}.video-modal a{text-decoration:none}.viewProjectBtn{display:flex;width:100%;padding:12px 14px;text-align:left;justify-content:space-between;align-items:center;gap:10px;background-color:var(--projects-text-color);color:var(--projects-bg-color);border-radius:8px;font-weight:700;font-size:clamp(12px,3.2vw,14px);margin-top:12px;word-break:break-word}.viewProjectBtn p{display:inline-block;margin:0;overflow-wrap:anywhere}.tech-title{color:var(--title-bg-color);font-size:clamp(1.15rem,3.5vw,2rem);font-style:normal;font-weight:700;line-height:1.25}.tech-main{margin-top:clamp(24px,5vw,40px)}.tech{margin:24px 0 16px}.modal-img{margin:8px 4px}@media (max-width:767px){.modal-tech-img{width:48px!important;height:48px!important;max-width:48px!important}.modal-overlay{padding:max(12px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))!important;align-items:center;box-sizing:border-box}.modal-content{padding:20px 16px 22px!important;border-radius:16px!important;max-height:min(90vh,880px)!important;width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:16px}.modal-content>div:last-child{margin-top:0}.modal-des-outer{padding:12px 0 22px!important}.modal-main{gap:8px;flex-shrink:0}.m-title-main{align-items:flex-start}.close-btn{font-size:36px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;margin-top:0}.proj-name{font-size:clamp(1.35rem,4.8vw,1.65rem)}.modal-des{font-size:15px;line-height:1.6}.tech-title{font-size:1.25rem}.tech{margin:16px 0 12px}}@media (min-width:701px) and (max-width:1280px){.modal-content{margin-left:12px;margin-right:12px}}@media (min-width:1280px) and (max-width:1700px){.modal-content{margin-left:24px;margin-right:24px}}.cards{display:grid;grid-template-columns:repeat(3,552px);grid-gap:33px;gap:33px;justify-content:center}.card-content-main{gap:20px}.card-content,.card-content-main{display:flex;flex-direction:column}.card-content{gap:12px}.card-title{color:var(--title-bg-color);font-size:24px}.card-title,.project-name{font-style:normal;font-weight:500;line-height:normal}.project-name{color:var(--paragraph-color);font-size:16px}.btn-main-project{display:flex;align-items:center;gap:6px;width:146px;height:24px}.btn-bg-project{background-color:var(--white-color);padding:12px 18px;border-radius:66px;border:1px solid var(--link-color);width:169px;height:48px;cursor:pointer}.btn-text-project{color:#000;font-size:18px;font-style:normal;font-weight:500;line-height:normal}.projects-card{border-radius:20px;object-fit:cover;height:auto}@media (max-width:700px){.cards{display:grid;grid-template-columns:repeat(1,1fr)}.projects-card{width:100%}.card-content-main{padding:0 20px}.btn-bg-project{width:auto!important;max-width:200px;align-self:center}.btn-text-project{font-size:14px}}@media (min-width:701px) and (max-width:1280px){.cards{display:grid;grid-template-columns:repeat(2,1fr)}.projects-card{width:100%}}@media (min-width:1280px) and (max-width:1700px){.cards{display:grid;grid-template-columns:repeat(3,1fr)}.projects-card{width:100%}}[data-theme=dark] .card-content-main .btn-text-project{color:var(--hero-text-color)}