@import url('fonts.css');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/owlcarousel/css/owl.theme.default.min.css');
@import url('../dist/owlcarousel/css/owl.carousel.min.css');
:root {--primary-font: "Montserrat", sans-serif, Arial, Helvetica; --purple: #9000F2; --light-gray: #F4F4F4; --gray: #A9ACB3; --dark-gray: #2B2B2B; --violet: #D296FC; }
body { background-color: #F5F5F5; color: var(--bs-black); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; }
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(--dark-gray); font-family: var(--primary-font); font-weight: 700; }
h1 { font-size: 32px; }
h3 { font-size: 22px; }
p, li { color: var(--dark-gray); font: 500 14px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }

.navbar { background-color: var(--light-gray); border-bottom: 3px solid var(--purple); box-shadow: 2px 4px 8px rgba(0, 0, 0, 40%); }
.navbar-brand { max-width: 135px; }
.navbar .navbar-nav { margin-left: 2%; }
.navbar .navbar-nav .nav-link { font-size: 16px; font-weight: 500; margin: 0px 0.75rem; text-transform: uppercase; }
.navbar-nav .dropdown-menu { background-color: var(--gray); border-color: var(--purple); border-radius: inherit; padding: 0px; font-size: 12px; font-weight: 400; }
.navbar-nav .dropdown-item { color: var(--dark-gray); }
.navbar-nav .dropdown-item:focus, .navbar-nav .dropdown-item:hover { background-color: var(--light-gray); }
.navbar-nav .dropdown-toggle::after { background: url(../images/arw_dwn.svg) no-repeat 0% 0% / 11px 7px; border: inherit; height: 7px; position: relative; transition: all 0.5s ease-in-out 0s; width: 11px; top: 2px; }
.navbar-nav .dropdown-toggle:focus::after { transform: rotate(180deg); transition: all 0.5s ease-in-out 0s; }
.navbar .d-flex img { max-width: 37px; }
.navbar .d-flex a { font-size: 16px; font-weight: 500; color: var(--dark-gray); }
.lang { background-color: transparent; border: 2px solid var(--dark-gray); border-radius: 30px; font-size: 16px; font-weight: 500; padding: 4px 4px; text-transform: uppercase; }
.lang img {width: 26px; }
.lang.dropdown-toggle::after { border-width: 0.4rem; border-bottom-width: 0px; position: relative; right: 2px; top: 3px; }

.offcanvas.offcanvas-end { width: 440px; }
.navbar .offcanvas { display: none; }
.navbar .offcanvas-header .btn-close { background: url("../images/hamberger.svg") no-repeat center; opacity: 1; }
.navbar .offcanvas-body { overflow-y: visible; }
.navbar .offcanvas .lang { font-size: 12px; }
.navbar .offcanvas .nav-link { margin: 0px; }
.navbar .offcanvas .dropdown-menu { position: absolute; left: 0; top: 30px; z-index: 10; }
.navbar .offcanvas .btn-dark { font-size: 20px; line-height: 39px; margin-top: 35%; max-width: 218px; }
.navbar .offcanvas .termlnk { list-style: none; margin: 0px; padding: 0px; }
.navbar .offcanvas .termlnk li { color: rgba(30, 30, 30, 0.6); font-size: 10px; font-weight: 400; padding: 5px 0px; text-align: center; }
.navbar .offcanvas .termlnk li a { color: rgba(30, 30, 30, 0.6); }
.navbar .offcanvas .termlnk li a:hover { color:  var(--violet); }
.navbar .offcanvas .fixed-bottom { position: absolute; margin: 0.5rem 0px; text-align: center; width: 100%; }

.btn-join { background: rgb(144,0,242); background: linear-gradient(90deg, rgba(144,0,242,1) 0%, rgba(210,150,252,1) 50%, rgba(144,0,242,1) 100%); border: inherit; border-radius: 30px; color: var(--bs-white) !important; font-weight: 600; text-transform: uppercase; }
.btn-join:hover, .btn-join:focus { color: var(--bs-white); }

.btn-dark { background-color: var(--dark-gray); border-color: var(--purple); border-width: 2px; border-radius: 30px; font-size: 18px; font-weight: 700; line-height: 32px; text-transform: capitalize; max-width: 190px; width: 100%; }
.btn-dark:hover { background-color: var(--purple) !important; border-color: var(--purple) !important; }

.banner { background: url("../images/bnr_bg.png") no-repeat 90% top / 55%; clear: both; min-height: 100%; padding: 4% 0px; position: relative; width: 100%; }
.banner::after { content: ""; background: rgb(244,244,244); background: linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 50%, rgba(244,244,244,1) 100%); top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.banner picture { display: block; margin-top: 37%; text-align: center; }

.redemption { background: url("../images/redem_bg.jpg") no-repeat center top / cover; clear: both; padding: 8% 0px; width: 100%; }

.stats { background: rgb(244,244,244); background: linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(210,150,252,1) 50%, rgba(244,244,244,1) 100%); border-bottom: 7px solid var(--purple); border-top: 7px solid var(--purple); clear: both; color: var(--dark-gray); padding: 15px 0px; text-align: center; text-transform: uppercase; width: 100%; }
.stats h4 { font-size: 20px; font-weight: 700; margin: 0px; }
.stats h4 span { font-size: 28px; }

