@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

:root{
    --blue:#2862e0;
    --white:#fff;
    --budo: 'BudokanRoundedBoldWyyeO';
    --quick: 'Quicksand', sans-serif;
}

/*
font-family: 'Quicksand', sans-serif;
*/

@font-face {
    font-family: 'BudokanRoundedBoldWyyeO';
    src: url('../fonts/BudokanRoundedBoldWyyeO.eot');
    src: url('../fonts/BudokanRoundedBoldWyyeO.eot') format('embedded-opentype'),
         url('../fonts/BudokanRoundedBoldWyyeO.woff2') format('woff2'),
         url('../fonts/BudokanRoundedBoldWyyeO.woff') format('woff'),
         url('../fonts/BudokanRoundedBoldWyyeO.ttf') format('truetype'),
         url('../fonts/BudokanRoundedBoldWyyeO.svg#BudokanRoundedBoldWyyeO') format('svg');
}

body{zoom: 85%;  padding:0; margin:0; font-size:16px; color:var(--white); font-family: 'Quicksand', sans-serif; background: #151e52 url(../images/body_bg.png) center center no-repeat; background-size: cover; overflow-x: hidden;}
a {outline:none !important; text-decoration:none; transition:all .4s ease-in-out;}
a:hover, a:focus, select:focus, button:focus,.btn:focus,btn.focus { outline:none; text-decoration:none;}
* { margin:0; padding:0;}
img { border:none; vertical-align:middle; max-width:100%;}
li{ list-style:none;}
h1, h2, h3, h4, h5, h6{ outline:none !important; font-family: 'BudokanRoundedBoldWyyeO';}
input, select, textarea, button{ outline:none !important;}
input, textarea, select{ -moz-appearance: none; -webkit-appearance: none;}
.container{ width:96%; max-width:1260px; margin:0 auto; padding:0;}
.container.xxl{ max-width: 1530px;}

/* Global */
.btn{ margin: 0; padding: 10px 30px; display: inline-block; background: var(--blue); border-radius: 40px; font-size: 21px; color: var(--white); text-transform: uppercase; font-family: var(--budo); letter-spacing: 0.5px; border: 1px solid #3e7afd; box-shadow: 0 10px 27px rgba(40,98,224,0.55);}
.btn:hover{ background: #3e7afd; color: var(--white);}
.btn_ic{ margin: 0; padding: 8px 10px 8px 30px; display: inline-flex; border: 2px solid var(--blue); font-size: 21px; color: var(--white); text-transform: uppercase; font-family: var(--budo); letter-spacing: 0.5px; border-radius: 40px; align-items: center; gap: 20px;}
.btn_ic i{ width: 34px; height: 34px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--white); box-shadow: 0 5px 9px rgba(40,98,224,0.55); transition:all .4s ease-in-out;}
.btn_ic:hover{ background: var(--blue); color: var(--white);}
.btn_ic:hover i{ background: var(--white); color: var(--blue); box-shadow: 0 5px 9px rgba(255,255,255,0.55);}
.btn_border{ margin: 0; padding: 10px 25px; display: inline-block; background: none; border: 2px solid var(--white); border-radius: 40px; font-size: 21px; color: var(--white); text-transform: uppercase; font-family: var(--budo); letter-spacing: 1px; transition:all .4s ease-in-out;}
.btn_border:hover{ background: var(--white); color: var(--blue);}

.btn_sky_brdr{ margin: 0; padding: 14px 40px; display: inline-flex; border: 2px solid var(--blue); font-size: 21px; color: var(--white); text-transform: uppercase; font-family: var(--budo); letter-spacing: 0.5px; border-radius: 40px;}
.btn_sky_brdr:hover{ background: var(--blue); color: var(--white);}

.global_title{ margin: 0 0 20px 0; padding: 0; font-size: 64px; text-transform: uppercase; letter-spacing: 1px;}
.global_title small{ margin: 0 0 10px 0; padding: 0; display: block; font-size: 23px; color: var(--blue); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-family: var(--quick);}

/* Header */
header{ width: 100%; padding:35px 0; margin:0; position:relative; z-index:999; transition:all .4s ease-in-out;}
header.sticky{ position: fixed; top: 0; left: 0; background: #151e52; box-shadow: 0 0 10px rgba(0,0,0,0.2);}

.nav_sec{ padding:0; margin:0;}
.nav_sec .navbar-brand{ margin:0; padding:0;}
.nav_sec .navbar-brand .light{ display: none;}
.nav_sec .navbar{ padding:0;}
.nav_sec .navbar-light .navbar-nav li{ margin:0 22px; padding:0;}
.nav_sec .navbar-light .navbar-nav .nav-link{ padding:0; font-size:18px; text-transform: uppercase; color: var(--white); font-weight: 700;}
.nav_sec .navbar-light .navbar-nav .nav-link:hover, .nav_sec .navbar-light .navbar-nav .nav-link:focus, .nav_sec .navbar-light .navbar-nav .show > .nav-link, .nav_sec .navbar-light .navbar-nav .active > .nav-link, .nav_sec .navbar-light .navbar-nav .nav-link.show, .nav_sec .navbar-light .navbar-nav .nav-link.active{ color:rgba(255,255,255,0.8);}
.nav_sec .btn{ order: 2;}

/* Sectrion */
section{  padding:0; margin:0;}

.hero_sec{ margin: 0; padding: 0 0 200px; position: relative;}
.hero_sec::before{ content: ""; width: 100%; height: 986px; background:url(../images/hero_curve.png) repeat-x center center; background-size: 100% 100%; position: absolute; bottom: -470px; left: 0; -webkit-animation: wave 3s infinite alternate ease-in-out;}
.hero_sec .detail{ margin: 0; padding: 0 70px 0 0;}
.hero_sec h2{ margin: 0 0 20px 0; padding: 0; font-size: 70px; line-height: 90px;}
.hero_sec p{ margin: 0 0 40px 0; padding: 0; font-size: 20px; line-height: 33px;}
.hero_sec figure{ margin: 0; padding: 0; text-align: center;}
.hero_sec figure img{ width: 80%;}
.hero_sec .btn_info{ display: flex; gap: 20px;}

/* About sec */
.about_sec{ padding: 0; position: relative; background: url(../images/about_curve2.png) no-repeat top 43% right 20%;}
.about_sec::before{ content: ""; width: 92px; height: 175px; background: url(../images/about_curve1.png) no-repeat right top; position: absolute; left: 0; top: -40px;}
.about_sec .container{ max-width: 1441px; width: 98%;}
.about_sec .inner{ margin: 0; padding: 0 90px; min-height: 1390px; background: url(../images/about_line_curve.png) no-repeat center top; background-size: 100% auto;}
.about_sec .detail{ width: 100%; max-width: 602px;}
.about_sec p{ margin: 0; padding: 0; font-size: 21px; line-height: 35px;}

.avtar_curve{ display: inline-flex; position: absolute; left: -57px; bottom: 103%; -webkit-animation: mover 1s infinite alternate; animation: mover 1s infinite alternate;}
.avtar_curve .light{ display: none;}
.avtar_curve2{ display: inline-flex; margin: -85px 0 0 -100px; -webkit-animation: mover 1s infinite alternate; animation: mover 1s infinite alternate;}
.avtar_curve2 .light{ display: none;}
@-webkit-keyframes mover {  0% {
        transform: translateY(0);
    }
     100% {
        transform: translateY(-15px);
    }
}

.timeline_box{ margin: 0 0 140px; padding: 30px 40px 30px 40px; background-color: #222c67; border-radius: 10px; border: 1px solid #2f3976; box-shadow:0 8px 40px rgba(0,0,0,0.06); position: relative;}

.timeline_box:not(.arrowleft):after, .timeline_box:not(.arrowleft):before{ bottom: 100%; left:44px; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; }
.timeline_box:not(.arrowleft):after{ border-color: rgba(34, 44, 103, 0); border-bottom-color: #222c67; border-width: 10px; margin-left: -10px; }
.timeline_box:not(.arrowleft):before{ border-color: rgba(47, 57, 118, 0); border-bottom-color: #2f3976; border-width: 11px; margin-left: -11px;}

.arrowleft:after, .arrowleft:before { right: 100%; top:44px; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none;}
.arrowleft:after { border-color: rgba(34, 44, 103, 0); border-right-color: #222c67; border-width: 10px; margin-top: 0;}
.arrowleft:before { border-color: rgba(47, 57, 118, 0); border-right-color: #2f3976; border-width: 11px; margin-top: -1px;}

.timeline_box .dot{ width: 30px; height: 30px; border-radius: 50%; border:8px solid #161e52; background-color: #2862e0; position: absolute; top: 38px; right: 100%; margin-right: 25px;}
.timeline_box h3{ margin: 0 0 20px; padding: 0; font-size: 40px; letter-spacing: 1px;}

.checklist{ margin: 0; padding: 0;}
.checklist li{ margin: 0 0 11px; padding: 0 0 0 28px; font-size: 19px; line-height: 23px; color: #7c84b5; position: relative;}
.checklist li:before{ content: "\f058"; font-family: 'FontAwesome'; position: absolute; left: 0; top: 0;}

.timeline_box.tbox2{ margin-top: -100px;}
.timeline_box.tbox2 .dot{ top: 5px;}

.timeline_box.tbox3{ min-height: 288px; margin-bottom: 125px;}
.timeline_box.tbox3 .dot{ top: -65px; left: 28px; right: auto; margin-right: 0;}

.timeline_box.last{ min-height: 250px; margin-bottom: 65px;}

/* NFTS */
.nfts_sec{ padding: 200px 0;}
.nfts_sec .global_title{ padding-left: 12%; padding-top: 50px;}
.get_block{ margin: 0 0 30px 0; padding: 52px 60px 40px; background: #222c67; border: 1px solid #2f3976; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap:10px; position: relative; transition:all .4s ease-in-out;}
.get_block .heart{ margin: 0; padding: 0; width: 30px; height: 30px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 15px; right: 15px; font-size: 14px; color: var(--white); opacity: 0;}
.get_block .heart:hover{ background: var(--white); color: var(--blue);}
.get_block .detail{ margin: 0; padding: 0;}
.get_block figure{ margin: 0; padding: 0; display: flex; justify-content: right;}
.get_block figure .main{ height: 325px;}
.get_block figure .main_h{ display: none; height: 325px;}
.get_block h3{ margin: 0 0 30px; padding: 0; font-size: 32px; letter-spacing: 1px; text-transform: uppercase; font-weight: normal; transition:all .4s ease-in-out;}
.get_block p{ margin: 0 0 50px; padding: 0; font-size: 20px; line-height: 30px; font-weight: 300; transition:all .4s ease-in-out;}
.get_block:hover{ background: var(--blue); box-shadow:0 8px 40px rgba(40,98,224,0.37);}
.get_block:hover .heart{ opacity: 1;}
.get_block:hover figure .main{ display: none;}
.get_block:hover figure .main_h{ display: block;}

.nfts_block{ margin: 0 0 40px 0; padding: 30px; background: #222c67; border: 1px solid #2f3976; border-radius: 10px; position: relative; transition:all .4s ease-in-out;}
.nfts_block figure{ margin: 0; padding: 0; display: flex; justify-content: center;}
.nfts_block figure .main{ height: 325px;}
.nfts_block figure .main_h{ display: none; height: 325px;}
.nfts_block .heart{ margin: 0; padding: 0; width: 30px; height: 30px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 15px; right: 15px; font-size: 14px; color: var(--white); opacity: 0;}
.nfts_block .heart:hover{ background: var(--white); color: var(--blue);}
.nfts_block h4{ margin: 0; padding: 0; font-size: 30px; text-transform: uppercase; transition:all .4s ease-in-out;}
.nfts_block:hover{ background: var(--blue); box-shadow:0 8px 40px rgba(40,98,224,0.37);}
.nfts_block:hover .heart{ opacity: 1;}
.nfts_block:hover figure .main{ display: none;}
.nfts_block:hover figure .main_h{ display: block;}

/* Team */
.team_sec{ padding: 0 0 400px; position: relative;}
.team_sec::after{ content: ""; width: 100%; height: 993px; background: url(../images/team_curve.png) repeat-x center center; background-size: 100% 100%; position: absolute; bottom: -25%; left: 0; -webkit-animation: wave 3s infinite alternate ease-in-out;}
.team_sec .team_slider1{ margin: 0; padding: 0 0 50px 20vw;}
.team_sec .team_slider2{ margin: 0; padding: 0 20vw 0 0;}
.team_sec .owl-carousel .owl-item img{ width: auto; display: inline-block;}
.team{ margin: 0; padding: 0; text-align: center;}
.team figure{ margin: 0 0 -10px; padding: 0;}
.team h3{ margin: 0 0 5px; padding: 0; font-size: 30px; letter-spacing: 1px; text-transform: uppercase;}
.team h3 a{ color: var(--white);}
.team p{ margin: 0; padding: 0; font-size: 16px; color: #848bb3; letter-spacing: 1px; text-transform: uppercase;}

.team_slider .owl-carousel .owl-nav button{ width:70px; height:70px; font-size:0; display:block; border-radius:50%; position:absolute; top:50%; margin-top:-80px; background:none !important; z-index:555; transition:all .6s ease-in-out; color:var(--white) !important; border: 3px solid rgba(255,255,255,0.1) !important;}
.team_slider .owl-carousel .owl-nav button.owl-prev{ left:-15%;}
.team_slider .owl-carousel .owl-nav button.owl-prev:after{ content: "\f060"; font-family:"FontAwesome"; font-size:30px;}
.team_slider .owl-carousel .owl-nav button.owl-next{ right:-15%;}
.team_slider .owl-carousel .owl-nav button.owl-next:after{ content: "\f061"; font-family:"FontAwesome"; font-size:30px;}
.team_slider:not(.team_slider2) .owl-carousel .owl-nav button.owl-next{ display: none !important;}
.team_slider:not(.team_slider1) .owl-carousel .owl-nav button.owl-prev{ display: none !important;}

/* Looking */
.looking_sec{ margin: 0; padding: 0 0 80px;}
.looking_sec .global_title{ margin-bottom: 50px;}
.looking_sec figure{ margin:0 0 0 -60px;}
.accordin_info{ margin: 0; padding:40px 0 0 30px;}
.accordin_info .card{ background-color: rgba(34,44,103,0.3); border: 2px solid #2b3676; border-radius: 10px; margin-bottom: 20px;}
.accordin_info .card-header{ margin: 0; padding: 0; border: none;}
.accordin_info .btn-link{ margin: 0; padding:28px 90px 28px 35px; font-size: 26px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); background: transparent; border: none; display: flex; position: relative; width: 100%; text-decoration: none; text-align: left;}
.accordin_info .btn-link:not(.collapsed){ background-color: #222c67;}
.accordin_info .btn-link:after{ content: "+"; font-family: var(--quick); width: 40px; height: 40px; background: var(--blue); border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); right: 25px; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 40px; padding: 0 0 3px 1px;}
.accordin_info .btn-link:not(.collapsed):after{ content: "-";}
.accordin_info .card-body{ padding: 0 94px 50px 70px; font-size: 19px; color: #959bc0; line-height: 30px; background-color: #222c67;}

/* Community */
.community_sec{ margin: 0; padding: 115px 0 215px 0; text-align: center; background: url(../images/community_bg.png) center center no-repeat; background-size: cover; position: relative;}
.community_sec .curve{ position: absolute; top: -120px; right: 80px; -webkit-animation: mover 1s infinite alternate; animation: mover 1s infinite alternate;}
.community_sec .curve.light{ display: none;}
.community_sec .info{ margin: 0 auto 60px auto; padding: 0; max-width: 1040px; font-size: 20px; color: #7d84ac; line-height: 34px;}
ul.com_list{ margin: 0; padding: 0; display: flex; align-items: center; justify-content: center;}
ul.com_list li{ margin: 0 70px; padding: 0; display: inline-block;}
ul.com_list li a{ display: inline-block;}
ul.com_list li a img{ transition:all .4s ease-in-out;}
ul.com_list li a img.light{ display: none;}
ul.com_list li a:hover img{ filter: brightness(0) invert(1); }

/* Footer */
footer{  padding:0; margin:0; text-align: center; background: url(../images/footer_bg.jpg) center center no-repeat; background-size: cover; border-top: 10px solid var(--blue);}

.join_info{ margin: -120px auto 80px auto; padding: 40px 60px 50px 60px; max-width: 1000px; background: var(--blue); border-radius: 10px; text-align: center; position: relative; z-index: 1;}
.join_info h3{ margin: 0 0 30px 0; padding: 0; font-size: 30px; text-transform: uppercase;}
.join_info .input-group{ margin: 0; padding: 0 0 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1);}
.join_info .input-group .input-group-text{ background: none; border: none; border-radius: 0; color: #82a9ff;}
.join_info .input-group .form-control{ margin: 0; padding: 0 20px 0 5px; height: 55px; background: none; border: none; border-radius: 0; box-shadow: none; font-size: 18px; color: #81a9ff;}
.join_info .input-group .form-control::placeholder{ color: #81a9ff;}

footer .ft_logo{ margin: 0 0 60px 0; padding: 0;}
ul.ft_nav{ margin: 0 0 40px 0; padding: 0; display: flex; justify-content: space-between; align-items: center;}
ul.ft_nav li{ margin: 0; padding: 0 30px; display: inline-block;}
ul.ft_nav li:first-child{ padding-left: 0;}
ul.ft_nav li:last-child{ padding-right: 0;}
ul.ft_nav li + li{ border-left: 2px solid rgba(255,255,255,0.1);}
ul.ft_nav li a{ margin: 0; padding: 0; font-size: 18px; color: var(--white); font-weight: 700; text-transform: uppercase;}
ul.ft_nav li a:hover{ color: var(--blue);}
.copyright{ margin: 0; padding: 30px 0 40px 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); font-size: 18px;}

/**/
@-webkit-keyframes wave {
50% {
    -webkit-transform: translateY(80px) scale(1);
    opacity: 0.6;
}

100% {
    -webkit-transform: translateY(-80px) scale(1);
    opacity: 0.6;
}
}

/**/
ul.change_color{ margin: 0; padding: 5px; gap: 3px; display: flex; position: fixed; top: 42px; right: 20px; background: #fff; border-radius: 40px; z-index: 999;}
ul.change_color li{ margin: 0; padding: 0; display: inline-block;}
ul.change_color li a{ width: 31px; height: 31px; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: transparent; border-radius: 50%;}
ul.change_color li a.active{ background: #151e52;}
ul.change_color li a.active img{ filter: brightness(0) invert(1); transition:all .4s ease-in-out;}