/*global styles start */
@font-face {
    font-family: 'Averta';
    src: url('../fonts/averta/averta-regular-webfont.woff') format('woff');
}
@font-face {
    font-family: 'Arial';
    src: url('../fonts/arial/ARIAL.TTF') format('ttf');
}
@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri/CalibriRegular.ttf') format('ttf');
}
@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/helvetica/Helvetica.ttf') format('ttf');
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('ttf');
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-btn) var(--primary-bg);
}

*::-webkit-scrollbar {
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--primary-bg);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--secondary-btn);
    border-radius: 5px;

}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    margin: 0;
}

html,
body,
p {
    background-color: var(--primary-bg);
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 400;
    font-family: var(--default-font);
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--heading-font);
}

p {
    background-color: inherit;
}

.small,
small {
    font-size: 75%;
}

/* Feather icon base size */
.feather,
[data-feather] {
    height: 1rem;
    width: 1rem;
    display: inline-block;
}

a {
    text-decoration: none;
    color: var(--primary);
    cursor: pointer;
}
hr {
    color: var(--secondary);
    border-top: 2px solid;
}

input,
select,
textarea {
    background-color: var(--light-orange);
    color: var(--secondary);
    border: none;
    border-radius: 0.5rem;
    width: 100%;
    padding: 1rem 2rem;
    margin-bottom: 1.25rem;
    font-size: 1.2rem;
    outline: none;
    opacity: 1;
}
.modal .modal-content {
    background-color: var(--secondary-bg);
}
.modal .modal-header {
    border: none;
}
button:focus {
    box-shadow: none !important;
}
.honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    display: none;
}

.logo {
    max-height: 4em;
}

.primary-btn-full-size {
    display: block;
    width: 100%;
    background-color: var(--primary-btn);
    border: none;
    color: var(--primary-bg);
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px 10px;
    text-align: center;
    border-radius: 5px;
}

.primary-btn-outline {
    background-color: inherit;
    border: 2px solid var(--primary-btn);
    color: var(--primary-btn);
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 11px 10px;
    text-align: center;
    border-radius: 5px;
}

.secondary-btn-full-size {
    display: block;
    width: 100%;
    color: var(--primary-bg);
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    background-color: var(--secondary-btn);
    padding: 15px 10px;
    text-align: center;
    border-radius: 5px;
}

.secondary-btn-outline {
    width: 100%;
    color: var(--secondary-btn);
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid var(--secondary-btn);
    background-color: inherit;
    padding: 13px 10px;
    text-align: center;
    border-radius: 5px;
}

.btn-secondary {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.1rem 0.8rem;
    text-align: center;
    background-color: var(--secondary-bg);
    color: var(--secondary);
    border-radius: 0.25rem;
    border: none;
}

.btn-secondary:hover {
    background-color: var(--secondary);
    color: var(--secondary-bg);
}

.btn-primary {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.1rem 0.8rem;
    text-align: center;
    background-color: var(--primary-btn);
    color: var(--primary-bg);
    border-radius: 0.25rem;
    border: none;
}

.btn-primary:hover {
    background-color: var(--primary-btn);
    color: var(--primary-bg);
}
.btn-link, .btn-link:hover, .btn-link:focus {
    color: var(--primary-btn);
    line-height: 1;
    font-size: 0.8rem;
}
.badge-secondary {
    background-color: var(--secondary);
    color: var(--secondary-bg);
    border-radius: 0.5rem;
    border: none;
    padding: 0.25rem 1.25rem;
    font-size: 1rem;
}
table {
    --bs-table-bg: inherit !important;
}
table tr {
    border-color: var(--primary-light) !important;
}
.image-radio input[type="radio"] {
    display: none;
}

.image-radio {
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

.image-radio img {
    border: 0.25rem solid transparent;
    border-radius: 5px;
    width: auto;
    height: 60px;
    transition: border-color 0.3s;
    cursor: pointer;
}

.image-radio input[type="radio"]:checked+img {
    border-color: var(--primary-btn);
}

.image-radio label span {
    display: block;
    margin-top: 5px;
    font-size: 1rem;
    font-weight: bold;
    color: var(--primary);
}

.image-radio input[type="radio"]:checked+img+span,
.image-radio:hover span {
    color: var(--primary-btn);
}

button:disabled {
    opacity: 0.75;
}

section {
    padding: 1.5rem;
}

section h1 {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 20px;
}

.form-control {
    color: var(--primary);
}

.form-control:focus-visible,
.form-control:focus {
    box-shadow: none;
}

.form-control::placeholder,
.form-control::-moz-placeholder {
    color: var(--primary);
}

/* global style end */
/*header style start */
header nav.navbar {
    background-color: var(--secondary-bg);
    color: var(--primary);
}

header .search {
    background: var(--primary-bg) !important;
    border: none;
    border-radius: var(--border-radius);
    padding: 0.25rem;
    margin: 0;
}

header .navbar-nav .nav-link {
    font-size: 1.25rem;
    padding: 0 0.35rem !important;
    color: var(--primary);
}

header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link:focus,
header .navbar-nav .nav-link:active,
header .navbar-nav .nav-link.active {
    color: var(--primary-btn);
}

header .navbar-brand .logo {
    max-height: 2.5rem;
}

header .navbar-nav .dropdown-menu {
    background-color: var(--secondary-bg);
    border: none;
    border-radius: 0;
    width: fit-content;
    min-width: fit-content;
}

header .navbar-nav .dropdown-menu .dropdown-item {
    color: var(--primary);
    font-size: inherit;
}

header .navbar-nav .dropdown-menu .dropdown-item:hover,
header .navbar-nav .dropdown-menu .dropdown-item:focus,
header .navbar-nav .dropdown-menu .dropdown-item:active,
header .navbar-nav .dropdown-menu .dropdown-item.active {
    color: var(--primary-btn);
    background-color: inherit;
}

header .navbar-nav .nav-link .feather {
    height: 1.25rem;
    width: 1.25rem;
    margin-top: -0.4rem;
}

header .offcanvas {
    background-color: var(--secondary-bg);
}

header .offcanvas .dropdown-menu {
    inset: unset !important;
    transform: none !important;
    top: 45px !important;
    left: 57px !important;
}

header #offcanvasMenu {
    width: fit-content !important;
}

