@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: 'Prompt', sans-serif, Arial, Helvetica; --secondary-font: 'Dementor'; --light-gray: #BEBEBE; --gray: #707070; --golden-yellow: #EDBF2B; }
body { 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(--bs-black); font-family: var(--primary-font); font-weight: 700; }
h1 { font: normal 66px var(--secondary-font); }
h2 { font-size: 30px; font-style: italic; }
h3 { font-size: 24px; }
h4 { font-size: 12px; }
p, li { color: var(--bs-black); font: 400 italic 16px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }

.navbar { background-color: var(--bs-white); border-bottom: 3px solid var(--light-gray); padding-bottom: 0; }
.navbar .container { align-items: flex-end; }
.navbar .navbar-nav .nav-link { color: var(--bs-black); font-weight: 500; font-style: italic; margin: 0 0.5rem; padding: 0.5rem 1.5rem; text-transform: capitalize; }
.navbar .navbar-nav .nav-link.active { border-bottom: 7px solid var(--light-gray); }
.navbar .d-flex { align-items: center; padding-bottom: 7px; }
.navbar .d-flex a { color: var(--bs-black); font: 500 italic 14px var(--primary-font); text-decoration: underline; text-transform: capitalize}
.navbar .d-flex a.lang {cursor: pointer; font-style: normal; font-weight: 600; text-decoration: inherit; text-transform: uppercase; }
.navbar .d-flex a.lang img { max-width: 25px; }
.navbar .d-flex .dropdown-menu { background-color: var(--light-gray); border-color: var(--gray); left: inherit; right: 0; }
.navbar .d-flex .dropdown-item { font-style: normal; padding: 0.25rem 0.625rem; text-decoration: inherit; }

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

.offcanvas { border-left: 2px solid var(--light-gray); display: none; }
.offcanvas.offcanvas-end { overflow-y: auto; width: 300px; }
.offcanvas-header img { max-width: 47px; }
.offcanvas-header .btn-close { background: url("../images/hamberger.svg") no-repeat center; opacity: 1; }
.offcanvas-body { min-height: 48vh; }
.offcanvas-body ul { list-style: none; margin: 0% 0% 15%; padding: 0; }
.offcanvas-body ul li { color: var(--bs-black); font-size: 20px; font-style: italic; font-weight: 500; }
.offcanvas-body ul li a { color: var(--bs-black); display: block; padding: 0.5rem 0%; }
.offcanvas-body .btn-prime { font-size: 20px; width: 100%; }
.offcanvas .footer { border-top: 3px solid var(--light-gray); font-size: 10px; padding: 1rem; text-align: center; text-transform: uppercase; width: 100%; }
.offcanvas .footer figure img { max-width: 105px; }
.offcanvas .footer .social a { background-color: var(--golden-yellow); border-radius: 50%; color: var(--bs-white); display: inline-block; font-size: 22px; height: 40px; margin: 0% 5px; padding: 4px; text-align: center; width: 40px; }

.btn-prime, .btn-join { background-color: var(--light-gray); border-color: var(--bs-black); border-radius: 12px; border-width: 2px; color: var(--bs-black); font: 500 italic 14px var(--primary-font); text-transform: capitalize; }
.btn-prime:hover, .btn-prime:focus, .btn-join:hover, .btn-join:focus { background-color: var(--bs-white) !important; border-color: var(--bs-black) !important; color: var(--bs-black); }

.btn-join { text-align: center; width: 225px; }
.btn-join span:last-child { display: none; opacity: 0; transition: 0.25s all ease-in-out; }
.btn-join:hover span:first-child { display: none; opacity: 0; transition: 0.25s all ease-in-out; }
.btn-join:hover span:last-child { display: inline-block; opacity: 1; transition: 0.25s all ease-in-out; }

.banner { background: url("../images/bnr_bg.jpg") no-repeat center top / cover; clear: both; padding: 5% 0; width: 100%; }
.banner h1 { text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); text-transform: initial; }
.banner figure { max-width: 121px; }

.story { background: url("../images/hny_bx_bg.jpg") no-repeat center bottom / 100%; clear: both; padding: 0% 0% 20px; width: 100%; }
.mv-top { margin-top: -7.5%; }
.panel { background-color: var(--bs-white); border: 2px solid var(--bs-black); border-radius: 10px; padding: 25px 15px; width: 100%; }
.experts { background: url("../images/ept_pdt_bg.jpg") no-repeat center bottom / 100%; clear: both; padding: 0% 0% 5%; width: 100%; }

