* {

  margin: 0;

  padding: 0;

}


@font-face {

  font-family: rem;

  src: url(/assets/REM-Medium-CfUViHwW.ttf);

  src: url(/assets/REM-Medium-DZKeNnBw.eot);

  src: url(/assets/REM-Medium-DDT9ZsOU.woff);

  src: url(/assets/REM-Medium-xuL-QX5I.woff2);

}


@font-face {

  font-family: remV;

  src: url(/assets/REM-VariableFont_wght-Brvm9LCF.ttf);

}


:root {

  --mainColor: #512da8;

  --mainWhite: #fff;

  --mainBlack: #111;

}


@media only screen and (min-width:0px){
header{
width:100%;
display:flex;
justify-content:end;
align-items:center;
flex-flow:row nowrap;
background-color:#000;
position:fixed;
top:0;
left:0;
padding-right:10px;
box-sizing:border-box;
background:#e8e8e836;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-bottom:.1px solid rgba(249,249,249,.2);
-webkit-user-select:none;
user-select:none;
z-index:9999}
header #menu-icon{
padding:10px;
box-sizing:border-box;
width:40px;
height:40px}
header .menu{
z-index:10000;
width:100%;
height:100vh;
padding:20px;
position:absolute;
box-sizing:border-box;
background:#e9e9e9;
-webkit-backdrop-filter:blur(100%);
backdrop-filter:blur(100%);
top:0;
left:100%;
display:flex;
justify-content:start;
align-items:start;
flex-flow:column;
gap:40px;
transition:left 1s ease-in-out}
header .menu nav ul{
list-style:none;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:start;
gap:50px;
padding:20px;
box-sizing:border-box}
header .menu nav ul li{
transition:.5s}
header .menu nav ul li a{
text-decoration:none;
font-family:remV;
font-size:16px;
font-weight:300;
transition:.4s;
padding:10px;
color:#111;
border-radius:40px}
header .menu nav ul li a:hover{
border-radius:40px;
color:#fff;
background-color:#8b73c5}
header .menu nav ul li a.active{
border-radius:40px;
color:#fff;
background-color:#8b73c5;
-webkit-user-select:none;
user-select:none;
pointer-events:none}
header .menu.menu-light a{
color:#000}
header .menu.menu-dark a{
color:#000}
header .menu .close{
width:100%;
display:flex;
justify-content:end}
}
@media only screen and (min-width:0px){
.lucaHero{
width:100%;
background-color:#000;
z-index:0;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
padding:100px;
gap:50px;
box-sizing:border-box;
-webkit-user-select:none;
user-select:none}
.lucaHero .text{
display:flex;
flex-flow:column nowrap;
justify-content:center;
gap:10px}
.lucaHero .text .Logo{
width:100%;
display:flex;
justify-content:center;
align-items:center}
.lucaHero .text .Logo img{
width:300px;
height:51px}
.lucaHero .text .description{
width:100%;
color:#fff;
font-size:22px;
font-family:remV;
font-weight:500;
text-align:center;
line-height:1.5}
.lucaHero .text .description.des2{
font-size:18px;
font-weight:300}
.lucaHero .lucaImage img{
width:300px;
height:300px}
}
@media only screen and (min-width:0px){
.box{
width:100%;
background-color:#fff;
display:flex;
flex-flow:row wrap;
justify-content:center;
align-items:center;
padding:50px;
box-sizing:border-box;
gap:90px}
.box .card{
width:100%;
height:371px;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
background:#00000020;
border-radius:16px;
box-shadow:0 4px 30px #0000001a;
backdrop-filter:blur(2.6px);
-webkit-backdrop-filter:blur(2.6px);
border:1px solid rgba(0,0,0,.05);
gap:25px;
padding:16px;
box-sizing:border-box}
.box .card .text{
width:100%;
display:flex;
justify-content:start;
align-items:center;
flex-flow:column nowrap;
gap:16px}
.box .card .text .title{
width:100%;
font-family:remV;
font-size:22px;
line-height:1.3;
font-weight:500;
color:#000;
text-align:center}
.box .card .text .description{
font-family:remV;
font-size:16px;
font-weight:300;
line-height:1.5;
text-align:center;
color:#000}
.box .card .text a button{
cursor:pointer;
padding:10px;
box-sizing:border-box;
font-family:remV;
font-size:14px;
border:unset;
border-radius:16px;
background-color:#512da8;
color:#fff;
transition:.3s}
.box .card .text a button:hover{
color:#512da8;
background-color:#fff}
.box .card img{
width:200px;
height:40px}
.box .card img.luca{
height:100px}
.box .card img.libre{
width:250px;
height:90px}
.box .card img.tech{
width:270px;
height:48px}
}
@media only screen and (min-width:0px){
footer{
background-color:#000;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:10px;
padding:12px 25px;
box-sizing:border-box;
border-top:.1px solid rgba(211,211,211,.208)}
footer img{
width:220px}
footer .info{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:10px}
footer .info .socialMedia{
width:100%;
display:flex;
flex-flow:row nowrap;
justify-content:center;
align-items:center;
gap:12px}
footer .info .socialMedia .social{
border:.6px solid #512da8;
padding:8px;
box-sizing:border-box;
border-radius:50%}
footer .info .socialMedia .social a{
width:12px;
height:12px;
display:flex;
justify-content:center;
align-items:center}
footer .info .socialMedia .social a img{
width:100%}
footer .info .text{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:4px}
footer .info .text .copyright{
font-family:remV;
font-size:10px;
color:#fff;
font-weight:300}
footer .info .text .developer{
font-family:remV;
font-size:14px;
color:#fff;
font-weight:100;
display:none}
footer .info .text .developer a{
text-decoration:none;
font-family:remV;
font-size:14px;
color:#fff;
font-weight:100}
}
@media only screen and (min-width:0px){
.aboutHero{
padding:250px 50px;
background-color:#fff;
box-sizing:border-box;
object-fit:contain;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
gap:17px;
-webkit-user-select:none;
user-select:none;
position:relative}
.aboutHero .displayM{
position:absolute;
top:0;
min-width:100%;
height:100%;
z-index:0;
object-fit:cover}
.aboutHero .displayD{
display:none}
.aboutHero img{
width:350px;
height:60px}
.aboutHero .text{
font-family:remV;
font-size:18px;
font-weight:400;
text-align:center;
color:#000}
.aboutHero .description{
font-family:remV;
font-size:20px;
font-weight:700;
color:#000}
.aboutHero img,.aboutHero .text,.aboutHero .description{
z-index:2}
}
@media only screen and (min-width:0px){
.fullStack{
padding:50px;
background-color:#000;
box-sizing:border-box;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
gap:20px;
-webkit-user-select:none;
user-select:none}
.fullStack .text{
width:100%;
display:flex;
justify-content:start;
align-items:center;
flex-flow:column nowrap;
gap:16px}
.fullStack .text .title{
width:100%;
font-family:remV;
font-size:25px;
line-height:1.3;
font-weight:500;
color:#fff;
text-align:center}
.fullStack .text .description{
width:100%;
font-family:remV;
font-size:16px;
font-weight:300;
line-height:1.5;
text-align:center;
color:#fff}
.fullStack .glass-container{
display:flex;
justify-content:center;
align-items:center;
gap:50px;
flex-wrap:wrap;
padding:20px}
.fullStack .glass-container .glass-card{
position:relative;
width:300px;
height:300px;
border-radius:16px;
overflow:hidden;
cursor:pointer;
transition:transform .4s ease,box-shadow .4s ease}
.fullStack .glass-container .glass-card .glass-overlay{
position:absolute;
inset:0;
background:#ffffff1a;
backdrop-filter:blur(15px) saturate(150%);
-webkit-backdrop-filter:blur(15px) saturate(150%);
border-radius:20px;
border:.5px solid rgba(255,255,255,.25);
box-shadow:inset 0 1px 1px #ffffff4d,inset 0 -1px 5px #0003;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#fff;
opacity:0;
transform:translateY(40px) scale(.95);
transition:all .6s cubic-bezier(.25,1,.5,1);
box-sizing:border-box;
padding:10px}
.fullStack .glass-container .glass-card .glass-overlay h3{
font-size:20px;
margin-bottom:8px;
font-weight:500;
font-family:remV}
.fullStack .glass-container .glass-card .glass-overlay p{
font-size:14px;
font-weight:300;
font-family:remV}
.fullStack .glass-container .glass-card img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .6s ease}
.fullStack .glass-container .glass-card:hover{
transform:scale(1.03);
box-shadow:0 12px 35px #0006}
.fullStack .glass-container .glass-card:hover img{
transform:scale(1.1);
filter:brightness(.7)}
.fullStack .glass-container .glass-card:hover .glass-overlay{
opacity:1;
transform:translateY(0) scale(1);
border:.5px solid rgba(255,255,255,.4);
box-shadow:0 0 25px #fff3,inset 0 0 10px #ffffff26}
}
@media only screen and (min-width:0px){
.vision{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:20px;
background-color:#000;
padding:50px;
box-sizing:border-box}
.vision .title{
font-family:remV;
font-size:25px;
color:#fff;
font-weight:500;
text-align:center}
.vision .content{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:50px}
.vision .content img{
width:312px}
.vision .content .text{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:start;
gap:30px}
.vision .content .text .subject{
width:100%;
font-family:remV;
font-size:20px;
color:#fff;
font-weight:400;
text-align:center}
.vision .content .text .items{
display:flex;
flex-flow:row nowrap;
justify-content:start;
align-items:center;
gap:12px;
font-family:remV;
font-size:16px;
color:#fff;
font-weight:300;
text-align:center;
line-height:1.5;
text-align:left}
.vision .content .text .items img{
width:20px}
}
@media only screen and (min-width:0px){
.team{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
padding:50px 50px 150px;
box-sizing:border-box;
gap:80px;
background-color:#000}
.team .title{
font-family:remV;
font-size:25px;
color:#fff;
font-weight:500;
text-align:center}
.team .group{
display:flex;
gap:1rem;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:150px}
.team .group .member{
position:relative;
width:200px;
height:200px;
border-radius:50%;
cursor:pointer}
.team .group .member img{
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
transition:transform .3s ease;
-webkit-user-select:none;
user-select:none}
.team .group .member:after{
content:"";
position:absolute;
inset:-10px;
background:#00000059;
opacity:0;
transition:opacity .3s ease;
border-radius:50%}
.team .group .member:before{
content:"";
position:absolute;
inset:-100px;
border-radius:50%;
pointer-events:auto;
background:transparent}
.team .group .member .socials{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
z-index:10}
.team .group .member .socials a{
position:absolute;
width:50px;
height:50px;
display:grid;
place-items:center;
border-radius:50%;
opacity:0;
pointer-events:auto;
background:#ffffff1f;
border:1px solid rgba(255,255,255,.25);
transition:all .3s ease;
z-index:20}
.team .group .member .socials a img{
width:60%;
height:60%;
object-fit:contain}
.team .group .member .socials a:nth-child(1){
transform:translate(-50%,-150px) scale(.5)}
.team .group .member .socials a:nth-child(2){
transform:translate(150px,-50%) scale(.5)}
.team .group .member .socials a:nth-child(3){
transform:translate(-50%,150px) scale(.5)}
.team .group .member .socials a:nth-child(4){
transform:translate(-150px,-50%) scale(.5)}
:is(.team .group .member:hover .socials,.team .group .member .socials:hover) a{
opacity:1}
:is(.team .group .member:hover .socials,.team .group .member .socials:hover) a:nth-child(1){
transform:translate(-50%,-170px) scale(1)}
:is(.team .group .member:hover .socials,.team .group .member .socials:hover) a:nth-child(2){
transform:translate(120px,-50%) scale(1)}
:is(.team .group .member:hover .socials,.team .group .member .socials:hover) a:nth-child(3){
transform:translate(-50%,120px) scale(1)}
:is(.team .group .member:hover .socials,.team .group .member .socials:hover) a:nth-child(4){
transform:translate(-170px,-50%) scale(1)}
.team .group .member:hover img{
transform:scale(1.05)}
.team .group .member:hover:after{
opacity:1}
}
@media only screen and (min-width:0px){
.partners{
padding:50px;
background-color:#000;
box-sizing:border-box;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
gap:20px;
-webkit-user-select:none;
user-select:none}
.partners .title{
width:100%;
font-family:remV;
font-size:25px;
line-height:1.3;
font-weight:500;
color:#fff;
text-align:center}
.partners .swiper{
width:100%;
height:100%;
background:#e8e8e847;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-bottom:.1px solid rgba(249,249,249,.2);
border-radius:40px}
.partners .swiper-slide{
text-align:center;
display:flex;
justify-content:center;
align-items:center;
padding:30px;
box-sizing:border-box}
.partners .swiper-slide .image{
width:200px;
height:200px}
.partners .swiper-slide .image img{
width:100%;
height:100%;
object-fit:contain}
.partners .swiper-slide img{
display:block;
width:100%;
height:100%}
.partners .swiper-button-next,.partners .swiper-button-prev{
width:30px;
height:30px;
padding:5px;
border-color:#bababa;
border-radius:40px;
color:#fff;
background:#e8e8e836;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
box-sizing:border-box}
:is(.partners .swiper-button-next,.partners .swiper-button-prev):after{
color:#424750;
font-size:14px;
font-weight:700}
}
@media only screen and (min-width:0px){
.productHero{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
padding:180px 50px;
box-sizing:border-box;
background-color:#fff;
gap:60px}
.productHero .orbit-container{
position:relative;
width:100%;
margin:50px auto;
perspective:2000px;
display:flex;
justify-content:center;
align-items:center}
.productHero .title{
width:100%;
font-family:remV;
font-size:22px;
line-height:1.3;
font-weight:500;
color:#000;
text-align:center}
.productHero .orbit-container .speaker{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
transform:translate(-50%,-50%);
border-radius:50%;
overflow:hidden;
z-index:1}
.productHero .orbit-container .speaker img{
width:100%;
height:100%}
.productHero .orbit-container .orbit{
position:absolute;
top:50%;
left:50%;
transform-style:preserve-3d;
transform:translate(-50%,-50%);
animation:spin 20s linear infinite;
z-index:2}
.productHero .orbit-container .orbit span{
position:absolute;
top:0;
left:0;
font-size:2rem;
font-family:remV;
font-weight:700;
color:#000;
white-space:pre;
backface-visibility:hidden}
@keyframes spin{
0%{
transform:translate(-50%,-50%) rotateY(0)}
to{
transform:translate(-50%,-50%) rotateY(360deg)}
}
}
@media only screen and (min-width:0px){
.problem-section{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:20px;
background-color:#000;
padding:50px;
box-sizing:border-box}
.problem-section .problem-header{
width:100%;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:20px}
.problem-section .problem-header h2{
width:100%;
font-size:30px;
font-family:remv;
font-weight:500;
color:#fff;
text-align:center}
.problem-section .problem-header p{
font-size:14px;
text-align:center;
font-family:remV;
color:#fff;
font-weight:400;
line-height:1.5}
.problem-section .problem-header p .highlight{
color:#512da8;
font-weight:700}
.problem-section .problem-content{
display:flex;
flex-flow:column nowrap;
justify-content:space-between;
align-items:flex-start;
gap:15px;
height:600px}
.problem-section .problem-content .problem-image{
flex:1;
display:flex;
justify-content:center;
width:100%}
.problem-section .problem-content .problem-image img{
width:100%;
height:210px;
object-fit:contain;
border-radius:1rem;
transition:opacity .3s ease-in-out}
.problem-section .problem-content .problem-options{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:25px}
.problem-section .problem-content .problem-options .option{
width:100%;
display:flex;
align-items:center;
gap:20px;
padding:8px;
box-sizing:border-box;
border-radius:16px;
background:#ffffff0d;
cursor:pointer;
transition:all .3s ease;
border:.5px solid #522da800}
.problem-section .problem-content .problem-options .option .thumb{
width:50px;
height:50px}
.problem-section .problem-content .problem-options .option .thumb img{
width:100%;
height:100%;
object-fit:contain}
.problem-section .problem-content .problem-options .option .info h3{
font-family:remV;
color:#512da8;
font-size:18px;
font-weight:700;
text-align:left;
margin-bottom:5px}
.problem-section .problem-content .problem-options .option .info p{
font-family:remV;
color:#fff;
font-size:14px;
font-weight:400;
text-align:left;
line-height:2}
.problem-section .problem-content .problem-options .option:hover{
background:#ffffff26;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
transform:translate(5px);
border:.5px solid #512da8}
}
@media only screen and (min-width:0px){
.work{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
padding:50px;
box-sizing:border-box;
background-color:#000;
gap:50px}
.work .title{
width:100%;
font-size:30px;
font-family:remv;
font-weight:500;
color:#fff;
text-align:center}
.work .body{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:50px}
.work .body img{
width:100%}
.work .body .left{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:20px}
.work .body .left img{
width:30px;
height:30px}
.work .body .left .topic{
width:100%;
font-size:25px;
font-family:remv;
font-weight:500;
color:#512da8;
text-align:center}
.work .body .left .description{
width:100%;
font-size:20px;
font-family:remv;
font-weight:300;
color:#fff;
text-align:center;
line-height:1.5}
.work .bottom{
display:flex;
flex-flow:column nowrap;
justify-content:start;
align-items:center;
gap:20px;
width:100%}
.work .bottom .title{
width:100%;
font-size:25px;
font-family:remv;
font-weight:700;
color:#512da8;
text-align:center}
.work .bottom .items{
display:flex;
flex-flow:column nowrap;
justify-content:start;
align-items:center;
gap:35px}
.work .bottom .items .item{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:start;
width:100%;
background:#e8e8e836;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
padding:8px 18px;
box-sizing:border-box;
border-radius:16px}
.work .bottom .items .item ul{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:start;
gap:10px}
.work .bottom .items .item ul li{
width:100%;
font-size:14px;
font-family:remv;
font-weight:300;
color:#fff;
text-align:left}
}
@media only screen and (min-width:0px){
.form{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:20px;
padding:50px;
background-color:#000;
box-sizing:border-box}
.form .title{
width:100%;
font-size:30px;
font-family:remv;
font-weight:500;
color:#fff;
text-align:center}
.form .description{
font-size:14px;
text-align:center;
font-family:remV;
color:#fff;
font-weight:400;
line-height:1.5}
.form .description p{
color:#512da8;
font-weight:700}
.form .images{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:20px}
.form .images .mainImage{
display:flex;
justify-content:center;
align-items:center}
.form .images .mainImage img{
width:100%;
border-radius:16px}
.form .images .image{
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
gap:20px}
.form .images .image img{
width:100%;
border-radius:16px}
}
@media only screen and (min-width:0px){
.contactHero{
padding:200px 40px;
background-color:#fff;
box-sizing:border-box;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
gap:20px;
-webkit-user-select:none;
user-select:none}
.contactHero .text{
width:100%;
display:flex;
justify-content:start;
align-items:center;
flex-flow:column nowrap;
gap:16px}
.contactHero .text .title{
width:100%;
font-family:remV;
font-size:25px;
line-height:1.3;
font-weight:500;
color:#000;
text-align:center}
.contactHero .text .description{
width:100%;
font-family:remV;
font-size:16px;
font-weight:300;
line-height:1.5;
text-align:center;
color:#000}
.contactHero .mail{
width:100%;
font-family:remV;
font-size:18px;
font-weight:500;
line-height:1.5;
text-align:center;
color:#000}
}
@media only screen and (min-width:0px){
.osHero{
padding:250px 50px;
background-color:#fff;
box-sizing:border-box;
object-fit:contain;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
gap:17px;
-webkit-user-select:none;
user-select:none;
position:relative}
.osHero .displayM{
position:absolute;
top:0;
max-width:100%;
height:100%;
z-index:0;
object-fit:contain}
.osHero .displayD{
display:none}
.osHero .text{
position:absolute;
bottom:20%;
font-family:remV;
font-size:18px;
font-weight:600;
text-align:center;
color:#000;
z-index:2}
.osHero .text span{
color:#512da8}
}
@media only screen and (min-width:0px){
.osMain{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:20px;
background-color:#000;
padding:50px;
box-sizing:border-box}
.osMain .os-header{
width:100%;
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:20px}
.osMain .os-header h2{
width:100%;
font-size:27px;
font-family:remv;
font-weight:500;
color:#fff;
text-align:center}
.osMain .os-body{
display:flex;
flex-flow:column nowrap;
justify-content:center;
align-items:center;
gap:8px}
.osMain .os-body h3{
font-size:12px;
text-align:center;
font-family:remV;
color:#fff;
font-weight:400;
line-height:1.5}
.osMain .os-body h3 span{
color:#512da8}
.osMain .os-body h4{
color:#512da8;
font-size:10px;
text-align:center;
font-family:remV;
font-weight:400;
line-height:1.5}
.osMain .os-image{
width:100%}
.osMain .os-image img{
width:100%;
height:210px;
object-fit:contain}
.osMain .os-btn{
width:100%;
height:400px;
display:flex;
flex-flow:column nowrap;
justify-content:start;
align-items:center;
gap:70px;
perspective:1200px}
.osMain .os-btn .btn-3{
width:100%;
height:90px;
position:relative;
transform-style:preserve-3d;
transition:transform 1s cubic-bezier(.68,-.55,.27,1.55)}
.osMain .os-btn .btn-3.is-flipped{
transform:rotateY(180deg)}
.osMain .os-btn .btn-3 .btn-front,.osMain .os-btn .btn-3 .btn-back{
width:100%;
height:90px;
position:absolute;
backface-visibility:hidden;
border-radius:16px;
padding:15px;
box-sizing:border-box;
display:flex;
flex-direction:row;
justify-content:space-evenly;
align-items:center;
background:#e8e8e83f;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-bottom:.1px solid rgba(249,249,249,.2);
color:#000;
font-family:remV;
font-size:14px;
font-weight:400;
text-align:left;
line-height:2}
:is(.osMain .os-btn .btn-3 .btn-front,.osMain .os-btn .btn-3 .btn-back) img{
width:50px;
height:50px}
:is(.osMain .os-btn .btn-3 .btn-front,.osMain .os-btn .btn-3 .btn-back) h2{
font-size:16px;
text-align:center;
font-family:remV;
color:#fff;
font-weight:400;
line-height:1.5}
:is(.osMain .os-btn .btn-3 .btn-front,.osMain .os-btn .btn-3 .btn-back) h4{
color:#512da8;
font-size:14px;
text-align:center;
font-family:remV;
font-weight:400;
line-height:1.5}
.osMain .os-btn .btn-3 .btn-back{
display:flex;
flex-flow:column nowrap;
justify-content:start;
align-items:start;
gap:10px;
transform:rotateY(180deg)}
}
@media only screen and (min-width:992px){
header{
display:flex;
justify-content:center;
position:unset;
padding-right:unset;
background:unset;
-webkit-backdrop-filter:unset;
backdrop-filter:unset;
border-bottom:unset;
background-color:#000}
header #menu-icon{
display:none}
header .menu{
width:fit-content;
height:unset;
border-radius:40px;
position:fixed;
top:20px;
left:50%;
background:#e8e8e836;
-webkit-backdrop-filter:blur(7px);
backdrop-filter:blur(7px);
transform:translate(-50%);
gap:unset;
transition:unset}
header .menu nav ul{
list-style:none;
flex-flow:row nowrap;
align-items:center;
gap:30px;
padding:unset}
header .menu.menu-light a{
color:#000}
header .menu.menu-dark a{
color:#fff}
header .menu .close{
display:none}
header #site-menu{
left:50%}
}
@media only screen and (min-width:992px){
.lucaHero{
flex-flow:row nowrap;
padding:150px 145px;
gap:100px}
.lucaHero .text{
width:50%;
justify-content:start;
gap:10px}
.lucaHero .text .Logo{
display:block}
.lucaHero .text .Logo img{
width:465px;
height:80px}
.lucaHero .text .description{
font-size:43px;
text-align:left}
.lucaHero .text .description.des2{
width:80%;
font-size:25px}
.lucaHero .lucaImage img{
width:400px;
height:400px}
}
@media only screen and (min-width:992px){
.box{
padding:90px 70px;
gap:20px}
.box .card{
width:680px;
height:250px;
flex-flow:row nowrap;
gap:30px;
padding:20px}
.box .card .text{
align-items:start}
.box .card .text .title{
font-size:30px;
text-align:left}
.box .card .text .description{
font-size:16px;
text-align:left;
color:#000}
}
@media only screen and (min-width:992px){
footer{
flex-flow:row nowrap;
justify-content:space-between;
padding:25px 60px}
footer img{
width:300px}
footer .info{
gap:8px}
footer .info .socialMedia{
gap:16px}
footer .info .socialMedia .social a{
width:16px;
height:16px}
}
@media only screen and (min-width:992px){
.aboutHero{
padding:257px 145px;
gap:10px}
.aboutHero .displayM{
display:none}
.aboutHero .displayD{
display:block;
position:absolute;
top:0;
width:100%;
height:100%;
z-index:0;
object-fit:cover}
.aboutHero img{
width:600px;
height:103px}
.aboutHero .text{
font-size:22px;
color:#000}
.aboutHero .description{
font-size:27px;
color:#000}
}
@media only screen and (min-width:992px){
.fullStack{
padding:80px 145px;
gap:30px}
.fullStack .text{
gap:30px}
.fullStack .text .title{
font-size:50px;
text-align:left}
.fullStack .text .description{
font-size:25px;
text-align:left}
.fullStack .glass-container{
gap:20px}
.fullStack .glass-container .glass-card{
width:380px;
height:380px}
.fullStack .glass-container .glass-card .glass-overlay h3{
font-size:25px}
.fullStack .glass-container .glass-card .glass-overlay p{
font-size:16px}
}
@media only screen and (min-width:992px){
.vision{
align-items:start;
padding:80px 145px}
.vision .title{
font-size:50px;
text-align:left}
.vision .content{
flex-flow:row nowrap;
gap:10px}
.vision .content img{
width:400px}
.vision .content .text{
gap:30px}
.vision .content .text .subject{
font-size:30px;
text-align:left}
.vision .content .text .items{
gap:15px;
font-size:18px}
.vision .content .text .items img{
width:40px}
}
@media only screen and (min-width:992px){
.team{
padding:70px 145px 200px;
gap:120px}
.team .title{
width:100%;
font-size:50px;
text-align:left}
.team .group{
width:100%;
gap:450px;
flex-flow:row nowrap}
}
@media only screen and (min-width:992px){
.partners{
padding:80px 145px;
gap:30px}
.partners .title{
font-size:50px;
text-align:left}
.partners .swiper-slide .image{
width:200px;
height:200px}
.partners .swiper-button-next,.partners .swiper-button-prev{
width:40px;
height:40px;
padding:10px}
}
@media only screen and (min-width:992px){
.productHero{
padding:105px 145px;
gap:unset}
.productHero .orbit-container{
width:500px;
height:400px}
.productHero .title{
font-family:remV;
font-size:35px}
.productHero .orbit-container .speaker{
width:400px;
height:400px}
@keyframes spin{
0%{
transform:translate(-50%,-50%) rotateY(0)}
to{
transform:translate(-50%,-50%) rotateY(360deg)}
}
}
@media only screen and (min-width:992px){
.problem-section{
padding:80px 145px}
.problem-section .problem-header h2{
font-size:50px;
text-align:left}
.problem-section .problem-header p{
font-size:25px;
text-align:left}
.problem-section .problem-content{
justify-content:space-between;
align-items:flex-start;
flex-flow:unset;
gap:30px;
height:460px}
.problem-section .problem-content .problem-image{
width:668px}
.problem-section .problem-content .problem-image img{
height:unset}
.problem-section .problem-content .problem-options .option{
width:450px;
gap:30px;
padding:15px}
.problem-section .problem-content .problem-options .option .thumb{
width:90px;
height:90px}
.problem-section .problem-content .problem-options .option .info h3{
font-size:23px;
text-align:left}
.problem-section .problem-content .problem-options .option .info p{
font-size:16px;
text-align:left}
}
@media only screen and (min-width:992px){
.work{
padding:70px 145px;
gap:20px}
.work .title{
font-size:50px;
text-align:left}
.work .body{
flex-flow:row nowrap}
.work .body img{
width:500px}
.work .body .left{
box-sizing:border-box;
padding:0 40px;
border-left:.5px solid rgba(255,255,255,.405)}
.work .body .left img{
width:50px;
height:50px}
.work .body .left .topic{
font-size:40px;
text-align:center}
.work .body .left .description{
font-size:25px;
padding:0 50px;
box-sizing:border-box;
text-align:center}
.work .bottom{
flex-flow:row nowrap;
justify-content:center;
gap:90px;
background:#e8e8e836;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
border-radius:16px;
padding:10px;
box-sizing:border-box}
.work .bottom .title{
width:unset;
font-size:40px;
text-align:center}
.work .bottom .items{
flex-flow:row nowrap;
gap:20px;
width:60%}
.work .bottom .items .item{
gap:30px;
padding:10px;
background:unset;
-webkit-backdrop-filter:unset;
backdrop-filter:unset}
.work .bottom .items .item ul li{
font-size:16px}
}
@media only screen and (min-width:992px){
.form{
gap:20px;
padding:70px 145px}
.form .title{
font-size:50px;
text-align:left}
.form .description{
width:100%;
font-size:25px;
text-align:left}
.form .images{
width:100%;
flex-flow:row nowrap}
.form .images .mainImage img{
border-radius:16px 0 0 16px;
width:750px}
.form .images .image{
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
gap:20px}
.form .images .image img{
width:350px;
border-radius:0 16px 16px 0}
}
@media only screen and (min-width:992px){
.contactHero{
flex-flow:row nowrap;
padding:235px 145px;
gap:30px}
.contactHero .text{
gap:30px}
.contactHero .text .title{
font-size:50px;
text-align:left}
.contactHero .text .description{
font-size:22px;
text-align:left}
.contactHero .mail{
border-left:.8px solid black;
font-size:30px;
padding:0 20px;
box-sizing:border-box}
}
@media only screen and (min-width:992px){
.osHero{
padding:350px 130px;
gap:10px}
.osHero .displayM{
display:none}
.osHero .displayD{
display:block;
position:absolute;
top:0;
width:100%;
height:100%;
z-index:0;
object-fit:cover}
.osHero .text{
position:absolute;
bottom:20%;
font-size:27px}
}
@media only screen and (min-width:992px){
.osMain{
padding:80px 145px;
gap:50px}
.osMain .os-header h2{
font-size:50px;
text-align:left}
.osMain .os-body{
gap:20px}
.osMain .os-body h3{
font-size:25px}
.osMain .os-body h4{
font-size:20px}
.osMain .os-image{
width:100%}
.osMain .os-image img{
width:100%;
height:500px;
object-fit:cover}
.osMain .os-btn{
height:unset;
flex-flow:row nowrap}
/* ---- OVAL GRADIENT BUTTON STYLE ---- */
.osMain .os-btn .btn-3{
  position: relative;
  border-radius: 999px; /* oval shape */
  padding: 3px; /* border thickness */
  background: linear-gradient(135deg,  #512da8, #512da8,  #512da8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* inner button faces */
.osMain .os-btn .btn-3 .btn-front,
.osMain .os-btn .btn-3 .btn-back{
  border-radius: 999px;
  background: #706d6d; /* inner fill */
  height: 100%;
  width: 100%;
  transition: background 0.3s ease, color 0.3s ease;
}

/* hover effect */
.osMain .os-btn .btn-3:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 30px  #512da8;
}

/* gradient animation on hover */
.osMain .os-btn .btn-3:hover::before{
  opacity: 1;
}

/* subtle shine */
.osMain .os-btn .btn-3::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.osMain .os-btn .btn-3 .btn-front,.osMain .os-btn .btn-3 .btn-back{
font-size:18px}
:is(.osMain .os-btn .btn-3 .btn-front,.osMain .os-btn .btn-3 .btn-back) img{
width:60px;
height:60px}
:is(.osMain .os-btn .btn-3 .btn-front,.osMain .os-btn .btn-3 .btn-back) h2{
font-size:18px}
:is(.osMain .os-btn .btn-3 .btn-front,.osMain .os-btn .btn-3 .btn-back) h4{
font-size:16px}
}
  .osHero {
            padding: 250px 50px;
            background-color: #fff;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: column nowrap;
            gap: 17px;
            user-select: none;
            -webkit-user-select: none;
            position: relative;
            min-height: 100vh;
        }

        .osHero .displayM {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            object-fit: cover;
        }

        .osHero .displayD {
            display: none;
        }

        .osHero .text {
            position: absolute;
            bottom: 10%;
            font-family: remV;
            font-size: 30px;
            font-weight: 600;
            text-align: center;
            color: #000;
            z-index: 2;
            padding: 0 20px;
        }

        .osHero .text span {
            color: #512da8;
        }

        /* Video Container in Hero */
        .osHero .os-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .osHero .os-video .video-wrapper {
            width: 100%;
            height: 100%;
            background: transparent;
        }

        .osHero .os-video .video-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: transparent;
        }

        .osHero .os-video .video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: left center; 
        }

        /* End of Video Container Styles */
       .ai-main{
    position: relative;
    height: 100vh;   /* video hero height */
    overflow: hidden;
}


.ai-main .ai-video .video-wrapper1{
    width: 100%;
    height: 100%;
    background: transparent;
}

.ai-main .ai-video .video-container1{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

.ai-main .ai-video .video-container1 video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}
.main-container {
    width: 100%;
    display: flex;
    min-height: 50vh;
    justify-content: center;
    align-items: center;
    padding: 20px 20px;
    background: #000;
    flex-shrink: 0;
}

.eyes-container {
    display: flex;
    gap: 70px;
    position: relative;
    width: 350px;
    height: 150px;
    transition: transform 0.05s ease-out;
}

.eyes-section {
    width: 100%;
    display: flex;
    min-height: 50vh;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    background: #000;
    flex-direction: column;
}

.eye {
    width: 150px;
    height: 150px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .eyes-container {
        width: 280px;
        height: 120px;
        gap: 40px;
    }

    .eye {
        width: 120px;
        height: 120px;
    }
}

.glass-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid white;
    border-radius: 70px;
    padding: 30px 40px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

body {
  background: #000;
  color: #fff;
}

.backed-section {
  padding: 60px 10%;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #000 0%, rgba(81, 45, 168, 0.1) 50%, #000 100%);
  position: relative;
  overflow: hidden;
}

.backed-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(81, 45, 168, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}

.backed-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(81, 45, 168, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 10s ease-in-out infinite reverse;
  pointer-events: none;
}

.section-title {
  font-size: 56px;
  margin-bottom: 60px;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.8s ease forwards, glow 3s ease-in-out infinite;
  background: linear-gradient(135deg, #fff 0%, #5128ab 50%, #fff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 2;
}

.backed-container {
  display: flex;
  gap: 60px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.logo-card {
  background: linear-gradient(135deg, rgba(81, 45, 168, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 2px solid rgba(81, 45, 168, 0.3);
  border-radius: 18px;
  padding: 40px;
  max-width: 420px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  transform: translateX(-60px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.logo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(81, 45, 168, 0.3), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.logo-card:hover::before {
  left: 100%;
}

.logo-card img {
  width: 100%;
}

.logo-card:hover {
  transform: translateX(0) scale(1.05) translateY(-10px);
  box-shadow: 0 20px 60px rgba(81, 45, 168, 0.4), inset 0 0 30px rgba(81, 45, 168, 0.1);
  border-color: rgba(81, 45, 168, 0.6);
  background: linear-gradient(135deg, rgba(81, 45, 168, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.content {
  max-width: 520px;
  opacity: 0;
  transform: translateX(60px);
  position: relative;
  z-index: 2;
}

.content h2 {
  font-size: 32px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fff 0%, #5128ab 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.content p {
  font-size: 18px;
  line-height: 1.8;
  color: #b0b0b0;
  animation: slideIn 1.2s ease forwards;
}

.show .logo-card {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.show .content {
  opacity: 1;
  transform: translateX(0);
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(81, 45, 168, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(81, 45, 168, 0.8), 0 0 30px rgba(81, 45, 168, 0.4);
  }
}

@keyframes float {
  0%, 100% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(30px, -30px);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .section-title {
    font-size: 40px;
  }
  .backed-container {
    flex-direction: column;
  }
}
.bento-section {
    width: 100%;
    background: #000;
    padding: 80px 20px;
    font-family: 'rem', remV, sans-serif;
}

.bento-heading {
    font-family: 'rem', remV, sans-serif;
    color: #fff;
    text-align: left;
    margin-bottom: 40px;
}

.bento-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.bento-card {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 40px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
}

/* Glow effect on hover */
.bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(81, 45, 168, 0.2), transparent 80%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.bento-card:hover::before {
    opacity: 1;
}

.bento-card:hover {
    border-color: #512da8;
    box-shadow: 0 8px 32px rgba(81, 45, 168, 0.15);
    transform: translateY(-5px);
}

.bento-content {
    position: relative;
    z-index: 1;
}

.bento-description {
    font-size: 1.05rem;
    color: #bbb;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 400;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'rem', remV, sans-serif;
}

.bento-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.bento-icon {
    width: 45px;
    height: 45px;
    border: 2px solid #512da8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
}

.bento-icon-img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    flex-shrink: 0;
}

.bento-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    font-family: 'rem', remV, sans-serif;
}

/* Card sizing */
.bento-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.bento-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / 3;
}

.bento-card:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.bento-card:nth-child(4) {
    grid-column: 2;
    grid-row: 3;
}

/* Grid positioning */
.bento-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.bento-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.bento-card:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.bento-card:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

@media (max-width: 768px) {
    .bento-section {
        padding: 60px 20px;
    }

    .bento-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bento-card {
        padding: 30px;
        min-height: 180px;
    }

    .bento-description {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .bento-title {
        font-size: 1rem;
    }

    .bento-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}