header #offcanvasMenu .navbar-nav .nav-link {
    padding: 1.5rem 3rem !important;
    border-bottom: 1px solid var(--primary-bg);
}

header #offcanvasSearch {
    height: fit-content !important;
}

header button,
header button:hover,
header button:active,
header button:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/*header style end */
/* slick slider start */
.slick-slider {
    cursor: all-scroll;
}

ul.slick-dots {
    position: relative;
    top: -40px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

ul.slick-dots li {
    display: inline-block;
    cursor: pointer;
}

ul li:only-child {
    display: none;
}

ul.slick-dots li button {
    background: var(--primary-bg);
    font-size: 0;
    padding: 3px 12px;
    border-radius: var(--border-radius-max);
    color: transparent;
    margin-left: 5px;
    border: none;
    opacity: 0.5;
}

ul.slick-dots li.slick-active button {
    opacity: 1;
}

/* slick slider end */
.hero-slider {
    padding: 15px 10px 0px 10px;
}

.hero-slider img {
    height: 100%;
    width: 100%;
    max-height: 31em;
}

.product-category .category {
    padding: 0 0.5rem;
    cursor: all-scroll;
}

.product-category .category img {
    width: 100%;
    height: auto;
    max-height: 17.25em;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.product-category .category h3 {
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: capitalize;
    text-align: center;
    padding-top: 0.25rem;
    cursor: pointer;
}

.ad-banner .slider img {
    width: 100%;
    height: 100%;
    max-height: 22em;
    border-radius: var(--border-radius);
}

.product-list .product {
    padding: 0.5rem 0.25rem;
}

.product-list .product img {
    width: 100%;
    height: auto;
    max-height: 17.25em;
}

.product-list .product p {
    font-size: 0.875rem;
    line-height: initial;
    font-weight: 500;
    text-align: left;
    text-transform: capitalize;
    padding: 0.5rem 0 0.5rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
}

.product-list .product .price {
    font-size: 1.25rem;
    font-weight: 100;
    text-align: left;
    padding-left: 0.375rem;
}

.product-list .product .price img {
    height: 1rem;
    width: auto;
    border-radius: 0;
}

.reels .reel {
    padding: 0px 20px;
    position: relative;
}

.reels .reel .thumbnail {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    border-radius: var(--border-radius);
}

.reels .reel iframe {
    width: 100%;
    height: 80vh;
    border-radius: var(--border-radius);
}

.reels .reel .play {
    position: absolute;
    left: 40%;
    top: 45%;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.reels .reel .loader {
    position: absolute;
    top: 45%;
    left: 40%;
    width: 50px;
    height: 50px;
    display: none;
}

.reels .slider .slick-dots {
    top: 0.8rem;
}

.reels .slider .slick-dots li button {
    background: var(--primary-light);
}

.gurantee {
    padding: 15px 10px 60px 10px;
}

.gurantee img {
    width: 100%;
    height: 254px;
}

.footer {
    background-color: var(--secondary-bg);
    color: var(--secondary);
    font-size: initial;
}

.footer div.row {
    padding: 1.25px 0px 3.75px 0px;
}

.footer .about img {
    max-height: 5rem;
    padding-bottom: 20px;
}

.footer .about h5 {
    font-size: 14px;
    color: var(--light-primary);
}

.footer h2 {
    font-size: 25px;
    font-weight: bold;
    text-transform: capitalize;
    padding-bottom: 10px;
}

.footer .about .newsletter input {
    background: var(--primary-bg);
    border: none;
    border-radius: var(--border-radius-max);
    padding: 10px;
    width: auto;
    margin: 0;
}

.footer .about .newsletter input:focus-visible {
    outline: none;
}

.footer .about .newsletter button {
    background-color: var(--primary-btn);
    color: var(--primary-bg);
    border: 0;
    border-radius: var(--border-radius-max);
    padding: 8px 15px;
    font-size: 16px;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .menu ul li:not(:last-child) {
    padding-bottom: 5px;
}

.footer .menu ul li a {
    color: inherit;
    text-transform: capitalize;
}

.footer .menu ul li a:hover {
    color: var(--primary-btn);
}

.footer .contact ul li {
    display: flex;
}

.footer .contact ul li:not(:last-child) {
    padding-bottom: 1rem;
}

.footer .contact ul li .feather {
    margin-right: 0.5rem;
    stroke: var(--light-primary);
}

.footer .contact ul li a {
    color: var(--light-primary);
}

.footer .copyright p {
    background-color: inherit;
    color: inherit;
    text-align: center;
}
.footer .copyright p a {
    color: inherit;
}

/* product page */
.product .left .thumbnail-slider .thumbnail-slide,
.product .left .full-size {
    position: relative;
}

.product .left .thumbnail-slider .thumbnail-slide {
    padding-right: 5px;
    height: 82.7px;
}

.product .left .thumbnail-slider {
    padding: 20px 0 20px 0;
    justify-content: center;
    margin: 0;
}

.product .left .thumbnail-slider img {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-min);
    cursor: pointer;
    opacity: 0.5;
}

.product .left .thumbnail-slider .thumbnail-slide.active img {
    opacity: 1;
    cursor: default;
}

.product .left .thumbnail-slider .thumbnail-slide .play {
    position: absolute;
    left: 35%;
    top: 35%;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.product .left .thumbnail-slider .thumbnail-slide .loader,
.product .left .thumbnail-slider .thumbnail-slide .iframe {
    display: none;
}

.product .left .full-size img {
    width: 100%;
    height: 100%;
    max-height: 25.5em;
    border-radius: var(--border-radius);
}

.product .left .full-size img.thumbnail,
.product .left .full-size iframe {
    width: 100%;
    height: 25.5em;
    border-radius: var(--border-radius);
}

.product .left .full-size .play {
    position: absolute;
    left: 40%;
    top: 45%;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.product .left .full-size .loader {
    position: absolute;
    top: 45%;
    left: 40%;
    width: 50px;
    height: 50px;
    display: none;
}

.product .left .why-us {
    background-color: var(--olive);
    border-radius: var(--border-radius-min);
    padding: 15px 15px 35px 15px;
}

.product .left .why-us h3 {
    text-align: center;
    font-size: 25px;
}

.product .left .why-us img {
    width: 100%;
}

.product .right .title {
    font-size: 25px;
    font-family: "Calibri";
    font-weight: 500;
    text-transform: capitalize;
    text-align: left;
    padding-left: 1.25rem;
}

.product .right .share {
    float: right;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.product .right .share img {
    height: 15px;
    width: auto;
}

.product .right .price {
    font-size: 2.5rem;
    font-weight: 500;
    padding: 0 0 0.5rem 1.25rem;
}

.product .right .price img {
    height: 40px;
    width: auto;
}

.product .right .price .mrp {
    font-size: 1.25rem;
    color: var(--dark-red);
}

.product .right .size-chart input[type="radio"],
.product .right .color-chart input[type="radio"] {
    display: none;
}

.product .right .size-chart label {
    display: inline-block;
    padding: 5px 20px;
    border: 1px solid var(--secondary-bg);
    background-color: var(--primary-bg);
    cursor: pointer;
    transition: border-color 0.3s ease;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.product .right .size-chart label:hover {
    border: 1px solid var(--primary);
}

.product .right .size-chart input[type="radio"]:checked+label {
    border: 2px solid var(--primary);
    padding: 4px 19px;
}

.product .right .size-chart p,
.product .right .color-chart p,
.product .right .quantity p {
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 5px 0;
}

.product .right .attr {
    padding: 10px 0 10px 20px;
}

.product .right .color-chart label {
    display: inline-block;
    padding: 15px;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.product .right .color-chart label:hover {
    border: 1px solid var(--primary);
    padding: 14px;
}

.product .right .color-chart input[type="radio"]:checked+label {
    border: 2px solid var(--primary);
    padding: 13px;
}

.quantity button {
    background-color: var(--primary);
    color: var(--primary-bg);
    border: none;
    border-radius: 100%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bolder;
    padding: 4px 10px;
    text-align: center;
    position: absolute;
    transition: background-color 0.3s ease;
}

.quantity button#minus:hover {
    background-color: var(--dark-red);
}

.quantity button#plus:hover {
    background-color: var(--dark-green);
}

.quantity button#minus {
    left: 15px;
}

.quantity button#plus {
    right: 15px;
}

.quantity input {
    border: 1px solid var(--primary);
    border-radius: var(--border-radius-max);
    font-size: 20px;
    text-align: center;
    padding: 5px 40px;
    -moz-appearance: textfield;
    outline: none;
}

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity div.col-auto {
    display: flex;
    vertical-align: middle;
    align-items: center;
    position: relative;
}

.product .right .checkout button {
    border-radius: var(--border-radius);
    padding: 15px 55px;
    font-size: 20px;
    color: var(--primary-bg);
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    border: none;
}

.product .right .checkout button#add-to-cart {
    background-color: var(--yellow);
}

.product .right .checkout button#buy-now {
    background-color: var(--orange);
}

.product .right .review .rating h2 {
    font-size: 24px;
    color: var(--black-green);
    font-weight: bold;
}

.product .right .review .stars img {
    height: 26px;
}

.product .right .review .count p {
    font-size: 16px;
    padding: 5px 0;
    color: var(--black-green);
}

.product .right .highlights {
    background-color: var(--secondary-bg);
    border-radius: var(--border-radius);
    padding: 20px;
    width: fit-content;
}

.product .right .highlights p {
    background-color: inherit;
    color: var(--red);
    font-size: 15px;
}

.product .right .highlights button#pincode {
    background-color: var(--red);
    color: var(--primary-bg);
    padding: 2px;
    font-size: 12px;
    float: right;
    border: none;
}

.product .right .highlights ul {
    padding: 10px 5px 0 5px;
    margin: 0;
    list-style-type: none;
}

.product .right .highlights ul li {
    text-transform: uppercase;
    font-size: 15px;
    color: var(--primary);
    position: relative;
    padding-left: 20px;
    margin: 10px 0;
}

.product .right .highlights ul li::before {
    content: "";
    display: inline-block;
    background: url('../images/icons/green-tick.png') no-repeat;
    width: 16.2px;
    height: 15px;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.product .right .description .nav-tabs {
    border: none;
}
.product .right .description .nav-link {
    font-size: 1.5rem;
    text-align: center;
    background-color: var(--primary-bg);
    color: var(--primary);
    padding: 1rem 3rem 1rem 1.5rem;
    border: 2px solid var(--secondary-bg);
    border-radius: var(--border-radius-min) var(--border-radius-min) 0 0;
    margin-top: 10px;
}
.product .right .description .nav-link.active {
    background-color: var(--secondary-bg);
}

.product .right .description .tab-pane {
    background-color: var(--secondary-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    border-top-left-radius: 0;
}

.product .right .description p {
    background-color: inherit;
}

/* similar products */
.similar-products h1 {
    text-transform: capitalize;
}

.similar-products .product {
    padding: 0.5rem 0.25rem;
}

.similar-products .slider .product {
    cursor: all-scroll;
}

.similar-products .product img {
    height: auto;
    max-height: 17.25em;
    width: 100%;
    cursor: pointer;
}

.similar-products .more {
    margin: 80px 0 40px 0;
    text-align: center;
}

.similar-products .more a {
    border-radius: var(--border-radius-max);
    background-color: var(--secondary-bg);
    font-size: 16px;
    padding: 5px 20px;
    font-weight: lighter;
}

/* footer contact */
.footer-contact {
    background-color: var(--secondary-bg);
    text-align: center;
    align-items: center;
    padding: 25px 80px 50px 80px;
}

.footer-contact .feather {
    height: 1.57rem;
    width: 1.57rem;
    stroke: var(--secondary);
}

.footer-contact h3 {
    font-size: 1.5rem;
    color: var(--secondary);
    font-weight: bold;
    padding: 5px 0 15px 0;
}

.footer-contact a {
    font-size: 15px;
    color: var(--light-primary);
}

.footer-contact ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.footer-contact ul li {
    padding-left: 20px;
}

.footer-contact ul li:first-child {
    padding-left: 0;
}

.footer-contact ul.app li img {
    height: 20px;
}

.footer-contact ul.social li img {
    height: 16px;
}

.footer-small {
    padding: 25px 40px 25px 40px;
}

.footer-small .logo img {
    height: 23px;
}

.footer-small .menu ul {
    list-style-type: none;
    display: flex;
    padding: 0;
    margin: 0;
    float: left;
}

.footer-small .menu ul li {
    position: relative;
    padding: 0 20px 0 34px;
}

.footer-small .menu ul li:first-child {
    padding-left: 0;
}

.footer-small .menu ul li:not(:first-child)::before {
    content: "";
    display: inline-block;
    background-color: var(--secondary-bg);
    padding: 7px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.footer-small .menu ul li a {
    font-size: 20px;
    color: var(--secondary);
    font-weight: bold;
    text-transform: capitalize;
}

.footer-small .copyright p {
    font-size: 20px;
    color: var(--secondary);
    background: inherit;
    float: right;
}

.footer-small .copyright p a {
    color: var(--secondary);
}

/* category page */
.category-list .category {
    background-color: var(--secondary-bg);
    border-radius: var(--border-radius);
}

.category-list .category img {
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius-min);
    padding: 1rem;
}

.category-list .category h3 {
    font-size: 2rem;
    font-weight: bolder;
    text-transform: uppercase;
    padding: 4rem 0;
    margin: 0;
}

/* shop page */
.shop .sort {
    background-color: var(--light-orange);
    border-radius: var(--border-radius-min);
    padding: 10px 15px;
    float: right;
    font-size: 20px;
}

.shop .sort select {
    background-color: var(--light-orange);
    border: none;
    font-weight: bold;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url(../images/icons/dropdown.png);
    background-repeat: no-repeat;
    background-position: right .7em top 75%, 0 0;
    background-size: 20px auto, 100%;
    width: auto;
    padding: 0 3rem 0 0;
    margin: 0;
    cursor: pointer;
}

.shop .sort select::-ms-expand {
    display: none;
}

.shop .filter {
    padding: 20px 0;
    margin: 0;
}

.shop .filter h4#title {
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    float: left;
    margin: 0;
}

.shop .filter button#clear {
    font-size: 18px;
    text-transform: uppercase;
    color: var(--dark-red);
    background: transparent;
    border: none;
    float: right;
    padding: 0;
}

.shop .filter .options {
    margin: 20px 0;
    padding: 20px 0;
    border-left: 0;
    border-bottom: 0;
    border-top: 4px;
    border-right: 2px;
    border-color: var(--secondary);
    border-style: solid;
}

.shop .filter .options h4 {
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
}

.shop .filter .options ul {
    list-style: none;
    padding: 0;
}

.shop .filter .options ul li:not(:last-child) {
    padding-bottom: 10px;
}

.shop .filter .options ul li {
    font-size: 20px;
    text-transform: capitalize;
    cursor: pointer;
}

.shop .filter .options ul.color li .checkbox-container .checkmark {
    border: none;
}

.shop .filter .options ul.color li .checkbox-container input:checked+.checkmark {
    border: 2px solid var(--primary);
}

/* checkbox custom */
.checkbox-container {
    display: flex;
    align-items: center;
    position: relative;
    user-select: none;
    cursor: pointer;
}

.checkbox-container input[type="checkbox"],
.checkbox-container input[type="radio"] {
    opacity: 0;
    appearance: none;
    display: none;
}

.checkmark {
    position: absolute;
    left: 0;
    height: 1rem;
    width: 1rem;
    background-color: var(--primary-bg);
    border: 2px solid var(--primary);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.checkbox-container:hover .checkmark {
    background-color: var(--primary);
}

.checkbox-container input:checked+.checkmark {
    background-color: var(--primary);
}

.checkmark:after {
    content: "\2714";
    transition: all 0.6s ease;
    transform: rotate(10deg);
    font-size: 0.9rem;
    color: var(--primary-bg);
    text-align: center;
    display: none;
}

.checkbox-container input:checked+.checkmark:after {
    display: block;
}

.checkbox-container label {
    margin-left: 20px;
    color: var(--primary);
    cursor: pointer;
}

/* cart page */
.cart .delivery {
    padding-bottom: 30px;
}

.cart .delivery img {
    height: 80%;
    width: 80%;
}

.cart .products hr {
    width: 100%;
    text-align: center;
    opacity: 1;
    border-top: 1px solid var(--primary);
}

.cart .products .product .image img {
    max-height: 100%;
    width: 100%;
}

.cart .products .product .details p {
    font-size: 1.25rem;
    padding-bottom: 0.5rem;
}

.cart .products .product .details .row {
    margin: 0;
}

.cart .products .product .details .variant {
    font-size: 1rem;
    font-weight: 400;
    padding: 10px 0;
    text-transform: uppercase;
}

.cart .products .product .details .variant b {
    color: var(--dark-red);
}

.cart .products .product .details .price {
    font-size: 1.25rem;
    font-weight: 400;
    padding: 10px 0;
}

.cart .products .product .details .price b {
    font-size: 1.25rem;
}

.cart .products .product .details .quantity {
    padding: 10px 0;
}

.cart .products .product .details .quantity div.row {
    float: right;
}

.cart .products .product .details .quantity input {
    font-size: 18px;
    padding: 2px 30px;
}

.cart .products .product .details .quantity button {
    font-size: 13.6px;
    padding: 2px 8px;
}

.cart .products .product .details .delete {
    padding: 0;
    float: right;
    cursor: pointer;
}

.cart .products .product .details .delete img {
    height: 22px;
}

.cart .checkout {
    text-align: center;
}

.cart .checkout h1 {
    padding: 0;
    margin: 0;
    font-size: 40px;
}

.cart .checkout p {
    font-size: 16px;
}

.cart .checkout .summary {
    padding: 30px 0;
}

.cart .checkout .summary .left {
    text-align: left;
    margin-bottom: 10px;
    font-size: 18px;
}

.cart .checkout .summary .right {
    text-align: right;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
}

.cart .checkout .summary hr {
    margin: 10px 0 10px 10px;
    border-top: 3px dashed var(--primary);
    width: 95%;
    opacity: 1;
}

/* checkout login page */
section.checkout {
    padding: 40px 80px;
}

section.checkout .left h2,
section.login h2 {
    font-size: 1.5rem;
    font-weight: bold;
}

section.checkout .left {
    padding: 10px 60px 0px 30px;
}

section.checkout .left .step {
    border-top: 1px solid var(--secondary-bg);
    position: relative;
}

section.checkout .left .step .left {
    padding: 20px 0px 20px 20px;
}

section.checkout .left .step .left .step-label {
    color: var(--primary);
    font-size: 1.6rem;
    font-family: 'Helvetica';
    font-weight: 400;
}

section.checkout .left .step.active .left {
    background-color: var(--secondary-bg);
}

section.checkout .left .step .right {
    padding: 40px 20px;
}

section.checkout .left .step .right #mobile,
section.checkout .left .step .right #otp>div {
    padding-left: 60px;
}

section.checkout .left .step .right #otp>div .otp-timer,
section.login #otp>div .otp-timer {
    color: var(--secondary);
}