footer { background-color: var(--bs-white); border-top: 3px solid var(--light-gray); clear: both; font-size: 12px; padding: 25px 0;  text-transform: uppercase; width: 100%; }
footer picture { display: block; max-width: 42px; }
footer .social a { background-color: var(--golden-yellow); border-radius: 50%; color: var(--bs-white); display: inline-block; font-size: 18px; height: 30px; padding: 2px; text-align: center; width: 30px; }

.our-product { background: url("../images/our_pdts.jpg") no-repeat center top / cover; clear: both; padding: 15% 0% 20px; width: 100%; }
.our-product h1 { font-size: 89px; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); text-transform: initial; }

.keys { background: url("../images/kys_bft_bg.jpg") no-repeat top center / cover; clear: both; padding: 20px 0% 10px; width: 100%; }
.keys .box { background-color: var(--bs-white); border: 2px solid var(--bs-black); border-radius: 10px; height: 100%; padding: 25px 15px; width: 100%; }

.series { background: url("../images/sres_bg.jpg") no-repeat center / 100%; clear: both; padding: 20px 0%; width: 100%; }
.series h1 { font-size: 150px; text-align: center; }
.series p { margin-bottom: 5px; }

.testimonial { clear: both; padding: 20px 0%; width: 100%; }
.testimonial h1 { font-size: 150px; text-align: center; }
.testimonial .box { background: rgb(190,190,190); background: linear-gradient(-40deg, rgba(190,190,190,0.47) 0%, rgba(190,190,190,0) 100%); border-radius: 14px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); clear: both; height: 100%; margin-top: 30%; padding: 14px; width: 100%; }
.testimonial .box .white { background-color: var(--bs-white); border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); clear: both; height: 360px; padding: 14px; text-align: center; width: 100%; }
.testimonial .box figure { background: rgb(190,190,190); background: linear-gradient(-60deg, rgba(190,190,190,0.47) 0%, rgba(190,190,190,0) 100%); border-radius: 100%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); margin: -45% auto 20px; padding: 10px; width: 180px; }
.testimonial .box figure img { border-radius: 100%; width: auto; }
.testimonial .box p span { font-style: normal; }

.gallery { clear: both; padding: 5% 0%; text-align: center; width: 100%; }
.gallery .col { flex: auto; width: 33.3333%; }
.gallery h2 { font-size: 27px; text-transform: uppercase; }
.gallery p { text-transform: uppercase; }
.gallery picture { display: block; margin-bottom: 1rem; }
.gallery picture img { border: 2px solid var(--light-gray); border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.43); }
.gallery h3 { font-size: 27px; font-style: italic; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; }

.main { align-items: center; background-color: var(--bs-white); display: flex; height: 100%; justify-content: center; min-height: 100vh; max-width: 375px; }
.register { width: 100%; }
.register .logo img { max-width: 100px; }
.register .input-group-text { background-color: var(--light-gray); border: 2px solid var(--bs-white); border-right: inherit; border-radius: 8px; }
.register .form-control { background-color: var(--light-gray); border: 2px solid var(--bs-white); border-left: inherit; border-radius: 8px; }
.register .form-control:focus, .register .form-select:focus { box-shadow: inherit !important; }
.register .form-select { background-color: var(--light-gray); background-image: url("../images/arw_ste.svg"); border: 2px solid var(--bs-white); border-radius: 8px; padding-left: 60px; }
.register .btn { border-radius: 8px; color: var(--bs-black); font-size: 14px; font-weight: 700; line-height: 26px; text-transform: uppercase; }
.register .btn-primary { background-color: var(--light-gray); border-color: var(--light-gray); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); }
.register .btn-primary:hover, .register .btn-primary:focus { background-color: var(--light-gray); border-color: var(--light-gray); color: var(--bs-black); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important; }
.register .btn-outline-primary { border-color: var(--light-gray); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); }
.register .btn-outline-primary:hover, .register .btn-outline-primary:focus { background-color: var(--bs-white); border-color: var(--light-gray); color: var(--bs-black); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important; }
.register .view { background: url("../images/eye-1.svg") no-repeat center; display: inline-block; height: 16px; position: absolute; right: 15px; top: 12px; width: 26px; z-index: 1; }
.register .view:focus { background: url("../images/eye-2.svg") no-repeat center; }

