@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html{scroll-behavior: smooth;}
*{box-sizing: border-box;outline: none; transition: all .3s;-o-transition: all .3s;-webkit-transition: all .3s;-ms-transition: all .3s; outline:0!important}

body{font-size: 18px;font-family: "Poppins", sans-serif;}
h1, h2, h3, h4, h5, h6{font-family: "Poppins", sans-serif;font-weight: 400;}
h1{font-size: 68px;font-weight: 600;line-height: 85px;font-weight: bold;}
h2{font-size: 48px;}
h3{font-size: 25px;}
h4{font-size: 22px;color: #929292;position: relative;margin: 0;padding-left: 20px;z-index: 2;}
h4:after{content:'';width:8px;height: 8px;display: block;position: absolute;left: 0;top: 10px;background: #fff;border-radius: 50%;}
h5{font-size: 18px;}
h6{font-size:20px;}
strong{color: #fff!important;font-weight: 500;}
a{color: initial;line-height: initial;}
a:hover{color:initial; text-decoration:none}
p{color:rgba(146, 146, 146, 1);line-height: 30px;font-size: 19px;font-weight: 300;}
p:last-child{margin:0;}
img, iframe, video{max-width: 100%;vertical-align: middle;}
ul{}
ul li{}
hr{}
input{}
input[type=radio]{}
input[type=submit]{}
input[type=submit]:hover{background:#000!important;cursor:pointer;}
input, textarea{padding: 15px 15px;border-radius: 6px;font-weight: 300;font-size: 16px;width: 100%;background: rgba(0, 0, 0, 0.05);border: 1.24px solid rgba(0, 0, 0, 0.2);}
input::placeholder, textarea::placeholder{font-family: "Inter", sans-serif; font-weight:300}
input:focus, .input:focus{border-color: #000000;}
input[type=checkbox]{width:20px;height:20px;position: relative;top: 3px;}
textarea{height:100px}
label{margin-bottom: 0;display: block;color: #000;font-size: 11px;}

.button{padding: 9px 36px;border-radius: 5px;display: inline-block;color: #fff;font-family: "Poppins", sans-serif;font-weight: 300;font-size: 20px;position: relative;transition: all 0.2s cubic-bezier(1, 0, 0, 1);}
.button span{position:relative;z-index: 2;color: #000;}
.button:hover{background:#000; color:#fff; border-color:#000}

.button.white{background: #fff;border: 1px solid #fff;color: #000;}
.button.black{background: rgba(23, 23, 23, 1);border: 1px solid rgba(23, 23, 23, 1);color: #fff;}
.button.black span{color: #fff}
.button.black:hover{border-color: rgba(23, 23, 23, 1); background:#fff}
.button.black:hover span{color: rgba(23, 23, 23, 1);}
.button.grey{background: rgba(83, 83, 83, 1);border: 1px solid  rgba(83, 83, 83, 1);}
.button.grey:hover{background:#fff!important}
.button.grey span{color:#fff}
.button.grey:hover span{color:#000}

.dark{background:rgba(23, 23, 23, 1)}
.dark h1{color:#fff;margin-bottom: 25px;}
.light{background:#fafafa}
.light h4:after{background:#000}
.border{border-color:#000!important}
.rounded{border-radius:18px!important}
.border-bottom{border-bottom:1px solid #333!important}
.border-top{border-top:1px solid #333!important}

header{position: relative;z-index: 9; transition: all .3s ease 0s; -o-transition: all .3s ease 0s; -webkit-transition: all .3s ease 0s; -ms-transition: all .3s ease 0s;}
header.show, header.hide{position: fixed;top: 0;z-index: 9;width: 100%;padding: 10px 0!important;}
header.hide{margin-top: -200px !important;}
header.show .logo img, header.hide .logo img{height: 40px;}
header nav, header .menu-icon{display:inline-block;vertical-align: middle;}
header nav ul{margin: 0;padding: 0;}
header nav ul li{display:inline-block}
header nav ul li a{color:#fff;display: block;padding: 0 20px 0 20px;font-weight: 200;font-size: 16px;position: relative;}
header nav ul li span{background: linear-gradient(90deg, #FFFFFF 0%, #C8B9F4 100%);color:#000;width:16px;height: 16px;top: -5px;right: 5px;border-radius: 50%;font-size: 11px;text-align: center;position: absolute;font-weight: bold;}
header nav ul li.active a{font-weight:500}
header .menu-icon{margin-left: 20px;border: 1px solid #333333;padding: 10px;border-radius: 5px;display: none;cursor: pointer;}
header .menu-icon .line{width: 20px;height: 2px;margin-bottom: 4px;background: #fff;background:linear-gradient(90deg, #FFFFFF 0%, #C8B9F4 100%): ;border-radius: 5px;}
header .menu-icon .line:last-child{margin-bottom: 0;}
header .menu-icon.open .line:first-child{transform: rotate(50deg);position: relative;top: 5px;}
header .menu-icon.open .line:nth-child(2){transform: rotate(131deg);top: -1px;position: relative;}
header .menu-icon.open .line:nth-child(3){display:none}
footer .logo .email:hover, footer ul li:hover a, footer ul li a:hover, .navigation .email:hover, .navigation ul li a:hover, header nav ul li:hover a, header nav ul li a:hover, .blockchain .item:hover p{opacity: .8;color: #fff;}

.navigation{background: rgba(23, 23, 23, 1);position: fixed;left: 0;top: 72px;width: 100%;height: calc(100% - 72px);z-index:9;left: -10000px;}
.navigation.open{left:0}
.navigation *{color:#fff;position: relative;z-index: 2;}
.navigation ul{margin:0; padding:0; list-style:none}
.navigation ul li{}
.navigation ul li a{opacity: 1;font-weight:300;display:block;margin: 10px 0 15px 0;font-size:16px;}
.navigation h6{font-size:20px;margin-bottom:25px;opacity: .4;}
.navigation .email{font-size: 20px;}
.navigation .email img{margin-left: 10px;}
.navigation .email:hover img{margin-left:15px}
.navigation:after{content:'';background:url('images/BrosLabs.svg');display: block;position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: left bottom;opacity: .05;}

.banner{}
.banner p{width:65%;margin-bottom: 25px;}
.banner video{background: #171717}

.blockchain{}
.blockchain h4{
}
.blockchain img{height:40px;margin: 0 auto 10px auto;display: block;}
.blockchain p{color:#fff;text-align:center;font-size:11px;line-height: initial;}
.blockchain .leftshadow{position:relative}
.blockchain .marquee {overflow: hidden;white-space: nowrap;-webkit-mask-image: linear-gradient( to right, transparent, black 15%, black 85%, transparent );mask-image: linear-gradient( to right, transparent, black 15%, black 85%, transparent );}
.blockchain .marquee .item {display: inline-block;vertical-align: middle;padding: 0 20px;}
.blockchain .item{opacity:.4}
.blockchain .item:hover{transform: scale(1.02); opacity:1; cursor: pointer;}

.ecosystem .border{}
.ecosystem ul{margin:0; padding:0; list-style:none}
.ecosystem ul li{width:33.3%;background: rgba(23, 23, 23, 1);border-radius:15px;margin: 0 10px;padding: 25px;position: relative;}
.ecosystem ul li:first-child{margin-left:0}
.ecosystem ul li:last-child{margin-right:0}
.ecosystem ul li h4{margin-bottom: 20px;}
.ecosystem ul li h4:after{background:#fff!important}
.ecosystem ul li h3{color:#fff;margin-bottom: 25px;}
.ecosystem ul li p{opacity:0;margin: 0;height: 180px;}
.ecosystem ul li:hover{width:60%}
.ecosystem ul li:hover p{opacity:1}
.ecosystem ul li:hover h3{opacity:0;height:0;margin: 0;}
.ecosystem ul li:hover img{transform: scale(1.02);}
.ecosystem .featured{position: absolute;bottom: 25px;right: 25px;}
.ecosystem h2, .ecosystem h2 strong, .culture h2, .culture h2 strong, .gallery h2 strong, .withus h2 strong{color:#000!important;margin: 0;}
.ecosystem h2 strong, .culture h2 strong, .gallery h2 strong, .withus h2 strong{font-weight:bold;}

.culture ul, .withus ul{margin:0;padding:0;list-style:none;flex-wrap: wrap;}
.culture ul li, .withus ul li{width:25%;background: rgba(23, 23, 23, 1);border-radius: 15px;margin: 0 10px;padding: 25px;position: relative;height: 300px;flex: 1 1 calc(25% - 20px);margin-bottom:20px;}
.culture ul li h4:after, .withus ul li h4:after{background:#fff}
.culture ul li p, .withus ul li p{position:absolute;bottom: 20px;left: 0;padding: 0 25px;color: #fff;text-align: left;z-index: 2;}
.culture ul li:nth-child(2), .culture ul li:nth-child(4){height:370px;}
.culture ul li:nth-child(5), .culture ul li:nth-child(7){height:370px; margin-top:-70px;}
.culture ul li:first-child, .culture ul li:nth-child(5){margin-left:0}
.culture ul li:nth-child(4), .culture ul li:last-child{margin-right:0}
.culture ul li:after{content:'';display: block;position: absolute;left: 0;bottom: 0;width: 100%;height: 0%;background-size: cover!important;background-position: center center!important;border-radius: 15px;z-index: 2;transition: all 0.5s cubic-bezier(1, 0, 0, 1);}
.culture ul li.one:after{background:url('images/hover-1.png')}
.culture ul li.two:after{background:url('images/hover-2.png')}
.culture ul li.three:after{background:url('images/hover-3.png')}
.culture ul li.four:after{background:url('images/hover-4.png')}
.culture ul li.five:after{background:url('images/hover-5.png')}
.culture ul li.six:after{background:url('images/hover-6.png')}
.culture ul li.seven:after{background:url('images/hover-7.png')}
.culture ul li.eight:after{background:url('images/hover-8.png')}
.culture ul li:before{content:'';background: rgb(0 0 0 / 20%);display: block;position: absolute;left: 0;top: 0;width: 100%;z-index: 3;border-radius: 15px;}
.culture ul li:hover:after, .culture ul li:hover:before{height:100%}
.culture ul.d-flex li:nth-last-child(-n+4){margin-bottom:0}

.withus ul li{text-align:right;height: 250px;}
.withus ul li:first-child{margin-left:0;}
.withus ul li:last-child{margin-right:0;}
.withus ul li:after{content:'';width: 0%;height:100%;background:#fff;position:absolute;left: 0;top: 0;border-radius: 15px;}
.withus ul li:hover:after{width:100%;transition:all 0.35s cubic-bezier(1, 0, 0, 1);border: 1px solid #000;}
.withus ul li:hover p{color:#000}
.withus ul li:hover img{filter: invert(1);position: relative;z-index: 2;}

.wehire{}
.wehire li{display:flex;flex: 1 1 auto!important;height: 112px!important;flex: 1 1 calc(25% - 20px)!important;}
.wehire li img{width: 50px;margin-right: 20px;}
.wehire li p{position: initial!important;padding: 0 0px!important;}

.exist h3, .inside h3, .faq h3, .lab h3, .roles h3{font-size:34px;}

.exist{}
.exist h3{color: #fff}
.exist p{width:50%;}
.exist img{height:400px;}

.exist .owl-dots{border:1px solid rgba(146, 146, 146, 1);display: inline-block;padding: 5px 6px;border-radius: 25px;line-height: 0!important;position: absolute;bottom: 135px;}
.exist .owl-dot{list-style:none;line-height: 0!important;margin-right: 5px;}
.exist .owl-dot.active span{width:44px;border-radius:10px;display: inline-block;}
.exist .owl-dot span{width: 8px;height: 8px;border-radius: 50%;background: rgba(217, 217, 217, 1);display: inline-block;vertical-align: middle;}

.exist .no{position: absolute;bottom: 30px;z-index: 1;}
.exist .no ul{margin: 0;padding: 0;list-style: none;}
.exist .no ul li{color: rgba(146, 146, 146, 1); cursor: pointer;}
.exist .no ul li span{padding-left: 12px;}
.exist .no .current span{color:#fff}

#sync2.owl-carousel .owl-nav, #sync2.owl-carousel .owl-dots, #sync2.owl-carousel .owl-item {all: unset;}
#sync2.owl-carousel .owl-item {cursor: default;}
#sync2 .owl-nav, #sync2 .owl-dots{display:none!important}
#sync2 .owl-stage{transform: initial!important;}

.lab{}
.lab h3{color: #fff}
.lab ul{margin:0; padding:0; list-style:none}
.lab ul li{background:#fff;font-size: 20px;font-weight: 400;border-radius: 10px;padding: 24px 24px 24px 85px;margin-bottom: 15px;position: relative;}
.lab ul li img{position: absolute;left: 20px;top: 20px;}
.lab ul li:last-child{margin:0;}
.lab ul li:hover img{transform:scale(1.1)}

.inside{}
.inside p{width:65%;}
.inside .border:hover img{transform:scale(1.02)}

.faq h3{color: #fff}
.faq .bg-white{border-radius:15px}
.faq .ques{border-bottom:1px solid #000;padding-bottom: 20px;margin-bottom: 20px;}
.faq .ques h5{margin:0;position: relative; cursor: pointer;}
.faq .ques h5:after{content:'\f107';font-family:fontawesome;display:block;width:20px;height:20px;text-align: center;border: 1.5px solid #000;border-radius: 5px;font-size: 15px;position: absolute;right: 0;top: 0;}
.faq .ques.active h5:after{transform: rotate(180deg);background: #000;color: #fff;}
.faq .ques p{opacity:0; height:0; margin:0}
.faq .ques.active h5{margin-bottom:10px;position: relative;}
.faq .ques.active p{opacity:initial; height:initial; margin:initial}
.faq .ques:last-child{margin-bottom:0;border-bottom:0;padding-bottom: 0;}

.gallery{}
.gallery .type{margin-bottom:50px;}
.gallery .type ul, .gallery .expand ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap: 12px;}
.gallery .type ul li{border: 1px solid #000;width: 72px;height: 72px;text-align: center;border-radius: 10px;cursor: pointer;}
.gallery .type ul li img{position: relative;top: 15px;}
.gallery .type ul li.active{border: 3px solid #333;}
.gallery .type ul li.active img{top: 13px;}
.gallery .expand{display:flex;flex-wrap:wrap;opacity: 0;height: 0;overflow: hidden;}
.gallery .expand a{flex: 1 1 calc(25% - 0px);max-width: calc(25% - 0px);padding: 0px 10px 20px 10px;}
.gallery .expand .example-image{height: 287px;background-size: cover!important;background-position: center center!important;border-radius: 15px;}
.gallery .expand a:nth-child(even) .example-image{height:350px;}
.gallery .expand:after{content:'';background: url('images/shadow.png');display: block;position: absolute;left: 0;bottom: -10px;width: 100%;height: 220px;background-repeat: no-repeat;background-position: center bottom;}
.gallery .expand.active{height:initial; opacity:1; overflow: initial;}

.lb-details{display:none}

.roles{}
.roles h3{color: #fff}
.roles .bg-white h4:after{background:#000}
.roles .bg-white h3{color:#000;font-size:22px;margin: 15px 0;}
.roles .bg-white p{color:rgba(96, 96, 96, 1)}
.roles .bg-white{padding-bottom:10px!important;}
.roles .tag{display:inline-block;border:1px solid #000;padding: 2px 10px;border-radius: 5px;}
.roles .tag img, .roles .tag p{display:inline-block;vertical-align:middle;font-size: 14px;font-weight: 400;color: rgba(96, 96, 96, 1);}
.roles .tag:hover{background:#000;}
.roles .tag:hover p{color:#fff}
.roles .tag:hover img{filter:invert(1)}
.roles .button{padding: 3.5px 36px;float: right;margin-top: 0!important;font-size: 18px;}

footer{}
footer h6{color: rgba(222, 222, 222, 1);margin-bottom: 10px;}
footer .logo p{width: 65%;font-size: 16px;font-weight: 300;}
footer .logo .email{font-size:26px; color:#fff}
footer .logo .email img{margin-left:25px;}
footer .logo .email:hover img{margin-left:10px;}
footer ul{margin:0; padding:0; list-style:none;}
footer ul li a{color:rgba(146, 146, 146, 1);display: block;margin-bottom: 10px;font-weight: 300;font-size: 16px;}
footer hr{margin: 15px 0;}
footer .address{}
footer .address img{margin-right:10px;}
footer .address p{font-size:16px;color: rgba(146, 146, 146, 1);line-height:initial;margin: 0;}
footer .copyrights p{font-size:16px; font-weight: 100}
footer span{margin: 0!important;font-size: 17vw;line-height: initial;}

.brandname{width: 100%;}
.brandname tspan{cursor: pointer;}
#brandSVG{width: 100%;height: auto;}
#spotlight{transition: r 0.25s ease;}

@media (min-width: 1400px){
    .container{max-width: 1240px;}
}

@media(max-width: 1200px){
    .gallery .type ul li{width: 64px;height: 64px;}
    .gallery .type ul li img{width: 35px;top: 14px;}
}

@media(max-width: 992px){
    .dark h1{font-size: 50px;line-height: 60px;}
    .dark h1 br{display: none;}
    .banner p{width:100%}
    .ecosystem ul{display: block!important;}
    .ecosystem ul li{width: 48%!important;margin: 0;margin-bottom: 20px;float: left;}
    .ecosystem ul li br{display:none}
    .ecosystem ul li p{height:initial;opacity: initial;margin: initial;margin-bottom: 25px;}
    .ecosystem ul li:nth-child(2){float:right;}
    .ecosystem ul li:last-child{width: 100%!important;margin: 0;}
    .ecosystem .featured{position:initial}
    .ecosystem ul li:hover h3{opacity: initial;height: initial;margin-bottom: 25px;}
    .banner p, .exist p, .inside p, footer .logo p{width:100%}
    p{font-size:17px; line-height:25px;}
    .culture ul li, .withus ul li{flex: 1 1 calc(50% - 20px)!important;}
    .culture ul li:nth-child(odd){margin-left:0;}
    .culture ul li:nth-child(3){margin-top: -70px;}
    .culture ul li:nth-child(5){margin-top: -140px;}
    .culture ul li:nth-child(6){margin-top: 0px;}
    .culture ul li:nth-child(7){margin-top: -70px;margin-bottom: 0!important;}
    .culture ul li:nth-child(even){margin-right:0;}
    .culture ul.d-flex li:nth-last-child(-n+4){margin-bottom:20px}
    .culture ul.d-flex li:last-child{margin-bottom:0!important}
    .withus ul li:nth-child(2){margin-right:0}
    .withus ul li:nth-child(3){margin-left:0}
    .lab ul li{padding: 18px 10px 18px 70px;font-size: 18px;}
    .lab ul li img{top: 10px;left: 15px;}
    .gallery .expand a{flex: 1 1 calc(33.3% - 0px);margin: 0!important;m;max-width: calc(33.3% - 0px);}
    .gallery .expand .example-image{height:250px!important;}
    .gallery .type{ overflow-x: auto;-webkit-overflow-scrolling: touch;}
    .gallery .type ul{width: max-content;}
    .wehire li img{width:40px;}
    .wehire ul li{height: 100px!important;}
}

@media(max-width: 767px){
    header nav{display:none}
    header .menu-icon{display:inline-block}
    body.sticky{}
    body.sticky .navigation{height: calc(100% - 30px);top: 57px;height: calc(100% - 57px);}
    h1{font-size: 40px;line-height: 50px;}
    h2{font-size: 35px;line-height: 45px;}
    .inside .border .p-5{padding-bottom: 0!important}
    footer h6{font-size:15px;}
    footer .ql{border-top:1px solid #333!important; border-bottom:1px solid #333!important}
    footer .ql h6{display: none;}
    footer ul li{width:33.3%; float:left}
    footer ul li a{margin: 0;color: rgba(222, 222, 222, 1);font-size: 15px;padding-left: 15px;position: relative;}
    footer ul li a:after{content:'';display:block;width: 6px;height: 6px;position: absolute;left: 0;top: 8px;background: #fff;border-radius: 50%;opacity: .75;}
    footer .address p{font-size: 12px;color: rgba(146, 146, 146, 1);}
    .banner{border-top: 1px solid #333!important}
    .lab ul li{width:49%;float:left;padding: 15px;font-size: 17px;min-height: 142px;}
    .lab ul li img{display:block;position:initial;margin-bottom: 10px;}
    .lab ul li:nth-child(even){float:right;padding: 20px;}
    .lab ul li:nth-child(3){clear:both}
    .gallery .expand a{flex: 1 1 calc(50% - 0px);max-width: calc(50% - 0px);padding: 0px 5px 10px 5px;}
    .gallery .expand .example-image{height:200px!important;}
    .roles .button{display:inline-block; float:initial}
    .roles .bg-white{padding-bottom:20px!important;}
    .exist img{height:300px}
    .exist .owl-dots, .exist .no{position:initial;}
    .exist .owl-dots{display:none}
    .exist #sync2 .owl-stage{width: 100%!important;margin-bottom: 20px;}
    .exist #sync2 .owl-item{float: left!important;width: 25%!important;text-align: center!important;}
    .exist #sync2 .owl-item span{display:block;padding: 0;}
    .exist .no ul li{font-size:15px;line-height: 1.2;}
    .withus ul li img, .ecosystem ul li p, .culture ul li p{display:none}
    .ecosystem .featured{display: none;}
    .ecosystem ul li h3{margin: 0!important;}
    .withus ul li p{position: relative;padding: 0;bottom: initial;left: initial;}
    .withus ul li p br{display:none}
    .withus ul li{height: initial;}
}

@media(max-width: 575px){
    h2{font-size: 25px;line-height: 30px;}
    h4{font-size: 17px;}
    .dark h1{font-size: 40px;line-height: 50px;}
    .button{padding: 5px 15px;border-radius: 0;font-size: 16px;}
    .ecosystem ul li{width: 100%!important;}
    .lab h3, .exist h3, .inside h3, .faq h3{font-size:25px;}
    footer .address img{display:block;margin-bottom:10px; width:15px;}
    footer .logo .email{font-size:20px;}
    .culture ul li, .withus ul li, .wehire ul li{width: 100%!important;margin: 0!important;margin-bottom: 10px!important;flex: 1 1 calc(100% - 20px)!important;height: initial!important;padding: 20px;}
    .culture ul li:nth-child(7){margin-bottom:20px!important;}
    .culture ul li p{}
    .lab ul li{padding: 10px!important;font-size: 13px;min-height: initial;}
    .gallery .expand .example-image{height:150px!important;}
    .withus ul li{}
    .wehire ul li{height:initial!important}
    .exist .no ul li{font-size:12px;}
    .logo img{height: 40px}
    .faq .ques h5{font-size: 15px;}
    #brandSVG{padding: 20px 0}
}