section.checkout .left .step .right #otp .mobile-confirm p,
section.checkout .left .step .right #otp .mobile-confirm button,
section.login #otp .mobile-confirm p,
section.login #otp .mobile-confirm button {
    color: var(--secondary);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
}

section.checkout .left .step.address .right .checkmark {
    height: 2rem;
    width: 2rem;
    background-color: var(--primary-bg);
    border: 2px solid var(--primary-btn);
    border-radius: 100%;
}

section.checkout .left .step.address .right .checkmark::after {
    font-size: 1.8rem;
}

section.checkout .left .step.address .right .checkmark:hover,
section.checkout .left .step.address .right input:checked+.checkmark {
    background-color: var(--primary-btn);
}

section.checkout .left .step.login .right #mobile input#txtMobile,
section.login #mobile input#txtMobile {
    text-transform: full-width;
    text-align: center;
}
section.checkout .left .step.login .right #otp input#txtOtp,
section.login #otp input#txtOtp {
    text-transform: full-width;
    text-align: center;
    width: fit-content;
}
section.checkout .left .step.login .right #mobile input#txtMobile::placeholder,
section.login #mobile input#txtMobile::placeholder {
    text-transform: full-width;
    text-align: center;
    width: fit-content;
}
section.checkout .left .step.login .right #otp input#txtOtp::placeholder,
section.login #otp input#txtOtp::placeholder {
    text-transform: full-width;
    text-align: center;
    width: fit-content;
}