.pic { height: 100vh; width: 100%; }
.forgot { color: var(--bs-black); font-size: 16px; font-weight: 300; text-decoration: underline; text-transform: capitalize;  text-align: center; }
.forgot a { color: var(--bs-black); }

/*-------------------
    Dashboard
---------------------------*/

.dashboard { background-color: var(--bs-black); clear: both; height: 100%; min-height: 100vh; width: 100%; }
.dashboard h1, .dashboard h2, .dashboard h3, .dashboard h4, .dashboard h5, .dashboard h6 { color: var(--bs-white); }
.dashboard p, .dashboard li { color: var(--bs-white); }
.dashboard .navbar { background-color: var(--bs-black); border-color: var(--golden-yellow); }
.dashboard .navbar-brand { filter: brightness(0) invert(1); }
.dashboard .navbar-nav .nav-link { color: var(--bs-white); padding: 0.5rem 0%; margin: 0% 2rem; }
.dashboard .d-flex a { color: var(--bs-white); text-decoration: inherit; }
.dashboard .d-flex img { max-width: 42px; }
.dashboard .d-flex .btn-prime { color: var(--bs-black); width: 170px; }
.dashboard .d-flex a.lang img { filter: brightness(0) invert(1); }
.dashboard .d-flex .dropdown-item { color: var(--bs-black); }

.dashboard .offcanvas-header img, .dashboard .navbar-toggler, .dashboard .offcanvas-header .btn-close { filter: brightness(0) invert(1); }
.dashboard .offcanvas { background-color: var(--bs-black); border-left: 4px solid var(--light-gray); color: var(--bs-white); }
.dashboard .offcanvas h4 { color: var(--bs-white); }
.dashboard .offcanvas-body ul li { color: var(--bs-white); }
.dashboard .offcanvas-body ul li a { color: var(--bs-white); }
.dashboard .offcanvas .footer img { filter: brightness(0) invert(1); }
.dashboard .offcanvas .footer ul { list-style: none; margin: 10px auto; padding: 0; width: 185px; }
.dashboard .offcanvas .footer ul li { color: var(--bs-white); font-size: 12px; font-style: normal; font-weight: 700; line-height: 10px; margin-bottom: 10px; text-align: left; text-transform: uppercase; }
.dashboard .offcanvas .footer ul li a { border-left: 4px solid var(--bs-white); display: inline-block; color: var(--bs-white); padding-left: 7px; }

.dashboard footer { background-color: var(--bs-black); border-color: var(--golden-yellow); color: var(--bs-white); padding: 15px 0; }
.dashboard footer picture { filter: brightness(0) invert(1); }
.dashboard footer h4 { color: var(--bs-white); }
.dashboard footer ul { list-style: none; margin: 0; padding: 0; }
.dashboard footer ul li { color: var(--bs-white); font-size: 12px; font-style: normal; font-weight: 700; line-height: 10px; margin-bottom: 10px; text-transform: uppercase; }
.dashboard footer ul li a { border-left: 4px solid var(--bs-white); display: inline-block; color: var(--bs-white); padding-left: 7px; }

.latest { clear: both; padding: 20px 0%; width: 100%; }
.latest h3 { color: var(--bs-white); font-size: 16px; font-style: italic; font-weight: 500; text-decoration: underline; }
.latest figure { border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); overflow: hidden; position: relative; }
.latest figure a { background-color: rgba(0, 0, 0, 0.2); border-radius: 100%; backdrop-filter: saturate(100%) blur(20px); color: var(--bs-white); font-size: 13px; font-weight: 600; height: 68px; padding: 10px 10px; position: absolute; right: 15px; text-align: center; text-transform: uppercase; top: 15px; width: 68px; z-index: 1; }

.detail { clear: both; color: var(--golden-yellow); font-size: 14px; font-style: italic; font-weight: 500; padding: 20px 0; width: 100%; }