.wholesale { background: url("../images/whole_bg.png") no-repeat  90% top / 65%; clear: both; padding: 6% 0px 30px; position: relative; width: 100%; }
.wholesale::after { content: ""; background: rgb(244,244,244); background: linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 50%, rgba(244,244,244,1) 100%); top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }

.wholesale { background: url("../images/whole_bg.png") no-repeat 90% top / 65%; clear: both; padding: 6% 0px 30px; width: 100%; }
.wholesale picture { display: block; margin-top: 72%; text-align: center; }
.wholesale p { margin-right: 5%; }

.discover { background: rgb(244,244,244); background: linear-gradient(90deg, rgba(244,244,244,1) 0%, rgba(210,150,252,1) 100%); clear: both; padding: 40px 0px 20px; width: 100%; }
.discover h1 { text-align: center; }

.card { background-color: var(--light-gray); border-color: var(--bs-white); border-radius: 15px; padding: 0.725rem 0.725rem; }
.card picture { display: block; margin-bottom: 1rem; }
.card picture img { border-radius: 15px; width: 100%; }
.card dl { margin-bottom: 0.5rem; width: 100%; }
.card dl dt, .card dl dd { float: left; font-size: 12px; margin: 0px; width: 50%; }
.card dl dt { font-weight: 700; }
.card dl dd { font-weight: 500; }
.card .input-group { width: 105px; }
.card .input-group .btn { background-color: #E6E6E6; border-color: #E6E6E6; color: var(--bs-black); font-size: 18px; line-height: 10px; }
.card .input-group .btn:first-child { border-radius: 30px 0px 0px 30px; }
.card .input-group .btn:last-child { border-radius: 0px 30px 30px 0px; }
.card .input-group .form-control { border-color: #E6E6E6; color: #373737; font: 600 13px var(--primary-font); padding: 5px 5px; height: 25px; text-align: center; }
.card .input-group .form-control:focus { box-shadow: inherit; }

.btn-cart { background: rgb(144,0,242); background: linear-gradient(90deg, rgba(144,0,242,1) 0%, rgba(210,150,252,1) 50%, rgba(144,0,242,1) 100%); border: 2px solid var(--violet) !important; border-radius: 30px; color: #191919 !important; font-size: 16px; font-weight: 600; margin-top: 1rem; text-transform: uppercase; }
.btn-cart:hover, .btn-cart:focus { border: 2px solid var(--violet); }

.community { background: url("../images/cty_mbr_bg.jpg") no-repeat top center / 100% 100%; clear: both; overflow: hidden; padding: 20px 0px 0px; text-align: center; width: 100%; }
.community a { margin: -13% 0px 0px -10%; }

.scheme { background: url("../images/ern_shm_bg.png") no-repeat  90% center / 65%; clear: both; padding: 6% 0px 30px; position: relative; width: 100%; }
.scheme::after { content: ""; background: rgb(244,244,244); background: linear-gradient(0deg, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 50%, rgba(244,244,244,1) 100%); top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.scheme picture { display: block; margin: 49% 0px 60px; text-align: center; }
.scheme ul { margin: 0px 0px 20px 20px; padding: 0px; }
.scheme ul li { padding-left: 5%; }
.scheme .btn { margin: -33% 0px 0px 72% }

footer { background-color: var(--light-gray); border-top: 3px solid var(--purple); clear: both; color: var(--dark-gray); font-size: 10px; padding: 30px 0px; width: 100%; }
footer picture img { max-width: 135px; }
footer a { color: rgba(43, 043, 043, 60%); margin-left: 3.5%; }
footer a:hover { color: var(--purple); }
footer .col:first-child { text-transform: uppercase; }
footer .col:last-child { text-align: right; text-transform: capitalize; }

.form-control:focus, .form-select:focus { box-shadow: inherit; }

.offcanvas-backdrop { background-color: transparent; }
.sidepanel .offcanvas-header { background-color: var(--light-gray); padding: 1.725rem 1rem; }
.sidepanel .offcanvas-header .offcanvas-title { font-size: 18px; font-weight: 500; }
.sidepanel .offcanvas-header .offcanvas-title img { max-width: 38px; }
.sidepanel .offcanvas-header .btn-close { background-size: 8px; border: 1px solid var(--dark-gray); border-radius: 100%; margin-right: 5px; opacity: 1; height: 8px; width: 8px; }
.sidepanel .offcanvas-body .form-control { background-color: var(--light-gray); border-color: var(--violet); font-size: 14px; font-weight: 500; line-height: 22px; }
.sidepanel .offcanvas-body .form-select { background: url("../images/poly.svg") no-repeat 95% center var(--light-gray); border-color: var(--violet); font-size: 14px; font-weight: 500; }
.sidepanel .offcanvas-body .btn { text-transform: uppercase; font-size: 16px; font-weight: 700; width: 100%; }
.sidepanel .offcanvas-body .btn-primary { background-color: var(--violet); border-color: var(--violet); color: var(--bs-black); font-size: 14px; }
.sidepanel .offcanvas-body .btn-primary:hover, .offcanvas-body .btn-primary:focus { background-color: var(--purple); border-color: var(--purple); color: var(--bs-white); }
.sidepanel .offcanvas-body .btn-outline-primary { border-color: var(--violet); color: var(--violet); font-size: 14px; }
.sidepanel .offcanvas-body .btn-outline-primary:hover, .offcanvas-body .btn-outline-primary:focus { background-color: var(--violet); border-color: var(--violet) !important; color: var(--bs-white); }
.sidepanel .offcanvas-body .btn-outline-primary img, .sidepanel .offcanvas-body .btn-primary img { height: 21px; }
.usr { background: url("../images/icn_usr.svg") no-repeat 10px center; padding-left: 45px; }
.psw { background: url("../images/icn_lok.svg") no-repeat 10px center; padding-left: 45px; }
.glb { background: url("../images/global.svg") no-repeat 10px center / 25px; padding-left: 45px; }
.ate { background: url("../images/icn_at.svg") no-repeat 10px center; padding-left: 45px; }
.inv { background: url("../images/icn_inv.png") no-repeat 10px center; padding-left: 45px; }
.sign { align-content: center; }
.sign .form-control, .sign .form-select { text-align: center; }
.btn-request { font-size: 12px !important; line-height: 13px; text-transform: inherit !important; }

.scrollbox { clear: both; height: 330px; overflow: hidden; overflow-y: hidden; overflow-y: hidden; overflow-y: scroll; margin-bottom: 50px; padding-right: 3px; width: 100%; }
.scrollbox::-webkit-scrollbar { width: 7px; }
.scrollbox::-webkit-scrollbar-track { background: #A9ACB3; border: 2px solid #A9ACB3; }
.scrollbox::-webkit-scrollbar-thumb { background-color: #5E5E5E; }

.card-detail { background-color: var(--gray); border: 1px solid var(--violet); border-radius: 15px; margin-bottom: 0.5rem; padding: 12px 12px; width: 100%; }
.card-detail picture img { border-radius: 12px; }
.card-detail h4 { font-size: 14px; }
.card-detail .input-group { margin: 17% 0px 0.5rem; width: 105px; }
.card-detail .input-group .btn { background-color: #E6E6E6; border-color: #E6E6E6; color: var(--bs-black); font-size: 18px; font-weight: 400; line-height: 12px; width: auto; }
.card-detail .input-group .btn:first-child { border-radius: 30px 0px 0px 30px; }
.card-detail .input-group .btn:last-child { border-radius: 0px 30px 30px 0px; }
.card-detail .input-group .form-control { border-color: #E6E6E6; color: #373737; font: 600 13px var(--primary-font); padding: 5px 5px; line-height: 12px; text-align: center; }
.card-detail .input-group .form-control:focus { box-shadow: inherit; }
.card-detail .retail { font-size: 10px; width: 100%; }
.card-detail p { font-size: 10px; margin: 5px 0px 0px; }
.card-detail a { color: var(--purple); font-size: 10px;text-decoration: underline; }

.summary { color: var(--dark-gray); font-size: 14px; font-weight: 500; }
.summary .text-end { font-weight: 600; }

.ourteam { background: url("../images/our_tam_bg.png") no-repeat center 45px / 100%; clear: both; min-height: 100%; padding: 5% 0px 6%; position: relative; text-align: center; width: 100%; }
.ourteam::after { content: ""; background-color: var(--bs-white); top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.ourteam .box { background-color: var(--bs-white); border: 7px solid #A22AF4; border-radius: 0px 0px 25px 25px; margin: -90px auto 0px; padding: 100px 0px 20px; max-width: 245px; }
.ourteam h2 { margin-bottom: 5%; }
.ourteam picture { display: block; margin: 0px auto; max-width: 296px; }
.ourteam .box p { font-size: 12px; font-weight: 700; margin: 0px; min-height: 55px; }
.ourteam .stats { margin-top: 5%; }

.culture { clear: both; padding: 7% 0px 20px; width: 100%; }
.system { clear: both; padding: 30px 0px; width: 100%; }

.main { background-color: var(--bs-white); clear: both; width: 100%; }
.common-area { height: 100vh; min-height: 100%; position: relative; overflow: hidden; overflow-y: hidden; overflow-y: auto; scrollbar-width: none; padding: 0px 25px 25px 25px; width: 100%; }
.common-area::-webkit-scrollbar { display: none; }
.common-area .col { flex: auto; max-width: 33.33333333% }

.sidebar { background-color: var(--light-gray); max-width: 295px; padding: 1.5rem 1rem; }
.sidebar h3 { font-size: 20px; font-weight: 600; margin-bottom: 1.5rem }
.sidebar p { font-size: 14px; margin: 0px 0px 5px; }
.sidebar ul { list-style: none; margin: 0px; padding: 0px; }
.sidebar ul li { font-size: 11px; font-weight: 500; padding: 2px 0px; }
.sidebar ul li .form-check-input { background: #A9ACB3 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"); margin-right: 5px; }
.sidebar ul li .form-check-input:focus { border-color: var(--bs-white); box-shadow: inherit; }
.sidebar ul li .form-check-input:checked { background-color: var(--purple); border-color: var(--purple); box-shadow: inherit; }

.filter { clear: both; color: var(--violet); font-size: 16px; font-weight: 500; padding: 40px 0px 20px; text-transform: capitalize; width: 100%; }
.filter .form-select { background: url("../images/arw_dwn_01.svg") no-repeat 93% center / 15px var(--violet); color: var(--dark-gray); font: 500 16px var(--primary-font); }

.details { color: var(--purple); font-size:16px; font-weight: 700; text-decoration: underline; text-transform: capitalize; }

.pagination { align-items: center; font-size: 14px; font-weight: 600; justify-content: right; margin: 1rem 0px; }
.pagination .btn-primary { background-color: var(--violet); border-color: var(--violet); border-radius: 10px; color: var(--dark-gray); font-size: 14px; font-weight: 600; text-transform: uppercase; width: 131px; }
.pagination .btn-primary:hover, .pagination .btn-primary:focus { background-color: var(--purple); border-color: var(--purple); color: var(--bs-white); }

.dashboard { clear: both; font-size: 14px; width: 100%; }
.dashboard picture { background: rgb(144,0,242); background: linear-gradient(0deg, rgba(144,0,242,1) 0%, rgba(210,150,252,1) 50%, rgba(144,0,242,1) 100%); border-radius: 20px; display: inline-block; padding: 5px 5px; position: relative; }
.dashboard picture img { border: 1px solid #707070; border-radius: 17px; width: 100%; }
.dashboard .cam { bottom: 0px; margin: 0px -8px -8px 0px; position: absolute; right: 0px; z-index: 1; }
.dashboard .cam img { border: inherit; border-radius: inherit; }
.dashboard .red { color: #ED0E0E; font-size: 12px; text-decoration: underline; }
.dashboard .green { color: #02FA1E; font-size: 12px; text-decoration: underline; }
.dashboard a { color: var(--purple); margin-left: 2px; text-decoration: underline; }
.dashboard .col:last-child { text-align: right; }
.dashboard hr { border-color: var(--violet); opacity: 1; }
.dashboard .form-check-input { background: #A9ACB3 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"); margin-right: 5px; }
.dashboard .form-check-input:focus { border-color: var(--bs-white); box-shadow: inherit; }
.dashboard .form-check-input:checked { background-color: var(--purple); border-color: var(--purple); box-shadow: inherit; }

#combine { background-color: #A9ACB3; border: 1px solid var(--violet); border-radius: 20px; font-size: 14px; padding: 15px 15px; position: absolute; right: 0; text-align: left; top: 0; width: 203px; z-index: 1; }

.aside { background-color: var(--light-gray); flex: auto; font-size: 11px; max-width: 340px; padding: 1.5rem 1rem; }
.aside picture { background: rgb(144,0,242); background: linear-gradient(0deg, rgba(144,0,242,1) 0%, rgba(210,150,252,1) 50%, rgba(144,0,242,1) 100%); border-radius: 20px; display: inline-block; padding: 5px 5px; position: relative; }
.aside picture img { border: 1px solid #707070; border-radius: 17px; width: 100%; }
.aside .cam { bottom: 0px; margin: 0px -8px -8px 0px; position: absolute; right: 0px; z-index: 1; }
.aside .cam img { border: inherit; border-radius: inherit; }
.aside .red { color: #ED0E0E; font-size: 12px; text-decoration: underline; }
.aside .green { color: #02FA1E; font-size: 12px; text-decoration: underline; }
.aside a { color: var(--purple); margin-left: 2px; text-decoration: underline; }
.aside .col:last-child { text-align: right; }
.aside hr { border-color: var(--violet); opacity: 1; }
.aside .form-check-input { background: #A9ACB3 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"); margin-right: 5px; }
.aside .form-check-input:focus { border-color: var(--bs-white); box-shadow: inherit; }
.aside .form-check-input:checked { background-color: var(--purple); border-color: var(--purple); box-shadow: inherit; }
.aside .d-wiew { display: block; }

.topbar { clear:both; margin: 30px 0px 15px; width: 100%; }
.topbar strong { font-size: 14px; font-weight: 700; margin: 0px; text-transform: capitalize; }
.topbar a { color: var(--purple); font-size: 14px; margin-right: 15px; text-decoration: underline; }
.topbar .form-control { background-color:var(--gray); border-color: var(--violet); border-radius: 10px; font-size: 14px; }
.topbar .btn-primary { background-color: var(--violet); border-color: var(--violet); border-radius: 10px; color: var(--dark-gray); font-size: 14px; font-weight: 600; text-transform: uppercase; }
.topbar .btn-primary:hover, .topbar .btn-primary:focus { background-color: var(--purple); border-color: var(--purple); color: var(--bs-white); }

.table { margin: 0px; }
.table thead tr th { background-color: #D296FC; color: var(--bs-black); font-size: 14px; font-weight: 500; text-transform: capitalize; }
.table tbody tr td { background-color: #7d7f82; color: var(--bs-white); font-size: 14px; font-weight: 500; }
.table tbody tr td.green { color: #02FA1E; }
.table tbody tr td.red { color: #ED0E0E; }

.friend-list { clear: both; font-size: 14px; width: 100%; }
.friend-list .col { flex: auto; max-width: 25%; }
.friend-list .box { background-color: #A9ACB3; padding: 12px 20px; width: 100%; }
.friend-list .box picture { background: rgb(144,0,242); background: linear-gradient(0deg, rgba(144,0,242,1) 0%, rgba(210,150,252,1) 50%, rgba(144,0,242,1) 100%); border-radius: 20px; display: block; margin-bottom: 0.3rem; padding: 5px 5px; position: relative; }
.friend-list .box picture img { border: 1px solid #707070; border-radius: 17px; width: 100%; }
.friend-list .box .btn-outline-primary { border-color: var(--purple); border-radius: 30px; color: var(--dark-gray); font-size: 14px; font-weight: 500; margin-top: 5px; width: 100%; }

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

@media only screen and (max-width: 767px) {
    h1 { font-size: 18px; }
    h3 { font-size: 12px; }
    p, li { font-size: 10px; }
    .btn-dark { font-size: 16px; line-height: 25px; max-width: 165px; }
    .col { flex-basis: auto; }
    .navbar .container { position: relative; }
    .navbar-brand { max-width: 104px; }
    .navbar .offcanvas, .sidepanel { display: block; padding: 0px; }
    .navbar-toggler { border: inherit; }
    .navbar-toggler-icon { background: url("../images/hamberger.svg") no-repeat center; }
    .navbar .d-flex { position: absolute; right: 70px; }
    .navbar .d-flex a { font-size: 12px; }
    .navbar .d-flex img { max-width: 24px; }
    .offcanvas.offcanvas-end { overflow-y: auto; width: 350px; }
    .banner { background-position: center; background-size: 574px; }
    .banner h1 { font-size: 20px; text-align: center; }
    .banner h1 span { color: var(--purple); font-size: 36px; }
    .banner picture, .wholesale picture { margin: 30px 0px; }
    .banner p { text-align: center; }
    .redemption { background: var(--bs-white); text-align: center; }
    .stats { border-top-width: 4px; border-bottom-width: 4px; padding: 21px 0px; }
    .stats h4, .stats h4 span { color: var(--bs-white); font-size: 8px; }
    .wholesale { background-position: top center; background-size: 600px; text-align: center; }
    .discover h1, .community h1 { font-size: 16px; }
    .card h3 { font-size: 13px; }
    .card dl dt, .card dl dd { font-size: 10px; }
    .btn-cart { font-size: 13px; }
    .community { background-size: 806px; }
    .community img { margin-left: -40%; max-width: 806px; }
    .scheme picture { margin: 8% 0px 30px; }
    .scheme { background: var(--bs-white); text-align: center; }
    .scheme ul li { text-align: left; }
    .scheme .btn { margin: 0px; }
    footer, .culture { text-align: center; }
    footer { border-width: 5px; }
    footer picture { display: block; margin-bottom: 0.725rem; }
    footer picture img { max-width: inherit; }
    .sidepanel .offcanvas-body .form-control, .sidepanel .offcanvas-body .form-select { font-size: 10px; }
    .sidepanel .offcanvas-body .btn-primary, .sidepanel .offcanvas-body .btn-outline-primary { font-size: 10px; }
    .btn-new { background-color: var(--bs-black) !important; color: var(--bs-white) !important; }
    .btn-cont { background-color: var(--bs-white) !important; color: var(--dark-gray) !important; }
    .card-detail { background-color: var(--purple); border-color: var(--purple); }
    .card-detail h4 { color: var(--bs-white); font-size: 8px; }
    .card-detail .retail, .card-detail p, .card-detail a { color: var(--bs-white); }
    .card-detail .retail { font-size: 8px; }
    .summary { font-size: 8px; }
    .gray { background-color: rgba(213, 213, 213, 0.3); clear: both; position: absolute; bottom: 0; left: 0; padding: 1rem 1rem; width: 100%; }
    .btn-signup { border-radius: 30px; font-size: 14px !important; line-height: 39px; margin-top: 12%; }
    .btn-ready { border-radius: 30px; color: var(--dark-gray) !important; font-size: 14px !important; line-height: 39px; }
    .ourteam .px-sm-0 { padding: 0px; }
    .ourteam h2 { font-size: 22px; font-weight: 500; }
    .ourteam h2 span { color: var(--purple); font-size: 48px; font-weight: 700; }
    .ourteam h2 strong { font-size: 20px; font-weight: 700; }
    .ourteam .box { margin-top: -80px; max-width: 233px; }
    .culture picture img, .system picture img { border-radius: 20px; }
    .unique { background: url("../images/ern_shm_bg.png") no-repeat center / 749px; }
    .common-area .col { flex: auto; max-width: 50% }
    .common-area .g-4 { --bs-gutter-y: 0.5rem; --bs-gutter-x: 0.5rem; }
    .system { text-align: center; }
    .system .col:last-child picture { display: inline-block; margin: 0 auto; max-width: 246px; }
    .common-area { padding: 0px 12px 25px; }
    .main .btn-cart { font-size: 9px; }
    .details { display: none; }
    .sidebar { padding: 0.5rem 1rem; max-width: 100%; width: 100%; }
    .sidebar a { background: url("../images/plus.png") no-repeat 97% center; color: var(--dark-gray); font-size: 20px; font-weight: 600; display: block; }
    .sidebar a:focus { background-image: url("../images/minus.png"); }
    .sidebar h3 { font-size: 14px; }
    .sidebar p { font-size: 14px; }
    .sidepanel .offcanvas-body .btn-outline-primary img { height: 15px; }
    .sidepanel .offcanvas-body .btn-primary img { height: 15px; }
    .scrollbox { height: 250px; }
    .filter { background-color: var(--purple); color: var(--bs-white); font-size: 12px; font-weight: 500; padding: 0.5rem 1rem; max-width: 100%; width: 100%; }
    .filter .form-select { background: url("../images/arw_dwn_02.svg") no-repeat 93% center / 15px var(--purple); border-color: var(--bs-white); border-radius: 0px; color: var(--bs-white); font-size: 12px; }
    .pagination { display: block; font-size: 12px; line-height: 29px; justify-content: inherit; text-align: center; }
    .pagination .btn-primary { border-radius: 5px; color: var(--bs-white); font-size: 10px; width: 80px; }
    .pagination .btn:first-child { float: left; }
    .pagination .btn:last-child { float: right; }
    .dashboard { font-size: 10px; }
    .dashboard .col { flex-basis: 0; }
    .z-2 img { width: 35px; }
    #combine { font-size: 10px; }
    .aside { max-width: 100%; }
    .topbar, .topbar strong, .topbar a { font-size: 10px; }
    .topbar .col { flex-basis: 0; }
	a.btn-show { background: transparent; cursor: pointer; color: #4E3360; font-size: 10px; font-weight: 600; padding: .725rem 0px; text-decoration: none; text-transform: uppercase; }
	.aside .d-wiew { display: none; }
	.collapse.show { display: block !important; }
	#collapseAside { background-color: var(--light-gray); left: 0; padding: 1rem 1rem; position: absolute; width: 100%; z-index: 1; }
	.table thead tr th, .table tbody tr td { font-size: 8px; }
	.friend-list { font-size: 10px; }
	.friend-list .box { padding: 12px 12px; }
	.friend-list .col { max-width: 50%; }
	.friend-list .box .btn-outline-primary { background-color: var(--bs-white); font-size: 10px; }
}

@media only screen and (min-width: 368px) and (max-width: 520px) {
    .community img { margin-left: -50%; max-width: 806px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    h1 { font-size: 28px }
    h3 { font-size: 18px; }
    p, li { font-size: 12px; }
    .btn-dark { font-size: 16px; line-height: 25px; max-width: 165px; }
    .navbar .container { position: relative; }
    .navbar-brand { max-width: 104px; }
    .navbar .offcanvas { display: block; padding: 0px; }
    .navbar-toggler { border: inherit; }
    .navbar-toggler-icon { background: url("../images/hamberger.svg") no-repeat center; }
    .navbar .d-flex { position: absolute; right: 70px; }
    .navbar .d-flex a { font-size: 12px; }
    .navbar .d-flex img { max-width: 24px; }
    .offcanvas.offcanvas-end { width: 350px; }
    .stats h4 { font-size: 13px; }
    .stats h4 span { font-size: 22px; }
    .ourteam .box { margin-top: -80px; max-width: 209px; }
    .ourteam .box p { font-size: 11px; }
    .common-area .col { max-width: 50%; }
    .details { font-size: 14px; }
    .pagination { display: block; justify-content: inherit; text-align: center; }
    .pagination .btn:first-child { float: left; }
    .pagination .btn:last-child { float: right; }
    .aside { max-width: 285px; }
    .table thead tr th, .table tbody tr td { font-size: 10px; }
    .friend-list .col { max-width: 50%; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    h1 { font-size: 28px }
    h3 { font-size: 18px; }
    .navbar .navbar-nav .nav-link { font-size: 14px; }
    .navbar .d-flex a, .lang { font-size: 14px; }
    .stats h4 { font-size: 16px; }
    .stats h4 span { font-size: 26px; }
    .ourteam .box { margin-top: -80px; max-width: 210px; }
    .ourteam .box p { font-size: 11px; }
    .filter, .details { font-size: 14px; }
    .friend-list .col { max-width: 33.3333%; }
}

@media (min-width: 1680px) {
    h1 { font-size: 48px; }
    h3 { font-size: 32px; }
    p, li { font-size: 21px; }
    .container { max-width: 1620px; }
    .navbar { border-bottom-width: 5px; }
    .navbar-brand { max-width: inherit; }
    .navbar .navbar-nav .nav-link { font-size: 20px; }
    .navbar .d-flex a, .lang { font-size: 20px; }
    .offcanvas.offcanvas-end { width: 523px; }
    .dropdown-item { font-size: 16px; }
    .banner picture { margin-top: 43%; }
    .btn-dark { border-width: 3px; border-radius: 60px; font-size: 26px; line-height: 48px; max-width: 265px; }
    .btn-cart { font-size: 22px; }
    .stats { border-width: 10px; padding: 20px 0px; }
    .stats h4 { font-size: 30px; }
	.stats h4 span { font-size: 48px; }
    .card { padding: 1.2rem 1.2rem; }
	.card, .card picture img { border-radius: 20px; }
    .card dl dt, .card dl dd { font-size: 16px; }
    footer { font-size: 14px; border-top-width: 5px; }
    footer img { max-width: inherit; }
    .sidepanel .offcanvas-header .offcanvas-title { font-size: 22px; }
    .sidepanel .offcanvas-header .offcanvas-title img { max-width: inherit; }
    .sidepanel .offcanvas-header .btn-close { background-size: 11px; border: 1px solid var(--dark-gray); border-radius: 100%; opacity: 1; height: 12px; width: 12px; }
    .sidepanel .offcanvas-body .form-control, .sidepanel .offcanvas-body .form-select,
    .sidepanel .offcanvas-body .btn-primary, .sidepanel .offcanvas-body .btn-outline-primary { font-size: 16px; line-height: 30px; }
    .sidepanel .offcanvas-body .btn-outline-primary img, .sidepanel .offcanvas-body .btn-outline-primary img { margin-top: 3px; height: auto; }
    .btn-request { line-height: 22px !important; }
    .card-detail .input-group .btn, .card-detail .input-group .form-control { line-height: 12px; }
    .ourteam picture { max-width: inherit; }
    .ourteam .box { border-width: 10px; margin: -110px auto 0px; padding: 140px 0px 30px; max-width: 306px; }
    .ourteam .box p { font-size: 16px; min-height: 72px; }
    .sidebar, .aside { max-width: 412px; }
    .sidebar h3 { font-size: 26px; }
    .sidebar p, .pagination, .pagination .btn-primary { font-size: 18px; }
    .sidebar ul li { font-size: 16px; }
    .filter { font-size: 20px; }
    .details { font-size: 20px; }
    .dashboard, .topbar h4, .topbar a { font-size: 16px; }
    .dashboard a { margin-left: 5px; }
    .aside { font-size: 14px; padding: 1.5rem 1.5rem; }
    .friend-list { font-size: 17px; }
}