section.checkout .left .step .right input:focus,
section.checkout .left .step .right select:focus,
section.checkout .left .step .right textarea:focus,
section.login input:focus {
    border-bottom: 1px solid var(--primary);
}

section.checkout .left .step .right input::placeholder,
section.checkout .left .step .right select::placeholder,
section.checkout .left .step .right textarea::placeholder,
section.login input::placeholder {
    color: var(--secondary);
    font-size: 1.2rem;
    opacity: 1;
}

section.checkout .left .step .right #otp .otp-timer,
section.login #otp .otp-timer {
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    color: var(--secondary);
}

section.checkout .left .step::before {
    content: attr(data-step);
    position: absolute;
    font-size: 1rem;
    line-height: 1;
    color: var(--primary-bg);
    opacity: 1;
    top: 0px;
    left: -2rem;
    background-color: var(--primary-btn);
    padding: 0.1rem 0.4rem;
    border-radius: 100%;
}

section.checkout .left .step.complete::before {
    content: '';
    background-image: url('../images/icons/green-tick.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.5rem;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

section.checkout .left .step:first-child::before {
    top: -15px;
}

section.checkout .left .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15%;
    left: -20px;
    height: 85%;
    width: 2px;
    background-color: var(--secondary-bg);
}

section.checkout .left .step.active:not(:last-child)::after {
    top: 5%;
    height: 95%;
}

section.checkout .left .step .right p {
    color: var(--secondary);
    font-size: 1.2rem;
    line-height: initial;
}

section.checkout .right .summary {
    font-size: 20px;
    font-weight: 500;
    border: 0;
    border-bottom: 1px solid var(--secondary-bg);
    padding-bottom: 10px;
}

section.checkout .right .summary img {
    float: right;
    height: 8px;
    margin-top: 8px;
}

section.checkout .right .summary#price-summary {
    padding-top: 1.8rem;
    border: 0;
}