.inventory { background: url("../images/hmb_bg.jpg") no-repeat top center / cover fixed; clear: both; min-height: 410px; padding: 40px 0%; width: 100%; }
.inventory h2 { font-size: 20px; font-weight: 500; font-style: normal; }
.inventory h3, .shopbar h3 { color: var(--bs-white); font-size: 16px; font-style: italic; font-weight: 400; text-transform: capitalize; }
.inventory h3 a, .shopbar h3 a { color: var(--bs-white); text-decoration: underline; }

.card { background: rgb(0,0,0); background: linear-gradient(-40deg, rgba(0, 0, 0, 0.47) 0%, rgba(0, 0, 0, 0) 100%); border-color: var(--gray); border-bottom: 7px solid var(--golden-yellow); border-radius: inherit; color: var(--bs-white); font-size: 16px; font-weight: 500; font-style: italic; margin-bottom: 10px; padding: 10px 15px; width: 100%; }
.card h3 { color: var(--bs-white); font-size: 16px; font-style: italic; font-weight: 500; text-decoration: underline; }
.card p { color: var(--bs-white); font-style: normal; margin: 0; }
.card span, .card p span { color:  var(--golden-yellow); }
.card a { color: var(--bs-white); }

.yellow { color: var(--golden-yellow); }
.red { color: #E00404; }
.num { font-size: 27px; font-weight: 300; font-style: normal; text-align: right; }

.modal-title { font: 600 italic 24px var(--primary-font); color: var(--bs-white); margin: 0 auto; }
.modal-header .btn-close { background-size: 10px; border: 1px solid var(--bs-white); border-radius: 50%; filter: brightness(0) invert(1); opacity: 1; padding: 3px; position: absolute; right: 18px; }
.modal-content { background-color: var(--bs-black); border: 2px solid var(--golden-yellow); }
.scrollbox { clear: both; height: 530px; overflow: hidden; overflow-y: auto; scrollbar-width: none; width: 100%; }
.scrollbox::-webkit-scrollbar { display: none; }
.cart_items { background-color: #5C5C5C; border: 2px solid var(--golden-yellow); border-radius: 10px; position: relative; margin-bottom: 0.5rem; padding: 12px 12px; width: 100%; }
.cart_items h3 { color: var(--bs-white); font-size: 20px; }
.modal p, .cart_items p { color: var(--bs-white); font-size: 14px; font-style: normal; margin: 0; }
.cart_items .remove { color: #E00404; font-size: 14px; position: absolute; left: 12px; top: 8px; z-index: 1; }
.modal-footer { justify-content: flex-start; }
.modal-footer p { color: var(--bs-white); font-size: 16px; font-weight: 700; font-style: normal; text-transform: uppercase; }
.modal-body .btn-outline-primary, .modal-footer .btn-outline-primary { border: 2px solid var(--golden-yellow); border-radius: 8px; color: var(--bs-white); font-size: 16px; font-weight: 700; text-transform: uppercase; width: 100%; }
.modal-footer .btn-outline-primary:hover, .modal-footer .btn-outline-primary:focus, .modal-body .btn-outline-primary:hover, .modal-body .btn-outline-primary:focus { background-color: transparent; border: 2px solid var(--golden-yellow); color: var(--bs-white); }

.modal-body .form-control { background-color: var(--bs-black); border: 2px solid var(--bs-white); color: var(--bs-white); font-size: 16px; font-weight: 700; line-height: 30px; padding-left: 60px; }
.modal-body .form-control::placeholder { color: var(--bs-white); }
.modal-body .form-select { background-color: var(--bs-black); background-image: url("../images/arw_wte.svg"); border: 2px solid var(--bs-white); color: var(--bs-white); font-size: 16px; font-weight: 500; line-height: 28px; text-align: center; }
.modal-body .form-select option { border: 2px solid var(--bs-white); text-align: center; }
.modal-body address { background-color: var(--bs-black); border: 2px solid var(--golden-yellow); border-radius: 10px; position: relative; margin-bottom: 0.5rem; padding: 12px 12px; width: 100%; }

.assetbox { background-color: #5C5C5C; border: 1px solid var(--golden-yellow); border-radius: 10px; color: var(--bs-white); font-size: 14px; font-weight: 700; position: relative; margin-bottom: 0.5rem; padding: 4px 10px; width: 100%; }
.assetbox .amount { font-weight: 400; text-align: right; }
.total p  { color: var(--bs-white); font-size: 14px; font-style: normal; font-weight: 700; margin: 0; text-transform: uppercase;  }
.total hr { border-color: var(--golden-yellow); opacity: 1; margin: 5px 0; }
.total h6 { color: var(--bs-white); font-size: 17px; font-weight: 700; text-transform: uppercase; }
.price { background-color: var(--bs-black); border: 1px solid var(--bs-white); border-radius: 10px; color: rgba(255, 255, 255, 0.5); font-size: 18px; font-weight: 700; line-height: 18px; position: relative; margin-bottom: 0.5rem; padding: 4px 10px; width: 100%; }
.price small { color: var(--bs-white); font-size: 11px; font-weight: 500; text-transform: uppercase; }
.finish { text-align: center; }
.finish p { margin-bottom: 15px; }

.latest-pic { border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); display: block; overflow: hidden; }

.switch { background-color: var(--bs-black); border: 2px solid var(--golden-yellow); border-radius: 10px; position: relative; margin-bottom: 0.5rem; padding: 12px 12px; width: 100%; }
.switch .green { color: #02FA1E; font-weight: 700; text-align: right; text-transform: uppercase; }

.balance { color: var(--bs-white); font-size: 16px; font-style: italic; font-weight: 400; text-align: right; }
.terms { height: 165px; }

.btn-request { background-color: var(--golden-yellow); border: 1px solid var(--bs-white); color: var(--bs-black); font-size: 14px; text-transform: capitalize; }
.btn-request:hover, .btn-request:focus { background-color: var(--golden-yellow) !important; border: 1px solid var(--bs-white) !important; color: var(--bs-black); }

.shopbar { background-color: rgba(92, 92, 92, 0.9); clear: both; padding: 15px 0%; width: 100%; }
.shopbar h2 { font-size: 20px; font-weight: 500; }
.shopbar .input-group-text { background-color: var(--bs-black); border: 1px solid var(--golden-yellow); border-radius: 5px 0 0 5px; color: var(--golden-yellow); font-size: 16px; font-weight: 500; font-style: italic; text-transform: capitalize; }
.shopbar .form-select { background-color: var(--bs-black); background-image: url("../images/arw_ylo.svg"); border: 1px solid var(--golden-yellow); border-left: inherit; border-radius: 0 5px 5px 0; color: var(--golden-yellow); font-size: 16px; font-weight: 500; font-style: italic; text-transform: capitalize; }

.product { background-color: rgba(0, 0, 0, 0.54); border: 1px solid var(--golden-yellow); border-radius: 10px; padding: 15px 15px; text-align: center; width: 100%; }
.product h3 { font-size: 20px; font-weight: 700; font-style: normal; }
.product .grid { margin: 0 auto; max-width: 240px; }
.product .btn-outline-primary { background-color: #2E2E2E; border-color: var(--golden-yellow); border-radius: 60px; color: var(--bs-white); font-size: 16px; font-weight: 700; margin-bottom: 0.5rem; text-transform: capitalize; width: 100%; }
.product .btn-outline-primary:hover, .product .btn-outline-primary:focus { background-color: #2E2E2E; border-color: var(--golden-yellow); color: var(--bs-white); }

.product .btn-primary { background-color: var(--golden-yellow); border-color: var(--golden-yellow); border-radius: 60px; color: var(--bs-black); font-size: 16px; font-weight: 700; margin-bottom: 0.5rem; text-transform: capitalize; width: 100%; }
.product .btn-primary:hover, .product .btn-primary:focus { background-color: var(--golden-yellow); border-color: var(--golden-yellow); color: var(--bs-black); }
    
.product .input-group { margin: 0 auto; max-width: 240px; }
.product .input-group .quantity-left-minus { border-radius: 20px 0 0 20px; }
.product .input-group .quantity-right-plus { border-radius: 0 20px 20px 0; }
.product .input-group .form-control { background-color: #2E2E2E; border: 1px solid var(--golden-yellow); color: var(--bs-white); font-size: 20px; height: 38px; text-align: center; }

.load { color: var(--bs-white); font-size: 20px; font-weight: 700; font-style: italic;  text-align: center; text-transform: capitalize; }
.load a { color: var(--bs-white); text-decoration: underline; }

.carousel-control-next, .carousel-control-prev { opacity: 1; }
.carousel-control-prev-icon { background-image: url("../images//arw_lft.svg"); }
.carousel-control-next-icon { background-image: url("../images//arw_rgt.svg"); }

.privacy { border: 1px solid var(--bs-white); border-radius: 10px; clear: both; padding: 15px 30px; width: 100%; }
.privacy H3 { font-weight: 700; font-style: normal; }
.privacy p { font-style: normal; }

.support { background-color: rgba(0, 0, 0, 0.6); border: 1px solid var(--bs-white); border-radius: 10px; margin-bottom: 5%; padding: 25px 20px; width: 100%; }
.support .form-control, .support .form-select { background-color: var(--bs-black); border: 2px solid var(--bs-white); border-radius: 8px; color: var(--bs-white); font: 400 16px var(--primary-font); }
.support .form-control::placeholder { color: rgba(255, 255, 255, 0.6); }
.support .form-select { background-image: url("../images/arw_wte.svg"); }
.support .btn-request { border-width: 2px; border-radius: 15px; font-size: 16px; }
.support .btn-primary { background-color: #2E2E2E; border: 2px solid var(--golden-yellow); border-radius: 15px; color: var(--bs-white); font-size: 16px; font-weight: 400; margin-bottom: 0.5rem; text-transform: capitalize; width: 100%; }
.support p { font-size: 12px; font-style: normal; }

.announcement { clear: both; text-align: center; width: 100%; }
.announcement picture { border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); overflow: hidden; }
.announcement picture img { border-radius: 10px; width: 100%; }
.announcement p { margin: 0; }

.daily { background-color: rgba(0, 0, 0, 0.46); border: 2px solid var(--golden-yellow); border-radius: 30px; color: var(--bs-white); display: inline-block; font-size: 20px; font-style: italic; font-weight: 500; margin: 0 5px; padding: 5px 20px; text-align: center; text-transform: capitalize; max-width: 400px; width: 100%; }
.daily.search { background-color: #5C5C5C; }

.member { background: rgb(92,92,92); background: linear-gradient(0deg, rgba(92,92,92,1) 0%, rgba(190,190,190,1) 50%, rgba(92,92,92,1) 100%); border-radius: 15px; clear: both; padding: 4px 4px; width: 100%; }
.member img { border: 1px solid #707070; border-radius: 13px; }
.view { font-weight: 400; float: right; margin-top: -20px; }

.report { clear: both; width: 100%; }
.report h2 { font-size: 20px; font-style: italic; }
.report .form-select { background-color: var(--bs-black); background-image: url("../images/arw_ylo.svg"); border: 1px solid var(--golden-yellow); border-radius: 10px; color: var(--golden-yellow); font-size: 16px; font-weight: 500; font-style: italic; text-transform: uppercase; }
.report .form-select option { border: 2px solid var(--golden-yellow); color: var(--bs-white); }
.report .calendar { background-color: var(--bs-black); border: 1px solid var(--golden-yellow); border-radius: 10px; color: var(--bs-white); font-size: 16px; font-weight: 500; font-style: italic; padding: 4px 10px; text-align: center; width: 100%; }
.report .btn-outline-primary { background-color: var(--bs-black); border-color: var(--golden-yellow); border-radius: 10px; color: var(--bs-white); font-size: 16px; font-style: italic; font-weight: 700; margin-bottom: 0.5rem; text-transform: capitalize; width: 100%; }
.report .btn-outline-primary:focus { background-color: var(--bs-black); border-color: var(--golden-yellow); color: var(--bs-white); }
.report .table { border: 1px solid var(--golden-yellow); }
.report .table thead tr th { background-color: var(--bs-black); color: var(--bs-white); font-size: 16px; font-style: italic; text-transform: capitalize; }
.report .table tbody tr.odd td { background-color: #5C5C5C; }
.report .table tbody tr.even td { background-color: #4E3F0C; }
.report .table tbody tr td {  color: var(--bs-white); font-size: 16px; font-weight: 500; font-style: italic; text-transform: capitalize; }
.report .table tbody tr td.desc { width: 50%; }
.report .table tbody tr td.amt { font-weight: 700; }
.report .table tbody tr td.unamt { font-weight: 700; text-decoration: underline; }

.report .table .overlay { background-color: #5C5C5C !important; border-bottom: 1px solid var(--golden-yellow) !important; border-top: 0 !important; left: 0; position: absolute; padding: 5px 10px; margin-top: -3px; top: 0; width: 99.99%; z-index: 1; }
.expand { background: url("../images/icn_plus.svg") no-repeat center; display: inline-block; height: 24px; width: 24px; }
.expand:focus { background-image: url("../images/icn_minus_01.svg"); }

.library .table tbody tr.even td { background-color: #5C5C5C; }
.library .table tbody tr td.amt { font-weight: 500; }
.library .table tbody tr td.unamt { font-weight: 500; text-decoration: underline; }

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

@media only screen and (max-width: 767px) {
    h1 { font-size: 19px; }
    h2 { font-size: 18px; }
    p, li { font-size: 14px; }
    .col { flex-basis: auto; }
    .navbar .container { align-items: center; position: relative; }
    .navbar-brand { max-width: 47px; }
    .navbar .d-flex { position: absolute; right: 60px; top: 30px; }
    .navbar .dropdown-menu[data-bs-popper] { left: inherit; right: 0; }
    .navbar-toggler { border: inherit; border-radius: inherit; padding: 0; }
    .navbar-toggler-icon { background: url("../images/hamberger.svg") no-repeat center; }    
    .offcanvas { display: block; }    
    .banner { background-position: top right; background-size: 680px; }
    .banner figure { max-width: 56px; }
    .story { background-position: top center; background-size: 820px; }
    .panel h2 img { max-width: 35px; }
    .experts { background-position: center 80%; background-size: 820px; }
    footer { display: none; }
    .our-product h1 { font-size: 60px; }
    .series h1, .testimonial h1 { font-size: 60px; }
    .keys, .series { background-size: initial; background-position: 50%; }
    .keys h3 { font-size: 18px; }
    .testimonial .box { padding: 8px; }
    .testimonial .box .white {height: 440px; padding: 12px; }
    .testimonial .box figure { padding: 5px; width: 105px; }
    .testimonial .box h3 { font-size: 20px; }
    .gallery h2 { font-size: 18px; }
    .gallery h3, .gallery p, .cart_items .remove { font-size: 10px; }
    .register .input-group-text img { width: 18px; }
    .register .form-select { padding-left: 50px; }
    .cart_items .col, .card .col, .assetbox .col, .price .col { flex-basis: 0; }
    .modal-body address .col { flex-basis: 0; }
    .cart_items h3 { font-size: 15px; }
    .modal-title { font-size: 15px !important; }
    .modal p, .cart_items p, .modal-footer .btn-outline-primary { font-size: 12px; }
    .inventory { min-height: 90vh; }
    .assetbox, .price, .total h6, .switch .green { font-size: 12px; }
    .modal-body .form-control, .modal-body .form-select { font-size: 13px; }
    .modal-body .form-select img { width: 20px; }
    .sm-img img { width: 20px; }
    .latest figure a { font-size: 10px; height: 50px; right: 10px; top: 10px; width: 50px; }
    .product h3 { font-size: 16px; }
    .product .grid, .product .input-group { width: 130px;}
    .product .btn-outline-primary, .product .btn-primary { font-size: 10px; }
    .product .input-group .form-control { font-size: 10px; height: 29px; }
    .privacy { padding: 10px 10px; }
    .support .form-control, .support .form-select { font-size: 13px; }
    .support .btn-request, .support .btn-primary { font-size: 13px; }
    .ticket { margin-top:  15%; }
    .daily { margin: 5px 5px; }
    .table-responsive img { max-width: 750px; }
    .daily { font-size: 16px; }
    .refer h2 { font-size: 18px; }
    .refer .daily { font-size: 11px; max-width: inherit; width: auto; }
    .refer .daily.search { margin-left: 17%; display: inline-block; }
    .report .table thead tr th, .report .table tbody tr td { font-size: 11px; }
    .report .table tbody tr td.amt, .report .table tbody tr td.unamt, .notd { display: none; }
    .library .table tbody tr.even td { background-color: #4E3F0C; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    h1 { font-size: 46px; }
    h2 { font-size: 20px; }
    p, li { font-size: 14px; }
    .navbar .container { align-items: center; position: relative; }
    .navbar-brand { max-width: 47px; }
    .navbar .d-flex { position: absolute; right: 60px; top: 30px; }
    .navbar .dropdown-menu[data-bs-popper] { left: inherit; right: 0; }
    .navbar-toggler { border: inherit; border-radius: inherit; padding: 0; }
    .navbar-toggler-icon { background: url("../images/hamberger.svg") no-repeat center; }    
    .offcanvas { display: block; }
    .mv-top { margin-top: 0; }
    .keys h3 { font-size: 17px; }
    .series h1, .testimonial h1 { font-size: 46px; }
    .testimonial .box figure { padding: 5px; width: 145px; }
    .testimonial .box h3 { font-size: 20px; }
    .gallery h3 { font-size: 17px; }
    .main { margin: 0 auto; }
    .latest figure a { font-size: 10px; height: 50px; right: 10px; top: 10px; width: 50px; }
    .card { font-size: 13px; }
    .num { font-size: 20px; }
    .product h3 { font-size: 16px; }
    .product .grid, .product .input-group { width: 130px;}
    .product .btn-outline-primary, .product .btn-primary { font-size: 12px; }
    .product .input-group .form-control { font-size: 10px; height: 32px; }
    .daily { font-size: 14px; max-width: 268px; }
    .report .pe-5 { padding-right: 12px !important; }
    .report .calendar { font-size: 14px; padding: 8px 10px; }
    .report .calendar img { width: 15px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    h1 { font-size: 58px; }
    h2 { font-size: 20px; }
    p, li { font-size: 14px; }
    .our-product h1 { font-size: 90px; }
    .keys h3 { font-size: 20px; }
    .series h1, .testimonial h1 { font-size: 90px; }
    .testimonial .box figure { padding: 5px; width: 145px; }
    .testimonial .box h3 { font-size: 20px; }
    .gallery h3 { font-size: 20px; }
    .dashboard .navbar-nav .nav-link { margin: 0% 1rem;}
    .card { font-size: 13px; }
    .num, .privacy H3 { font-size: 20px; }
    .daily { font-size: 16px; max-width: 368px; }
    .report .calendar { font-size: 14px; padding: 8px 10px; }
    .report .calendar img { width: 15px; }  
}

@media only screen and (min-width: 1200px) and (max-width: 1380px) {
    .keys .box h3 { font-size: 18px; }
    .privacy H3 { font-size: 20px; }
    .report .form-select, .report .calendar { font-size: 14px; } 
}

@media (min-width: 1600px) {
    h1 { font-size: 80px; }
    h2 { font-size: 36px; }
    h3 { font-size: 24px; }
    h4 { font-size: 16px; }
    p, li { font-size: 20px; }
    .navbar, footer { border-width: 4px; }
    .navbar-nav .nav-link.active { border-width: 10px; }
    .navbar .d-flex { padding-bottom: 8px; }
    .navbar .d-flex a { font-size: 20px; }
    .navbar .d-flex a.lang img { max-width: initial; }
    .navbar-brand, footer picture { max-width: inherit; }
    .btn-prime, .btn-join { border-radius: 15px; font-size: 20px; }
    .btn-join { width: 300px; }    
    footer .social a { font-size: 22px; height: 40px; padding: 4px; width: 40px; }
    .our-product h1 { font-size: 123px; }
    .series h1 { font-size: 171px; }
    .testimonial h1 { font-size: 185px; }
    .testimonial .box figure { width: 220px; }
    .testimonial .box .white { height: 410px; }
    .gallery h2, .gallery h3 { font-size: 32px; }
    .main { max-width: 475px; }
    .register img { max-width: inherit; }
    .register .btn-primary { font-size: 16px; }
    .dashboard .d-flex img { max-width: 48px; }
    .dashboard .d-flex .btn-prime { width: 210px; }
    .dashboard footer ul li { font-size: 14px; line-height: 12px; }
    .state figure a { font-size: 15px; height: 80px; width: 80px; }
    .card { font-size: 19px; border-bottom-width: 10px; }
    .card h6, .inventory h3, .support .btn-request { font-size: 20px; }
    .num { font-size: 32px; }
    .modal p, .cart_items p { font-size: 16px; }
    .shopbar h2, .product h3, .inventory h2, .privacy h3 { font-size: 24px; }
    .member { border-radius: 20px; padding: 5px 5px; }
    .member img { border-radius: 17px; }
    .report h2 { font-size: 24px; }
    .report .form-select, .report .calendar { font-size: 20px; }
    .report .table thead tr th, .report .table tbody tr td { font-size: 20px; }
}