@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0}
main{display:block}
h1{font-size:2em;margin:.67em 0}
hr{box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,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}
img{border-style:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details{display:block}
summary{display:list-item}
template{display:none}
[hidden]{display:none}
/**
 * @license
 *
 * Font Family: Satoshi
 * Designed by: Deni Anggara
 * URL: https://www.fontshare.com/fonts/satoshi
 * © 2022 Indian Type Foundry
 *
 * Font Styles:
 * Satoshi Variable(Variable font)
 * Satoshi Variable Italic(Variable font)
 * Satoshi Light
 * Satoshi Light Italic
 * Satoshi Regular
 * Satoshi Italic
 * Satoshi Medium
 * Satoshi Medium Italic
 * Satoshi Bold
 * Satoshi Bold Italic
 * Satoshi Black
 * Satoshi Black Italic
 *
*/@font-face{font-family:Satoshi-Variable;src:url(/assets/Satoshi-Variable-CFg-z2ne.woff2) format("woff2"),url(/assets/Satoshi-Variable-B5cVmYQo.woff) format("woff"),url(/assets/Satoshi-Variable-ChAXbpFa.ttf) format("truetype");font-weight:300 900;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi-VariableItalic;src:url(/assets/Satoshi-VariableItalic-DjwFspxr.woff2) format("woff2"),url(/assets/Satoshi-VariableItalic-DeirzIcA.woff) format("woff"),url(/assets/Satoshi-VariableItalic-Bb7sdEFv.ttf) format("truetype");font-weight:300 900;font-display:swap;font-style:italic}
@font-face{font-family:Satoshi-Light;src:url(/assets/Satoshi-Light-IqwJ_ZjS.woff2) format("woff2"),url(/assets/Satoshi-Light-C_dmkKXz.woff) format("woff"),url(/assets/Satoshi-Light-B82kzbU-.ttf) format("truetype");font-weight:300;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi-LightItalic;src:url(/assets/Satoshi-LightItalic-C9iuU4v7.woff2) format("woff2"),url(/assets/Satoshi-LightItalic-B9L6s97T.woff) format("woff"),url(/assets/Satoshi-LightItalic-BAhuxY-A.ttf) format("truetype");font-weight:300;font-display:swap;font-style:italic}
@font-face{font-family:Satoshi-Regular;src:url(/assets/Satoshi-Regular-CPM9dct4.woff2) format("woff2"),url(/assets/Satoshi-Regular-CWSyEjGv.woff) format("woff"),url(/assets/Satoshi-Regular-DToFXog2.ttf) format("truetype");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi-Italic;src:url(/assets/Satoshi-Italic-wVmEEc6M.woff2) format("woff2"),url(/assets/Satoshi-Italic-BPCXRxzy.woff) format("woff"),url(/assets/Satoshi-Italic-FMxkCD8o.ttf) format("truetype");font-weight:400;font-display:swap;font-style:italic}
@font-face{font-family:Satoshi-Medium;src:url(/assets/Satoshi-Medium-ByP-Zb-9.woff2) format("woff2"),url(/assets/Satoshi-Medium-DDwDPeBg.woff) format("woff"),url(/assets/Satoshi-Medium-DOt9kM-a.ttf) format("truetype");font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi-MediumItalic;src:url(/assets/Satoshi-MediumItalic-BxR-IcRj.woff2) format("woff2"),url(/assets/Satoshi-MediumItalic-BPTJUpxz.woff) format("woff"),url(/assets/Satoshi-MediumItalic-BUFVYoD2.ttf) format("truetype");font-weight:500;font-display:swap;font-style:italic}
@font-face{font-family:Satoshi-Bold;src:url(/assets/Satoshi-Bold-Bd5kKQ_U.woff2) format("woff2"),url(/assets/Satoshi-Bold-C2PhLWFc.woff) format("woff"),url(/assets/Satoshi-Bold-CPly9kH5.ttf) format("truetype");font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi-BoldItalic;src:url(/assets/Satoshi-BoldItalic-CAjvAcxR.woff2) format("woff2"),url(/assets/Satoshi-BoldItalic-DQ7B0PfL.woff) format("woff"),url(/assets/Satoshi-BoldItalic-tClQcAb-.ttf) format("truetype");font-weight:700;font-display:swap;font-style:italic}
@font-face{font-family:Satoshi-Black;src:url(/assets/Satoshi-Black-DjnQuuRz.woff2) format("woff2"),url(/assets/Satoshi-Black-D3hzT7Um.woff) format("woff"),url(/assets/Satoshi-Black-CizHyRqb.ttf) format("truetype");font-weight:900;font-display:swap;font-style:normal}
@font-face{font-family:Satoshi-BlackItalic;src:url(/assets/Satoshi-BlackItalic-ChCbTD27.woff2) format("woff2"),url(/assets/Satoshi-BlackItalic-D8Ai_S3C.woff) format("woff"),url(/assets/Satoshi-BlackItalic-CvIpOoSh.ttf) format("truetype");font-weight:900;font-display:swap;font-style:italic}
:root{font-family:Satoshi,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;image-rendering:crisp-edges;color:#fff}
body{background:#000}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}
table{border-collapse:collapse;border-spacing:0}
a{text-decoration:none}
.app{display:flex;flex-direction:column;align-items:center;justify-content:center}
html{scroll-behavior:smooth}
.homepage-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;position:relative;max-width:2000px;padding-bottom:100px}
.homepage-container>*{width:100%}
.homepage-background{top:0;left:0;position:fixed;width:100%;height:100vh;z-index:-1}
.homepage-background .blob{position:absolute;background:url(/assets/projects-detail-halo-gTa8VRXB-web.webp);width:800px;height:800px;background-size:cover;filter:blur(50px);opacity:0;transition:opacity 1.5s ease-in-out}
.homepage-background .blob:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:inherit;background-size:cover;filter:blur(50px);opacity:.4;animation:blobRotate 3s linear infinite}
@keyframes blobRotate{0%{transform:rotate(0)}
to{transform:rotate(360deg)}
}
@media screen and (max-width: 1200px){.homepage-background .blob{display:none}
}
.hero-container{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;box-sizing:border-box;overflow:hidden;position:relative}
.hero-background{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;object-fit:cover;z-index:-1;display:flex;-webkit-mask-image:radial-gradient(circle at center,black 40%,transparent 100%);mask-image:radial-gradient(circle at center,black 40%,transparent 100%);margin-top:-80px;background:url(/img/other/mask-web.webp);mix-blend-mode:lighten}
.hero-videos-text{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}
.htext1,.htext2{mix-blend-mode:lighten}
.htext1{width:100%;max-width:800px;margin-top:20px}
.htext2{width:100%;max-width:500px;margin-top:-70px}
.hero-top,.hero-bottom{width:100%;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.hero-top{gap:16px}
.hero-bottom{gap:0px;position:relative}
.nabil-flores{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-size:96px;margin:0;line-height:.8}
.nabil-flores .name,.nabil-flores .lastname{display:flex;flex-direction:row}
.nabil-flores .name{font-weight:700}
.nabil-flores .lastname{font-weight:400}
.hero-top .profession{font-size:33px;font-weight:400}
.hero-bottom p{font-size:16px;font-weight:700;margin-bottom:15px}
.brands-wrapper{position:relative;width:90%;max-width:1536px;height:100px;background:linear-gradient(transparent,#000);overflow:hidden;-webkit-mask-image:linear-gradient(to right,#0000,#000 20%,#000 80%,#0000);mask-image:linear-gradient(to right,#0000,#000 20%,#000 80%,#0000)}
.brand-item{position:relative;width:200px;height:100px;display:flex;justify-content:center;align-items:center;position:absolute;left:max(1800px,100%);animation:scrollLeft 30s linear infinite}
.brand-item img{max-width:180px;max-height:80px;object-fit:contain;overflow:hidden}
.brand-role{position:absolute;height:98%;width:120%;background:#0c0c0cd8;border-radius:25px;border:1px solid #ffffff27;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:10px 30px;opacity:0;transition:all .3s ease;flex-direction:column}
.brand-role p{font-size:16px;font-weight:500;margin:0;color:#fdfdfd}
.brand-subtitle{font-size:13px!important}
.brand-item:hover .brand-role{opacity:1}
.brand-item:hover img{filter:blur(10px)}
@keyframes scrollLeft{to{left:-200px}
}
@keyframes scroll{to{transform:translate(calc(-100% - 30px))}
}
@media screen and (max-width: 700px){.hero-bottom-text{width:300px}
}
@media screen and (max-width: 1000px){.brand-item{width:150px;left:max(1350px,100%);gap:15px}
.brand-item img{max-width:100px;max-height:50px;transform:scale(1.3)}
.nabil-flores{font-size:81.6px}
.hero-top .profession{font-size:28px}
.hero-top .location{font-size:17px}
}
.hero-top{visibility:hidden}
.aboutme-container{display:flex;flex-direction:column;align-items:center;overflow:hidden;position:relative;padding-block:100px 160px}
.aboutme-container:before{content:"";position:absolute;display:block;width:100%;height:100%;background:url(/assets/magic-bg-CLI7ywLm-web.webp);background-size:cover;background-position:center;top:0;left:0;mix-blend-mode:lighten}
.aboutme-container:after{content:"";position:absolute;display:block;width:100%;height:100%;background:linear-gradient(black,transparent,transparent,transparent);background-size:cover;background-position:center;top:0;left:0;pointer-events:none}
.aboutme-box{position:relative;background:#000000ba;box-shadow:inset 0 0 100px #80808021,inset 0 0 100px #000;max-width:900px;padding:50px;padding-block:100px 80px;border:0;border-radius:70px;box-sizing:border-box;overflow:hidden}
.aboutme-box:before{content:"";position:absolute;display:block;width:100%;height:100%;background:url(/assets/magic-bg-CLI7ywLm-web.webp);background-size:cover;background-position:center;top:0;left:0;opacity:.5;mix-blend-mode:lighten;border-radius:70px;z-index:1}
.aboutme-box:after{content:"";position:absolute;display:block;width:100%;height:100%;background:url(/assets/endorsements-bg-Du_fZPdv-web.webp);background-size:cover;background-repeat:no-repeat;background-position:bottom;top:0;left:0;opacity:.5;mix-blend-mode:plus-lighter;border-radius:70px;z-index:1;filter:hue-rotate(50deg) saturate(1.5)}
.aboutme-box:after:after{content:"";position:absolute;display:block;width:100%;height:100%;background:linear-gradient(to right,#0c0c0c,transparent,transparent,#0c0c0c);background-size:cover;background-position:center;top:0;left:0;pointer-events:none;border-radius:70px}
.aboutme-title{font-size:47px;font-weight:700;color:#fff;text-align:center;margin-bottom:50px;position:relative;z-index:2;opacity:0;transition:opacity .7s ease}
.aboutme-title.is-visible{opacity:1}
.aboutme-gadgets{position:relative;width:100%;max-width:1000px;display:flex;z-index:2;align-items:center;justify-content:center;margin-bottom:-80px}
.aboutme-gadgets .gadget{width:200px;display:flex;justify-content:center;transition:.3s;cursor:pointer}
.aboutme-gadgets .gadget img{max-height:230px;object-fit:contain}
.aboutme-gadgets .gadget:hover{padding-inline:20px;transform:scale(1.1) rotate(-20deg);z-index:3}
.aboutme-gadgets .gadget .lamp{z-index:2}
.aboutme-gadgets .gadget:first-child{margin-right:-30px;margin-top:-20px}
.aboutme-gadgets .gadget:last-child{margin-left:50px;margin-top:-20px}
.aboutme-text{font-size:20px;display:flex;flex-direction:column;gap:30px;position:relative;line-height:1.5;z-index:2}
.aboutme-box button{font-size:15px;font-weight:700;padding:10px 20px;border:1px solid white;border-radius:100px;background:transparent;color:#fff;cursor:pointer;transition:.3s ease-in-out;height:min-content;z-index:2;position:relative}
.aboutme-box button:hover{background:#ffffff1a}
.aboutme-socials{position:absolute;bottom:0;right:0;display:flex;gap:20px;margin:30px;z-index:2}
.aboutme-socials a{padding:20px;background:#0d0d0d;border:1px solid #272727;border-radius:100px;transition:.3s ease-in-out}
.aboutme-socials i{color:#fff;text-decoration:none;font-size:40px;transition:color .3s ease}
.aboutme-socials a:hover{background:#141414}
.pulsar-pointer{position:relative;margin-top:3px;width:12px;height:12px;background:#fff;border-radius:100%;box-shadow:0 0 10px #fff,0 0 15px #fff,0 0 20px #fff,0 0 20px #fff,0 0 30px #fff}
.pulsar-pointer:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background:#ffffff98;border-radius:100%;transform:translate(-50%,-50%);animation:pulsarCircle 2.3s steps(1,end) infinite}
@keyframes pulsarCircle{0%,50%{transform:translate(-50%,-50%) scale(1);opacity:1;animation-timing-function:ease-out}
25%{transform:translate(-50%,-50%) scale(5);opacity:0}
50.001%,to{transform:translate(-50%,-50%) scale(1);opacity:0}
}
.aboutme-capsules>div:first-child:hover .c1-overlay{animation:hoverAnimation .5s ease forwards;z-index:-1;transition:z-index 0s .25s}
.aboutme-capsules>div:first-child:not(:hover) .c1-overlay{animation:reverseHoverAnimation .5s ease forwards;transition:z-index 0s .25s}
.aboutme-capsules>div:nth-child(4):hover .c2-overlay{animation:hoverAnimation4 .5s ease forwards;z-index:-1;transition:z-index 0s .25s}
.aboutme-capsules>div:nth-child(4):not(:hover) .c2-overlay{animation:reverseHoverAnimation4 .5s ease forwards;transition:z-index 0s .25s}
@keyframes hoverAnimation{0%{transform:translate(5px,-5px) rotate(10deg)}
50%{transform:translate(-150px,-30px) rotate(-10deg)}
to{transform:translate(-20px,-5px) rotate(-10deg)}
}
@keyframes reverseHoverAnimation{0%{transform:translate(-20px,-5px) rotate(-10deg)}
50%{transform:translate(-150px,-30px) rotate(-10deg)}
to{transform:translate(5px,-5px) rotate(10deg)}
}
@keyframes hoverAnimation4{0%{transform:translate(5px,5px) rotate(-10deg)}
50%{transform:translate(150px,30px) rotate(10deg)}
to{transform:translate(20px,5px) rotate(10deg)}
}
@keyframes reverseHoverAnimation4{0%{transform:translate(20px,5px) rotate(10deg)}
50%{transform:translate(150px,30px) rotate(10deg)}
to{transform:translate(5px,5px) rotate(-10deg)}
}
.aboutme-capsules>div:first-child,.aboutme-capsules>div:nth-child(4){position:relative}
.hidden-paragraph{max-height:0;overflow:hidden;transition:max-height .3s ease-in-out;margin-bottom:0}
.hidden-paragraph.show{max-height:var(--paragraph-height);margin-bottom:35px}
.hidden-paragraph{animation:fadeIn .3s ease-in-out}
@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}
to{opacity:1;transform:translateY(0)}
}
.gadget{opacity:0;transform:translateY(40px);transition:none}
.gadget.gadget-appear{animation:gadgetAppear .7s cubic-bezier(.23,1,.32,1) forwards}
@keyframes gadgetAppear{0%{opacity:0;transform:translateY(40px)}
to{opacity:1;transform:translateY(0)}
}
@media screen and (max-width: 1090px){.aboutme-box{flex-direction:column;width:90%}
.aboutme-nab{width:150%}
.aboutme-box>div{width:100%;display:flex;flex-direction:column;align-items:center}
}
@media screen and (max-width: 768px){.aboutme-box{width:calc(100% + 10px);border-radius:80px;padding-bottom:130px;padding-top:80px}
.aboutme-container:after{background:none}
.aboutme-gadgets{margin-bottom:-50px}
.aboutme-gadgets .gadget{width:80px;margin:0!important}
.aboutme-gadgets .gadget img{max-height:110px;object-fit:contain;margin:0!important}
.aboutme-gadgets .gadget:last-child{padding-left:20px!important}
.aboutme-gadgets .gadget:hover{padding:0}
.aboutme-socials{margin-top:60px}
.aboutme-socials i{font-size:30px}
}
.location-tooltip{position:absolute;background:#000c;color:#fff;padding:8px 12px;border-radius:6px;font-size:20px;white-space:nowrap;top:-40px;left:50%;transform:translate(-50%);z-index:1000;opacity:0;visibility:hidden;transition:opacity .15s ease-in-out,visibility .15s ease-in-out;will-change:opacity,visibility}
.location-tooltip.show{opacity:1;visibility:visible}
.location-tooltip:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);border-width:10px 10px 0;border-style:solid;border-color:rgba(0,0,0,.8) transparent transparent}
.projects-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:30px;position:relative;background:linear-gradient(transparent 90%,#000)}
.projects-halo{position:absolute;width:100%;height:1500px;background-image:url(/assets/projects-halo-BTIUMcCI-web.webp);background-position:center;margin-top:-590px;z-index:-1;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.projects-container h2{display:flex;flex-direction:column;align-items:center;line-height:.9;padding-block:30px 50px;z-index:1}
.projects-title1{font-size:62px;font-weight:700;opacity:0;animation:appearProjects 1.2s ease forwards;animation-play-state:paused}
.projects-title2{font-size:40px;font-weight:400;opacity:0;animation:appearProjects 1.2s ease forwards;animation-delay:.2s;animation-play-state:paused}
.projects-container h2.visible .projects-title1,.projects-container h2.visible .projects-title2{animation-play-state:running}
.projects{width:100%;overflow:hidden;display:flex;position:relative;gap:30px}
.projects-slide{display:flex;align-items:center;gap:30px;flex-shrink:0;animation:scrollProjects 20s linear infinite}
.projects.projects-reverse .projects-slide{animation:scrollProjectsReverse 20s linear infinite}
.projects.projects-reverse .projects-slide:first-child{transform:translate(calc(-100% - 30px))}
@keyframes scrollProjects{to{transform:translate(calc(-100% - 30px))}
}
@keyframes scrollProjectsReverse{0%{transform:translate(calc(-100% - 30px))}
to{transform:translate(0)}
}
@keyframes appearProjects{0%{opacity:0;filter:blur(10px);transform:translateY(50px) scale(1.8)}
to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}
.project-card{width:612px;height:432px;background:#141414;border:1px solid #3e3e3e;border-radius:13px;text-decoration:none;overflow:hidden}
.project-card-image{width:100%;height:100%;background-size:cover;background-position:center;transition:transform .5s ease}
.project-card:hover .project-card-image{transform:scale(1.05)}
@media screen and (max-width: 1500px){.project-card{width:459px;height:324px}
}
@media screen and (max-width: 1000px){.project-card{width:306px;height:216px}
}
.houseofnawel-container{overflow:hidden;width:100%;display:flex;flex-direction:column;align-items:center;background:#000;padding-block:100px;position:relative}
.houseofnawel-box{width:100%;max-width:1200px;display:flex;flex-direction:column-reverse;align-items:center;gap:50px}
.houseofnawel-content{text-align:center;max-width:800px;color:#e4d5ab;mix-blend-mode:screen}
.houseofnawel-content h2{font-size:47px;font-weight:700;margin-bottom:30px;color:#e4d5ab}
.houseofnawel-content p{font-size:20px;line-height:1.5;color:#e4d5ab}
.houseofnawel-image{width:100%;max-width:1000px;opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.23,1,.32,1),transform .7s cubic-bezier(.23,1,.32,1)}
.houseofnawel-image.is-visible{opacity:1;transform:translateY(0)}
.houseofnawel-image img{width:100%;height:auto;object-fit:contain}
.hon-wrapper{position:relative;width:100%;max-width:1100px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.hon-img{width:100%;height:auto;mix-blend-mode:plus-lighter;display:block;cursor:pointer}
.hon-logo{position:absolute;top:0;left:0;right:0;margin:50px auto auto;height:150px;width:auto;max-width:300px}
.hon-content{font-size:20px;position:relative;line-height:1.5;max-width:900px;text-align:center;padding:0 20px;box-sizing:border-box;color:#e4d5ab;padding-block:50px;mix-blend-mode:screen}
@media screen and (max-width: 768px){.houseofnawel-content h2{font-size:32px}
.houseofnawel-content p{font-size:18px}
.hon-img{transform:scale(1.1)}
.hon-logo{height:90px;margin-top:30px}
.hon-content{font-size:16px;white-space:wrap}
.hon-content p{display:inline;margin-right:5px}
}
@media screen and (max-width: 1780px){.houseofnawel-container{background:linear-gradient(black,black,transparent)}
}
@media screen and (max-width: 500px){.hon-logo{margin-top:0}
}
.pixlerz-container{overflow:hidden;width:100%;display:flex;flex-direction:column;align-items:center;position:relative;padding-bottom:40px;padding-top:40px}
.pixlerz-container:before{content:"";position:absolute;display:block;width:100%;height:100%;background:url(/assets/magic-desktop-bg-CUSwGN5V-web.webp);background-size:80%;background-repeat:no-repeat;background-position:bottom;top:0;left:0;mix-blend-mode:lighten}
.pixlerz-wrapper{display:flex;flex-direction:column;align-items:center;gap:50px}
.pixlerz-container h2{font-size:30px;font-weight:400;margin-top:-85px}
.pixlerz-container p{background:linear-gradient(135deg,#bb5030,#521a39,#7e1e54);border:1px solid #ffffff33;font-size:18px;font-weight:400;padding:30px;width:600px;border-radius:35px;line-height:1.5;margin-bottom:50px}
.services-sliders-wrap{width:100%;display:flex;flex-direction:column;gap:30px;margin-block:60px;overflow:hidden}
.services{width:100%;overflow:hidden;display:flex;position:relative;gap:30px}
.services-slide{display:flex;align-items:center;gap:25px;flex-shrink:0;animation:scrollServices 20s linear infinite;will-change:transform}
.services.services-reverse .services-slide{animation:scrollServicesReverse 20s linear infinite}
@keyframes scrollServices{to{transform:translate(calc(-100% - 30px))}
}
@keyframes scrollServicesReverse{0%{transform:translate(calc(-100% - 30px))}
to{transform:translate(0)}
}
@media screen and (max-width: 900px){.pixlerz-container{padding-top:0;margin-top:-90px}
.pixlerz-container p{width:80%}
.pixlerz-container:before{background-size:cover}
}
.button-component{background:#101010;color:#fff;padding:15px 30px;border-radius:25px;font-size:14px;font-weight:900;text-transform:uppercase;box-shadow:0 26.878px 21.502px #bb91ff0d,0 16.19px 12.952px #bb91ff0d,0 10.375px 8.3px #bb91ff0a,0 6.725px 5.38px #bb91ff0a,0 4.233px 3.386px #bb91ff08,0 2.432px 1.946px #bb91ff05,0 1.07px .856px #bb91ff05;position:relative;text-decoration:none;display:inline-block;transition:all .3s ease;width:fit-content}
.button-component:hover{transform:translateY(-2px);background:#1a1a1a;box-shadow:0 30px 25px #bb91ff14,0 0 15px #bb91ff12,0 15px 10px #bb91ff0f}
.button-component.primary{border:1px solid #F68FFF;position:relative;overflow:hidden}
.button-component.primary:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3csvg%20width='147'%20height='42'%20viewBox='0%200%20147%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_f_23_4)'%3e%3cellipse%20cx='73.5'%20cy='-42.5'%20rx='66.5'%20ry='42.5'%20fill='%237660AA'/%3e%3c/g%3e%3cg%20filter='url(%23filter1_f_23_4)'%3e%3cellipse%20cx='73'%20cy='65.5'%20rx='46'%20ry='29.5'%20fill='%23D25AD9'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_23_4'%20x='-30.12'%20y='-122.12'%20width='207.24'%20height='159.24'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='18.56'%20result='effect1_foregroundBlur_23_4'/%3e%3c/filter%3e%3cfilter%20id='filter1_f_23_4'%20x='0.148149'%20y='9.14815'%20width='145.704'%20height='112.704'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='13.4259'%20result='effect1_foregroundBlur_23_4'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:100% 200%;pointer-events:none}
.button-component.secondary{border:1px solid #FF8FC0;position:relative;overflow:hidden;font-size:20px}
.button-component.secondary:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3csvg%20width='147'%20height='42'%20viewBox='0%200%20147%2042'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_f_23_4)'%3e%3cellipse%20cx='73.5'%20cy='-42.5'%20rx='66.5'%20ry='42.5'%20fill='%23CD58AA'/%3e%3c/g%3e%3cg%20filter='url(%23filter1_f_23_4)'%3e%3cellipse%20cx='73'%20cy='65.5'%20rx='46'%20ry='29.5'%20fill='%23C94F98'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_23_4'%20x='-30.12'%20y='-122.12'%20width='207.24'%20height='159.24'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='18.56'%20result='effect1_foregroundBlur_23_4'/%3e%3c/filter%3e%3cfilter%20id='filter1_f_23_4'%20x='0.148149'%20y='9.14815'%20width='145.704'%20height='112.704'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='13.4259'%20result='effect1_foregroundBlur_23_4'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e");background-position:center;background-repeat:no-repeat;background-size:100% 200%;pointer-events:none}
.service-card{display:flex;align-items:center;background:#000;padding:35px 50px;border-radius:25px;border:1px solid #343434}
.service-card h3{font-size:20px;font-weight:400;margin-left:15px;font-size:34px}
.service-card img{height:35px}
@media screen and (max-width: 1200px){.service-card{padding:28px 40px;border-radius:20px}
.service-card h3{font-size:27px;margin-left:12px}
.service-card img{height:28px}
}
.endorsements-container{display:flex;flex-direction:column;align-items:center;overflow:hidden;position:relative;padding-top:100px;margin-bottom:-2px}
.endorsements-container:before{content:"";position:absolute;display:block;width:100%;height:100%;background:url(/assets/magic-bg-2-BjryQRcD-web.webp);background-repeat:no-repeat;background-position:center -200px;top:0;left:0}
.endorsements-container:after{content:"";position:absolute;display:block;width:100%;height:100%;background:linear-gradient(#000000,transparent,transparent 75%,#000000 90%,#000000);background-size:cover;background-position:center;top:0;left:0;pointer-events:none}
.endorsements-testimonials-wrapper{width:100%;display:flex;flex-direction:column;align-items:center}
.endorsements-box{width:1200px;height:520px;padding:50px;display:flex;flex-direction:column;align-items:center;gap:30px;background:url(/assets/magic-bg-2-BjryQRcD-web.webp);background-size:150%;background-position:center;background-repeat:no-repeat;border-radius:52px;box-sizing:border-box;position:relative;overflow:visible;border:1px solid rgba(255,255,255,.212)}
.endorsements-box:before{content:"";position:absolute;display:block;width:100%;height:100%;background:url(/assets/endorsements-bg-Du_fZPdv-web.webp);background-size:100%;background-repeat:no-repeat;background-position:bottom;top:0;left:0;opacity:1;mix-blend-mode:plus-lighter;border-radius:52px}
.endorsements-box:after{content:"";position:absolute;display:block;width:100%;height:100%;background:linear-gradient(to right,#0c0c0c,transparent,transparent,#0c0c0c);background-size:cover;background-position:center;top:0;left:0;pointer-events:none;border-radius:52px}
.endorsements-highlight{position:absolute;width:687.96px;height:764.4px;margin-top:-100px;background-image:url("data:image/svg+xml,%3csvg%20width='441'%20height='490'%20viewBox='0%200%20441%20490'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_f_23_4)'%3e%3ccircle%20cx='220.5'%20cy='269.5'%20r='120.5'%20fill='%23FE0DD5'/%3e%3c/g%3e%3cg%20filter='url(%23filter1_f_23_4)'%3e%3ccircle%20cx='222'%20cy='178'%20r='76'%20fill='%23FD7D0A'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_23_4'%20x='0'%20y='49'%20width='441'%20height='441'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='50'%20result='effect1_foregroundBlur_23_4'/%3e%3c/filter%3e%3cfilter%20id='filter1_f_23_4'%20x='44.1'%20y='0.0999985'%20width='355.8'%20height='355.8'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='50.95'%20result='effect1_foregroundBlur_23_4'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}
.endorsements-box h2{width:110%;font-family:Inter,sans-serif;display:flex;flex-direction:column;align-items:center;line-height:.9;text-align:center;position:relative;z-index:2;opacity:0;transform:translateY(-40px);transition:opacity .7s cubic-bezier(.23,1,.32,1),transform .7s cubic-bezier(.23,1,.32,1)}
.endorsements-box h2.is-visible{opacity:1;transform:translateY(0)}
.endorsements-title1{font-size:32px;font-weight:400}
.endorsements-title2{font-size:50px;font-weight:700}
.endorsements{margin-top:-360px;width:100%;max-width:1525px;overflow:hidden;display:flex;position:relative}
.endorsements-slide{display:flex;align-items:center;gap:35px;flex-shrink:0;animation:scrollEndorsements 15s linear infinite}
.endorsements-slide:hover{animation-play-state:paused}
@keyframes scrollEndorsements{to{transform:translate(calc(-50% - 17.5px))}
}
.contact{display:flex;flex-direction:column;align-items:center;gap:20px;margin-block:80px;z-index:2}
.contact-text{font-size:20px;font-weight:400}
@media screen and (max-width: 768px){.endorsements-container{padding-top:10px}
}
.fade-in-scroll{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.23,1,.32,1),transform .7s cubic-bezier(.23,1,.32,1)}
.fade-in-scroll.is-visible{opacity:1;transform:translateY(0)}
.endorsement-card{width:200px;height:396.5px;border:1px solid #3F3F3F;border-radius:18px;position:relative;overflow:hidden;transition:.3s}
.endorsement-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.endorsement-content{width:100%;position:absolute;top:0;right:0;bottom:0;left:0;background:#00000093;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 50px 1px #5f5f5f57,inset 0 0 20px 1px #ffffff0a;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-block:20px;opacity:0;transition:.2s ease}
.endorsement-text{width:80%;font-size:17px;margin:auto 0;text-align:left;pointer-events:none;line-height:2;transform:scale(1.5);transition:.6s ease;opacity:0}
.endorsement-text:before{content:"“"}
.endorsement-text:after{content:"”"}
.endorsement-info{text-align:center;margin-bottom:-60px;transition:.5s ease}
.endorsement-name{font-weight:700;font-size:20px;margin-bottom:4px}
.endorsement-handle{font-size:16px}
.endorsement-card.is-open{position:relative;width:300px;z-index:2}
.endorsement-card:nth-child(6).is-open{position:relative;width:350px;z-index:2}
.endorsement-card.is-open .endorsement-content{opacity:1}
.endorsement-card.is-open .endorsement-text{transform:scale(1);line-height:1.2;opacity:1}
.endorsement-card.is-open .endorsement-info{margin-bottom:0}
.endorsement-card.is-open .endorsement-image{transform:scale(1.1)}
.badge-check{width:16px;height:16px;margin-left:4px;vertical-align:middle}
.app{width:100%;min-height:100vh;display:flex;justify-content:center}
@media (max-width: 768px){.cursor{display:none}
}
.footer-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-block:50px 20px;overflow:hidden}
.footer-halo{position:absolute;width:100%;height:1700px;background-image:url(/assets/footer-halo-DE-Hj2W2-web.webp);background-position:center top;margin-top:-850px;z-index:-2;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.footer-container a,.footer-sections div{color:#fff;transition:.2s;cursor:pointer}
.footer-container a:hover,.footer-sections div:hover{text-shadow:0 0 10px white}
.footer-box{width:70%;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid white;padding:60px;border-radius:30px;box-sizing:border-box;line-height:1.5}
.footer-box>*{width:50%;display:flex;font-size:20px;flex-direction:row;justify-content:center;align-items:center;gap:50px}
.footer-text{display:flex;flex-direction:column;gap:20px}
.footer-links h4{margin:0 0 10px;font-weight:400;font-size:18px;color:#ffffff91}
@media screen and (max-width: 1090px){.footer-box{width:90%;padding:40px;flex-direction:column;gap:30px}
.footer-box>*{width:100%;gap:30px}
.footer-box p{text-align:center;max-width:680px}
}
.not-found-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px}
.not-found-container h1{font-size:120px;margin:0;font-weight:700}
.not-found-container h2{font-size:30px;margin:0 0 20px}
.not-found-container p{color:#ffffffc7;margin-bottom:30px}
.back-home{color:#fff;text-decoration:none;padding:10px 20px;border:1px solid #fff;border-radius:30px;transition:all .3s ease}
.back-home:hover{background:#1a1a1a}
.cursor{width:12px;height:12px;background:#fff;border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transition:all 1s cubic-bezier(.075,.82,.165,1);left:-4px;top:-4px}
@media screen and (max-width: 768px){.cursor{display:none}
}