section.checkout .right hr {
    border-top: 2px dashed var(--secondary);
    opacity: 1;
    margin: 20px 0;
}

section.checkout .right .price {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

section.checkout .right .price img {
    height: 12px;
    margin-top: -2px;
}

section.checkout .right .price span {
    float: right;
}

section.checkout .right button#pay {
    margin: 15px 0;
}

section.checkout .right button#pay img {
    height: 13px;
    filter: invert(100%);
    vertical-align: baseline;
}

section.checkout .right .secure-gurantee {
    text-align: center;
    font-size: 18px;
    color: var(--secondary);
}

section.checkout .right .secure-gurantee img {
    height: 14px;
    vertical-align: baseline;
    margin-right: 5px;
}

.accordion-button,
.accordion-button:not(.collapsed),
.accordion-button:focus {
    background-color: var(--light-orange);
    color: var(--primary);
    box-shadow: none;
}

section.order>div {
    background-color: var(--secondary-bg);
    padding: 2rem;
    margin: 2rem;
}

section.order .confirmed img {
    max-height: 80px;
    width: auto;
}

section.order .confirmed .feather {
    height: 80px;
    width: auto;
}

section.order .confirmed h1 {
    text-transform: capitalize;
    color: var(--dark-green);
    font-size: 2rem;
}

