:root{
    --white:#ffffff;
    --black:#000000;
    --darker:#100F0F;
    --bluek:#8255FF;

    --bricolage-grotesque:'Bricolage Grotesque';



}

/* 1. Create a Clean Base
------------------------------------------------------------------------------*/
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address,
small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label,input, textarea, option, .nobox 
{background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}
blockquote, q {quotes: none;}
br {height: 0;}
ul, ol, dl, li {margin:0; padding:0;}
html, body{ -webkit-appearance:none; appearance:none; border:none; -webkit-text-size-adjust:none;}
ul {list-style-type: none}

/* 2. Define Base Typography
------------------------------------------------------------------------------*/
body{padding: 0;margin: 0;}
*{direction: ltr;font-family:var(--bricolage-grotesque);}
*,*:after, *:before {box-sizing: border-box;}

body h1,
body .h1,
body h2,
body.h2,
body h3,
body.h3,
body h4,
body.h4,
body h5,
body .h5,
body h6,
body .h6 {margin: 0;color: var(--darker);font-weight: 400;}
body h2{font-size: 56px;line-height: 61px;}



body p {color: var(--darker);font-size: 20px;line-height: 30px;font-weight: 400;margin-bottom: 24px;}
body p em{font-weight: 500;color: var(--bluek);font-style: normal;}
body p:last-child {margin-bottom: 0;}

strong {font-weight: 700;}
hr {border:0 var(--dark) solid; border-top-width: 2px; clear: both; height: 0;}
ol {list-style: decimal;}

/* 3. Images
------------------------------------------------------------------------------*/

body img {max-width: 100%; border: 0; border-style: none; height: auto;display: block;}
/* 4. Links
------------------------------------------------------------------------------*/   

body a{ text-decoration:none;transition: 0.7s; display: inline-block;font-size: 18px;line-height: 24px;font-weight: 400;color:var(--darker);}
body a:hover{color: var(--bluek);}
/* 5. Forms
------------------------------------------------------------------------------*/


