@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/tiny-slider/css/tiny-slider.css');
:root { --primary-font: 'Nunito', sans-serif, Arial, Helvetica; --secondary-font: 'Future Earth', sans-serif, Arial, Helvetica; --ash: #52637B; --gray: #232323; --gray-1: #404040; --dark-gray: #707070; --green: #61C661; --green-1: #2CB42C; --light-green: #6ADC6A; --cyan: #26ACB3; --off-white: #FBFBFB; }
body { color: var(--bs-black); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; }
a { color: var(--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(--gray); font-family: var(--secondary-font); font-weight: normal; }
h1 { font-size: 20px; text-align: center; }
h3 { font-size: 12px; }
p, li { color: var(--ash); font: 400 14px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }

@font-face { font-family: 'Future Earth'; src: url('../fonts/Future-Earth.woff2') format('woff2'), url('../fonts/Future-Earth.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }

.wrapper { background: rgb(97,198,97); background: linear-gradient(180deg, rgba(97,198,97,30%) 1%, rgba(238,249,238,91%) 25%, rgba(255,255,255,1) 100%); clear: both; width: 100%; }

.navbar { background-color: var(--bs-white); border-image-source: linear-gradient(to left, #26ACB3, #61C661); border-bottom: 10px solid; border-image-slice: 1; border-width: 3px; margin-bottom: 20px; }
.navbar .navbar-nav .nav-link { color: var(--ash); font-size: 13px; font-weight: 500; margin-right: 1rem; text-transform: uppercase; }
.navbar .navbar-nav .nav-link:hover { color: var(--green); }
.navbar .dropdown { display: inline-block; width: 30px; }
.navbar .btn-signin { background-color: var(--cyan); border-color: var(--green); color: var(--bs-white); font-size: 14px; font-weight: 500; text-transform: uppercase; max-width: 140px; width: 100%; }
.navbar .btn-signin:focus { background-color: var(--cyan); border-color: var(--green); color: var(--bs-white); }
.navbar .float-end { width: 185px; }

.dropdown-toggle::after { border: none; }
.dropdown-menu { border: none; border-radius: 5px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 30%); min-width: 70px; }
.dropdown-item { color: var(--ash); font-size: 14px; padding: 0.2rem 0.725rem; }
.dropdown-item.active { background-color: inherit; color: var(--ash); text-decoration: underline; }

.offcanvas { background: rgb(97,198,97); background: linear-gradient(0deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); display: none; max-width: 275px; }
.offcanvas-header { justify-content: end; }
.offcanvas-header .dropdown { font-size: 13px; float: right; margin-right: 20px; width: 50px; }
.offcanvas-header .dropdown-toggle { color: var(--bs-white); }
.offcanvas-header .dropdown-toggle img { filter: brightness(0) invert(1); margin-right: 5px; width: 25px; }
.offcanvas-body { text-align: center; }
.offcanvas-body .profile { background-color: var(--bs-white); border-radius: 100%; box-shadow: 0px 3px 6px rgba(0, 0, 0, 30%); margin: 0px auto 1rem; width: 83px; }
.offcanvas-body .profile img { border-radius: 100%; }
.offcanvas-body ul.menu-nav { list-style: none; margin: 0px 0px 1rem; padding: 0px; }
.offcanvas-body ul.menu-nav li { color: var(--bs-white); font-size: 16px; font-weight: 500; text-transform: uppercase; }
.offcanvas-body ul.menu-nav li a { color: var(--bs-white); display: block; padding: .5rem 0px; }
.offcanvas-body .btn-sign { background-color: var(--light-green); border: none; color: var(--bs-white); font-size: 16px; font-weight: 500; text-transform: uppercase; }
.offcanvas-body .btn-signin:focus { background-color: var(--light-green); border: none; color: var(--bs-white); }
.offcanvas-body .btn-light { color: var(--green-1); font-size: 16px; font-weight: 500; text-transform: uppercase; }
.offcanvas .footer { text-align: center; }
.offcanvas .footer p { color: var(--bs-white); font-size: 11px; text-transform: uppercase; }
.offcanvas .footer hr { border-color: var(--bs-white); opacity: 1; }
.offcanvas .footer img { filter: brightness(0) invert(1); margin: 0px 2px; width: 37px; }

.banner { clear: both; margin-bottom: 40px; width: 100%; }

.feature { clear: both; margin-bottom: 40px; width: 100%; }
.feature picture img { border: 1px solid var(--dark-gray); }

.latest { clear: both; margin-bottom: 5%; width: 100%; }
.latest .box { clear: both; margin-bottom: 1.5rem; width: 100%; }
.latest .box picture { display: block; margin-bottom: 1rem; }
.latest .box picture img { border-radius: 12px; }
.latest p { color: var(--gray-1); text-transform: uppercase; }
.latest .time { font-size: 13px; }
.latest .time img { width: 18px; }
.latest .btn-read { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: none; color: var(--bs-white); font-size: 12px; font-weight: 500; text-transform: uppercase; }
.latest .btn-read:focus { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: none; color: var(--bs-white); }

footer { background-color: var(--off-white); border-image-source: linear-gradient(to left, #26ACB3, #61C661); border-top: 10px solid; border-image-slice: 1; border-width: 3px; clear: both; color: var(--gray-1); font-size: 14px; font-weight: 500; padding: 40px 0px; text-transform: uppercase; width: 100%; }
footer picture img { max-width: 200px; }
footer .follow { text-align: right; }
footer .follow p { font-size: 12px; font-weight: 500; text-transform: uppercase; }
footer .follow img { margin-left: .4rem; max-width: 42px; }

.modal-header img { border-radius: 0.425rem 0.425rem 0px 0px; }
.modal-content { box-shadow: 0px 3px 6px rgba(0, 0, 0, 80%);  }
.modal .input-group-text { background-color: var(--ash); border-color: var(--dark-gray); border-radius: 0px; }
.modal-body { padding: 7% 10%; }
.modal-body .form-label { color: var(--ash); font-size: 14px; font-weight: 500; text-transform: uppercase; }
.modal-body .form-control { border-color: var(--dark-gray); border-radius: 0px; color: var(--ash); font-size: 14px; font-weight: 500; }
.modal-body .reg a { color: var(--ash); font-size: 14px; font-weight: 500; text-decoration: underline; text-transform: uppercase; }
.modal-body .reg .col:last-of-type { text-align: right; }
.modal-body .btn-primary { background-color: var(--ash); border-color: var(--green); border-radius: 10px; font-size: 15px; font-weight: 500; text-decoration: underline; text-transform: uppercase; }
.modal-body .btn-primary:focus { background-color: var(--ash); border-color: var(--green); }
.modal-body p { font-size: 15px; font-weight: 500; text-transform: uppercase; }
.modal-body .btn-outline { background-color: var(--bs-white); border-color: var(--green); color: var(--ash); border-radius: 10px; font-size: 15px; font-weight: 500; text-decoration: underline; text-transform: uppercase; }
.modal-body .btn-outline:focus { background-color: var(--bs-white); border-color: var(--green) !important; border-color: var(--ash); }

.sgup_bg { background: url("../images/snup_bg.jpg") no-repeat center top / cover; }

.signup { background-color: var(--bs-white); border: 2px solid var(--cyan); border-radius: 10px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 70%); clear: both; margin: 15px 0px; padding: 8% 10%; min-height: 500px; max-width: 580px; width: 100%; }
.signup p { margin-bottom: 7%; }
.signup label { color: #97A2AF; font-size: 14px; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; }
.signup .input-group-text { background-color: var(--bs-white); border-color: #82A5BF; }
.signup .input-group-text img { width: 20px; }
.signup .input-group-text.regn { background-color: var(--ash); }
.signup .form-control, .signup .form-select { border-color: #82A5BF; color: var(--ash); font-size: 16px; font-weight: 500; line-height: 28px }
.signup .btn-primary, .signup .btn-register { background-color: var(--ash); border-color: var(--ash); color: var(--bs-white); font-size: 16px; font-weight: 700; line-height: 36px; }
.signup .btn-primary:focus, .signup .btn-register:focus { background-color: var(--ash); border-color: var(--ash); }
.signup .back { color: var(--ash); font-size: 14px; font-weight: 500; text-transform: uppercase; }

.nav-pills { border-bottom: inherit; }
.nav-pills .nav-link { border-radius: 0px; color: var(--gray); font-size: 18px; font-weight: 500; padding: 0.5rem 1.5rem; text-transform: uppercase; }
.nav-pills .nav-link.active { background-color: transparent; border-bottom: 5px solid var(--ash); color: var(--gray); font-weight: 900; }

.tab-content { margin-bottom: 4%; }

.panel { background-color: var(--off-white); border-radius: 5px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); font-size: 14px; margin-bottom: 10px; padding: .5rem 1rem; width: 100%; }
.panel picture { background-color: var(--bs-white); border-radius: 100%; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); display: block; }
.panel p { color: var(--dark-gray); font-size: 16px; font-weight: 700; margin-bottom: 0px; }
.panel p strong { font-weight: 700; }
.panel p span { font-size: 32px; display: block; }
.panel a { color: var(--dark-gray); font-size: 16px; font-weight: 700; text-decoration: underline; }
.panel .last { flex: 0 0 auto; width: 25%; }

.product { background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(218,248,218,1) 100%); box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); margin-bottom: 1rem; width: 100%; }
.product picture img { width: 100%; }
.product p { font-size: 15px; }
.product .btn-cart { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: inherit; border-radius: 5px; color: var(--bs-white); font-size: 13px; font-weight: 500; text-transform: capitalize; }
.product .btn-cart:focus { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: inherit; color: var(--bs-white); }
.product .more { color: var(--dark-gray); font-size: 14px; font-weight: 700; text-decoration: underline; text-transform: capitalize; }

.pagination { float: right; max-width: 322px }
.page-link { background-color: var(--ash); border-color: var(--cyan); color: var(--bs-white); }
.page-link:hover, .page-link:focus { background-color: transparent; border-color: var(--cyan); box-shadow: none; color: var(--bs-white); }
.page-link.active { background-color: var(--cyan); border-color: var(--cyan); color: #222222; }
.page-link:hover { background-color: var(--cyan); }
.page-item:first-child .page-link, .page-item:last-child .page-link { border: 1px solid var(--ash); border-radius: 0px; }
.page-item:first-child .page-link { border-right-color: var(--ash); }
.page-item:last-child .page-link { border-left-color: var(--ash); }

.btn-next { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: inherit; border-radius: 5px; color: var(--bs-white); font-size: 16px; font-weight: 500; text-transform: capitalize; }
.btn-next:focus { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: inherit; color: var(--bs-white); }
.btn-prev { background-color: #ABABAB; color: var(--bs-white); font-size: 16px; font-weight: 500; text-transform: capitalize; }
.btn-prev:focus { background-color: #ABABAB; color: var(--bs-white); }

.filter { clear: both; margin-bottom: 1rem; width: 100%; }
.filter p { font: normal 14px var(--secondary-font); }

.cart { background-color: var(--off-white); border-radius: 5px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); font-size: 14px; margin-bottom: 10px; padding: .5rem 1rem; width: 100%; }
.cart picture { background-color: var(--bs-white); box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); display: block; }
.cart .col-2 { width: 140px; }
.cart p { color: var(--dark-gray); font-size: 16px; margin-bottom: 0px; }
.cart p strong { display: block; }
.cart a { color: var(--dark-gray); font-size: 16px; font-weight: 700; text-decoration: underline; }

.quantity { width: 112px; }
.quantity .btn-minus { background: url("../images/minus.png") no-repeat center / 30px; border: 0px; border-radius: 100% !important; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); height: 30px; width: 30px; }
.quantity .btn-plus { background: url("../images/plus.png") no-repeat center / 30px; border: 0px; border-radius: 100% !important; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); height: 30px; width: 30px; }
.quantity .form-control { border-color: #A8A1A1; border-radius: 5px !important; height: 33px; text-align: center; width: 36px; }

.btn-payment { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: inherit; border-radius: 5px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); color: var(--bs-white); font-size: 14px; font-weight: 500; text-transform: capitalize; width: 180px; }
.btn-payment:hover, .btn-payment:focus { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%) !important; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%) !important; color: var(--bs-white) !important; }
.btn-white { background-color: var(--bs-white); border: inherit; border-radius: 5px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%); color: var(--ash); font-size: 14px; font-weight: 500; margin-left: .5rem; text-transform: capitalize; width: 180px; }
.btn-white:hover, .btn-white:focus { background-color: var(--bs-white) !important; box-shadow: 0px 3px 6px rgba(0, 0, 0, 50%) !important; color: var(--ash) !important; }

.order { clear: both; margin: 30px 0px 5%; width: 100%; }
.order h1 { text-align: left; }

.thead { clear: both; margin: 10px 0px; width: 100%; }
.tdata {  clear: both; margin: 10px 0px; width: 100%; }
.table { margin-bottom: 0rem; width: 100%; }
.table thead tr { background-color: #969696; border: 1px solid #969696; }
.table thead tr th, .table tbody tr td { border-bottom: none; color: #fff; padding: 0.7rem 0.5rem; text-align: left; }
.table thead tr th { font: 700 14px var(--primary-font); text-align: left; text-transform: capitalize; }
.table thead tr th:first-child, .table tbody tr td:first-child { width: 20%; }
.table thead tr th:last-child, .table tbody tr td:last-child { width: 20%; }
.table tbody tr { background-color: #F2ECEC; border: 1px solid #007FE6; }
.table tbody tr td { color: var(--ash); font: 400 14px var(--primary-font); }

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

@media only screen and (max-width: 767px) {
    h1 { font-size: 12px; }
    .wrapper { background: var(--bs-white); }
    .navbar { margin-bottom: 0px; }
    .navbar-brand { max-width: 82px; }
    .navbar-toggler { border: inherit; }
    .navbar-toggler-icon { background: url("../images/hamberger.svg") no-repeat center; }
    .offcanvas { display: block; }
    .banner .col { padding: 0px; }
    .feature picture img { border: none; border-radius: 10px; }
    .latest h3 { font-size: 8px; }
    .latest p { font-size: 10px; margin-top: 5px; }
    .latest .btn-read { font-size: 10px; width: 100%; }
    footer { font-size: 7px; padding: 20px 0px; text-align: center; }
    footer .col { flex-basis: auto; }
    footer picture img { width: 103px; }
    footer .follow { text-align: center; }
    footer .follow img { margin-bottom: 5px; width: 25px; }
    footer .follow p { font-size: 8px; margin-bottom: 5px; }
    .sgup_bg { background: inherit; }
    .signup { border: inherit; border-radius: inherit; box-shadow: inherit; padding: 0px; max-width: 100% }
    .signup picture img { max-width: 70px; }
    .signup p { font-size: 10px; margin-bottom: 10px; text-transform: uppercase; }
    .signup label { font-size: 12px; }
    .signup .form-control, .signup .form-select { border-color: #C1C1C1; font-size: 12px; line-height: 22px; }
    .signup .input-group .form-control, .signup .input-group .form-select { border-left: 0px; }
    .signup .input-group-text { border-color: #C1C1C1; }
    .signup .input-group-text img { width: 14px; }
    .signup .input-group-text.regn { background-color: var(--light-green); }
    .signup .btn-primary { background-color: #ABABAB; border-color: #ABABAB; line-height: 28px; }
    .signup .btn-register { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: inherit; line-height: 28px; }
     .signup .back ,.signup .reg a { color: var(--ash); font-size: 12px; font-weight: 500; text-decoration: underline; text-transform: uppercase; }
    .signup .back { text-decoration: none; }
    .nav-pills .nav-link { border-bottom: 3px solid transparent; font-size: 14px; padding: 0.5rem 0.725rem; }
    .nav-pills .nav-link:focus, .nav-pills .nav-link.active { border-bottom: 3px solid #4EBE7D; }
    .panel { padding: .5rem .5rem; }
    .panel picture { width: 75px; }
    .panel p { font-size: 14px; }
    .panel p span, .panel p strong { font-size: 14px; font-weight: 400; display: inline; }
    .panel a { font-size: 13px; }
    .panel .report { text-align: right; width: 100%; }
    .panel .last { flex: inherit; width: 100%; }
    .panel .last .col:last-child { text-align: right; }
    .product { border-radius: 6px; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1); }
    .product picture img { border-radius: 6px 6px 0px 0px }
    .product p { font-size: 9px; }
    .product .col { flex-basis: auto; text-align: center; }
    .product .more { font-size: 9px; font-weight: 500; }
    .confirm { padding: 7% 15% }
    .confirm p { text-transform: initial; }
    .confirm .btn-primary { background: rgb(97,198,97); background: linear-gradient(90deg, rgba(97,198,97,1) 0%, rgba(38,172,179,1) 100%); border: inherit; border-radius: 4px; line-height: 30px; text-decoration: none; text-transform: capitalize !important; }
    .confirm .btn-outline { background-color: #ABABAB; border: inherit; border-radius: 4px; color: var(--bs-white); line-height: 30px; text-decoration: none; text-transform: capitalize !important; }
    .confirm .btn-outline:focus { background-color: #ABABAB; color: var(--bs-white); }
    .filter { display: none; }
    .cart { padding: .5rem .5rem; }
    .cart .col-2 { width: 120px; }
    .cart picture { box-shadow: none; }
    .cart p { font-size: 11px; }
    .cart p strong { display: inline; }
    .cart .col-auto { width: 100% }
    .cart .col-auto:last-child { text-align: right; }
    .cart a { font-size: 10px; margin-right: 11%; }
    .quantity { float: right; }
    .quantity .btn-minus, .quantity .btn-plus { background-size: 23px; display: inline-block; height: 20px; width: 20px; }
    .quantity .form-control { height: 24px; padding: 0rem; width: 24px; }
    .subtotal p { font-weight: 500; text-align: center; }
    .subtotal p span { font-weight: 700; }
    .btn-payment, .btn-white { box-shadow: none; font-weight: 700; margin-bottom: .5rem; line-height: 30px; width: 100%; }
    .btn-white { border: 1px solid var(--dark-gray); margin: 0; }
    .process { color: #16A86E; }
    .thead, .tdata { margin: 0px; }
    .table { width: 755px; }
    .table thead tr th:first-child, .table tbody tr td:first-child { width: 29%; }
    .table thead tr th:last-child, .table tbody tr td:last-child { width: 29%; }
    .table tbody tr { border: none; }
    .tdata:nth-child(odd) .table tbody tr{ background-color: #F9F9F9; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    h1 { font-size: 16px; }
    h3 { font-size: 8px; }
    .navbar { margin-bottom: 0px; }
    .navbar-brand { max-width: 82px; }
    .navbar-toggler { border: inherit; }
    .navbar-toggler-icon { background: url("../images/hamberger.svg") no-repeat center; }
    .offcanvas { display: block; }
    .latest p { font-size: 12px; }
    .panel { padding: .5rem .5rem; }
    .panel picture { width: 75px; }
    .panel p { font-size: 13px; }
    .panel p span { font-size: 22px; }
    .panel a { font-size: 13px; }
    .panel .last { flex: 0 0 auto; width: auto; }
    .product p { font-size: 12px; }
    .product .btn, .product .more { font-size: 10px; }
    .filter p { font-size: 10px; }
    .cart { padding: .5rem .5rem; }
    .cart p { font-size: 13px; }
    .table thead tr th:first-child, .table tbody tr td:first-child { width: 25%; }
    .table thead tr th:last-child, .table tbody tr td:last-child { width: 25%; }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
    H3 { font-size: 10px; }
    .latest p { font-size: 12px; }
    .product p { font-size: 13px; }
    .product .btn, .product .more { font-size: 10px; }
    .cart p { font-size: 14px; }
}
.form-theme {
    background-color: var(--bs-white);
    border: 2px solid var(--cyan);
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 70%);
    clear: both;
    margin: 15px 0px;
    padding: 1rem;
    height: auto;
    width: 100%;
}
table.custom-table {
    border-spacing: 0 7px !important;
}
table.custom-table tbody tr td {
    color: var(--ash);
    font: 400 14px var(--primary-font);
    border-bottom: 1px solid #007FE6;
}
.form-theme > .card {
    border: 0px;
}
.form-theme > .card > .card-header {
    border: 0px;
    text-align: center;
    background: linear-gradient(360deg, #61c6614d 1%, #eef9eee8 25%, #fff 100%);
}
.card-style{
    background-color: var(--bs-white);
    border: 2px solid var(--cyan);
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 70%);
    clear: both;
    margin: 15px 0px;
    padding: 1rem;
    height: auto;
    width: 100%;
}
.card-style > .card-header {
    border: 0px;
    text-align: center;
    background: linear-gradient(360deg, #61c6614d 1%, #eef9eee8 25%, #fff 100%);
}
.btnDeleteItem {
    color: var(--dark-gray);
    font-size: 16px;
    font-weight: 700;
    text-decoration: underline;
}
.quantity {
    width: 125px;
}
.card-style > .card-header h5 {
    color: var(--gray);
    font-family: inherit;
    font-weight: 500;
}