section.order .detail a.secondary-btn-outline {
    font-size: 1rem;
    padding: 0.25rem 1rem;
}

section.order .detail hr {
    color: var(--secondary);
    border-top: 5px solid;
    margin: 2rem 0;
}

section.order .detail .payment img {
    max-height: 40px;
    width: auto;
}

section.user .left {
    background-color: var(--secondary-bg);
    padding: 3rem 0;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--border-radius);
}
section.user .offcanvas {
    width: max-content;
    height: max-content;
    top: 10%;
    background: transparent;
}
section.user .offcanvas .offcanvas-body {
    padding: 0;
}

section.user .left .user img {
    height: 5rem;
    width: 5rem;
    border-radius: 100%;
}
section.user .left ul.navbar-nav {
    padding: 0 3rem 0 1.5rem;
}
section.user .left ul.navbar-nav li.nav-item .nav-link {
    font-size: 1.5rem;
    line-height: 2;
}
section.user .left ul.navbar-nav li.nav-item .nav-link .feather {
    height: 1.5rem;
    width: 1.5rem;
}
section.user .left ul.navbar-nav li.nav-item .nav-link:hover,
section.user .left ul.navbar-nav li.nav-item .nav-link.active {
    color: var(--primary-btn);
}

section.user .right {
    width: 100%;
    background-color: var(--secondary-bg);
    padding: 1.5rem 0;
    margin: 3rem auto;
    box-shadow: -3px 0 3px 0px rgba(0, 0, 0, 0.1);
}

