@charset "utf-8";

*{margin:0px; padding:0px;}

@font-face {
    font-family: 'So:hne Breit';
    src: url('../fonts/SohneBreit-Buch.woff2') format('woff2'),
        url('../fonts/SohneBreit-Buch.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'So:hne Breit';
    src: url('../fonts/SohneBreit-Dreiviertelfett.woff2') format('woff2'),
        url('../fonts/SohneBreit-Dreiviertelfett.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'So:hne Breit';
    src: url('../fonts/SohneBreit-Extrafett.woff2') format('woff2'),
        url('../fonts/SohneBreit-Extrafett.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'So:hne Breit';
    src: url('../fonts/SohneBreit-Fett.woff2') format('woff2'),
        url('../fonts/SohneBreit-Fett.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'So:hne Breit';
    src: url('../fonts/SohneBreit-Halbfett.woff2') format('woff2'),
        url('../fonts/SohneBreit-Halbfett.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'So:hne Breit';
    src: url('../fonts/SohneBreit-Kraftig.woff2') format('woff2'),
        url('../fonts/SohneBreit-Kraftig.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'So:hne Breit';
    src: url('../fonts/SohneBreit-Leicht.woff2') format('woff2'),
        url('../fonts/SohneBreit-Leicht.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}



body{font-family: "Manrope", sans-serif; font-weight: 500; font-size: 15px; background-color: #000000; color: #fff;} 

a, a:active, a:focus, a:hover {outline: none; transition: all 0.5s ease; text-decoration: none;}
button, button:active, button:focus, button:hover {outline: none; box-shadow: none !important; transition: all 0.5s ease; text-decoration: none;}

.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000000;}
.overlay .overlayDoor:before, .overlay .overlayDoor:after {content: ""; position: absolute; width: 50%; height: 100%; background: #0b0b0b; transition: 0.5s; transition-delay: 0.8s; }
.overlay .overlayDoor:before {left: 0; }
.overlay .overlayDoor:after {right: 0;}
.overlay.loaded .overlayDoor:before {left: -50%;}
.overlay.loaded .overlayDoor:after {right: -50%;}
.overlay.loaded .overlayContent {opacity: 0; margin-top: -15px;}
.overlay .overlayContent {position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;	transition: 0.5s}
.overlayContent img{width:220px;}

.container{max-width: 1460px;}

.opacity-10{opacity: .10;}
.opacity-15{opacity: .15;}
.opacity-20{opacity: .20;}

.pointer{cursor: pointer;}
.fs-7{font-size: .9rem;}
.fs-8{font-size: .8rem;}
.fs-9{font-size: .5rem;}

.fw-300{font-weight: 300 !important;}
.fw-400{font-weight: 400 !important;}
.fw-500{font-weight: 500 !important;}
.fw-600{font-weight: 600 !important;}
.fw-700{font-weight: 700 !important;}
.fw-800{font-weight: 800 !important;}
.fw-900{font-weight: 900 !important;}

.max-100{max-width: 100px;}
.max-130{max-width: 130px;}
.max-150{max-width: 150px;}
.max-200{max-width: 200px;}
.max-300{max-width: 300px;}
.max-400{max-width: 400px;}
.max-500{max-width: 500px;}
.max-600{max-width: 600px;}
.max-600{max-width: 600px;}
.max-700{max-width: 700px;}
.max-800{max-width: 800px;}
.max-900{max-width: 900px;}
.max-1000{max-width: 1000px;}
.max-1100{max-width: 1100px;}
.max-1200{max-width: 1200px;}

.logo{max-width: 190px;}
header{position: fixed; background: #000; z-index: 11; left: 0; right: 0; top: 0;}
.theme_btn{ font-family: 'So:hne Breit'; text-align: center; font-weight: 500; display: inline-block; background: linear-gradient(90deg, rgb(117, 214, 251) 0%, rgb(175, 248, 158) 100%); border-radius: 35px; color: #fff; border: none; padding: 1.5px;}
.theme_btn span{background: #17171A; padding: 10px 20px; display: block; border-radius: inherit;}
.theme_btn:hover span, .theme_btn.active span{background: #17171a00; color: #000;}
.btn-sm{padding: 4px 20px !important; font-size: 12px;}
.btn_lg{padding: 12px 45px !important; font-size: 15px;}
.border-btn{border: 1px solid #313131; background: transparent; color: #fff; padding: 11px 10px; border-radius: 10px;}
.border-btn:hover{background: #0000005c;}

.menu_list{display: flex; gap: 10px; list-style: none; margin: 0; padding: 0;}
.menu_list li a{display: block; border-radius: 20px; padding: 6px 20px; position: relative; color: #999; border: 2px solid #1b1b1b; background: #1b1b1b;}
.menu_list li a::before{content: ""; background: url(../img/menu_icon.png); position: absolute; width: 25px; height: 30px; right: -19px; top: 2px; background-size: cover;}
.menu_list li a:hover, .menu_list li a.active{color: #fff; border: 2px solid #4b4b4b;}
.menu_list li:last-child a::before{display: none;}

.menu_list_icon{background: #1b1b1b; width: 42px; height: 42px; font-size: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;  }
.offcanvas{background: #1b1b1b;}
.offcanvas.offcanvas-bottom{border-radius: 15px 15px 0px 0px;}
.offcanvas .menu_list{display: block; text-align: center;}
.offcanvas .menu_list li a{ font-size: 16px;}
.offcanvas .menu_list li a::before{display: none;}
.offcanvas{--bs-offcanvas-height: unset;}
.offcanvas .menu_list li a:hover, .offcanvas .menu_list li a.active{color: #fff; border: 2px solid transparent;}
.offcanvas .theme_btn span{padding: 10px 20px;}

.header_padding{padding-top: 75px;}

.left-box-shap2{position: absolute; top: 0; left: 0px; z-index: -1; width: 180px;  opacity: .6;}
.right-box-shap2{position: absolute; top: 100px; right: 0px; z-index: -1; width: 180px;  opacity: .6;}
.x-light{max-width: 450px; position: absolute; bottom: -20px; left: 0;}
.box-lien{width: 100%; z-index: -1; position: absolute; top: 40px; left: 0; right: 0;}

.heading_text{display: block;}
.heading_text h2{font-size:60px; font-family: 'So:hne Breit'; font-weight: 500;}
.heading_text p{margin-bottom: 0px;}
p{color: #999;}

.plusminus{position: absolute; transition: all 0.4s; right: 20px; top: 17px; width: 22px; text-align: center;}
.accordion_head {cursor: pointer; font-family: 'So:hne Breit';  font-size: 17px; padding: 20px 40px; font-weight: 300; position: relative; padding-right: 34px !important;}
.faq_point{position: absolute; left: 0; top:0}
.accordion_border{position: relative; border-top: 1px solid #3a3a3a; border-radius: 15px; margin-bottom: 15px;}
.accordion_body{display:none; padding: 0px 40px; padding-bottom: 20px;}
.accordion_body p{margin-bottom: 0px; font-size: 15px; width: 100%; line-height: 27px;}
.accordion_head::before{content: "\f287"; color: #747474; font-family: bootstrap-icons; font-size: 8px; position: absolute; left: 15px;}
.plusminus img{width: 100%;}
.accordion_border.active .plusminus{transform-style: preserve-3d; transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(45deg) skew(0deg);}

.accordion_border.active{border-bottom: 1px solid #3a3a3a;}
.box_lien_box{background: #0c0c0c; border-radius: 20px; border: 1px solid #3a3a3a;}
.footer_box{border-left: 2px solid #3a3a3a; border-right: 2px solid #3a3a3a;}
.common-box-border{z-index: 1; position: relative; border-left: 2px solid #3a3a3a; border-right: 2px solid #3a3a3a; background: #0c0c0c;  border-bottom: 2px solid #3a3a3a; border-radius: 0px 0px 25px 25px;}

.ticker-wrapper {  overflow: hidden; width: 100%;}
.ticker-track { display: flex; width: max-content; animation: tickerScroll 20s linear infinite;}
.ticker-content { display: flex; margin-right: 50px; gap: 50px;font-size: 13px;}
.ticker-wrapper h3{font-size:100px;  font-family: 'So:hne Breit'; font-weight: 500;}
@keyframes tickerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.font-Breit{font-family: 'So:hne Breit';}
.footer_social_media{list-style: none; margin: 0; padding: 0; display: flex; gap:20px}

.footer_social_media li a{color: #fff; font-size: 20px;}
.footer_social_media li a:hover{opacity: .8;}
.common-box-heading{position: absolute; gap: 12px; display: flex; align-items: center; justify-content: center; left: 0;color: #fff9; font-size: 17px;  right: 0; text-align: center; top: 5px;}


.roadmap_box{position: relative;}
.roadmap_complete{opacity: .7;}
.roadmap_due{opacity: 1;}
.roadmap_box ul{padding: 0; padding-left: 15px;}
.roadmap_box ul li{margin-bottom: 10px;}
.roadmap_box_content{position: absolute; top: 0; padding: 50px; max-width: 1100px; margin: auto; left: 0; right: 0}
.roadmap_box_btm{padding-top: 60px;}
.road_map_icon{ position: absolute; top:-60px; width: 24px; height: 24px; transform: rotate(45deg); border-radius: 6px; overflow: hidden; border: 2px solid #92e7cc; background: rgb(0, 0, 0);}
.roadmap_box_btm .road_map_icon{top:-3px}
.road_map_icon video, .road_map_icon img{transform: rotate(-45deg);}
.roadmap_box_content::before{content: ""; display: none; background: linear-gradient(to bottom, #92e7cc 60%, #1A1A1A 100%); width: 5px; position: absolute; left: 16px; top: 15px; bottom: 0}
.video-color-filter{background: #92e7cc; mix-blend-mode: hue; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.roadmap_container{max-width: 1250px; margin: auto;}

.angle-box{min-height: 200px; padding: 35px 35px; background: url(../img/angle-box.png) no-repeat center; background-size: 100% 100%;}
.angle-box2{min-height: 300px; z-index: 1; position: relative; padding: 40px 20px; background: url(../img/angle-box2.png) no-repeat center; background-size: 100% 100%;}
.Solutions-Line{z-index: -1;width: 100%; position: absolute; left: 0; right: 0; bottom: 0;}


.feature_box{min-height: 200px; padding: 40px 25px; height: 100%; border-radius: 35px; border: 1px solid #3a3a3a; background: url(../img/gradient_box.jpg) no-repeat center; background-size: 100% 100%;}

.border-box{ border: 2px solid #3a3a3a;}
.text_gradient{background: linear-gradient(90deg, rgb(117, 214, 251) 0%, rgb(175, 248, 158) 100%) padding-box text;
  -webkit-text-fill-color: transparent;}

.banner_box{position: relative;}
.banner_content{position: absolute; left: 0; right: 0; top:0px; bottom: 0; background: #00000061;}
.banner_content h1{font-size: 80px;}
.banner_content p{font-size: 18px; max-width: 700px; margin: auto;}

.how_to_buy_box{min-height: 500px; position: relative;}

.wave{display: flex; z-index: -1; justify-content: space-around; align-items: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.wave__container {position: relative; width: 500px; height: 500px; margin: auto;}
.wave__circle { position: absolute; background-color: transparent; border-radius: 50%; border: 2px solid #535353;
   animation-name: ripple;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0, 0.2, 0.8, 1);
    animation-iteration-count: infinite;
  }
  
.wave__container .wave__circle:nth-child(2) {animation-delay: -1s;}
.wave__container .wave__circle:nth-child(3) {animation-delay: -2s;}
.wave__container .wave__circle:nth-child(4) {animation-delay: -4s;}
.wave__container .wave__circle:nth-child(5) {animation-delay: -6s;}
.wave__container img{left: 0; width: 150px;position: absolute; z-index: 1; right: 0; margin: auto; top: 34%;}
.middle_shadow.top{top: 30%;}
  
@keyframes ripple {
    0% { top: 250px; left:250px;width: 0; height: 0; opacity: 1; }
    100% {top: 0; left: 0;  width: 500px; height: 500px; opacity: 0;}
}

.step_box_connect{position: relative; z-index: 1; background-image: linear-gradient(to right, #1b1b1b , #000); padding: 20px 20px; padding-left: 110px; padding-top: 25px; border-radius: 20px; border: 1px solid #3a3a3a;}
.step_box_connect span{position: absolute; left: 20px; top: -21px; background-image: linear-gradient(to right, #1b1b1b , #000); padding: 5px 25px; color: #fff; border-radius: 20px; border: 1px solid #3a3a3a;}
.step_box_connect .img_box{position: absolute; padding: 15px; left: 15px; top: 25px; width: 70px;  height: 70px; background-image: linear-gradient(to right, #1b1b1b , #000); overflow: hidden; color: #fff; border-radius: 10px; border: 1px solid #3a3a3a;}
.step_box_connect .img_box img{width: 100%; filter: brightness(0) invert(1);}
.step_box_connect h4{font-size: 18px; margin-bottom: 13px;}
.step_box_connect p{margin-bottom: 0px; line-height: 23px; font-size: 14px}
.step_box_connect.step2_margin{margin-top: 70px;}
.step_box_connect.step4_margin{margin-top: 150px;}
.step_box_connect.step3_margin{margin-top: 80px;}