@import url('fonts.css');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/font-awesome/css/all.min.css');
@import url('../dist/owlcarousel/css/owl.theme.default.min.css');
@import url('../dist/owlcarousel/css/owl.carousel.min.css');
:root { --primary-font: 'Poppins', sans-serif, Arial, Helvetica; --dark-purple: #27192F; --purple: #513462; --light-purple: #B787D4; --light-purple-1: #8355A0; --sky-blue: #4FCFF4; --orange: #F49E4D; }
body { background-color: var(--dark-purple); color: var(--bs-white); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; padding-bottom: 5%; }
a { color: var(--bs-blue); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--bs-white); font-family: var(--primary-font); font-weight: 700; }
h1 { font-size: 42px; }
p, li { color: var(--bs-white); font: 400 14px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }

.navbar { background-color: var(--purple); }
.navbar .navbar-nav .nav-link { color: var(--bs-white); font-size: 16px; font-weight: 500; margin: 0 2rem; }
.navbar .navbar-nav .nav-link.active { color: var(--sky-blue); }
.navbar .lang a { color: var(--bs-white); }
.navbar .lang img { max-width: 38px; }
.navbar .d-flex { align-items: center; }
.navbar .d-flex .btn-primary { background-color: var(--sky-blue); box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); font-size: 16px; font-weight: 600; text-transform: capitalize; }
.line { background: rgb(81,52,98); background: linear-gradient(0deg, rgba(81,52,98,1) 0%, rgba(81,52,98,1) 20%, rgba(131,85,160,1) 100%); height: 8px; width: 100%; }