section.user .right h1 {
    font-size: 1.5rem;
    color: var(--primary);
    text-transform: none;
    text-align: left;
    padding: 0;
    margin: 0;
}
.progress {
    height: 0.25rem;
    background-color: var(--primary-bg);
    border-radius: var(--border-radius-min);
}
.progress .progress-bar {
    background: linear-gradient(90deg, var(--orange) 80%, var(--light-orange) 100%);
    background-color: var(--primary-btn);
}
.progress .progress-bar.completed {
    background: var(--primary-btn);
}
section.user .right .profile-item {
    display: flex;
    align-items: center;
    padding: 1rem 3rem;
    cursor: pointer;
}

section.user .right .icon {
    height: 3rem;
    width: 3rem;
    margin-right: 1rem;
}

section.user .right p {
    flex-grow: 1;
    font-size: 1.5rem;
    line-height: 2;
}

section.user .right .profile-item small {
    color: var(--orange);
}

@media (max-width:767px) {
    .product .left .full-size {
        padding-left: 4em;user
        padding-right: 4em;
    }

    section.checkout .left .step .right #mobile,
    section.checkout .left .step .right #otp>div {
        padding-left: 0;
    }
}

@media (max-width:720px) {
    .product .left .full-size {
        padding-left: 3.5em;
        padding-right: 3.5em;
    }

    .product .right .quantity button#minus {
        left: 10px;
    }

    .product .right .quantity button#plus {
        right: 10px;
    }

    .product .right .share {
        font-size: 0px;
    }

    .footer-small .menu ul li {
        padding: 0 20px 0 34px;
    }

    .cart .delivery img {
        height: 100%;
        width: 100%;
    }

    section.checkout {
        padding: 20px 40px;
    }

    section.checkout .left .step .right {
        padding: 30px 15px;
    }

    section.checkout .right {
        padding: 0px 60px;
    }

    section.checkout .left {
        padding: 1rem 2rem;
    }

    section.checkout .left .step .right #otp .otp-inputs {
        gap: 0.50rem;
        padding: 1rem 2rem;
    }

    .cart .products .product .details p {
        font-size: 1rem;
    }

    .cart .products .product .details .variant {
        font-size: 0.8rem;
    }

    .cart .products .product .details .price {
        font-size: 1rem;
    }

    .cart .products .product .details .price b {
        font-size: 1rem;
    }
}

