:root{--white: hsla(0, 0%, 100%, 1);--white_a8: hsla(0, 0%, 100%, .08);--white_a12: hsla(0, 0%, 100%, .12);--cultured: hsla(220, 20%, 97%, 1);--snow: hsla(345, 57%, 97%, 1);--manatee: hsla(219, 10%, 62%, 1);--black-coral: hsla(220, 12%, 43%, 1);--cadet-blue-crayola_a20: hsla(222, 23%, 71%, .2);--cinnamon-satin: hsla(344, 53%, 62%, 1);--raisin-black: hsla(216, 14%, 14%, 1);--raisin-black_a6: hsla(216, 14%, 14%, .06);--gunmetal: hsla(214, 15%, 21%, 1);--charcoal: hsla(219, 22%, 26%, 1);--ff-manrope: "Manrope", sans-serif;--fs-1:calc(2.7rem + 1.38vw);--fs-2:calc(2.6rem + .66vw);--fs-3:calc(2.6rem + .24vw);--fs-4: 1.9rem;--fs-5: 1.8rem;--fs-6: 1.7rem;--fs-7: 1.5rem;--fs-8: 1.4rem;--fw-700: 700;--section-padding: 90px;--shadow-1: 0 0 20px hsla(216, 14%, 14%, .05);--shadow-2: 0 4px 28px hsla(216, 14%, 14%, .07);--radius-circle: 50%;--radius-pill: 100px;--radius-8: 8px;--radius-6: 6px;--transition-1: .25s ease;--transition-2: .5s ease;--transition-3: .3s ease-in-out}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}li{list-style:none}a,img,span,button,ion-icon{display:block}a{color:inherit;text-decoration:none}img{height:auto}input,button,textarea{background:none;border:none;font:inherit}input,textarea{width:100%}button{cursor:pointer}ion-icon{pointer-events:none}html{font-family:var(--ff-manrope);font-size:10px;scroll-behavior:smooth}body{background-color:var(--white);color:var(--black-coral);font-size:1.6rem;line-height:1.7}body.nav-active{overflow:hidden}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-color:#fafafa}::-webkit-scrollbar-thumb{background-color:#ccc}::-webkit-scrollbar-thumb:hover{background-color:#b3b3b3}.container{padding-inline:16px}.social-list{display:flex;align-items:center;gap:12px}.social-link{font-size:2rem;transition:var(--transition-1)}.social-link:is(:hover,:focus-visible){transform:translateY(-3px)}.section{padding-block:var(--section-padding)}.section:first-of-type{padding-top:calc(var(--section-padding) + 80px)}@media (max-width: 991px){.section:first-of-type{padding-top:calc(var(--section-padding) + 60px)}}.w-100{width:100%}.h1,.h2,.h3,.h4{color:var(--charcoal);line-height:1.3}.h1{font-size:var(--fs-1)}.h2{font-size:var(--fs-2)}.h3{font-size:var(--fs-3)}.h4{font-size:var(--fs-4)}.btn{color:var(--cinnamon-satin);font-size:var(--fs-6);font-weight:var(--fw-700);border:2px solid var(--cinnamon-satin);max-width:max-content;padding:12px 28px;border-radius:var(--radius-pill);transition:var(--transition-1);will-change:transform}.btn:is(:hover,:focus-visible){transform:translateY(-4px)}.btn-primary,.btn-secondary:is(:hover,:focus-visible){background-color:var(--cinnamon-satin);color:var(--white)}.section-text{font-size:var(--fs-5)}.section-title{margin-block-end:16px}.grid-list{display:grid;gap:30px}[data-reveal]{opacity:0;transition:.75s ease}[data-reveal=top]{transform:translateY(-30px)}[data-reveal=bottom]{transform:translateY(30px)}[data-reveal=left]{transform:translate(-30px)}[data-reveal=right]{transform:translate(30px)}[data-reveal].revealed{transform:translate(0);opacity:1}.header{position:absolute;top:0;left:0;background-color:var(--white);width:100%;padding-block:20px;box-shadow:var(--shadow-1);z-index:4}.header.active{position:fixed;animation:slideIn .5s ease forwards}@keyframes slideIn{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.header .container{display:flex;justify-content:space-between;align-items:center}.nav-open-btn{font-size:3.5rem;color:var(--gunmetal)}.navbar{position:fixed;top:0;left:-300px;background-color:var(--raisin-black);color:var(--white);max-width:300px;width:100%;height:100vh;padding:30px;padding-block-end:40px;display:flex;flex-direction:column;gap:30px;z-index:2;visibility:hidden;transition:var(--transition-3)}.navbar.active{visibility:visible;transform:translate(300px)}.navbar-top{display:flex;justify-content:space-between;align-items:center}.nav-close-btn{background-color:var(--white_a8);color:var(--white);font-size:2rem;padding:6px;border-radius:var(--radius-circle);transition:var(--transition-1)}.nav-close-btn ion-icon{--ionicon-stroke-width: 50px}.nav-close-btn:is(:hover,:focus-visible){background-color:var(--white_a12)}.navbar-list{margin-block-end:auto}.navbar-link{font-weight:var(--fw-700);padding-block:6px}.contact-link{transition:var(--transition-1)}.contact-link:is(:hover,:focus-visible){color:var(--cinnamon-satin)}.overlay{position:fixed;top:0;left:0;width:100%;height:100vh;background-color:var(--raisin-black);pointer-events:none;opacity:0;transition:var(--transition-1)}.overlay.active{pointer-events:all;opacity:.8}.hero{padding-block-start:calc(var(--section-padding) + 50px);background-color:var(--cultured)}.hero .container{display:grid;gap:50px}.hero-banner{position:relative;max-width:max-content;margin-inline:auto}.hero-banner .w-100{mask-image:url(/assets/Blog-acf29153.svg);-webkit-mask-image:url(/assets/Blog-acf29153.svg);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:auto;-webkit-mask-size:auto;background-position:center center}.hero .shape{position:absolute;bottom:10%;right:2%;filter:drop-shadow(var(--shadow-2))}.hero-content{text-align:center}.hero .section-text{margin-block:24px 36px}.btn-wrapper{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}.about .wrapper{display:grid;gap:50px;margin-block-end:70px}.progress-list .label-wrapper{display:flex;justify-content:space-between;align-items:center;margin-block-end:4px}.progress-item:not(:last-child){margin-block-end:16px}.progress{background-color:var(--raisin-black_a6);height:6px;width:100%;border-radius:var(--radius-pill);overflow:hidden}.progress-fill{height:inherit}.about-card{text-align:center}.about-card .card-icon{max-width:max-content;margin-inline:auto}.about-card .card-title{margin-block:16px 10px}.project{border-block:1px solid var(--cadet-blue-crayola_a20)}.project .title-wrapper{margin-block-end:40px}.project .btn{margin-block-start:24px}.project .grid-list{gap:40px}.project-card{--padding: 24px;display:flex;flex-direction:column;gap:var(--padding);border-radius:var(--radius-8);overflow:hidden}.project-card-1,.project-card-2,:is(.project-card-3,.project-card-4) .card-content{padding:var(--padding)}.project-card-1{padding-block-end:0}.project :is(.project-card-3,.project-card-4){gap:0}.project-card .card-tag{font-size:var(--fs-8);font-weight:var(--fw-700);text-transform:uppercase}.project-card .card-title{margin-block:16px}.project-card .card-text{margin-block-end:20px}.project-card .btn-text{display:flex;align-items:center;gap:5px;font-weight:var(--fw-700);transition:var(--transition-1)}.project-card .btn-text:is(:hover,:focus-visible){gap:10px}.project-detail-header{text-align:center;margin-bottom:50px}.project-detail-content{display:grid;gap:50px}@media (min-width: 992px){.project-detail-content{grid-template-columns:1fr 1fr;align-items:start}}.project-detail-banner{border-radius:var(--radius-8);overflow:hidden;box-shadow:var(--shadow-2)}.project-detail-info .section-title{margin-top:30px}.tech-stack-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.tech-item{padding:8px 16px;border-radius:var(--radius-pill);font-size:var(--fs-7);font-weight:var(--fw-700)}.article-header{text-align:center;margin-bottom:30px}.article-title{margin-bottom:20px}.article-meta{display:flex;justify-content:center;gap:20px;font-size:var(--fs-7);color:var(--manatee)}.article-banner{border-radius:var(--radius-8);overflow:hidden;margin-bottom:40px}.article-content{font-size:var(--fs-5);line-height:1.8}.article-content h2{margin:30px 0 20px;color:var(--charcoal)}.article-content p{margin-bottom:20px}.article-content ul{margin:20px 0;padding-left:30px}.article-content li{margin-bottom:10px}.article-content code{background-color:var(--cultured);padding:2px 6px;border-radius:4px;font-family:monospace}.article-content pre{background-color:var(--cultured);padding:20px;border-radius:var(--radius-6);overflow-x:auto;margin:20px 0}.article-content pre code{background:none;padding:0}.contact{padding-block-end:0}.contact-card{background-color:var(--snow);padding:32px;border-radius:var(--radius-8);display:grid;gap:40px}.contact .section-title{margin-block-start:20px}.input-field{background-color:var(--white);color:var(--black-coral);font-size:var(--fs-7);padding:14px 18px;border-radius:var(--radius-6);outline:none;margin-block-end:20px}.input-field::placeholder{color:var(--manatee)}textarea.input-field{min-height:120px;height:120px;max-height:240px;resize:vertical}.blog-card{border-radius:var(--radius-8);overflow:hidden;box-shadow:var(--shadow-1);transition:transform .3s ease,box-shadow .3s ease}.blog-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-2)}.card-banner{border-radius:var(--radius-8) var(--radius-8) 0 0;overflow:hidden}.card-content{padding:24px}.card-meta{display:flex;justify-content:space-between;margin-bottom:16px;font-size:var(--fs-8);color:var(--manatee)}.card-date,.card-time{display:flex;align-items:center;gap:5px}.card-title{margin-bottom:16px}.footer{padding-block:40px}.copyright{margin-block-end:12px}.footer .social-link{color:var(--charcoal)}@media (min-width: 575px){.container{max-width:540px;width:100%;margin-inline:auto}.project-card{--padding: 68px}.contact-card{padding:68px}}@media (min-width: 768px){.container{max-width:720px}.section-text{--fs-5: 2rem}.about .grid-list{grid-template-columns:1fr 1fr}.project .title-wrapper{display:flex;justify-content:space-between;align-items:center;gap:30px}.project .btn{min-width:max-content}.contact .section-text{--fs-5: 1.8rem}.input-wrapper{display:flex;align-items:center;gap:20px}.footer .container{display:flex;justify-content:space-between;align-items:center}.copyright{margin-block-end:0}}@media (min-width: 992px){:root{--section-padding: 120px}.container{max-width:960px}.nav-open-btn,.navbar-top,.navbar .wrapper,.overlay{display:none}.navbar,.navbar.active{all:unset;display:flex;flex-grow:1}.navbar-list{display:flex;gap:36px;margin-inline:auto}.navbar-link{color:var(--charcoal);transition:var(--transition-1)}.navbar-link:is(:hover,:focus-visible){color:var(--cinnamon-satin)}.navbar .social-link{color:var(--charcoal);font-size:1.8rem}.header{top:45px;max-width:960px;left:50%;transform:translate(-50%);padding-inline:16px;border-radius:var(--radius-8)}.header.active{top:0;left:0;max-width:unset;border-radius:0}.hero{padding-block-start:calc(var(--section-padding) + 80px)}.hero .container{grid-template-columns:.8fr 1fr;align-items:center;gap:100px}.hero-content{text-align:left}.hero .btn-wrapper{justify-content:flex-start}.about .wrapper{grid-template-columns:1fr 1fr;align-items:center}.about .grid-list{grid-template-columns:repeat(4,1fr)}.project .grid-list{grid-template-columns:1fr 1fr;row-gap:50px}.project .grid-list>li:nth-child(-n+2){grid-column:1 / 3}.project-card-1,.project-card-2{flex-direction:row;align-items:flex-end}:is(.project-card-1,.project-card-2) .card-content{width:33.33%}:is(.project-card-1,.project-card-2) .card-banner{width:66.66%}.project-card-1 .card-content{padding-block-end:var(--padding)}.project-card-2 .card-content{order:1}.contact-card{grid-template-columns:.8fr 1fr;align-items:center;gap:90px}}@media (min-width: 1200px){.container,.header{max-width:1140px}.about .grid-list{gap:50px}.contact-card{gap:150px}}@media (min-width: 1400px){.container,.header{max-width:1320px}.hero .container{grid-template-columns:1fr .8fr}.hero .section-text{--fs-5: 2.4rem}.about .wrapper{gap:100px}.about .grid-list{gap:60px}}.navbar-link:hover,.navbar-link:focus{color:var(--cinnamon-satin);transform:translateY(-2px);transition:all .3s ease}.project-card{transition:transform .3s ease,box-shadow .3s ease}.project-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-2)}.about-card{transition:transform .3s ease}.about-card:hover{transform:translateY(-5px)}.btn:hover,.btn:focus{transform:translateY(-4px);box-shadow:0 10px 20px #0000001a}.btn-text:hover{transform:translate(5px)}.color-option:hover{transform:scale(1.1)}