*{box-sizing:border-box;margin:0;padding:0}.square{width:2em;height:2em;padding-top:.2em}.blur{width:100%;height:100vh;background-color:#f5f5f5d2;display:none;position:absolute;left:0}.bar{width:2em;height:.4em;background-color:tomato;border-radius:50px;margin:.2em 0}.bar:nth-child(1){width:.66em;margin-top:0}.bar:nth-child(2){width:1.32em;margin-top:0}nav ul{font-size:1.3vmax;list-style-type:none;display:none}.burger{width:-moz-fit-content;width:-moz-fit-content;width:fit-content;padding:.25em}.burger:hover ul,.burger:hover .blur{display:block}li:hover{color:#fff}.nav-link{color:#ee6352;text-decoration:none;position:relative}.nav-link:after{content:"";width:100%;height:2px;transform-origin:100%;background:currentColor;transition:transform .25s ease-in;position:absolute;bottom:0;left:0;transform:scaleX(0)}.nav-link:hover:after{transform-origin:0;transform:scaleX(1)}@media (min-width:600px){.burger{width:100%}.square,.burger:hover .blur{display:none}.burger:hover ul,nav ul{gap:1rem;transition:all .7s ease-in-out;display:flex}li{padding:.25rem}}@media (max-width:600px){.burger:hover ul,nav ul{height:100vh;width:10rem;color:#295775;z-index:3;background-color:#011627;padding:1rem;font-size:1.5rem;position:absolute;left:0}.burger:hover .blur{width:100vw;height:100vh}nav{background-color:#011627}li{margin-bottom:2rem;padding:.25rem}ul{margin:0}header img{display:none}}footer{height:13rem;background-color:#011627;border-top-left-radius:80%;border-top-right-radius:80%;display:flex}footer h1,footer p{color:#f5f5f5}footer img{width:1.5rem;height:.8rem;filter:invert(42%)sepia(65%)saturate(1910%)hue-rotate(163deg)brightness(97%)contrast(101%);padding:0 5px}footer a{padding:10px}.footer-txt{width:100%;flex-direction:column;justify-content:center;align-items:center;display:flex}.footer-txt .txt1{flex-direction:column;justify-content:center;align-items:center;display:flex}.footer-txt .txt1 .choice{gap:2rem;padding:1rem;display:flex}.footer-txt .txt1 .choice :nth-child(1){color:#01a660;font-size:1.2rem}.footer-txt .txt1 .choice :nth-child(2){color:#38a3a5;font-size:1.2rem;text-decoration:line-through}.footer-txt .txt2{width:100%;justify-content:space-between;padding:0 1rem;display:flex}.overlay{visibility:hidden;opacity:0;z-index:5;background:#000000b3;transition:opacity .5s;position:fixed;inset:0}.overlay:target{visibility:visible;opacity:1}.popup{width:25rem;background:#cad2c5;border-radius:5px;margin:70px auto;padding:20px;transition:all 5s ease-in-out;position:relative;top:25%}.popup .btn{cursor:pointer;background-color:#cad2c5;border-radius:7px;margin-top:.5rem;padding:.5rem;font-size:1.3rem}.popup .btn:hover{background-color:#a6b39e}.popup h2{color:#333;margin-top:0}.popup .close{color:#333;font-size:30px;font-weight:700;text-decoration:none;transition:all .2s;position:absolute;top:10px;right:10px}.popup .close:hover{color:#d8065e}.popup{max-height:30%;overflow:auto}@media (min-width:600px){.intro{opacity:0;animation-name:fadeIn;animation-duration:3s;animation-iteration-count:1}.txt1{animation-delay:1s}.txt2{animation-delay:4s}.txt3{animation-delay:7s}.hero-txt h1{opacity:0;animation-name:fadeIn;animation-duration:2s;animation-iteration-count:1;animation-delay:11s;animation-fill-mode:forwards}.hero-txt h2{opacity:0;animation-name:fadeIn;animation-duration:2s;animation-iteration-count:1;animation-delay:12s;animation-fill-mode:forwards}.hero-img{opacity:0;animation-name:fadeIn;animation-duration:3s;animation-iteration-count:1;animation-delay:13s;animation-fill-mode:forwards}header img{opacity:0;animation-name:goLeft;animation-duration:2s;animation-delay:15s;animation-fill-mode:forwards}nav ul{opacity:0;animation-name:goRight;animation-duration:2s;animation-delay:15s;animation-fill-mode:forwards}.hero a{opacity:0;animation-name:fadeIn;animation-duration:3s;animation-iteration-count:1;animation-delay:16s;animation-fill-mode:forwards}.circle1{animation-name:cRed;animation-duration:30s;animation-iteration-count:infinite}.circle2{animation-name:cBlue;animation-duration:40s;animation-iteration-count:infinite}.circle3{animation-name:cGreen;animation-duration:50s;animation-iteration-count:infinite}}@keyframes goLeft{0%{opacity:.2;transform:translate(40rem)}to{opacity:1;transform:translate(0)}}@keyframes goRight{0%{opacity:.2;transform:translate(-40rem)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{transform:scale(.7)}to{opacity:1}}@keyframes cRed{0%{transform:translate3d(0)}20%{transform:translate3d(20rem,30rem,50rem)}40%{transform:translate3d(40rem,25rem,20rem)}60%{transform:translate3d(60rem,15rem,60rem)}80%{transform:translate3d(80rem,15rem,30rem)}to{transform:translate3d(0);overflow:hidden;transform:scale(.7)}}@keyframes cBlue{0%{transform:translate3d(0);transform:rotate(45deg)scale(.5)}20%{transform:translate3d(-20rem,-25rem,50rem)}40%{transform:translate3d(-40rem,-20rem,20rem)}60%{transform:translate3d(-60rem,-10rem,60rem)}80%{transform:translate3d(-75rem,-10rem,30rem)}to{transform:translate3d(0);transform:rotate(.5turn)}}@keyframes cGreen{0%{transform:translate3d(0);transform:rotate(.5turn)scale(1.5)}20%{transform:translate3d(10rem,5rem,50rem)}40%{transform:translate3d(-20rem,-15rem,20rem)}60%{transform:translate3d(-30rem,10rem,60rem)}80%{transform:translate3d(40rem,-15rem,30rem)}to{transform:translate3d(0);transform:rotate(.5turn)scale(.5)}}.about{height:80vh;width:90%;z-index:1;-webkit-backdrop-filter:blur(2rem);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);background:linear-gradient(to bottom right,#ffffffb3,#ffffff4d);border-radius:2rem;flex-direction:column;align-items:center;margin:auto;display:flex;box-shadow:6px 6px 20px #7a7a7a36}.about .card-about{height:33vmax;width:45%;background:linear-gradient(to top left,#fffc,#ffffff80);border-radius:1rem;margin:auto;padding:1rem;font-size:1.2vmax;box-shadow:6px 6px 20px #7a7a7a36}.about .card-about h1{padding-bottom:3vmax;font-family:Courgette,cursive}.about .card-about p{padding:1.5rem 0;font-family:Noto Serif HK,serif}.about .card-about a{color:#38a3a5;text-decoration:none}.about .card-about a:hover{color:olive}.carousel{height:80vh;width:90%;z-index:1;-webkit-backdrop-filter:blur(2rem);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);background:linear-gradient(to bottom right,#ffffffb3,#ffffff4d);border-radius:2rem;flex-direction:column;margin:auto;display:flex;box-shadow:6px 6px 20px #7a7a7a36}.carousel .card{width:90%;height:90vh;background:linear-gradient(to top left,#fffc,#ffffff80);border-radius:1rem;margin:auto auto 3vmax;padding:2rem;box-shadow:6px 6px 20px #7a7a7a36}.circle1,.circle2,.circle3{height:15rem;width:15rem;z-index:0;position:absolute}.circle1{background:red;border-radius:50%;top:10%;left:5%}.circle2{width:0;height:0;border-top:10rem solid #0000;border-bottom:10rem solid #0000;border-left:10rem solid #00f;bottom:13%;right:5%}.circle3{background:green;top:40%;left:45%}carousel{width:100%;text-align:center;flex-direction:column;font-size:1.4vmax;display:inline-block}carousel h1{padding-bottom:1vmax;font-family:Courgette,cursive}carousel p{text-align:start;padding:1.5vmax 0;font-family:Noto Serif HK,serif}carousel a{color:#38a3a5;text-decoration:none}carousel a:hover{color:olive;text-align:start}carousel section{width:100%;transition:transform .5s;position:absolute;top:2em;left:0;transform:scale(0)}carousel section div{padding:5em}carousel section label{cursor:pointer;color:#38a3a5;background:#011627;border-radius:10px;margin-top:1rem;padding:.5em 1em}carousel section .container{align-items:center;padding:1rem 2rem;display:flex}carousel section .container .card{max-height:30vmax;border-radius:1rem;margin:auto auto 1rem;padding:2rem;box-shadow:6px 6px 20px #7a7a7a36}carousel section .container .card2{background-image:url(mobile-design.3070595c.jpg);background-position:50%;background-repeat:no-repeat;background-size:contain}carousel section .container .card3{background-image:url(desktop-design.a7a0d607.jpg);background-position:50%;background-repeat:no-repeat;background-size:contain}carousel section .container .card4{background-image:url(pp-active-states.d7fc02d3.jpg);background-position:50%;background-repeat:no-repeat;background-size:contain}carousel section .container .card4a{background-image:url(pp-mobile-design.164b2242.jpg);background-position:50%;background-repeat:no-repeat;background-size:contain}carousel #page1a:checked~#page1,carousel #page2a:checked~#page2,carousel #page3a:checked~#page3,carousel #page4a:checked~#page4{transform:scale(1)}@media (min-width:370px) and (max-width:412px){.circle1,.circle2,.circle3,footer .popup,footer .overlay{display:none}}@media (max-width:770px){.hero .content{flex-direction:column;justify-content:center;align-items:center;display:flex}.hero .content .hero-txt{width:80%;flex-direction:column;justify-content:center;align-items:center;padding-top:2rem;padding-left:0;display:flex}.hero .content .hero-img{width:90%;height:90%;background-position:50%;background-repeat:no-repeat;background-size:contain;box-shadow:inset 0 14rem 5rem 6rem #011627}carousel .container{flex-direction:column;padding:0 .5rem .5rem}.about .card-about{width:80%}footer .txt2{font-size:1.5vmax}}@media (min-width:771px) and (max-width:850px){.hero .content{flex-direction:column;justify-content:center;align-items:center;display:flex}.hero .content .hero-txt{width:80%;flex-direction:column;justify-content:center;align-items:center;padding-top:2rem;padding-left:0;display:flex}.hero .content .hero-img{width:90%;height:90%;background-position:50%;background-repeat:no-repeat;background-size:contain;box-shadow:inset 0 13rem 5rem 7rem #011627}.about .card-about{width:80%}carousel .container{margin-top:10rem}}html,body{scroll-behavior:smooth;background-color:#52796f;font-family:Noto Serif HK,serif}header{width:100vw;height:4rem;z-index:3;background-color:#011627;justify-content:space-between;align-items:center;margin:auto;padding:0 6rem;display:flex;position:fixed}header img{height:2rem;filter:invert(42%)sepia(65%)saturate(1910%)hue-rotate(163deg)brightness(97%)contrast(101%)}.hero{width:100%;height:100vh;background-color:#011627;flex-flow:column;display:flex}.hero .content{width:100%;height:100%;justify-content:space-around;align-items:center;font-family:Courgette,cursive;display:flex}.hero a{align-self:center;padding:2rem}.intro-txt{justify-content:center;align-items:center;margin:auto;display:flex;position:absolute;inset:0}.intro-txt .intro{color:#f5f5f5;opacity:0;font-size:12vmax;position:absolute}.hero-txt{width:40%;flex-direction:column;justify-content:center;align-items:flex-end;padding-left:5rem;display:flex}.hero-txt h1{color:#f5f5f5;padding:3rem 0;font-size:3vmax}.hero-txt h2{color:#f5f5f5;padding-bottom:.5rem;font-size:1.8vmax}.hero-txt span{color:#38a3a5;padding-left:.5rem;font-size:2.5vmax}.hero-img{width:60%;height:80%;background-image:url(hero.d3ffaded.jpg);background-position:50%;background-repeat:no-repeat;background-size:contain;box-shadow:inset 0 3rem 4rem 11rem #011627}.midSec{height:100vh;width:100%;display:flex;position:relative}@media (max-width:600px){header{padding:0 .25rem;transition:all .7s ease-in-out;left:0}}
/*# sourceMappingURL=index.2fa96ed8.css.map */