@media (max-width:540px) {
    .product .left .full-size {
        padding: 0;
    }

    .product .right .title {
        font-size: 20px;
    }

    .product .right .price {
        font-size: 36px;
    }

    .product .right .price img {
        height: 28.8px;
    }

    .product .right .price .mrp {
        font-size: 15px;
    }

    .product .right .quantity button#minus {
        left: 8px;
    }

    .product .right .quantity button#plus {
        right: 8px;
    }

    .product .right .checkout button {
        padding: 1rem 0.5rem;
        font-size: 1rem;
        border-radius: var(--border-radius-min);
    }

    .product .right .review .rating h2 {
        font-size: 20px;
    }

    .product .right .review .stars img {
        height: 22px;
    }

    .product .right .review .count p {
        font-size: 14px;
        padding: 4px 0;
    }

    .product .right .description {
        border-radius: var(--border-radius-min);
        border-top-left-radius: 0;
    }

    .footer-contact {
        padding: 25px 30px 50px 30px;
    }

    .footer-contact h3 {
        font-size: 1rem;
    }

    .footer-small .menu ul {
        display: block;
    }

    .footer-small .menu ul li {
        padding: 5px 0;
        text-decoration: underline;
    }

    .footer-small .menu ul li:not(:first-child)::before {
        display: none;
    }

    .footer-small .logo img {
        height: 21px;
    }

    .footer-small .menu ul li a {
        font-size: 18px;
    }

    .footer-small .copyright p {
        font-size: 18px;
        float: left;
    }

    .shop .sort {
        padding: 10px 15px;
        font-size: 18px;
    }

    .shop .sort select {
        background-size: 18px auto, 100%;
        padding-right: 35px;
    }

    section.checkout .left .step .right {
        padding: 1rem 1.5rem;
    }

    section.checkout .right {
        padding: 0px 50px;
    }

    section.checkout .left .step .right #otp .otp-inputs {
        gap: 0.50rem;
        padding: 1rem 1rem;
    }

    .cart .products .product .details .variant {
        font-size: 0.8rem;
    }

    .cart .products .product .details .price {
        font-size: 1rem;
    }

    section.checkout .left .step .right p {
        font-size: 1rem;
    }

    section.checkout .left .step .right input,
    section.checkout .left .step .right select,
    section.checkout .left .step .right textarea {
        font-size: 1rem;
    }

    section.checkout .left .step .right input::placeholder,
    section.checkout .left .step .right select::placeholder,
    section.checkout .left .step .right textarea::placeholder {
        font-size: 1rem;
    }

    .product-category .category h3 {
        font-size: 1rem;
        font-weight: 400;
    }

    section h1 {
        font-size: 1.25rem;
        padding-bottom: 0.625rem;
        padding-top: 0.625rem;
    }

}

@media (max-width:457px) {
    section {
        padding: 0.5rem 1rem;
    }

    .product .right .details {
        font-size: 22px;
        padding: 10px 40px;
    }

    .product .right .details img {
        height: 12px;
    }

    .product .right .description {
        border-radius: var(--border-radius-min);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .footer {
        padding: 20px;
    }

    .footer div.row {
        padding: 20px 0px 30px 0px;
    }

    .category-list .category h3 {
        font-size: 20px;
        padding: 45px 0;
    }

    .shop .sort {
        padding: 10px 10px;
        font-size: 14px;
    }

    .shop .sort select {
        background-size: 14px auto, 100%;
        padding-right: 30px;
    }

    section.checkout .right {
        padding: 0px 40px;
    }

    section.checkout {
        padding: 20px 30px;
    }

    section.checkout .left .step::before,
    section.checkout .left .step:not(:last-child)::after {
        left: 0;
    }

    .cart .products .product .details .variant {
        font-size: 0.8rem;
    }

    .cart .products .product .details .price {
        font-size: 0.8rem;
    }
}

@media (max-width: 375px) {
    .product .right .price {
        font-size: 28px;
    }

    .product .right .price img {
        height: 22.4px;
    }

    .product .right .price .mrp {
        font-size: 11px;
    }

    .product .right .size-chart label {
        font-size: 16px;
        padding: 5px 16px;
    }

    .product .right .size-chart input[type="radio"]:checked+label {
        padding: 4px 15px;
    }

    .product .right .color-chart label {
        padding: 14px;
    }

    .product .right .color-chart label:hover {
        padding: 13px;
    }

    .product .right .color-chart input[type="radio"]:checked+label {
        padding: 12px;
    }

    .product .right .review .rating h2 {
        font-size: 18px;
    }

    .product .right .review .stars img {
        height: 20px;
    }

    .product .right .review .count p {
        font-size: 12px;
        padding: 4px 0;
    }

    .product .right .description {
        border-radius: var(--border-radius-min);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .product .right .details {
        font-size: 20px;
        padding: 10px 40px;
    }

    .product .right .details img {
        height: 10px;
    }

    .similar-products .product {
        padding: 0 5px;
    }

    .footer-contact {
        padding: 25px 15px 50px 15px;
    }

    .footer-small .logo img {
        height: 17px;
    }

    .footer-small .menu ul li a {
        font-size: 14px;
    }

    .footer-small .copyright p {
        font-size: 14px;
        float: left;
    }

    .category-list .category h3 {
        font-size: 20px;
        padding: 40px 0;
    }

    .shop .sort {
        padding: 10px 8px;
        font-size: 11px;
    }

    .shop .sort select {
        background-size: 11px auto, 100%;
        padding-right: 25px;
    }

    section.checkout .right {
        padding: 0px 30px;
    }

    section.checkout .left {
        padding: 10px;
    }

    .cart .products .product .details .variant {
        font-size: 0.7rem;
    }

    .cart .products .product .details .price {
        font-size: 0.7rem;
    }
}