main{padding-bottom:3rem}.title-product-archive{display:flex;align-items:center;flex-direction:column;margin-top:4.5rem;margin-bottom:2rem}.title-product-archive h2{color:#222;font-size:64px;font-weight:700;line-height:64px}.title-product-archive p{color:#858585;font-size:16px;font-weight:400;line-height:24px}.navbar-project .project-ul{width:71%;padding:2rem 0;margin-top:0;display:flex;justify-content:center;list-style:none;gap:3rem;height:50px;align-items:center}.div-ui-brokers-project-arch{display:flex;padding:2rem;gap:2.5rem;position:relative}.div-ui-brokers-project-arch:after{content:"";background:#fff;width:130px;height:130px;display:flex;position:absolute;bottom:-1px;left:-1px}.arrow-project-arch{position:absolute;bottom:0;left:0;background:#222;padding:1.25rem;border-radius:1rem;display:flex;transition:all .2s;z-index:2}.arrow-project-arch:hover{background:#4d004d}.arrow-project-arch svg{transition:all .2s}.arrow-project-arch:hover svg{transform:rotate(45deg)}.text-ui-brokers{height:auto;display:flex;flex-direction:column}.text-ui-brokers h4 a{font-size:48px;font-weight:700;line-height:64px;color:#222;margin-bottom:1.5rem;text-decoration:none}.text-ui-brokers p{color:#666;margin-bottom:.625rem}.text-ui-brokers p,.time-ui-brokers{font-size:20px;font-weight:400;line-height:40px}.time-ui-brokers{color:#858585;margin-top:auto}.flex-tags{display:flex;gap:1rem;align-items:center;margin-top:auto}.flex-tags ul{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap}.flex-tags ul li{padding:.5rem 1.5rem;background:#22222214;font-size:18px;font-weight:400;line-height:24px;border-radius:.5rem}.wp-box-project-arch{width:100%;background:#167ffc;color:#fff;padding:4rem 5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:1.5rem;border-radius:1rem}.wp-box-project-arch h6{font-size:88px;font-weight:700;line-height:88px;margin-top:1rem;text-align:left;letter-spacing:1px}.wp-box-project-arch p{font-size:24px;font-weight:400;line-height:32px;direction:ltr}.backend-box-project-arch{background:#222}.backend-box-project-arch,.frontend-box-project-arch{width:100%;padding:2.5rem 0;display:flex;flex-direction:column;gap:2.5rem;justify-content:center;align-items:center;border-radius:1rem}.frontend-box-project-arch{background:#fd3d39}.flex-dis-project-arch{display:flex;gap:1.5rem}.flex-svgs{display:flex;gap:2rem;margin-bottom:1.5rem}.flex-svgs img{width:88px;height:88px}.technology-text{color:#fff;font-size:24px;font-weight:400;line-height:32px;direction:ltr;text-align:center}.div-project-archive{display:flex;flex-direction:column;gap:4rem}.seo-boxes-project-arch{display:grid;grid-gap:1.5rem;gap:1.5rem;width:660px}.seo-box{padding:2.5rem 2rem;background:#222;color:#fff;border-radius:1rem;display:flex;flex-direction:column;gap:2rem}.seo-box p{font-size:24px;font-weight:400;line-height:32px}.seo-box span{font-size:88px;font-weight:700;line-height:72px;margin-top:auto}.seo-box span:before{content:"%";font-size:48px;font-weight:700;line-height:72px}.seo-box-yellow{grid-column:1/span 2;grid-row:1;background:#f4b400;width:60%;transition:all .4s;position:relative}.seo-box-yellow:before{content:"";border-radius:1rem;background:url(/_next/static/media/Rectangle\ 4129223.06bc301a.webp);position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1;background-size:cover}.seo-box-yellow:hover{background:transparent;background-size:cover}.seo-box-blue{grid-column:3;grid-row:1;background:#4285f4;width:40%;transition:all .4s;position:relative}.seo-box-blue:before{content:"";border-radius:1rem;background:url(/_next/static/media/Rectangle\ 4129226.3fb4cbb6.webp);position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1;background-size:cover}.seo-box-blue:hover{background:transparent;background-size:cover}.seo-box-red{grid-column:1;grid-row:2;background:#db4437;width:40%;transition:all .4s;position:relative}.seo-box-red:before{content:"";border-radius:1rem;background:url(/_next/static/media/Rectangle\ 4129224.1afb9ce2.webp);position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1;background-size:cover}.seo-box-red:hover{background:transparent;background-size:cover}.seo-box-green{grid-column:2/span 2;grid-row:2;background:#0f9d58;width:60%;transition:all .4s;position:relative}.seo-box-green:before{content:"";border-radius:1rem;background:url(/_next/static/media/Rectangle\ 4129225.64307bba.webp);position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1;background-size:cover}.seo-box-green:hover{background:transparent}.div-website-project-arch{overflow:hidden;width:660px}.website-project-arch{display:flex;gap:1.25rem}.div-more-website-project{position:relative;width:25%;overflow:hidden;transition:width .5s ease}.link-more-website-project{position:absolute;color:#fff;top:0;bottom:0;right:0;left:0;background:#111111e0;display:flex;justify-content:center;align-items:center;border-radius:.5rem;white-space:nowrap}.website-project-arch img{width:150px;height:-webkit-fill-available}.website-project-arch .img1:hover{width:100%}.allcards{animation:fade .4s 1}@keyframes fade{0%{opacity:0}to{opacity:1}}.flex-bexes-1,.flex-bexes-2{display:flex;gap:1.5rem}.ui-brokers-project-arch{width:660px}.pattern-card-archive{position:absolute;top:0;right:0;z-index:-1}.pattern-cards{width:100%;position:relative;border-radius:2rem;border:1px solid #cbcbcb}.arrow-project-arch:before{content:"";position:absolute;top:-17.5px;right:-17.5px;border-radius:0 32px 0 0;height:72%;width:76%;border-color:#cbcbcb;border-style:solid;border-width:1px 1px 0 0;z-index:2}.arrow-project-arch:after{content:"";bottom:80px;left:-1px;height:100%;width:60%}.arrow-project-arch:after,.p-pattern-cards{position:absolute;background:transparent;border-radius:0 0 0 2rem;border-color:#cbcbcb;border-style:solid;border-width:0 0 1px 1px}.p-pattern-cards{bottom:-1px;left:80.4px;width:100%;height:65%;padding:0;margin:0}.image-container{width:25%;overflow:hidden;position:relative}.image-container,.image-container img{transition:width .5s ease;border-radius:.5rem}.image-container img{object-position:33%;object-fit:cover}.image-container img,.image-container.expanded,.image-container.expanded img{width:100%;height:570px}.image-container.hidden{width:0}.patterns-header{padding-bottom:0}@media (max-width:1600px){.p-pattern-cards{left:81.4px}}@media (max-width:1400px){.backend-box-project-arch,.frontend-box-project-arch{padding:2rem}.pattern-cards:before{left:28px;bottom:38px}}@media (max-width:1200px){.div-project-archive .col-7{width:100%}.navbar-project .project-ul{width:90%}.seo-boxes-project-arch,.ui-brokers-project-arch,.website-project-arch{width:100%}.div-ui-brokers-project-arch{flex-wrap:wrap}.p-pattern-cards{height:90%}.pattern-cards:before{bottom:2.25%;height:8%;width:6%}}@media (max-width:992px){.navbar-project .project-ul{width:100%}.project-ul a{padding:.5rem .75rem;font-size:.75rem}.pattern-cards:before{width:7%}.p-pattern-cards{height:76%}}@media (max-width:768px){.navbar-project .project-ul{width:100%}.div-more-website-project{display:none}.wp-box-project-arch h6{font-size:48px;font-weight:700;line-height:48px}.technology-text,.wp-box-project-arch p{font-size:14px;font-weight:400;line-height:24px}.flex-svgs img{width:56px;height:56px}.backend-box-project-arch,.frontend-box-project-arch{padding:1.5rem;gap:1.5rem}.flex-dis-project-arch{gap:1rem}.wp-box-project-arch{margin-bottom:1rem;padding:2.5rem 0}.seo-box p{font-size:14px;font-weight:400;line-height:24px}.seo-box{gap:.75rem;padding:1rem}.seo-box span{font-size:48px;font-weight:700;line-height:72px}.flex-bexes-1,.flex-bexes-2,.seo-boxes-project-arch{gap:1rem}.div-project-archive .col-7{height:auto}.pattern-cards:before{width:11.5%;left:20px}.div-website-project-arch{width:100%}}@media (max-width:578px){.title-product-archive h2{font-size:32px;font-weight:700;line-height:40px}.title-product-archive p{font-size:14px;font-weight:400;line-height:16px}.text-ui-brokers h4 a{font-size:20px;font-weight:700;line-height:24px;margin-bottom:1.25rem}.p-ui-brokers p{font-size:16px;font-weight:400;line-height:32px}.time-ui-brokers{font-size:14px;font-weight:400;line-height:24px}.flex-tags p{display:none}.backend-box-project-arch,.frontend-box-project-arch{padding:1rem 0;gap:1rem}.flex-svgs{gap:1rem}.div-ui-brokers-project-arch{padding:1rem;gap:1.5rem}.pattern-cards:before{bottom:23px}}