input::-webkit-input-placeholder {color: #100F0F80;}
input:-moz-placeholder {color:#100F0F80; }
input::-moz-placeholder {color: #100F0F80; }
input:-ms-input-placeholder {color:#100F0F80;}
textarea::-webkit-input-placeholder {color: #100F0F80; }
textarea:-moz-placeholder {color:#100F0F80; }
textarea::-moz-placeholder {color:#100F0F80; }
textarea:-ms-input-placeholder {color:#100F0F80;}

textarea {resize: none;}

fieldset {border: 1px solid transparent;} 
/* 6. Tables
------------------------------------------------------------------------------*/

table {border-spacing: 0; border-collapse: collapse;}
td {text-align: start; font-weight: normal;}
/* 7. Framework
------------------------------------------------------------------------------*/


.d_flex{ display:flex;flex-wrap: wrap;justify-content: flex-start;}
.d_flex_jc{justify-content:center;}
.d_flex_je{justify-content:flex-end;}
.d_flex_jb{justify-content:space-between;}
.d_flex_as{align-items: flex-start;}
.d_flex_ac{align-items: center;}
.d_flex_ae{align-items: flex-end;}
.d_flex_rr{flex-direction: row-reverse;}
.text-center{text-align: center;}
.text-left{text-align: start;}
.text-right{text-align: end;}

a,.in,.sub,::after,::before{transition: 0.7s ease all;-webkit-transition: 0.7s ease all;-moz-transition: 0.7s ease all;-o-transition: 0.7s ease all;}
.bg{position: absolute;top: 0;right: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-size: cover;background-position: center;}
.wrapper{max-width: 1400px; width: 100%; margin: 0 auto;position: relative;}

.btn{padding:16.5px 50px;border-radius: 16px;color: var(--white) !important;position: relative;overflow: hidden;}
.btn span{position: relative;z-index: 2;}
.btn::after,.btn::before{content: '';position: absolute;top: 0;left: 0;background-image:linear-gradient(40deg, #8255FF 0%, #FF6EF3 100%);width: 100%;height: 100%;transition: 0.7s ease all;}
.btn::before{background-image:linear-gradient(210deg, #8255FF 0%, #FF6EF3 150%);z-index: 1;opacity: 0;}
.btn:hover:before{opacity: 1;}

body{padding-top: 151px;}

header{padding: 47px 0;position: fixed;left: 0;top: 0;width: 100%;z-index: 999;background-color: var(--white);}
header.fixed{box-shadow: 0 0 10px #0000003d;padding: 15px 0;}
header nav ul{background-color: #E1EAF166;border-radius: 70px;padding:16.5px 34px;}
header nav ul li:not(:last-child){margin-right: 49px;}


.banner{max-width: 1564px;margin: 0 auto;position: relative;height: 684px;border-radius: 30px 0;overflow: hidden;padding: 75px 82px;display: flex;align-items: flex-end;justify-content: flex-start;}
.banner .bg::after{content:'';position: absolute;bottom: 0;left: 0;width: 100%;height: 80%;background-image: url(../images/ban_layer.png);background-repeat: no-repeat;background-size:100% 100%;}
.banner video{width: 100%; height: 100%; object-fit: cover; object-position: center;opacity:1;}
.banner iframe{width: 100%; height: 100%; object-fit: cover; object-position: center;opacity:1;}
.banner .col{position: relative;z-index: 2;}
.banner h1{color: #E1EAF1;font-size: 62px;line-height: 68px;letter-spacing: -1px;font-weight: 400;}

.aboutus{position: relative;padding-top: 107px;}
.aboutus .plus{position: absolute;top: 0;right:-12.5%;}
.aboutus .left_col{width:477px;}
.aboutus .right_col{width:684px;}

.we_enable{padding-top: 138px;}
.we_enable .inner{margin-top: 62px;}
.we_enable .col{position: relative;overflow: hidden;border: 1px solid #E1EAF1;border-radius: 30px 0;margin-right: 32px;width: 31.8%;margin-bottom: 67px;padding: 34px 25px;display: flex;align-items: flex-start;min-height: 230px;}
.we_enable .col:nth-child(3n){margin-right: 0;}
.we_enable .col .img{width: 72.5px;}
.we_enable .col .text{width:calc(100% - 72.5px);padding-left: 21px;}
.we_enable .col h3{color: var(--bluek);font-size: 22px;line-height: 26px;max-width: 214px;margin-bottom: 14px;font-weight: 500;}
.we_enable .col p{font-size: 18px;line-height: 28px;}
.we_enable video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;}
.we_enable iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center;}

.our_vision{padding-top:102px;}
.our_vision p{font-size: 32px;line-height: 40px;color: #E1EAF1;position: relative;z-index: 2;}
.our_vision .animate_up {position: relative;z-index: 3;}
.our_vision .inner{margin-top:37px;position: relative;padding: 183px 119px 208px;}
.our_vision .inner .bg{    background-size: 100% 100%; background-image: url(../images/line.png); height: calc(100% - 400px); bottom: 0; margin: auto;}
.our_vision .inner::after,
.our_vision .inner::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 250px;background-repeat: no-repeat;background-size: 100% 100%;background-image:url(../images/top_layar.png);z-index: 1;}
.our_vision .inner::before{background-image:url(../images/bottom_layer.png);top: auto;bottom: 0;}

.the_opportunity{background-color: #E1EAF133;margin-top: 128px;padding: 148px 0;position: relative;}
.the_opportunity .file_icon{position: absolute; left: -190px; z-index: 1; top: 21%;}
.the_opportunity .left_col{position: relative;width: 505px;height: 481px;margin-right: 76px;margin-left: 137px;}
.the_opportunity .left_col .bg{border-radius: 30px;overflow: hidden;}
.the_opportunity .left_col .bg::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background-image: url(../images/ban_layer.png); background-repeat: no-repeat; background-size: 100% 100%; }
.the_opportunity .right_col{width: 565px;}
.the_opportunity h2{margin-bottom: 26px;}
.the_opportunity p{letter-spacing: 0.1px;}
.the_opportunity .opportunity_blogs { position: absolute; bottom: -37%; right: 9%;}


.Why_dataplus{padding: 90px 0 102px;position: relative;}
.Why_dataplus h2{margin-bottom: 30px;}
.Why_dataplus .inner{max-width: 1043px;margin: 0 auto;position: relative;}
.Why_dataplus .col{width: 393px;text-align: center;}
.Why_dataplus .col .img{background-color: #8255FF;width: 67.5px;height: 67.5px;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin: 0 auto;}
.Why_dataplus .col h3{margin-top: 16.25px;font-size: 24px;font-weight: 500;line-height: 30px;}
.Why_dataplus .col p{margin-top:10px;font-size: 18px;line-height: 28px;}
.Why_dataplus .col:nth-child(n+3){margin-top: 191px;}
.Why_dataplus .animate_img{position: absolute;top: 0;bottom: 0;left: 0;right:0;width:fit-content;height: fit-content;margin: auto;}
.Why_dataplus .animate_img span{width: 210px;height: 70px;position: absolute;top:calc(50% - 2px);border: 2px solid #8255FF33; border-radius: 0 50px 0 0; left: calc(100% + 4px); border-bottom: none; border-left: none;}
.Why_dataplus .animate_img span::after{content:'';position: absolute;bottom: 100%;height: 100%;width: 100%;left: 0;border: 2px solid #8255FF33; border-radius: 0 0 50px 0;border-top: none; border-left: none;}
.Why_dataplus .animate_img span.left {right: calc(100% + 4px); left:auto; transform: scale3d(-1, 1, 1); }


.where_headed{padding: 103px 0 93px;position: relative;background-color: #E1EAF133;}
.where_headed .where_headed_img{    position: absolute; top: -40px; left: 33%;}
.where_headed .left_col{width: 597px;}
.where_headed .right_col{width: 803px;}
.where_headed p{font-size: 42px;line-height: 57px;}
.where_headed p strong{font-weight: 500;}
.where_headed p img{    display: inline;}

.ready_train{padding: 94px 0 199px;overflow: hidden;}
.ready_train .wrapper{border-radius: 30px;background-image: url(../images/ready_bg.jpg);background-repeat: no-repeat;background-size: 100% 100%;padding:87px 0 78px 119px;}
.ready_train .plus{    position: absolute; top: 0; right: -270px;}
.ready_train h2{font-size: 42px;line-height: 46px;color: var(--white);    max-width: 950px;}
.ready_train .getin_touch{background-color: var(--darker);padding: 6px  6px  6px 29px;border-radius: 70px;color: #E1EAF1;font-size: 18px;font-weight: 400;display: flex;align-items: center;justify-content: center;width: fit-content;margin-top:35px;}
.ready_train .getin_touch span{width: 44px;height: 44px;background-color: #FF6EF3;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-left:23px;}
.ready_train .getin_touch:hover{background-color: #ff6ef3;color: var(--darker);}

.logo_sec{margin:161px 0 210px;}
.logo_sec .wrapper{overflow: hidden;}
.logo_sec .wrapper::after,
.logo_sec .wrapper::before{    content: ''; position: absolute; top: 0; width: 100px; height: 100%; right: 0; z-index: 5; box-shadow: -40px 0px 50px inset #fff; }
.logo_sec .wrapper::before{right: auto;left: 0;transform: scale(-1);}
.logo_sec .wrap{padding: 0 52px;flex-wrap: nowrap !important;white-space: nowrap;animation: scroll 10s linear infinite;display: flex;gap: 120px;}
.logo_sec .col{width: max-content; min-width: max-content;}
@keyframes scroll{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

footer{background-color: #E1EAF159;padding: 91px 0 46px;position: relative;}
.top_footer{border-bottom: 1px solid #353434;padding-bottom: 84px;}
.top_footer .col:first-child{width: 325px;margin-right: 34px;}
.top_footer h2{margin-top: 54px;}
.top_footer .social{margin-bottom: 61px;}
.top_footer .social a{width: 52.24px;height: 52.24px;border: 1.23px solid #8255FF;border-radius: 50%;display: flex;justify-content: center;align-items:center;margin-right: 10.5px;}
.top_footer .social a img{transition: 0.7s ease all;}
.top_footer .social a:hover{background-color:#8255FF;}
.top_footer .social a:hover img{filter: brightness(0) saturate(100%) invert(93%) sepia(0%) saturate(7500%) hue-rotate(61deg) brightness(108%) contrast(109%);}
.top_footer .subscribe_col{}
.top_footer .subscribe_col h4{line-height: 30px;font-size: 16px;font-weight: 400;margin-bottom: 14px;}
.top_footer .subscribe_col .form_col{width: 564px;}
.top_footer .subscribe_col .form_col .in{width: 100%;height: 58px;border: 1px solid #353434;border-radius: 10px;padding: 0 18px;color: #100F0F80;font-size: 16px;font-weight: 400;width: 100%;}
.top_footer .subscribe_col .form_col .in:focus{border-color: #8255FF;}
.top_footer .subscribe_col .form_col .in.wpcf7-not-valid{border-color: #ff0000 !important;}
.top_footer .subscribe_col .form_col .wpcf7-not-valid-tip{display: none !important;}
.top_footer .subscribe_col .sub_col{}
/* .top_footer .subscribe_col .sub_col{background-color: var(--darker);padding: 6px  6px  6px 29px;border-radius: 70px;color: #E1EAF1;font-size: 18px;font-weight: 400;display: flex;align-items: center;justify-content: center;width: fit-content;position: relative;margin-left: 18px;transition: 0.7s ease all;} */
.top_footer .subscribe_col .sub_col{    background-color: var(--darker); padding: 6px 6px 6px 29px; border-radius: 70px; color: #E1EAF1; font-size: 18px; font-weight: 400; display: flex ; align-items: center; justify-content: center; width: 177px; position: relative; margin-left: 18px; transition: 0.7s ease all; text-align: left;}
.top_footer .subscribe_col .sub_col p{display: flex;align-items: center;    justify-content: flex-end; width: 100%;}
.top_footer .subscribe_col .sub_col span:not(.wpcf7-spinner){width: 44px;height: 44px;background-color: #FF6EF3;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-left:23px;transition: 0.7s ease all;}
.top_footer .subscribe_col .sub_col .sub{    position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 1; background: no-repeat; border: none; color: #fff; font-size: 18px; padding: 0; text-align: left; padding-left: 47px;}
.top_footer .subscribe_col .sub_col:hover{background-color: #ff6ef3;color: var(--darker);}
.top_footer .subscribe_col .sub_col .wpcf7-spinner{    position: absolute; right: -40px;margin: 0 ;}
.bottom_footer{padding-top: 21px;}
.bottom_footer p{font-size: 16px;line-height: 30px;margin: 0;}
.bottom_footer ul li:not(:last-child){margin-right: 30px;}
.bottom_footer ul li a{font-size: 16px;line-height: 30px;}

.back_top{position: absolute;top: -120px;right: 0;z-index: 99;}
.back_top span{width: 57px;height: 57px;border-radius: 50%;display: flex;justify-content: center;align-items: center;background-color: #E1EAF1;}
.back_top em{font-style: normal; text-align: center; color: #100F0F; font-weight: 400; font-size: 16px; line-height: 30px; text-align: center; width: 100%; display: block;}

.animate_up{transform: translateY(30px);opacity: 0;transition: 1s ease all;}
.animate_up.come-in{transform: translateY(0);opacity: 1;}

.Why_dataplus .animate_scale img{transform: scale(0);transition: 1s ease all;}
.Why_dataplus .animate_img span{opacity: 0;transition: 1s ease all;transition-delay: 0.05s;}
.Why_dataplus .animate_scale.come-in img{transform: scale(1);}
.Why_dataplus .animate_scale.come-in span{opacity: 1;}

.contact_popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;display: flex;justify-content: center;align-items: center;opacity: 0;pointer-events: none;transition: 0.7s ease all;}
.contact_popup.open{opacity: 1;pointer-events: all;}
.contact_popup .plus{    position: absolute; right: -106px; top: 10px;}
.contact_popup .bg{background-color: #E1EAF1CC;}
.contact_popup .inner{width:626px;height:fit-content;position: relative;z-index: 1;background-color: var(--white);padding: 44px 55px 63px;border-radius: 30px;box-shadow: 0 4px 24px #0000001A;}
.contact_popup h3{margin-top: 9px;font-size: 20px;line-height: 30px;margin-bottom: 25px;}

.contact_popup .in{width: 100%;height: 58px;border: 1px solid #353434;border-radius: 10px;padding: 0 18px;color: #100F0F80;font-size: 16px;font-weight: 400;width: 100%;margin-bottom: 19px;}
.contact_popup .in:focus{border-color: #8255FF;}
.contact_popup .in.wpcf7-not-valid{border-color: #ff0000 !important;}
.contact_popup .wpcf7-not-valid-tip{display: none !important;}
.contact_popup .sub_col{    background-color: var(--darker); padding: 6px 6px 6px 29px; border-radius: 70px; color: #E1EAF1; font-size: 18px; font-weight: 400; display: flex ; align-items: center; justify-content: center; width: 177px; position: relative; margin-left: 18px; transition: 0.7s ease all; text-align: left;    margin: 0 auto; margin-right: 0;margin-top: -26px;}
.contact_popup .sub_col p{display: flex;align-items: center;    justify-content: flex-end; width: 100%;}
.contact_popup .sub_col span:not(.wpcf7-spinner){width: 44px;height: 44px;background-color: #FF6EF3;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-left:23px;transition: 0.7s ease all;}
.contact_popup .sub_col .sub{    position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 1; background: no-repeat; border: none; color: #fff; font-size: 18px; padding: 0; text-align: left; padding-left: 47px;}
.contact_popup .sub_col:hover{background-color: #ff6ef3;color: var(--darker);}
.contact_popup .sub_col .wpcf7-spinner{    position: absolute; right: -40px;margin: 0 ;}
.contact_popup .iagree{position: relative;padding-left: 32px;color:#100F0F80;font-size: 14px;line-height: 17px;display: block;}
.contact_popup .iagree input { opacity: 0; position: absolute; top: 0; width: 70%; height: 100%; left: -40px; z-index: 2; cursor: pointer; }
.contact_popup .iagree::after{content:'';width: 23px;height: 23px;border-radius: 50%;border: 1px solid #000000;left: 0;top: 0;display: block; position: absolute;}
.contact_popup .iagree::before{content:'';width: 13px;height: 13px;border-radius: 50%;background-color: #8255FF;opacity: 0;left: 5px;top: 5px;    position: absolute;}
.contact_popup .iagree:has( input:checked)::before{opacity: 1;}

.contact_popup .iagree span{margin-left: 0;color:#100F0F80;font-size: 14px;line-height: 17px;display: block;}