:root{--background-color:#f5f5f5;--text-color:#333;--coral:#db5349;--gray:#383e42;--black:#000;--white:#f5f5f5;--font-family:"Arial",sans-serif;--btn-height:36px;--btn-radius:25px;--btn-padding:6px 15px;--btn-border:1.5px solid var(--black);--btn-font-size:16px}body{all:unset;color:var(--black);font-family:Montserrat,sans-serif;font-size:24px;font-weight:600;line-height:1.5;overflow-x:hidden}section{text-align:center}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}.btn{border:var(--btn-border);color:var(--black);padding:var(--btn-padding);height:var(--btn-height);border-radius:var(--btn-radius);font-size:var(--btn-font-size);cursor:pointer}.btn:hover{background-color:var(--black);color:var(--white);transition:all .4s}.btn.white{border-color:var(--white);color:var(--white)}.hello{color:red}h1{color:var(--coral);margin:30px auto;font-family:Noto Serif,serif;font-size:43px;font-weight:500;transition:font-size .4s,font-weight .4s,color .4s}section{margin-bottom:100px}.square{width:calc(var(--btn-height)*12);height:calc(var(--btn-height)*9);border-radius:var(--btn-radius);border:var(--btn-border);border-color:var(--coral);color:var(--coral);padding:var(--btn-height);background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;justify-content:space-between;align-items:center;padding-top:86px;font-size:30px;transition:all 2s;display:flex}.square.full{background-color:var(--coral);color:var(--white)}section:has(div.square)>div{justify-content:center;gap:70px;padding:40px;display:flex}.square span{white-space:nowrap;margin-bottom:50px;font-family:Noto Serif,serif;font-size:37px;font-weight:700}.square .btn{border-color:var(--coral);color:var(--coral);margin-top:auto}.square .btn:hover{background-color:var(--coral);color:var(--white)}.square.full .btn{border-color:var(--white);color:var(--white)}.square.full .btn:hover{background-color:var(--white);color:var(--coral)}header{text-align:center;font-size:var(--btn-font-size);align-items:center;display:flex}header.header-top{background-color:var(--coral);color:var(--white);gap:20px;padding:15px 70px}header.header-top nav{margin:0 auto;display:flex}header.header-top svg.logo{object-fit:cover;object-position:0 -10px;width:150px;height:auto;fill:var(--white)}header.header-top svg.home{display:none}header.header-top a{border:var(--btn-border);border-color:var(--white);padding:var(--btn-padding);height:var(--btn-height);border-radius:var(--btn-radius)}header.header-top>a:hover{background-color:var(--white);color:var(--coral)}header.header-top nav a{border:var(--btn-border);border-color:#0000}header.header-top nav a:hover{border-color:var(--white)}header.header-active{z-index:1000;border:var(--btn-border);border-color:var(--coral);height:var(--btn-height);border-radius:var(--btn-radius);color:var(--coral);position:fixed;top:15px;left:50%;transform:translate(-50%)}header.header-active nav{display:contents}header.header-active a{border:var(--btn-border);padding:var(--btn-padding);height:var(--btn-height);border-radius:var(--btn-radius);white-space:nowrap;border-color:#0000}header.header-active>a{background-color:var(--coral);color:var(--white)}header.header-active svg.logo{display:none}header.header-active a.ct{border-top-right-radius:0;border-bottom-right-radius:0}header.header-active a.sn{border-top-left-radius:0;border-bottom-left-radius:0}header.header-active nav a:hover{background-color:var(--coral);color:var(--white)}header{background-color:#0000}header.header-active{background-color:#ffffff85}header,header *{transition:all .3s ease-in-out}.intro{text-align:center;flex-direction:column;justify-content:center;align-items:center;margin-top:100px;display:flex}.intro h1{color:var(--black)}.intro div{color:var(--gray);justify-content:center;align-items:center;gap:60px;margin-top:30px;font-size:20px;display:flex}.projects-track{width:100%;margin-bottom:35px;position:relative}.projects-track>div{justify-content:center;display:flex}.projects-track>div.transitioning{transition:transform .5s ease-in-out}.projects-track>div>div{width:400px;height:280px;color:var(--white);cursor:pointer;background:url(https://vibrandstudio.com/prjct.png) 50%/cover;border-radius:20px;flex-direction:column;flex-shrink:0;justify-content:center;margin:30px;transition:all .5s;display:flex;position:relative;overflow:hidden}.projects-track svg{background-color:color-mix(in srgb,var(--coral)77%,transparent);color:#fff;fill:none;cursor:pointer;width:var(--btn-height);height:var(--btn-height);stroke:currentColor;stroke-width:.7px;stroke-linecap:round;stroke-linejoin:round;border:none;border:2px solid var(--coral);box-shadow:0 0px 0px 2px color-mix(in srgb,var(--coral)77%,transparent);border-radius:50%;padding:4px;position:absolute;top:50%;transform:translateY(-50%)}.projects-track .btn{width:fit-content;margin:10px auto 0}.projects-track>div>div *{z-index:3;opacity:0;transition:all .7s;position:relative}.projects-track>div>div:hover *{opacity:1}.projects-track>div>div:before{content:"";cursor:pointer;width:100%;height:100%;transition:all .7s;position:absolute;top:0;left:0}.projects-track>div>div:hover:before{background-color:color-mix(in srgb,var(--gray)50%,transparent)}.clients-track{flex-wrap:wrap;justify-content:center;gap:70px;max-width:1200px;margin:0 auto;padding:60px 20px 20px;transition:max-height 7s;display:flex;overflow:hidden}.clients-track video{width:200px;height:200px}.tabs{width:100%;height:auto;margin-bottom:30px;padding:40px;display:inline-block;position:relative}.tabs.active .square{height:calc(var(--btn-height)*4);cursor:pointer;padding-top:10px}.tabs.active .square .btn{display:none}.tabs:after{content:"";background-color:var(--coral);width:0;height:4px;margin:0 40px;transition:width .7s ease-out;position:absolute;bottom:0;left:0}.tabs.active:after{width:calc(100% - 80px)}.contact{background-position:50%;background-size:cover;border-radius:15px;flex-wrap:wrap-reverse;min-height:80vh;margin:40px;padding:40px;display:flex}.contact form{background-color:#fff;border-radius:10px;flex:2;padding:20px}.contact form p{font-size:14px}.contact form input{border:1px solid var(--coral);border-radius:40px;padding:10px}.contact form input:focus{border:1px solid var(--coral);outline:none}.contact form .input-group{grid-template-columns:repeat(2,1fr);gap:15px;margin-top:20px;display:grid}.contact form input[type=email]{width:100%;margin-top:15px}.contact form .type{margin-top:20px}.contact form .radio-group{gap:15px;margin-top:10px;display:flex}.contact form .radio-group input{display:none}.contact form .radio-group label{border:1px solid var(--coral);color:#797575;text-align:center;cursor:pointer;border-radius:40px;flex:1;padding:10px;font-size:13px;font-weight:500;display:block}.contact form textarea{border:1px solid var(--coral);border-radius:22px;width:100%;margin-top:15px;padding:20px}.contact form textarea:focus{border:1px solid var(--coral);resize:vertical;outline:none}.contact form label:has(input[type=radio]:checked){background-color:var(--coral);color:#fff}.contact form span{color:#797575;font-size:13px;font-weight:500}.contact form button[type=submit]{border:1px solid var(--coral);background-color:#fff;border-radius:40px;width:100%;margin-top:15px;padding:10px}.contact form button:hover{background-color:var(--coral)}.contact .info{color:var(--text-color);flex-direction:column;flex:3;justify-content:space-between;font-size:16px;display:flex}.contact .info h1{color:var(--text-color)}.contact .info .info-data{color:#fff;grid-template-columns:repeat(2,1fr);gap:40px;display:grid}iframe{border:none;border-radius:15px;width:-webkit-fill-available;min-height:500px;margin:0 40px}.faq{border-radius:15px;gap:40px;margin:40px;display:flex}.faq>div{flex:1}.faq p{font-size:16px}.question{border-bottom:1px solid var(--gray);margin-bottom:30px}.question h5{position:relative}.question h5:after{content:"+";border:1px solid #000;border-radius:50%;justify-content:center;align-items:center;width:29px;height:29px;font-size:30px;font-weight:400;display:flex;position:absolute;top:0;right:0}.question p{height:0;max-height:0;margin:15px 60px 30px;font-size:0;font-weight:500;transition:max-height .5s}.question.active h5:after{content:"−"}.question.active p{height:auto;max-height:50px;font-size:16px}.newsletter{background-position:50%;background-size:cover;border-radius:15px;flex-direction:column;justify-content:center;align-items:center;min-height:500px;margin:40px;padding:20px;display:flex}.newsletter form{border:1px solid var(--coral);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#1d1d1b80;border-radius:40px;gap:10px;margin-top:20px;padding:0 20px;display:flex;overflow:hidden}.newsletter input{width:300px;color:var(--coral);background-color:#0000;border:none;margin:0 0 0 10px;padding:0;font-size:18px}.newsletter input:focus{border:none;outline:none}.newsletter button{background-color:#0000;border:none;display:flex}.newsletter svg{cursor:pointer;width:45px;height:45px;stroke:var(--coral);stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;background-color:#0000;align-self:end}.aboutTitle{margin:40px;padding:20px;display:flex}.aboutTitle>*{flex:1}.bannerImg{background-position:50%;background-size:cover;border-radius:40px;min-height:500px}footer{background-color:var(--coral);color:#fff;text-align:center;justify-content:space-between;align-items:center;padding:20px 70px;display:flex;position:relative;bottom:0}footer svg.logo{fill:#fff;width:100px}footer .legal{font-size:var(--btn-font-size);flex-direction:column;display:flex}footer .social{grid-template-columns:auto auto auto;gap:5px;display:grid}footer .social svg{background-color:var(--white);border-radius:50%;width:30px;height:30px;display:block}footer .social svg path{transform-origin:50%;fill:var(--coral);scale:.6}.popup-shadow{z-index:9999;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.single-project{grid-column-gap:0px;grid-row-gap:0px;background-color:wheat;border-radius:40px;grid-template-rows:90% 10%;grid-template-columns:20% 45% 35%;width:90vw;height:90vh;padding:10px;display:grid}.single-project img{object-fit:cover;width:100%;height:100%}.single-project .iframe{border-radius:30px}.slide-guide{scrollbar-width:none;border-radius:30px;gap:5px;margin-left:10px;display:flex;overflow:scroll}iframe{width:0;margin:0;padding:0}iframe.active{background:#fff;border:none;border-radius:30px;width:-webkit-fill-available;height:-webkit-fill-available;min-height:auto;margin:0 0 10px}.gallery{scrollbar-width:none;border-radius:30px;width:0;max-width:100%;padding:10px;display:flex;overflow:scroll}.gallery.active{width:auto;height:auto;padding:10px}