.navbar .d-flex .dropdown-menu { background-color: #163A45; border-color: #4FCFF4; border-radius: 10px; left: inherit; right: 0; min-width: inherit; }
.navbar .d-flex .dropdown-item { color: var(--bs-white); font-size: 16px; text-align: center; text-decoration: inherit; }
.navbar .d-flex .dropdown-item:hover { background-color: inherit; }
.navbar .d-flex .dropdown-item.active { background-color: inherit; text-decoration: underline; }

.navbar-brand { max-width: 75px; }

.offcanvas { background-color: #163A45; }
.offcanvas-header picture { display: none; }
.offcanvas-header .btn-close { background-color: var(--sky-blue); background-image: inherit; border-radius: 30px; box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); color: var(--bs-white); font-size: 17px; font-weight: 600; height: auto; margin: inherit; opacity: 1; text-transform: capitalize; width: 197px; }
.offcanvas-body .navbar-nav .nav-link { border-bottom: 1px solid var(--sky-blue); color: var(--sky-blue); font-size: 20px; font-weight: 600; padding: 1rem .725rem; text-transform: capitalize; }
.offcanvas-body .navbar-nav .nav-link span { display: inline-block; margin-right: 25px; width: 40px; }
.offcanvas-body h4 { color: var(--sky-blue); font-size: 16px; font-weight: 500; }
.offcanvas-body ul { list-style: none; margin: 0 0 20px; padding: 0; }
.offcanvas-body ul li { color: #CECECE; font-size: 16px; font-weight: 300; margin-bottom: 5px; text-transform: capitalize; }
.offcanvas-body ul li a { color: #CECECE; }

.carousel { margin: 3.5% 0; }
.carousel .carousel-item img { border-radius: 12px; width: 100%; }
.carousel .carousel-indicators [data-bs-target] { height: 20px; width: 20px; }
.carousel .carousel-indicators .active { background-color: var(--purple); }

.nav-justified .nav-item { margin-right: 10px; }
.nav-justified .nav-item:last-child { margin: 0; }
.nav-justified .nav-item .nav-link { background-color: var(--light-purple); border: 2px solid var(--light-purple); border-radius: 15px; color: var(--bs-white); font-size: 18px; font-weight: 600; line-height: 42px; text-decoration: underline; text-transform: uppercase; }
.nav-justified .nav-link.active { background-color: var(--dark-purple); border: 2px solid var(--light-purple-1); text-decoration: none; }

.panel { background-color: var(--light-purple-1); border-radius: 15px; display: block; padding: 40px 60px; width: 100%; }
.panel .nav-justified .nav-item .nav-link { background-color: var(--light-purple); border: 2px solid var(--light-purple); border-radius: 7px; color: var(--bs-white); line-height: 31px; text-decoration: none; }
.panel .nav-justified .nav-link.active { background-color: var(--purple); border: 2px solid var(--bs-white); }
.panel .btn-primary { align-items: center; background-color: var(--orange); border: var(--orange); color: var(--bs-white); display: grid; font-size: 20px; font-weight: 600; height: 100%; text-transform: uppercase; width: 100%; }
.panel .btn-primary:hover, .panel .btn-primary:focus { background-color: var(--orange); border: var(--orange); color: var(--bs-white); }

.price { font-size: 18px; }
.price small { font-size: 20px; }

.sell { background-color: var(--dark-purple); border-radius: 10px; font-size: 20px; padding: 20px 25px; width: 100%; }
.sell h1, .buy h1 { font-size: 68px; font-weight: 600; line-height: 58px; margin: 0; }
.crypto, .token { align-items: center; color: var(--bs-white); display: flex; font-size: 16px; }
.crypto a { background: url("../images/arw.svg") no-repeat center right / 15px; color: var(--bs-white); padding-right: 25px; }
.crypto img { margin-right: 5px; max-width: 35px; }
.cv { max-width: 50px; }

.buy { border: 1px solid var(--bs-white); border-radius: 10px; font-size: 20px; padding: 20px 25px; width: 100%; }
.btn-select { background: url("../images/arw_01.svg") no-repeat 95% center / 15px var(--orange); border: inherit; color: var(--bs-black); font-size: 16px; font-weight: 600; text-align: left; padding-right: 35px !important; }
.btn-select:hover, .btn-select:focus { background-color: var(--orange) !important; border: inherit; color: var(--bs-black) !important; }

.fee { font-size: 14px; }

.modal-backdrop.show { opacity: 0.05; }
.modal { background-color: rgba(15, 18, 20, 0.5); backdrop-filter: brightness(110%) blur(15px); }
.modal-content { background-color: #163A45; border-color: var(--sky-blue); border-radius: 15px; }
.modal-header { padding: 1rem 25px; }
.modal-header .btn-close { background-color: var(--sky-blue); background-size: 10px; opacity: 1; padding: 5px 5px; }
.modal-body h4 { font-size: 19px; }
.modal-body { font-size: 18px; padding: 0 25px; }
.modal-body .form-control { background-color: rgba(52, 135, 159, 22%); border-color: var(--sky-blue); color: #CECECE; font-size: 18px; line-height: 38px; }
.modal-body .form-control::placeholder { color: #CECECE; }
.modal-body .token { font-size: 18px; }
.modal-body .token img { margin-right: 5px; max-width: 34px; }
.modal-body .btn-primary { background-color: #163A45; border-color: var(--sky-blue); box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); font-size: 23px; font-weight: 600; line-height: 42px; width: 260px; }
.modal-body .btn-primary:focus { background-color: var(--sky-blue) !important; border-color: var(--sky-blue) !important; }
.modal-body .social { clear: both; width: 100%; }
.modal-body .social .head { color: var(--sky-blue); font-size: 14px; font-weight: 300; }
.modal-body .follow { background: rgb(79,207,244); background: linear-gradient(90deg, rgba(79,207,244,0.42) 0%, rgba(79,207,244,0) 100%); border-radius: 10px; font-size: 15px; font-weight: 600; margin-bottom: 1rem; padding: 10px 10px; width: 100%; }
.modal-body .follow span { color: var(--sky-blue); }
.modal-body .follow .btn-follow { background-color: #163A45; border-color: var(--sky-blue); box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); color: var(---bs-white); font-size: 13px; font-weight: 600; width: 125px; }
.modal-body .follow .btn-follow:focus { background-color: var(--sky-blue) !important; border-color: var(--sky-blue) !important; color: var(---bs-white); }

.chart { clear: both; width: 100%; }
.chart p { font-size: 23px; }
.chart h2 { font-size: 34px; margin: 0; }
.chart h2 small { font-size: 23px; }
.chart h2 small span { color: #5CF44F; margin-left: 15px; }
.chart .date { color: var(--sky-blue); font-size: 23px; }
.chart .frame { background-color: rgba(52, 135, 159, 42%); border: 1px solid var(--sky-blue); border-radius: 17px; padding: 8px 15px; text-align: center; width: 100%; }
.chart .frame a { cursor: pointer; font-size: 24px; font-weight: 700; text-transform: uppercase; }
.chart .frame a:focus, .chart .frame a.active { background-color: #163A45; color: var(--sky-blue); font-size: 16px; padding: 2px 4px; }
.chart h3 { font-size: 23px; font-weight: 400; margin-bottom: 35%; text-align: right; }
.chart h3.grn { background-color: #5CF44F; color: #163A45; margin: -35px 0 0; padding: 3px 3px; position: relative;  }
.topspc { margin-top: 65%; }

.badge { background-color: var(--light-purple); border: 1px solid var(--light-purple); border-radius: 5px; font-size: 12px; font-weight: 600; display: inline-block; margin-right: 3px; padding: 6px 15px; }
.badge.active { background-color: var(--dark-purple); border: 1px solid var(--bs-white); }

.rate {clear: both; width: 100%; }
.rate h1 { font-size: 60px; font-weight: 600; }

.warn { font-size: 8px; }
.warn img { float: left; margin-right: 10px; }

.try { bottom: 15px; position: fixed; right: 15px; margin-right: 5%; width: 150px; z-index: 1; }
.try .box { background-color: rgba(0, 0, 0, 70%); border-radius: 5px; color: var(--sky-blue); font-size: 12px; padding: 5px 12px; position: relative; text-align: center; width: 100%; }
.try .box figure { margin-bottom: 0.5rem; }
.try .box a { color: var(--sky-blue); }
.try .close { position: absolute; right: 5px; top: 5px; width: 18px; z-index: 1; }

.btn-outline-light { background: url("../images/arw.svg") no-repeat 95% center / 15px; border: 1px solid var(--bs-white); padding-right: 35px; color: var(--bs-white); }
.btn-outline-light:hover, .btn-outline-light:focus { background-color: transparent !important; color: var(--bs-white) !important;; }
.btn-outline-light img { margin-left: 1rem; max-width: 35px; }

.btn-connect { background-color: var(--light-purple); border: inherit; border-radius: 30px; box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); color: var(--bs-white); font-size: 16px; font-weight: 600; text-transform: capitalize; }
.btn-connect:hover, .btn-connect:focus { background-color: var(--light-purple) !important; box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); color: var(--bs-white); }

.wallet { clear: both; font-size: 14px; width: 100%; }
.wallet .adres { background-color: var(--dark-purple); border-color: var(--dark-purple); color: var(--bs-white); font-size: 12px; }
.wallet .smart { background-color: var(--light-purple); border-color: var(--light-purple); color: var(--bs-white); font-size: 12px; }

.fixed-bottom { display: none; }

.nodes { clear: both; width: 100%; }
.nodes h4 { font-size: 22px; font-weight: 600; text-transform: capitalize; }
.nodes .box { background-color: var(--light-purple-1); border-radius: 15px; padding: 15px 15px; width: 100%; }
.nodes .box p { font-size: 18px; }
.nodes .amount { background-color: var(--dark-purple); border-radius: 15px; margin-bottom: 1rem; padding: 12px 15px; width: 100%; }
.nodes .amount { font-size: 18px; }
.nodes .amount h3 { font-size: 38px; font-weight: 600; margin: 0; }
.nodes .btn { box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); border-radius: 10px; color: var(--bs-white); font-size: 19px; font-weight: 600; line-height: 38px; text-transform: uppercase; }
.nodes .btn-approve, .nodes .btn-approve:hover { background-color: var(--orange); border-color: var(--orange);  }
.nodes .btn-stake, .nodes .btn-stake:hover { background-color: var(--sky-blue); border-color: var(--sky-blue); }
.pack { max-width: 44px; }

.cryptocard { clear: both; font-size: 18px; padding: 3.5% 0; width: 100%; }
.cryptocard h2 { font-size: 26px; font-weight: 600; margin-bottom: 1.5rem; }
.cryptocard .form-control { background-color: var(--dark-purple); border-color: var(--dark-purple); color: var(--bs-white); font-size: 16px; }
.cryptocard .form-control::placeholder { color: var(--bs-white); opacity: 0.7; }
.cryptocard .form-check-input { background-color:  var(--dark-purple); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); border-color: var(--dark-purple); }
.cryptocard .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); background-color: var(--orange); border-color: var(--orange); box-shadow: inherit; }
.cryptocard .form-check-label { font-size: 14px; }
.cryptocard .form-check-label a { color: var(--orange); }
.cryptocard .btn { box-shadow: 0 3px 6px rgba(0, 0, 0, 16%); border-radius: 10px; color: var(--bs-white); font-size: 19px; font-weight: 600; line-height: 38px; text-transform: uppercase; width: 100%; }
.cryptocard .btn-orange, .cryptocard .btn-orange:hover { background: url("../images/icn_dwn.svg") no-repeat 10px center / 35px var(--orange); border-color: var(--orange);  }
.cryptocard .btn-blue, .cryptocard .btn-blue:hover { background: url("../images/icn_dwn_1.svg") no-repeat 10px center / 35px var(--sky-blue); border-color: var(--sky-blue); }

.account { clear: both; width: 100%; }
.account .plan { background-color: var(--light-purple-1); border-radius: 15px; padding: 20px 15px; width: 100%; }
.account .plan h3 { font-size: 20px; margin-bottom: 40px; text-align: center}
.account .plan h4 { font-size: 20px; }
.account .plan dl { overflow: hidden; width: 100%; }
.account .plan dl dt { float: left; font-size: 11px; font-weight: 400; width: 70%; }
.account .plan dl dd { float: left; font-size: 11px; margin: 0; width: 30%; }

.head { clear: both; padding: 3.5% 0 1rem; width: 100%; }
.head h3 { font: 400 50px 'Ethnocentric'; margin-bottom: 34px; text-align: center; text-transform: uppercase; }
.countdown { clear: both; margin: 0 auto; text-align: center; max-width: 680px; }
.countdown h2 { color: var(--bs-white); font: 400 62px/64px 'Bebas'; }
.countdown .count { align-items: center; background: url("../images/dse.png") no-repeat center top / 100%; display: flex; height: 100%; justify-content: center; min-height: 135px; width: 100%; }
.countdown .count h1 { color: var(--bs-white); font: 400 72px 'Bebas'; }

.win { margin-top: 13%; }
.win .btn { width: 100%; }

.generate { background: url("../images/gne_bg.jpg") no-repeat center top / cover; border-radius: 20px; clear: both; margin-top: 35px;  width: 100%; }
.generate .balls { background: url("../images/balls_lft.png") no-repeat 20px 70% / 20%, url("../images/balls_rgt.png") no-repeat 95% 93% / 20%; padding: 40px 40px; width:100%; }
.generate .content { background-color: rgba(0, 0, 0, 0.26); font-size: 20px; font-weight: 700; margin-bottom: 20px; padding: 15px 15px; text-align: center; width: 100%; }
.generate .tickets { clear: both; max-width: 630px; }
.generate .tickets h3 { font: 400 80px 'Bebas'; }
.generate .tickets .nomber { align-items: center; background: url("../images/dse_01.png") no-repeat center top / 100%; display: flex; height: 100%; justify-content: center; min-height: 145px; width: 100%; }
.generate .btn-generate { background: url("../images/gne_btn_bg.png") no-repeat center / cover; color: var(--bs-white); font-size: 24px; font-weight: 600; line-height: 1; text-align: center; text-transform: capitalize; width: 325px; }
.generate .btn-generate small { color: var(--dark-purple); font-size: 14px; font-weight: 500; }

.results { clear: both; margin-top: 25px; width: 100%; }
.results h2 { font-size: 26px; font-weight: 600; margin-bottom: 1.5rem; }
.results .box { background-color: var(--light-purple-1); border-radius: 15px; padding: 20px 15px; text-align: center; width: 100%; }
.results .box h3 { font-size: 20px; font-weight: 700; }
.results .box h4 { font-size: 20px; font-weight: 400; }
.results .box p { color: #CECECE; font-size: 20px; }
.results .box h3 { font: 400 38px 'Bebas'; }
.results .box .nomber { align-items: center; background: url("../images/dse_sml.png") no-repeat center top / 100%; display: flex; height: 100%; justify-content: center; min-height: 76px; width: 100%; }
.results .owl-theme .owl-nav { display: block; margin-top: -40px; position: absolute; right: 12px; top: 0; width: auto; }
.results .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { background-color: var(--orange); border-radius: 7px; color: var(--purple); font-size: 18px; font-weight: 700; margin: 0 5px; width: 24px; }

.tickets { margin-bottom: 10px; }

.features { clear: both; margin: 0 auto; max-width: 347px; width: 100%; }
.features .box { background-color: var(--purple); border: 2px solid var(--light-purple-1); border-radius: 10px; box-shadow: inset 4px 8px 12px var(--dark-purple); height: 105px; width: 105px; }
.features a:focus .box { border-color: var(--sky-blue); }
.features a.active .box { background: url("../images/50cnx.png") no-repeat center / 60% var(--purple); border-color: var(--sky-blue); }
.features .btn-prim { border-color: var(--sky-blue); }
.features .btn-primary { background-color: var(--orange); border: inherit; border-radius: 10px; color: var(--bs-white); font-size: 24px; font-weight: 600; line-height: 1; text-align: center; text-transform: capitalize; width: 100%; }
.features .btn-primary small { color: var(--dark-purple); font-size: 14px; font-weight: 500; }
.features .btn-primary:focus { background-color: var(--orange); }

.lottery-pool { background: url("../images/lty_pol_bg.jpg") no-repeat center top / cover; border-radius: 15px; clear: both; margin: 3.5% 0; padding: 5% 20px; width: 100%; }
.lottery-pool h2 { font: 400 50px 'Ethnocentric'; margin-bottom: 34px; text-align: center; text-shadow: 0 3px 6px rgb(0, 0, 0); text-transform: uppercase; }
.lottery-pool h3 { font: 400 35px 'Ethnocentric'; margin-bottom: 34px; text-align: center; text-shadow: 0 3px 6px rgb(0, 0, 0); text-transform: uppercase; }
.lottery-pool .prize { clear: both; margin: 0 auto; text-align: center; max-width: 897px; }
.prize .count { align-items: center; background: url("../images/dse_02.png") no-repeat center top / 100%; display: flex; height: 100%; justify-content: center; min-height: 154px; position: relative; width: 100%; }
.prize .count::before { content: "";
background: url("../images/line.png") no-repeat center / 100% 3px; height: 97%; left: 0; margin: 0 6px 0; position: absolute; top: 0; width: 93%; z-index: 1; }
.prize h1 { color: var(--bs-white); font-size: 85px; font-weight: 900; margin: 0; }

.home .btn-primary { background-color: var(--light-purple-1); border: inherit; border-radius: inherit; font-size: 16px; font-weight: 600; text-transform: uppercase; }
.home .btn-primary:focus { background-color: var(--light-purple-1); }
.profile { clear: both; width: 100%; }
.profile figure img { border: 10px solid var(--light-purple); border-radius: 100%; }
.profile h4, .profile .form-label { font-size: 20px; font-weight: 600; text-transform: capitalize; }
.profile .form-select, .profile .form-control { background-color: var(--dark-purple); border-color: var(--light-purple-1); border-radius: 0; color: var(--bs-white); font-size: 18px; font-weight: 300; }
.profile .form-select:focus, .profile .form-control:focus { box-shadow: inherit; }
.profile .form-control::placeholder { color: var(--bs-white); opacity: 0.5; }
.profile .form-select { background-image: url("../images/arw_02.svg"); }
.profile .btn-primary { background-color: var(--light-purple-1); border: inherit; border-radius: inherit; font-size: 18px; font-weight: 600; text-transform: capitalize; width: 100%; }
.profile .btn-primary:focus { background-color: var(--light-purple-1); }
.profile .btn-primary img { margin-right: 5px; width: 27px;}
.profile .btn-primary.btn-sm { font-size: 16px; margin-top: 5px; }
.profile .btn-outline-primary { background-color: var(--dark-purple); border-color: var(--light-purple-1); border-radius: inherit; color: var(--bs-white); font-size: 18px; font-weight: 600; text-transform: capitalize; }
.profile .btn-outline-primary:focus { background-color: var(--dark-purple); border-color: var(--light-purple-1); }

.card { background: rgb(183,135,212); background: linear-gradient(90deg, rgba(183,135,212,1) 0%, rgba(183,135,212,0) 100%); border: 1px solid var(--light-purple-1); border-radius: 15px; justify-content: center; margin-bottom: 1rem; min-height: 115px; padding: 10px 15px; width: 100%; }
.card span { color: var(--bs-white); font-size: 24px; font-weight: 600; margin-right: 10px; }
.card h3 { color: var(--sky-blue); font-size: 24px; font-weight: 600; margin: 0; text-transform: uppercase; }
.card h3.org { color: var(--orange); }
.card p { color: var(--bs-white); font-size: 18px; font-weight: 600; margin: 0; text-transform: uppercase; }
.card .btn-primary { background-color: var(--dark-purple); border-color:  var(--light-purple-1); font-size: 17px; font-weight: 600; line-height: 28px; text-transform: uppercase; width: 100%; }
.page { font-size: 18px; font-weight: 600; text-align: center; }
.page .btn-primary { background-color: var(--light-purple-1); border-color: var(--light-purple-1); font-size: 18px; font-weight: 600; text-decoration: underline; text-transform: uppercase; width: 100%; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    body { padding-bottom: 100px; }
    .navbar-brand { max-width: 40px; }
    .navbar .lang img { max-width: 24px; }
    .navbar .d-flex .btn-primary, .btn-select, .panel .btn-primary { font-size: 11px; }
    .carousel .carousel-indicators { margin: 0; }
    .carousel .carousel-indicators [data-bs-target] { height: 10px; width: 10px; }
    .try .box { border-radius: 10px; }
    .line { height: 4px; }
    .nav-justified .nav-item .nav-link { border-radius: 10px; font-size: 12px; line-height: normal; padding: .275rem .5rem; }
    .panel { border-radius: 20px; padding: 25px 15px; }
    .panel .nav-justified .nav-item .nav-link { border-radius: 10px; line-height: normal; }
    .insite { max-width: 25px; }
    .try { bottom: 100px; right: 0; margin-right: 0; }
    .price { font-size: 16px; }
    .price small, .simple { font-size: 14px; }
    .sell, .buy { font-size: 12px; padding: 12px 12px; }
    .sell h1, .buy h1 { font-size: 24px; line-height: normal; }
    .crypto a { font-size: 12px; }
    .crypto img { max-width: 24px; }
    .cv { max-width: 36px; }
    .fee { margin-top: .5rem; }
    .rate h1, .nodes .amount h3 { font-size: 30px; }
    .btn-outline-light, .btn-connect { font-size: 11px; }
    .btn-outline-light img{ max-width: 20px; }
    .offcanvas { max-width: 261px; }
    .offcanvas-header picture { display: inline-block; max-width: 40px; }
    .offcanvas-header .btn-close { font-size: 11px; margin: calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x)) calc(-.5 * var(--bs-offcanvas-padding-y)) auto; padding: .275rem .5rem; width: 120px; }
    .offcanvas-body .navbar-nav .nav-link span { margin-right: 15px; width: 31px; }
    .offcanvas-body h4, .offcanvas-body ul li { font-size: 12px; }
    .fixed-bottom { background-color: #3A2843; color: var(--bs-white); display: block; font-size: 10px; font-weight: 500; padding: .5rem 0; text-align: center; text-transform: capitalize; }
    .fixed-bottom a { color: var(--bs-white);  }
    .fixed-bottom a figure { background-color: #163A45; border-radius: 10px; height: 50px; margin: 0 auto .275rem; padding: 12px 12px; width: 50px; }
    .fixed-bottom a.active figure { background-color: var(--sky-blue); }
    .fixed-bottom a.active figure img { filter: brightness(30%); }
    .modal-body, .modal-body h4, .modal-body .token,  .modal-body .form-control { font-size: 16px; }
    .modal-body .token img { max-width: 24px; }
    .modal-header .btn-close { background-size: 12px; height: 12px; padding: 4px; width: 12px; }
    .modal-body figure { margin: 0 auto; max-width: 200px; }
    .modal-body .btn-primary, .modal-body .follow .btn-follow { font-size: 11px; line-height: normal; width: 100px; }
    .modal-body .social .head { font-size: 12px; }
    .modal-body .follow { font-size: 16px; }
    .nodes h4 { font-size: 15px; font-weight: 700; }
    .nodes .amount, .nodes .box p { font-size: 15px; }
    .nodes .d-grid { display: flex !important; }
    .nodes .btn { font-size: 11px; border-radius: 30px; line-height: 14px; width: 120px; }
    .cryptocard form { color: #CECECE; font-size: 15px; }
    .cryptocard h2 { color: #CECECE; font-size: 15px; text-align: center; }
    .cryptocard .form-check-label { font-size: 12px; }
    .cryptocard .btn { color: #000000; margin-bottom: 7px; font-size: 11px; line-height: normal; }
    .cryptocard .btn-orange { background-image: url("../images/dwn_blk.svg"); background-size: 20px; }
    .cryptocard .btn-blue { background-image: url("../images/dwn_blk_1.svg"); background-size: 20px; }
    .cryptocard .form-check-label, .simple { color: var(--bs-white); }
    .owl-theme .owl-dots .owl-dot span { border-radius: inherit; height: 10px; width: 10px; }
    .owl-theme .owl-dots .owl-dot.active span { background-color: var(--purple); }
    .owl-theme .owl-nav { margin-top: 1.2rem; position: absolute; top: 0; width: 100%; }
    .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { background-color: var(--orange); border-radius: 7px; color: var(--purple); font-size: 18px; font-weight: 700; margin: 0 55px; width: 24px; }
    .chart p, .chart h2 small, .chart h3  { font-size: 16px; }
    .chart h2{ font-size: 24px;}
    .chart .date, .chart .frame a { font-size: 16px; }
    .chart h3 { margin-bottom: 38%; }
    .head h3, .generate .content { font-size: 16px; }
    .countdown { max-width: 243px; }
    .countdown .mb-3 { margin-bottom: 0.5rem !important; }
    .countdown h2 { font-size: 19px; margin: 0; line-height: normal; }
    .countdown .count { min-height: 48px; }
    .countdown .count h1 { font-size: 22px; }
    .nav-justified .nav-item .nav-link { font-size: 12px; padding: 5px 5px; }
    .generate { padding-bottom: 100px; }
    .generate .balls { background: inherit; padding: 12px 12px; }
    .generate .tickets { max-width: 338px; }
    .generate .tickets .nomber { min-height: 85px; }
    .generate .tickets h3 { font-size: 44px; }
    .generate .btn-generate { width: 245px; }
    .results .owl-theme .owl-nav { left: 20px; right: 20px; margin: 1.2rem 0 0; }
    .results .owl-carousel .owl-nav button.owl-prev, .results .owl-carousel .owl-nav button.owl-next { margin: 0; }
    .results .owl-carousel .owl-nav button.owl-prev { float: left;}
    .results .owl-carousel .owl-nav button.owl-next { float: right; }
    .features .box { height: 90px; width: 90px; }
    .lottery-pool h2 { font-size: 24px; margin: 0 0 5px; }
    .lottery-pool h3 { font-size: 12px; }
    .lottery-pool .prize { max-width: 315px; }
    .prize h1 { font-size: 22px; }
    .prize .count { min-height: 55px; }
    .prize .count::before { background-size: 100% 2px; }
    .home .btn-primary { font-size: 11px; text-transform: capitalize; }
    .profile figure { max-width: 120px; }
    .profile figure img { border-width: 5px; }
    .profile h4, .profile .form-label { font-size: 16px; }
    .profile p, .profile .btn-primary.btn-sm { font-size: 12px; }
    .profile .form-select, .profile .form-control { font-size: 14px; }
    .profile .btn-primary, .profile .btn-outline-primary { font-size: 16px; }
    .card { min-height: 80px; }
    .card span, .card h3 { font-size: 16px; }
    .card p { font-size: 12px; }
    .card .btn-primary, .page .btn-primary { font-size: 11px; line-height: normal; }
    .page { font-size: 12px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    body { padding-bottom: 100px; }
    .nav-justified .nav-item .nav-link { font-size: 15px; }
    .carousel .carousel-indicators { margin: 0; }
    .carousel .carousel-indicators [data-bs-target] { height: 15px; width: 15px;}
    .panel { padding: 25px 15px; }
    .price { font-size: 16px; }
    .price small { font-size: 14px; }
    .sell, .buy { font-size: 16px; padding: 12px 12px; }
    .sell h1, .buy h1 { font-size: 42px; line-height: normal; }
    .badge { font-size: 11px; padding: 6px 11px; }
    .try { bottom: 100px; margin-right: 0; right: 0; }
    .fixed-bottom { background-color: #3A2843; color: var(--bs-white); display: block; font-size: 10px; font-weight: 500; padding: .5rem 0; text-align: center; text-transform: capitalize; }
    .fixed-bottom a { color: var(--bs-white);  }
    .fixed-bottom a figure { background-color: #163A45; border-radius: 10px; height: 50px; margin: 0 auto .275rem; padding: 12px 12px; width: 50px; }
    .fixed-bottom a.active figure { background-color: var(--sky-blue); }
    .fixed-bottom a.active figure img { filter: brightness(30%); }
    .nodes .col { max-width: 50%; }
    .nodes h4{ font-size: 20px; }
    .nodes .amount h3 { font-size: 32px; }
    .nodes .amount, .nodes .box p { font-size: 15px; }
    .cryptocard form { font-size: 15px; }
    .cryptocard h2 { font-size: 20px; }
    .cryptocard .form-check-label { font-size: 12px; }
    .cryptocard .btn { font-size: 13px; }
    .cryptocard .btn-orange { background-size: 20px; }
    .cryptocard .btn-blue { background-size: 20px; }
    .cryptocard .form-check-label, .simple { color: var(--bs-white); }
    .head h3 { font-size: 38px; }
    .generate .content { font-size: 16px; }
    .results .box p { font-size: 19px; }
    .results .box .nomber { min-height: 66px; }
    .results .box h3 { font-size: 32px; }
    .features .box { height: 90px; width: 90px; }
    .lottery-pool h2 { font-size: 40px; margin-bottom: 15px; }
    .lottery-pool h3 { font-size: 24px; } 
    .prize .count { min-height: 114px; }
    .prize .count::before { height: 97%; }
    .prize h1 { font-size: 54px; }
    .card { min-height: 95px; }
    .card span, .card h3 { font-size: 18px; }
    .card p { font-size: 14px; }
    .card .btn-primary, .page .btn-primary { font-size: 12px; line-height: normal; }
    .page { font-size: 14px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) { 
    .navbar .navbar-nav .nav-link { margin: 0 1rem; }
    .price { font-size: 16px; }
    .price small { font-size: 14px; }
    .sell, .buy { font-size: 16px; padding: 12px 12px; }
    .sell h1, .buy h1 { font-size: 42px; line-height: normal; }
    .badge { font-size: 10px; padding: 6px 9px; }
    .nodes h4{ font-size: 20px; }
    .nodes .amount h3 { font-size: 32px; }
    .nodes .amount, .nodes .box p { font-size: 15px; }
    .cryptocard .btn { font-size: 14px; }
    .results .box p { font-size: 17px; }
    .results .box .nomber { min-height: 66px; }
    .results .box h3 { font-size: 32px; }
    .lottery-pool .prize { max-width: 790px; }
    .prize .count { min-height: 136px; }
    .prize .count::before { height: 97%; }
    .card { min-height: 95px; }
    .card span, .card h3 { font-size: 18px; }
    .card p { font-size: 14px; }
    .card .btn-primary, .page .btn-primary { font-size: 14px; line-height: normal; }
    .page { font-size: 14px; }
}

@media (min-width: 1600px) {
    .container { max-width: 1690px; }
    .navbar .navbar-nav .nav-link { font-size: 26px; }
    .navbar .d-flex .dropdown-item { font-size: 20px; }
    .navbar .d-flex .btn-primary,  .price { font-size: 26px; }
    .navbar .border { height: 8px; }
    .navbar-brand { max-width: inherit; }
    .offcanvas-body .navbar-nav .nav-link { font-size: 25px; }
    .carousel .carousel-item img { border-radius: 20px; }
    .nav-justified .nav-item .nav-link { border-radius: 20px; line-height: 65px; }
    .nav-justified .nav-item .nav-link, .price small, .sell { font-size: 24px; }
    .panel { border-radius: 20px; }
    .panel .nav-justified .nav-item .nav-link { border-radius: 10px; line-height: 50px; }
    .panel .btn-primary { font-size: 24px; }
    .sell, .buy { border-radius: 15px; }
    .sell h1, .buy h1 { font-size: 100px; }
    .cv { max-width: inherit; }
    .fee { font-size: 18px; }
    .modal-dialog { max-width: 536px; }
    .modal-content { border-radius: 20px; }
    .modal-body, .modal-body h2, .modal-body .token { font-size: 23px; }
    .modal-body .follow { font-size: 19px; }
    .badge, .cryptocard .form-control, .btn-generate small { font-size: 16px; }
    .rate h1 { font-size: 80px; }
    .warn { font-size: 12px; }
    .try .box { border-radius: 10px; }
    .wallet, .btn-connect, .offcanvas-body h4, .offcanvas-body ul li { font-size: 20px; }
    .btn-lg { line-height: 58px; }
    .nodes h4 { font-size: 32px; }
    .nodes .box { border-radius: 20px; }
    .nodes .amount { font-size: 26px; }
    .nodes .amount h3 { font-size: 58px; }
    .nodes .btn { border-radius: 20px; font-size: 29px; line-height: 68px; }
    .cryptocard h2, .results h2, .btn-generate { font-size: 32px; }
    .account .plan h3, .account .plan h4 { font-size: 24px; }
    .account .plan dl dt, .account .plan dl dd { font-size: 14px; }
    .head h3 { font-size: 68px; }
    .countdown {max-width: 951px; }
    .countdown h2 { font-size: 74px; }  
    .countdown .count { min-height: 187px; }
    .countdown .count h1 { font-size: 87px; }
    .generate .content { font-size: 30px; }
    .generate .tickets { max-width: 880px; }
    .generate .tickets .nomber { min-height: 200px; }
    .generate .tickets h3 { font-size: 116px; }
    .generate .btn-generate { padding: 25px 15px; width: 496px; }
    .results .box h3, .results .box h4, .results .box p { font-size: 28px; }
    .results .box .nomber { min-height: 118px; }
    .results .box h3 { font-size: 63px; }
    .features { max-width: 490px; }
    .features .box { height: 150px; width: 150px; }
    .lottery-pool { border-radius: 20px; }
    .lottery-pool h2 { font-size: 76px; }
    .lottery-pool h3 { font-size: 43px; }
    .lottery-pool .prize { max-width: 1257px; }
    .prize .count { min-height: 219px; }
    .prize .count::before { background-size: 100% 4px; height: 93%; }
    .prize h1 { font-size: 118px; }
    .home .btn-primary { font-size: 20px; }
    .profile h4, .profile .form-label, .profile .btn-primary { font-size: 26px; }
    .profile p { font-size: 18px; }
    .profile .form-select, .profile .form-control { font-size: 22px; }
    .profile .btn-primary img { width: auto; }
    .profile .btn-primary.btn-sm { font-size: 18px; margin-top: 7px; }
    .card { border-radius: 20px; min-height: 177px; }
    .card span, .card h3 { font-size: 34px; }
    .card p { font-size: 25px; }
    .card .btn-primary { font-size: 23px; line-height: 38px; }
    .page { font-size: 24px; }
    .page .btn-primary { font-size: 25px; }
}