@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/NotoSans.woff2') format('woff2'),
        url('../fonts/NotoSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oxanium';
    src: url('../fonts/Oxanium-ExtraBold.woff2') format('woff2'),
        url('../fonts/Oxanium-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oxanium';
    src: url('../fonts/Oxanium-Bold.woff2') format('woff2'),
        url('../fonts/Oxanium-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oxanium';
    src: url('../fonts/Oxanium-Medium.woff2') format('woff2'),
        url('../fonts/Oxanium-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
body{background: #000;}
.wrapper{overflow-x: hidden;}
.container{max-width: 1080px;}
.container-xxl{max-width: 1440px;}
h1{font-size: 60px;font-family: 'Oxanium';font-weight: 800;color: white;margin-bottom: 20px;text-transform: uppercase;line-height: 60px;}
h2{font-size: 42px;margin-bottom: 4px;font-family: 'Oxanium';font-weight: 800;color: white;text-transform: uppercase;}
h3{font-size: 30px;margin-bottom: 30px;font-family: 'Oxanium';font-weight: 800;color: white;}
h4{font-size: 24px;margin-bottom: 30px;font-family: 'Oxanium';font-weight: 700;color: white;}
p{font-size: 18px;line-height: 28px;font-family: 'Noto Sans';font-weight: 400;color: white;margin: 0;}
ul{margin: 0;list-style: none;padding: 0;font-family: 'Noto Sans';font-size: 18px;}
a{text-decoration: none;color: white;}
.btn-primary{font-size: 18px;border: none;border-radius: 40px;padding: 13px 31px;background: linear-gradient(90deg, #FB9123 0%, #BE45F7 100%);font-family: 'Oxanium';line-height: 22.5px;}
.btn-primary:hover{background: white;color: black}
#header{padding: 30px 0;font-family: 'Oxanium';font-weight: 800;position: absolute;width: 100%;z-index: 1;}
#header .navbar-light .navbar-nav .nav-link,#header .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link{color: white;font-family: 'Oxanium';font-weight: 500;font-size: 18px;}
#header .navbar-light .navbar-toggler{background: white;margin-left: auto;z-index: 10;}
#header .navbar-light .navbar-nav .nav-link:focus,#header .navbar-light .navbar-nav .nav-link:hover{color: rgb(236 144 34);}
#banner{background-image: url('../images/banner-bg2.png');background-position: bottom;background-size: cover;position: relative;height: 100vh;display: flex;flex-direction: column;justify-content: center;}
#banner p{margin-bottom: 50px;}
#banner .bounce {-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-timing-function: linear;animation-timing-function: linear;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}
@-webkit-keyframes bounce {0%, 100% {-webkit-transform: translateY(0);}
50% {-webkit-transform: translateY(-5px);}}
@keyframes bounce {0% {transform: translateY(0);}20% {transform: translateY(-1px);}40% {transform: translateY(-3px);}60% {transform: translateY(-5px);}80% {transform: translateY(-3px);}100% {transform: translateY(0px);}}
#banner .bounce {-webkit-animation-name: bounce;animation-name: bounce;}
#info{background-image: url('../images//info-bg.png');background-size: cover;position: relative;background-color: #000;padding-bottom: 250px;margin-top: -1px}
#info .content{background: #1342FA;border-radius: 12px;padding: 50px;height: 100%}
#info .secure-color{background: #FB9123;}
#info .scalibility-color{background: #BE45F7;}
#info .img{margin-bottom: 30px;}
#info p{font-size: 20px;line-height: 30px;font-family: 'Noto Sans';font-weight: 400;color: white;margin: 0;}
#info .scalibility{background: #BE45F7;}
#info .secure{background: #FB9123;}
#why-sagidao .sagidao-bg{position: relative;z-index: 1;background-image: url("../images//video-bg.png");background-position: top;background-size: cover;background-color: black;text-align: center;margin-top: -1px}
#why-sagidao .header{margin-bottom: 50px;margin-top: -158px;}
#why-sagidao video{margin-bottom: 120px;border-radius: 20px;}
#why-sagidao .cont h1{margin-bottom: 4px;}
#why-sagidao .cont{margin-bottom: 64px;}
#why-sagidao .browser .image{margin-bottom: 40px;}
#why-sagidao .browser h3{text-transform: uppercase;}
#why-sagidao .browser p{margin-bottom: 50px;font-size: 20px;line-height: 30px;}
#why-sagidao .browser{padding-right: 82px;margin-bottom: 42px;padding-left: 72px;height: 100%;}
#roadmap{background-image: url('../images/map-bg.png');position: relative;background-position: top;background-size: cover;background-color: black;padding-top: 78px;margin-top: -1px;padding-bottom: 120px;}
#roadmap .map-cont{text-align: center;}
#roadmap .map-cont .circle{border: 5px solid #1B0F28;border-radius: 50%;width: 282px;height: 282px;margin-top: -145px;padding-top: 160px;position: relative;z-index: 1;margin-left: auto;margin-right: auto;}
#roadmap .map-cont h2{margin-bottom: 80px;}
#roadmap .map-cont .map{position: relative;margin-bottom: 184px;}
#roadmap .map-cont .map .map-text{position: absolute;width: 210px;text-align: left;}
#roadmap .map-cont .map .map-text p{font-size: 14px;line-height: 20px;}
#roadmap .map-cont .map .text1{top: 36%;left: 4%;}
#roadmap .map-cont .map .text2{top: 57%;left: 26%;}
#roadmap .map-cont .map .text3{left: 15%;bottom: -10%;}
#roadmap .map-cont .map .text4{left: 39%;top: 25%;}
#roadmap .map-cont .map .text5{right: 27%;bottom: 17%;}
#roadmap .map-cont .map .text6{right: 12%;top: 18%;}
#roadmap .map-cont .map .text7{right: 1%;bottom: -5%;}
#roadmap .activate .head{text-align: center;margin-bottom: 100px;}
#roadmap .activate .cont p{font-size: 20px;line-height: 30px;}
#roadmap .activate .cont .image{margin-bottom: 40px;}
#roadmap .astronaut{position: absolute;top: 1%;right: 5%;}
#roadmap .circle-span{width: 60px;height: 60px;color: black;background: white;border-radius: 50%;;padding: 18px 12px;display: none;}
#roadmap .q1-pad{padding: 5px 12px;text-align: center;}
.subcribe h2{margin: 0;font-size: 36px;}
.subcribe .sub-bg{background: rgba(255, 255, 255, 0.1);height: 160px;align-items: center;display: flex;padding: 0 60px;}
.subcribe .wrap .input input{padding: 18px 40px;width: 100%;border-radius: 40px;border: none;background: rgba(255, 255, 255, 0.21);color: white;}
.subcribe .wrap .input input::placeholder{font-size: 15px;color: #FFFFFF;font-family: 'Noto Sans';font-weight: 500;}
.subcribe .wrap{position: relative;}
.subcribe .wrap button{position: absolute;right: 0;top: 0;padding: 19px 31px;}
#footer{background-image: url('../images//footer-bg.png');background-position: bottom;background-size: cover;}
#footer .top-footer{padding: 80px 0 50px 0;border-bottom: 1px solid #282E2E;}
#footer .top-footer .cont1 .logo{margin-bottom: 28px;display: block;}
#footer .top-footer .cont1{padding-right: 75px;}
#footer .top-footer ul li{margin-bottom: 16px;}
#footer .top-footer ul li a{font-size: 18px;}
#footer .top-footer ul li a:hover{color: #FB9123;}
#footer .bot-footer{padding: 25px 0;text-align: center;}
@media (max-width:1399px){
    #roadmap .map-cont .map .text4{left: 37%;}
    #roadmap .map-cont .map .text5{right: 24%;bottom: 11%;}
    #roadmap .map-cont .map .text6{right: 9%;}
    #roadmap .map-cont .map .text7{bottom: -8%;right: 0;}
    #roadmap .map-cont .map{margin-bottom: 100px;}
}
@media (max-width:1320px){
    #info .content{padding: 50px 25px;}
}
@media (max-width:1199px){
    #why-sagidao .browser{padding-left: 30px;padding-right: 30px;}
    .subcribe h2{font-size: 30px;}
    #footer .top-footer .cont1{padding-right: 0%;}
    #roadmap .map-cont .map .map-text p{font-size: 12px;line-height: 16px;}
    #roadmap .map-cont .map .map-text{width: 175px;}
}
@media (max-width:991px) {
    h2{font-size: 34px;}
    #header .navbar-collapse{position: absolute;top: 100%;left: 0;width: 100%;}
    #header .navbar{position: static;}
    #header .container-xxl{position: relative;}
    #header .navbar-nav{background: black;}
    #header .navbar-light .navbar-nav .nav-link, #header .navbar-light .navbar-nav .nav-link.active{padding: 12px 16px;}
    #banner .astra{display: none;}
    #info .img, h3, #why-sagidao .browser .image{margin-bottom: 20px;}
    #why-sagidao video{margin-bottom: 80px;}
    #why-sagidao .browser{padding-left: 0;padding-right: 0;}
    #why-sagidao .browser p{height: auto;margin-bottom: 20px;}
    #roadmap .activate{text-align: center;}
    #roadmap .activate .cont,  #roadmap .activate .head{margin-bottom: 50px;}
    #roadmap{padding-bottom: 30px;padding-top: 20px;}
    .subcribe .sub-bg{text-align: center;display: grid;}
    #footer .top-footer .cont1,#footer .top-footer .cont2{margin-bottom: 40px;}
    .map-img{display: none;}
    #roadmap .map-cont .map .map-text p{font-size: 14px;line-height: 20px;}
    #roadmap .map-cont .map .map-text{display: flex;align-items: center;width: 100%;margin-bottom: 16px;}
    #roadmap .circle-span, #roadmap .map-cont .map .map-text{position: static;}
    #roadmap .circle-span{margin-right: 15px;display: block;font-size: 16px;font-weight: 600;}
    #roadmap .map{padding: 0 12px;}
    #roadmap .map-cont .map{margin-bottom: 50px;}
    #roadmap .map-cont h2{margin-bottom: 20px;font-size: 32px;}
    #roadmap .map-cont .circle {width: 200px;height: 200px;margin-top: -55px;padding-top: 100px;}
}
@media (max-width:767px){
    h1{font-size: 45px;line-height: 45px;}
    h2{font-size: 28px;}
    #banner .banner-left p{font-size: 15px;line-height: 25px;margin-bottom: 30px;}
    #info p, p, #why-sagidao .browser p, #roadmap .activate .cont p, .top-footer ul li a{font-size: 17px;line-height: 27px;}
    #info {padding-bottom: 180px;}
}
@media (max-width:575px){
    h1{font-size: 30px;line-height: 30px;}
    h2{font-size: 22px;}
    h4{font-size: 20px;margin-bottom: 15px;}
    #header{padding: 30px 0;}
    #banner .banner-left p,p , #why-sagidao .browser p, #roadmap .activate .cont p, .top-footer ul li a{font-size: 14px;line-height: 24px;}
    #footer .top-footer ul li{margin-bottom: 8px;}
    .btn-primary{padding: 10px 15px;font-size: 14px;}
    #info .content{padding: 20px 10px;}
    #info p{font-size: 16px;line-height: 26px;}
    h3{font-size: 24px;}
    h3, #roadmap .activate .cont .image{margin-bottom: 15px;}
    #why-sagidao video{margin-top: 0;}
    #why-sagidao video, #why-sagidao .cont, #roadmap .activate .head{margin-bottom: 50px;}
    .subcribe .sub-bg{padding: 0 12px;height: 130px;}
    .subcribe h2{font-size: 24px;}
    .subcribe .wrap .input input{padding: 18px 14px;}
    #footer .top-footer .cont1, .top-footer .cont2{margin-bottom: 20px;}
    #footer .top-footer{padding: 50px 0 30px 0;}
    #roadmap .map-cont h2{font-size: 28px;}
    #roadmap .astronaut{right: 0%;}
    #footer .bot-footer{padding: 10px 0;}
    #info{padding: 0 0 180px 0;}
}
@media (max-width:350px){
    #roadmap .map-cont .map .map-text p{font-size: 12px;line-height: 16px;}
    h3 {font-size: 22px;}
    .subcribe h2{font-size: 20px;}
    .subcribe .wrap button,.subcribe .wrap .input input{padding: 12px 8px;}
}