/*!
Author: Gravity Infotech
Support: infotechgravity@gmail.com
Version: 3.1
*/

/*--------------------------------------------------------------
 # General
 --------------------------------------------------------------*/
 
 
* {
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
     scroll-behavior: smooth;
}

*:focus {
     outline: none !important;
     box-shadow: none !important;
}

body {
     margin: 0px;
     padding: 0px;
}

a {
     text-decoration: none;
     list-style: none;
     list-style-type: none;
     color: #000;
     font-family: var(--font-family);
}

h1,
h2,
h3,
h4,
h5,
h6 {
     text-transform: capitalize;
     margin-bottom: 0px;
     font-family: var(--font-family);
}

h1 {
     font-size: 3.125rem;
}

h2 {
     font-size: 2.441rem;
}

h3 {
     font-size: 1.999rem;
}

h4 {
     font-size: 1.563rem;
}

h5 {
     font-size: 1.25rem;
}

h6 {
     font-size: 1rem;
}

p {
     font-size: 15px;
     margin-bottom: 0px;
     font-family: var(--font-family);
}

.fs-7 {
     font-size: 14px !important;
}

.fs-8 {
     font-size: 12px !important;
}

.fw-300 {
     font-weight: 300 !important;
}

.fw-400 {
     font-weight: 400 !important;
}

.fw-500 {
     font-weight: 500 !important;
}

.fw-600 {
     font-weight: 600 !important;
}

.fw-700 {
     font-weight: 700 !important;
}

.fw-800 {
     font-weight: 800 !important;
}

.row {
     margin: 0px;
}

.rounded-xxl {
     border-radius: 2rem !important;
}

.rounded-none {
     border-radius: 0px !important;
}

.primary {
     background-color: var(--bs-primary);
}

.primary-light {
     background-color: color-mix(in srgb, var(--bs-primary), transparent 96%);
}

.bg-dark {
     background-color: #000;
}

.breadcrumb-sec {
     background-color: #000000;
     padding-top: 7rem !important;
     padding-bottom: 3rem !important;
}

.breadcrumb-item+.breadcrumb-item::before {
     color: lightslategrey;
}

.rounded-none {
     border-radius: 0px !important;
}

.border-bottom-1 {
     border-bottom: 2px solid transparent !important;
}

.top-header-margin {
     padding-top: 10rem !important;
}

.login-buuton {
     background-color: var(--bs-secondary);
     border-radius: 5px;
     padding: 7px 17px;
     color: #fff;
     font-weight: 400;
     text-transform: capitalize;
     display: inline-block;
     transition: .2s all ease-in-out;
     border: none !important;
}


.btn-primary {
     background-color: var(--bs-primary);
     border-radius: 5px;
     padding: 13px 28px;
     color: #fff;
     font-weight: 400;
     text-transform: capitalize;
     display: inline-block;
     transition: .2s all ease-in-out;
     border: none !important;
     border-radius: var(--bs-border-radius-xl);
}

.btn-secondary {
     background-color: var(--bs-secondary);
     border-radius: 5px;
     padding: 13px 28px;
     color: #fff;
     font-weight: 400;
     text-transform: capitalize;
     display: inline-block;
     transition: .2s all ease-in-out;
     border: none !important;
     border-radius: var(--bs-border-radius-xl) !important;
}

.subscribe-input .btn:hover {
     color: #fff;
     background-color: var(--bs-primary);
}

.page-title {
     margin: 0;
     font-size: 26px;
     font-weight: 600;
     line-height: 2.5rem;
     position: relative;
     margin-bottom: 1.5rem;
}

.page-subtitle {
     color: lightslategrey;
     margin-bottom: 1rem;
     font-weight: 400;
}

.title {
     text-transform: capitalize;
     font-weight: 500;
     font-size: 18px;
     margin-bottom: 0px;
     font-family: var(--font-family);
     text-overflow: ellipsis;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     cursor: pointer;
}

.small,
small {
     font-size: 13px;
     font-family: var(--font-family);
     color: lightslategray;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.theme-1-margin-top,
.theme-6-margin-top,
.theme-7-margin-top {
     margin-top: 2rem !important;
}



ul {
     padding: 0px;
}

li {
     list-style-type: none;
}

.input-h {
     padding: 13px 18px;
     font-weight: 400 !important;
     font-size: 14px;
}

.form-control:focus {
     color: var(--bs-body-color);
     background-color: var(--bs-body-bg);
     border-color: #dee2e6;
     outline: 0;
     box-shadow: none;
}

.card {
     overflow: hidden;
}

.card-header {
     background: transparent;
     border-bottom: 1px solid #ebecf1;
     position: relative;
     padding: 17px 20px;
}

.card-footer {
     border: none;
     background: transparent
}

img {
     object-fit: cover;
     width: 100%;
     transition: 0.2s ease-in-out;
}

.line-limit-1 {
     font-family: var(--font-family);
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.line-limit-2 {
     font-size: 13px;
     font-family: var(--font-family);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.line-limit-3 {
     font-family: var(--font-family);
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

span {
     font-family: var(--font-family);
}


.btn:focus-visible {
     color: var(--bs-btn-hover-color);
     background-color: #000 !important;
     border-color: #000 !important;
     outline: 0;
     box-shadow: none !important
}


.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
     color: var(--bs-btn-active-color);
     background-color: #000;
     border-color: var(--bs-btn-active-border-color);
}

.blog-description {
     text-overflow: ellipsis;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     font-size: 12px;
     margin-top: 2px;
     color: lightslategray;
     padding-top: 5px;
}

.btn:hover {
     color: var(--bs-btn-hover-color);
     background-color: transparent;
     border-color: #000;
}


.hover-1:hover {
     background-color: #198754;
     border-color: var(--bs-btn-hover-border-color);
}

/*--------------------------------------------------------------
 # Header Start
 --------------------------------------------------------------*/
.header-main {
     background-color: var(--bs-primary);
}

.Navbar {
     z-index: 1;
     display: flex;
     padding: 10px 0px;
     align-items: center;
     justify-content: space-between;
}

.menu-item {
     padding: 8px;
}

.togl-btn {
     display: none;
     font-size: 28px;
}

.logo img {
     width: 150px;
     color: #fff;
}

.header-menu-items {
     flex-direction: row;
}

.header-menu-items .nav-link {
     display: inline-block;
     color: #fff;
     text-decoration: none;
     font-weight: 500;
}

.language-dropdown-image {
     width: 25px;
     height: 25px;
     border-radius: 50%;
     border: 1px solid #fff;
}

.language-items-img {
     width: 25px;
     height: 25px;
     border-radius: 50%;
     margin: 0px;
}

.user-dropdown-menu li a {
     display: flex;
     align-items: center;
}

.user-dropdown-menu {
     margin-top: 11px !important;
     border: 0px;
     box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), .15) !important;
     --bs-position: end;
}

.language-items p {
     padding: 6px;
     font-weight: 300;
     color: #697a8d;
}

.user-dropdown-menu .dropdown-item.active,
.dropdown-item:active {
     color: var(--bs-dropdown-link-hover-color);
     background-color: var(--bs-dropdown-link-hover-bg);
}

.search_input {
     height: 50px;
}

.profile_image {
     height: 30px;
     width: 30px;
}

/*--------------------------------------------------------------
 # Theme - 1 Home banner Start
 --------------------------------------------------------------*/
.theme-1 {
     /*margin-top: 60px;*/
}

.theme-1 img {
     width: 100%;
     height: 490px;
}

.theme-1banner-text {
     position: absolute;
     color: #fff;
     top: 0;
     left: 0;
     bottom: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}

.theme-1banner-text h1 {
     font-weight: 600;
     color: #fff;
}

.theme1grid img {
     cursor: pointer;
}


/*--------------------------------------------------------------
 # Categories Start
 --------------------------------------------------------------*/

.swiper-scrollbar-horizontal {
     display: none;
}

.categories-slider .item .card {
     transition: 0.2s ease-in-out;
     width: 100%;
     height: 250px;
}

.products-img title .products-img .card img {
     transition: 0.2s ease-in-out;
     width: 100%;
     height: 250px;
     object-fit: contain;
}

.categories-slider .item .card .card-body {
     padding: 40px 0px;
}

.categories-slider .item .card svg {
     display: flex;
     justify-content: center;
     margin: auto;
     margin-bottom: 10px;
}

.categories-slider .item .card:hover {
     color: var(--bs-primary);
     transform: scale(1.05);
}

.products-img .card:hover img {
     transform: scale(1.05);
}

.categories-slider .item .card:hover svg {
     fill: var(--bs-primary);
}

.categories-slider .item .card p {
     font-size: 15px;
     font-weight: 500;
     text-transform: capitalize;
     text-align: center;
}

.theme-1active {
     position: relative;
}

.active1 .theme-1active::before {
     content: ".";
     top: 80%;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     color: var(--bs-secondary) !important;
     font-size: 35px;
}

.upperheader {
     background-color: black;
     padding: 20px 0px;
}

.navgation {
     margin: 0;
     padding: 0;
}

.navgation>li {
     color: #929292;
     font-style: italic;
     font-size: 24px;
     text-decoration: none;
     margin: 0 15px;
     float: left;
     list-style: none;
     cursor: pointer;
}

.navgation_lower li {
     cursor: pointer;
     text-align: center;
}

.navgation_lower {
     display: flex;
     align-items: center;
}

.navgation_lower::-webkit-scrollbar {
     height: 5px;
     border-radius: 5px;
}

.navgation_lower::-webkit-scrollbar-track {
     background-color: #F15A2450;
     color: black;
}

.navgation_lower::-webkit-scrollbar-thumb {
     border-radius: 5px;
     background: black;
     width: 10px;
     height: 10px;
}

.theme-1-category-card li img {
     margin-bottom: 10px;
     width: 90px;
     height: 90px;
     object-fit: contain;
}

#box-two {
     display: none;
}

.clearfix {
     clear: both;
}

.card-none {
     display: none;
}

.navgation_lower-two {
     padding: 0;
     margin: 0;
     text-align: center;
}

.navgation_lower-two li {
     color: white;
     font-style: italic;
     font-size: 24px;
     text-decoration: none;
     margin: 0 15px;
     display: inline-block;
     list-style: none;
     cursor: pointer;
}

.features {
     background-color: gray;
}

#features-subtwo {
     display: none;
}

/*--------------------------------------------------------------
 # Products Start
 --------------------------------------------------------------*/
.favorite-icon i {
     position: absolute;
     top: 27px;
     font-size: 23px;
     right: 27px;
     cursor: pointer;
     color: var(--bs-secondary);
}


.price {
     font-size: 15px;
     font-weight: 400;
}

del {
     padding-right: 5px;
     font-size: 12px;
     font-weight: 500;
     color: lightslategray;
     display: block;
}

.product-cart-icon {
     background-color: var(--bs-primary);
     color: #fff !important;
     width: 40px;
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 35%;
     padding: 0px;
     font-size: 18px;
     margin: 0px 5px;
}

.banner-imges-slider .item img:hover {
     transform: scale(1.05);
}

.banner-slider-section {
     background-color: color-mix(in srgb, var(--bs-secondary), transparent 96%);

}


.categories-slider,
.banner-imges-slider .owl-stage-outer {
     border-radius: var(--bs-border-radius-xxl) !important;
}

.blogs-slider .owl-stage-outer {
     border-radius: var(--bs-border-radius-xxl) !important;
}

.thme1categories {
     max-width: 100%;
     flex-direction: row;
     border-radius: var(--bs-border-radius-xxl);
     align-items: center;
}

.thme1categories img {
     width: 150px;
     height: 170px;
     padding: 0.5em;
     border-radius: var(--bs-border-radius-xxl);
     object-fit: cover;
     margin: auto;
     cursor: pointer;
}

.thme1categories .product-cart-icon {
     font-size: 11px;
}

.thme1categories .product-cart-icon {
     width: 25px;
     height: 25px;
     border: 0;
}

.favorite-icon1 {
     font-size: 23px;
     cursor: pointer;
     padding: 0px 10px;
     color: var(--bs-secondary);
}

/*--------------------------------------------------------------
 # Subscription Start
 --------------------------------------------------------------*/
.subscription-slider .card img {
     height: 400px;
}

.subscription-text h3 {
     font-weight: 600;
     margin-bottom: 20px;
     color: #000;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.subscription-text p {
     font-weight: 500;
     font-size: 18px;
     color: #7e7e7e;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.subscribe-input {
     display: flex;
     align-items: center;
     padding: 0px;
     border-radius: 32px;
     background-color: #fff;
     margin-top: 3rem;
}

.subscribe-input input {
     padding: 20px;
     border-radius: 33px;
}

.subscribe-input button {
     padding: 20px 30px;
     border-radius: 33px !important;
}

.subscription-image {
     height: 400px;
}

.subscription-text {
     text-align: start;
}

.caption-subscription {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     padding-right: 20px;
     left: 5%;
     padding-top: 1.25rem;
     padding-bottom: 1.25rem;
     color: #fff;
     text-align: center;
}

.quality-image {
     width: 70px;
     margin-bottom: 15px;
}

.quality-content h3 {
     font-weight: 500;
     line-height: 30px;
     font-size: 18px;
     color: #0c0c0c;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.footer-card {
     border: 0px;
     background-color: transparent;
}

.quality-content p {
     font-size: 12px;
     font-weight: 400;
     color: lightslategray;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

/*--------------------------------------------------------------
 # Blogs Start
 --------------------------------------------------------------*/
.blogs-card .card img {
     height: 250px;
}

.blogs-card .blogs-slider .owl-stage-outer .owl-stage {
     display: flex;
}

.blogs-card .blogs-slider .owl-stage-outer .owl-stage .owl-item .item {
     height: 100%;
     padding-left: 5px;
}

.blog-admin span {
     font-size: 12px;
     color: lightslategray;
     padding: 0px 3px;
     font-weight: 500;
}

.blog-admin i {
     font-size: 12px;
     color: lightslategray;
}

.blog-deta span {
     font-size: 12px;
     color: lightslategray;
     padding: 0px 3px;
     font-weight: 500;
}

.blog-deta i {
     font-size: 12px;
     color: lightslategray;
}

.blog-title {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.blog-title:hover {
     color: var(--bs-primary);
}

.blogs-card {
     padding-top: 2rem;
     padding-bottom: 2rem;
}

.blog-detalis-body {
     padding-left: 0px;
     padding-right: 0px;
     text-align: justify;
}

.blog-detalis-body .blogs-admin-data .blog-admin i,
.blog-detalis-body .blogs-admin-data .blog-admin span,
.blog-detalis-body .blogs-admin-data .blog-deta i,
.blog-detalis-body .blogs-admin-data .blog-deta span {
     font-size: 15px;
     color: lightslategray;
}

.blogs-admin-data {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.blog-details {
     color: lightslategrey;
     margin-bottom: 1rem;
     font-weight: 400;
}

.blog-details-title {
     margin: 0.9rem 0rem;
     font-weight: 600;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     font-size: 28px;
     text-transform: capitalize;
}

.breadcrumb-sec nav .active {
     color: #98a5b1 !important;
     font-weight: 500;
}

.details {
     text-align: justify;
     padding: 20px 0 45px 0px;
}

.contact-form {
     padding: 30px 0px 60px 0px;
}

.contact-right-side li {
     margin-bottom: 15px;
     margin-top: 15px;
}

.contact-right-side li span {
     font-size: 14px;
     color: #fff;
}

.contact-right-side li span a {
     font-size: 14px;
     color: #fff;
}

.facebook {
     padding: 6px 15px;
}

.social-share {
     display: flex;
     align-items: center;
}

.social-share .btn:hover {
     color: #000 !important;
     background-color: #fff !important;
}

.contact-details {
     background-color: var(--bs-secondary);
     border-radius: var(--bs-border-radius-xxl) !important;
     --bs-text-opacity: 1;
     color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
     padding-top: 1.5rem !important;
     padding-bottom: 1.5rem !important;
     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

/* Btn Close Offcanvas */
.btn-close-offcanvas {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     border: 1px solid #000;
     display: flex;
     justify-content: center;
     align-items: center;
}

.offcanvas-header .btn-close {
     width: 30px;
     height: 30px;
     box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 10%);
     -webkit-box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 10%);
     border-radius: 50%;
     font-size: 14px;
     color: var(--bs-secondary) !important;
}

.account-menu {
     z-index: 1;
     border-radius: 0px !important;
     text-align: center;
     width: 100%;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background-color: var(--bs-primary) !important;
}

.offcanvas-width {
     width: 75% !important;
}

/*--------------------------------------------------------------
 # setting Start
 --------------------------------------------------------------*/
.setting-page-profile img {
     border-radius: 50% !important;
     width: 80px;
     height: 80px;
}

.setting-page-profile h3 {
     font-weight: 600;
     line-height: 30px;
     font-size: 22px;
     color: #0c0c0c;
}

.setting-page-profile a {
     font-weight: 400;
     font-size: 15px;
     color: lightslategrey !important;
}

.setting-left-sidetitle {
     font-weight: 500;
     font-size: 13px;
     color: lightslategrey;
     margin-top: 3rem;
}

.setting-left-sidebar {
     margin-top: 1.5rem;
}

.setting-left-sidebar li {
     padding: 10px 0px;
}

.setting-left-sidebar li a {
     margin-top: 1.5rem;
     font-weight: 400;
     margin: 10px 0px;
}

.bg-blue {
     color: #fff;
     background-color: #1A237E;
}

.form-title {
     text-transform: capitalize;
     font-size: 35px;
     margin-bottom: 10px;
     font-weight: 600;
}

.or_section {
     display: flex;
     align-items: center;
}

.or_section .line {
     flex: 1;
     border-bottom: 1px solid black;
}

.social-share-icon {
     border: 1px solid #000;
     font-weight: 500;
     font-size: 16px;
     width: 100%;
     --bs-border-opacity: 1;
     border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
     margin: 0.25rem !important;
     display: flex;
     justify-content: center;
     align-items: center;
}

.social-share-icon img {
     width: 28px;
}

.login-right-side {
     background-color: #f0c3be;
}

.registration .overflow-y-scroll {
     overflow: auto;
     overflow-x: hidden;
}

.setting-left-sidebar li a:hover {
     color: var(--bs-primary) !important;
}

/* oblacker */
.active>.page-link,
.page-link.active {
     z-index: 3;
     color: var(--bs-pagination-active-color);
     --bs-bg-opacity: 1;
     background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
     border-color: #000;
     color: #000;
}

.page-link {
     color: #000;
     font-weight: 500;
}

.pagination .page-item input {
     max-width: 60px;
     width: 100%;
     text-align: center;
}

.page-link:focus {
     color: #000;
}

.page-link:hover {
     color: #000;
}

table.table-bordeblack.dataTable tbody th,
table.table-bordeblack.dataTable tbody td {
     font-weight: 500;
}

/*--------------------------------------------------------------
 # Add To Cart Modal Popap Start
 --------------------------------------------------------------*/
.search-modal-content {
     display: flex;
     justify-content: center;
     margin: auto;
}

.description-cart {
     font-size: 13px;
     font-family: var(--font-family);
     color: lightslategray;
     /*display: -webkit-box;*/
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.variants {
     margin-bottom: 5px;
}

.form-check-input:checked {
     background-color: var(--bs-primary);
     border-color: var(--bs-primary);
}

.form-check-label {
     margin-left: 8px;
     font-weight: 400;
     color: #000;
     font-size: 14px;
}

.form-check-label span {
     color: lightslategrey;
     font-size: 11px;
     padding-right: 0.5rem;
     padding-left: 0.5rem;
}

.extras-form .form-check-input[type=checkbox] {
     border-radius: 0px;
}

.pointer {
     cursor: pointer;
}

.variants-price {
     color: lightslategray;
     padding: 0px 5px;
}

.categoriesoffcanvastheme-4,
.categoriesoffcanvastheme-3 {
     width: 513px !important;
}


.modal-dialog-scrollable .page-link {
     display: inherit !important;
}

.carousel-inner {
     border-radius: var(--bs-border-radius-xxl);
}

.cart-counting-color {
     position: absolute;
     top: 60%;
     left: 50%;
     transform: translate(-50%, -46%);
     color: #fff;
     font-size: 0.875rem;
}

/*--------------------------------------------------------------
 # My Cart Start
 --------------------------------------------------------------*/
.order-summary-list li {
     color: lightslategray;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: .875rem;
     font-weight: 400;
     padding: 15px 0px;
}

.order-summary-list li span {
     color: #000;
     font-weight: 600;
}

.my-cart-account-btn {
     border: 1px solid #000 !important;
     background-color: transparent;
     color: #000;
}

.my-cart-categories {
     max-width: 100%;
     flex-direction: row;
     border: 0;
}

.my-cart-categories img {
     width: 85px;
     height: 85px;
     margin: auto;
}

.customisable {
     color: lightslategray;
     font-size: 14px;
}

/* Apply Coupon card side bar */
.offer-coupons {
     background-color: var(--bs-primary);
}

.main-row,
.copy-button {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.promo-card::after {
     position: absolute;
     content: "";
     height: 40px;
     right: -17px;
     border-radius: 40px;
     z-index: 1;
     top: 80px;
     background-color: var(--bs-primary);
     width: 40px;
}

.promo-card::before {
     position: absolute;
     content: "";
     height: 40px;
     left: -17px;
     border-radius: 40px;
     z-index: 1;
     top: 80px;
     background-color: var(--bs-primary);
     width: 40px;
}

.coupons-imag {
     padding-right: 0px;
     padding-left: 0px;
     margin: auto;
     border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.coupons-imag img {
     width: 100px;
     height: 100px;
}

.coupons-content h1 {
     font-size: 35px;
     color: #565656;
}

.coupons-content h1 span {
     font-size: 18px;
}

.coupons-content h2 {
     font-size: 18px;
     color: #565656;
     text-transform: uppercase;
}

.coupons-content p {
     font-size: 14px;
     color: #696969;
}

.copy-button {
     margin: 12px 0 -5px 0;
     height: 45px;
     border-radius: 4px;
     border: 1px solid #e1e1e1;
}

.copy-button input {
     width: 100%;
     height: 100%;
     border: none;
     outline: none;
}

.copy-button button {
     padding: 10px 20px;
     background-color: var(--bs-secondary);
     color: #fff;
     border: 1px solid transparent;
     border-radius: 20px !important;
}

/* breadcrumb  */
.cart-counting {
     text-align: center;
     background-color: var(--bs-secondary);
     outline: none;
     font-size: 12px !important;
     font-weight: 500;
     color: #fff;
     border-radius: 50%;
     height: 20px !important;
     width: 20px !important;
     line-height: 19px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s;
     padding: 0px !important;
     border-bottom: none !important;
}

.cart-counting1 {
     text-align: center;
     background-color: var(--bs-secondary);
     outline: none;
     font-size: 12px !important;
     font-weight: 500;
     color: #fff;
     border-radius: 50%;
     height: 20px !important;
     width: 20px !important;
     line-height: 19px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s;
     padding: 0px !important;
     border-bottom: none !important;
}

.select-payment-list-items {
     padding-top: 1rem;
     padding-bottom: 1rem;
     border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.radio-item {
     display: flex;
}

.peyment-overflow {
     overflow: hidden;
     width: 100%;
}

/*--------------------------------------------------------------
 # Order Details Section Start
 --------------------------------------------------------------*/
.order-deta-vari li {
     font-size: 14px !important;
     color: lightslategray;
}

.order-deta-vari li a {
     font-size: 13px !important;
}

.order-details {
     --bs-bg-opacity: 1;
     background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
     padding: 0.5rem 0rem !important;
}

.order-details ul {
     display: flex;
     align-items: center;
     margin-bottom: 0px;
}

.order-details ul li {
     text-align: center;
}

.order-details ul li a {
     color: lightslategray;
     text-transform: uppercase;
     font-size: 14px;
     font-weight: 500;
     opacity: .75;
}

.order-details ul li p {
     padding-top: 5px;
     font-weight: 600;
}

.order-details strong {
     color: #000;
}

.cust-info p {
     font-weight: 500;
     font-size: 18px;
}

.cust-info p,
b,
.cust-info a {
     color: #000 !important;
     font-weight: 500;
     font-size: 16px;
}

.customer-left-side i {
     color: lightslategray;
}

.cust-info address {
     font-size: 17px;
     font-weight: 500;
}

.cust-info span {
     font-size: 15px;
     font-weight: 600;
     color: lightslategray;
}

/*--------------------------------------------------------------
 # Success Section Start
 --------------------------------------------------------------*/
/* images animton */
.success-animetion-images.vert-move {
     -webkit-animation: mover 1s infinite alternate;
     animation: mover 1s infinite alternate;
     width: 100%;
}

.success-animetion-images.vert-move {
     -webkit-animation: mover 1s infinite alternate;
     animation: mover 1s infinite alternate;
}

@-webkit-keyframes mover {
     0% {
          transform: translateY(0);
     }

     100% {
          transform: translateY(-20px);
     }
}

@keyframes mover {
     0% {
          transform: translateY(0);
     }

     100% {
          transform: translateY(-20px);
     }
}

.apply-coupon-subtitle {
     padding-right: 0.5rem;
     padding-left: 0.5rem;
     font-size: 14px;
     margin: 0px;
     color: lightslategray;
     font-family: var(--font-family);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.select-paymentimages {
     width: 30px;
     height: 30px;
}

.copy-btn {
     background: var(--bs-secondary);
     color: #fff;
     border-radius: 0%;
     border: none;
     padding: 10px;
}

/*--------------------------------------------------------------
 # Working Hours Section Start
 --------------------------------------------------------------*/
.hours-to {
     color: lightslategrey;
}

.hours-to.btn:hover {
     color: lightslategrey;
}

.working-hours-main {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.hours-list {
     display: flex;
     align-items: center;
}

.to {
     font-weight: 600;
     font-size: 14px;
     padding-right: 1rem;
     padding-left: 1rem;
}

.working-hours-main p,
.sunday {
     font-size: 14px;
}

/*--------------------------------------------------------------
 # Theme 2 Banner Section Start
 --------------------------------------------------------------*/
.theme-2 {
     margin-top: 60px;
}

.thme2-section-padding {
     padding-top: 3rem;
     padding-bottom: 3rem;
     margin-top: 0px !important;
     background-color: #f7f6f2;
}

.thme2-section-paddingt {
     background-color: #f7f6f2;
     padding-top: 2rem;
     padding-bottom: 2rem;
}

.thme4-section-padding {
     padding-top: 3rem;
}

.theme-2banner-text {
     position: absolute;
     width: 100%;
     color: #fff;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);
     display: flex;
     justify-content: center;
     align-items: center;
}

.theme-2banner-text h1 {
     font-weight: 600;
     color: #fff;
}

/*--------------------------------------------------------------
 # Theme 2 Categories Section Start
 --------------------------------------------------------------*/
.theme-2-title-subtitle {
     padding-bottom: 22px;
}

.theme-2-categories .item {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
}

.theme-2-categories .item p {
     padding-top: 1rem;
}

.theme-2-categories-card {
     width: 130px;
     height: 130px;
     border-radius: 50%;
     border: none;
     transition: all 1s;
     display: flex;
     margin: auto;
}

.active1 .act-2::before {
     content: "-";
     width: auto;
     height: 5px;
     position: absolute;
     left: 50%;
     top: 68%;
     transform: translateX(-50%);
     color: var(--bs-primary) !important;
     font-size: 35px;
}

/*--------------------------------------------------------------
 # Theme 2 Popular Products Section Start
 --------------------------------------------------------------*/
.theme-2-products-card {
     transition: .5s;
}

.theme-2-products-card:hover {
     transform: scale(1.05);
}

.theme-2-products-card img {
     width: 150px;
     height: 150px;
     object-fit: cover;
}


.theme-2-category-card li .category-circle-theme-2 {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #fff;
     position: relative;
}

.theme-2-category-card li img {
     width: 50px !important;
     height: 50px !important;
     object-fit: contain;
     margin-bottom: 10px;
}
.theme-2-category-li{
     min-width: fit-content;
}

.theme-2-product-icon {
     width: 35px;
     height: 35px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     background-color: #f0f0f0;
     transition: .5s all;
}

.theme-2-product-icon i {
     font-size: 14px;
}

.theme-2-product-icon:hover {
     background-color: var(--bs-primary);
     border: none;
}

.theme-2-product-icon:hover i {
     color: #fff;
}

.theme-2blogs-slider .blog-title {
     text-align: center;
}

.theme-2-blog-card-img {
     overflow: hidden;
     transition: 1s all;
     height: 250px;
}

.theme-2-categories,
.theme-2blogs-slider,
.theme-2-banner-imges-slider .owl-stage-outer {
     border-radius: var(--bs-border-radius-lg) !important;
}

.theme-2blogs-slider .owl-stage-outer {
     border-radius: var(--bs-border-radius-lg) !important;
}

.theme-2blogs-slider .item .card img {
     height: 250px;
}

/*--------------------------------------------------------------
 # Theme 2 Subscription Section Start
 --------------------------------------------------------------*/
.subscription-bg-imag img {
     width: 100%;
     height: 500px;
}

.theme-2subscription {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

.backdrop-filter {
     background-color: rgba(255, 255, 255, 0.8);
     -webkit-backdrop-filter: blur(5px);
     backdrop-filter: blur(1px);
}

.subscribe-int-btn-main {
     border-radius: var(--bs-border-radius-xxl) !important;
     padding: 0 !important;
     margin: auto !important;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 35px !important;
}

.subscribe-btn-theme2 {
     background-color: var(--bs-secondary);
     padding: 13px 28px;
     color: #fff;
     font-weight: 400;
     text-transform: capitalize;
     display: inline-block;
     transition: .2s all ease-in-out;
     border: none !important;
     border-radius: 2rem !important;
}

.subscribe-input-theme2 {
     border-radius: var(--bs-border-radius-xxl) !important;
     border: 0 !important;
}

/*--------------------------------------------------------------
 # Theme 2 Subscription Section Start
 --------------------------------------------------------------*/
.bg-fhishar-card {
     margin-top: -80px;
     background-color: transparent;
     border: none;
}

.bg-fhishar-card img {
     height: 230px;
}

.fhishar-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -25%);
}

/*--------------------------------------------------------------
 # Theme 2 banner Section Start
 --------------------------------------------------------------*/
.theme-2-banner-imges-slider .item img {
     transition: 0.2s ease-in-out;
}

.theme-2-banner-imges-slider .item img:hover {
     transform: scale(1.05);
}

.banner-slider-section-theme-2 {
     background-color: color-mix(in srgb, var(--bs-primary), transparent 96%);
}

/*--------------------------------------------------------------
 # Theme 3 Home banner Section Start
 --------------------------------------------------------------*/
.theme-3-header {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin: 1rem 3rem;
}

.theme-3-banner {
     position: relative;
}

.theme-3-banner-image {
     width: 100%;
     height: 100%;
     height: 100vh;
     object-fit: cover;
}

.theme-3-banner-leyer {
     width: 100%;
     height: 100vh;
     position: absolute;
     color: #fff;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: rgba(0, 0, 0, .6);
}

.theme-3-icon-box {
     width: 40px;
     height: 40px;
     ;
     background-color: #fff;
     color: #000;
     border-radius: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0.25rem;
}

.theme-3-icon-box i {
     font-size: 16px;
}

.theme-3-cart {
     fill: #fff;
}

.theme-3-logo img,
.theme-5-logo img {
     width: 70px;
     height: 70px;
}

.pay-card-imag img {
     width: 40px;
     object-fit: cover;
     margin-right: 20px;
     margin-bottom: 20px;
}

.pay-card-imag {
     padding: 0px;
     margin-bottom: 0px;
}

.theme-3-image-gallery {
     width: 100%;
     overflow-x: scroll;
     margin-left: 15px;
}

.theme-3-image-gallery::-webkit-scrollbar {
     display: none;
}

.image-container {
     display: flex;
     width: 100%;
     padding: 10px;
}

.image-container img {
     width: 30px;
     object-fit: contain;
}

.categories-left-side::-webkit-scrollbar {
     display: none;
}

.scrolling-wrapper::-webkit-scrollbar {
     display: none;
}

.image-container {
     -ms-overflow-style: none;
     scrollbar-width: none;
}

.theme-3-titlebanner {
     font-weight: 600 !important;
     text-align: center !important;
     margin-top: 1rem !important;
     font-size: 35px;
}

/*--------------------------------------------------------------
 # Theme 3 Categories Section Start ( List Product Card Css)
 --------------------------------------------------------------*/
.categories-layer {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
     border-radius: var(--bs-border-radius-lg);
     background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);
     cursor: pointer;
}

.rounded-layer {
     width: 35px;
     height: 35px;
     background-color: #fff;
     color: #000;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     text-align: center;
     margin: auto;
     font-weight: 400;
}

.categories-text p {
     font-weight: 600;
     color: #fff;
     font-size: 16px;
     align-items: center;
     text-align: center;
     margin-bottom: 10px;
     display: flex;
     justify-content: center;
}

.theme-3-iconbox,
.theme-3-language-dropdown {
     display: flex;
     align-items: center;
}

.theme-3-categoris-header {
     position: sticky;
     top: 0px;
     width: 100%;
     background-color: var(--bs-primary);
     padding: 0px;
     z-index: 1;
}

.theme-3-navbar {
     list-style-type: none;
     padding: 0;
     display: flex;
     align-items: center;
     margin: 0;
}

.theme-3-navbar li {
     margin: 15px 5px;
     border: 0px;
}

.theme-3-navbar li a {
     border-radius: 20px;
     padding: 8px 8px;
     border: 1px solid #000;
     background-color: #fff;
     color: #000;
     font-size: 14px;
}

.theme-3-navbar li .active {
     background-color: var(--bs-primary);
     color: #fff;
}

.theme-3-product-icon {
     width: 25px;
     height: 25px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     background-color: var(--bs-primary);
     transition: .5s all;
}

.theme-3-product-icon i {
     color: #fff;
     font-size: 15px;
}

.theme-3-categoris-section .title,
.thme1categories .title,
.products-img title {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}

.thme3categories {
     max-width: 100%;
     flex-direction: row;
     border: 0;
     align-items: center;
}

.thme3categories img {
     width: 150px;
     height: 150px;
     margin: auto;
     padding: 0.5em;
     border-radius: 17px;
}

/*--------------------------------------------------------------
 # Theme 3 Categories Section Start ( Grid Product Card Css)
 --------------------------------------------------------------*/
.thme3girdproduct img {
     width: 100%;
     height: 210px;
     margin: auto;
     padding: 0.5em;
     border-radius: 17px;
}

/* offcanvas side bar */

.theme-4-categories-list li {
     border-left: 0px !important;
     border-right: 0px !important;
     border-radius: 0px !important;
     padding: 1rem;
}

.categoriesoffcanvastheme-4 .offcanvas-header,
.categoriesoffcanvastheme-3 .offcanvas-header {
     padding: 1rem;
}

.theme-4-categories-list li span {
     width: 30px;
     height: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--bs-primary);
     color: #fff;
     font-size: 15px;
     font-weight: 400;
     border-radius: 50%;
     margin: 0px 25px;
}

.theme-4-categories-list li a {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.theme-4-categories-list li p {
     font-size: 16px;
     font-weight: 400;
}

.theme-4-categories-list li i {
     font-size: 22px;
}

/*--------------------------------------------------------------
 # Theme 3 Store Infos List Start
 --------------------------------------------------------------*/
.theme-3-store-infos-list a {
     padding: 1rem;
}

.theme-3-bannertext {
     font-size: 20px;
}

.store-info-logo-img img {
     width: 110px;
     height: 110px;
}

.theme-3-categories-list li {
     border-left: 0px !important;
     border-right: 0px !important;
     border-radius: 0px !important;
     padding: 1rem;
}
.theme-3-categories-list li span {
     width: 30px;
     height: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--bs-primary);
     color: #fff;
     font-size: 15px;
     font-weight: 400;
     border-radius: 50%;
     margin: 0px 25px;
}
.theme-3-categories-list li a {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

.theme-3-categories-list li p {
     font-size: 16px;
     font-weight: 400;
}

.theme-3-categories-list li i {
     font-size: 22px;
}

/*--------------------------------------------------------------
 # Theme 3 Footer Start
 --------------------------------------------------------------*/
.theme-3-footer p {
     font-size: 14px;
     padding: 15px;
     text-align: center;
     font-family: var(--font-family);
     color: lightslategray;
}

/*--------------------------------------------------------------
 # Review Cart Start
 --------------------------------------------------------------*/
.review-cart-circle {
     width: 30px;
     height: 30px;
     background-color: #fff;
     color: #000;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     font-size: 18px;
}

.orders-home {
     height: 96px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 2;
     --bs-bg-opacity: 1;
     background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important
}

.orders-home .cart-btn {
     max-width: 500px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px;
     background-color: var(--bs-primary);
     border-radius: 10px;
}

.orders-home .cart-btn p {
     font-size: 16px;
     font-weight: 600;
     text-transform: uppercase !important;
     color: #fff;
}

.kvd-text {
     font-size: 18px;
     font-weight: 400;
     color: #fff;
}

/*--------------------------------------------------------------
 # Theme Banner 4 Start
--------------------------------------------------------------*/
.theme-4-bannre {
     padding-top: 63px;
     position: relative;
}

.theme-4-bannre img {
     width: 100%;
     height: 490px;
}

.theme-4-bannre span {
     background-color: rgba(0, 0, 0, .6);
     position: absolute;
     width: 100%;
     color: #fff;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);
     display: flex;
     justify-content: center;
     align-items: center;
}

.theme-4-bannre span h1 {
     font-size: 40px;
     font-weight: 600;
     color: #fff;
}

/*--------------------------------------------------------------
 # Theme 4 category Start
--------------------------------------------------------------*/
.tab-row {
     z-index: 2;
     overflow-x: auto;
}

.tab-row li {
     list-style: none;
     margin: 0;
}

.tab-row::-webkit-scrollbar {
     display: none;
}

/*::-webkit-scrollbar {*/
/*     display: none;*/
/*}*/

.tab-row {
     -ms-overflow-style: none;
     scrollbar-width: none;
}

/*--------------------------------------------------------------
 # Theme 4 Product Card Start ( Grid Product Card Css)
--------------------------------------------------------------*/
.theme-4-gridproduct-card,
.theme-4-listproduct-card {
     border-radius: var(--bs-border-radius-lg) !important;
}

.theme-4-gridproduct-card .card img {
     width: 100%;
     height: 250px;
     border-radius: 11px;
     border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.theme-4-gridproduct-card .card {
     width: 100%;
     height: 100%;
     border: none;
     border-radius: 11px;
}

.theme-4-gridproduct-card .card .card-body {
     padding-left: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
}

.theme-4-banner-2 .owl-stage-outer {
     border-radius: var(--bs-border-radius-lg) !important;
}

/*--------------------------------------------------------------
 # Theme 4 Product Card Start ( List Product Card Css)
--------------------------------------------------------------*/

.theme-4-listproduct-card img {
     width: 160px;
     height: 160px;
     padding: 0.5em;
     border-radius: 17px;
}

.theme-4-listproduct-card .card {
     max-width: 100%;
     flex-direction: row;
     border: 0;
     align-items: center;
}

/*--------------------------------------------------------------
 # Theme 4 Banner Setion Start
--------------------------------------------------------------*/
.theme-4-banner-2 img {
     height: 300px;
}

/*--------------------------------------------------------------
 # Footer Fisher Start
--------------------------------------------------------------*/
.theme4quality-image {
     width: 50px;
     object-fit: contain;
}

.theme4footer-card {
     background-color: #fff;
     border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
     border-radius: var(--bs-border-radius-lg) !important;
}

.theme4footer-card .card {
     border: 0px;
}

.theme4quality-image i {
     color: var(--bs-primary);
}


footer {
     background-color: #000000;
     color: #fff;
}

.footer-logo img {
     font-size: 30px;
     height: 40px;
     color: #fff;
     width: 150px;
     margin-bottom: 20px;
}

.footer-left-side {
     margin-top: 1rem;
}

.footer-left-side li {
     margin-bottom: 10px;
}

strong {
     font-family: var(--font-family);
     font-weight: 600;
}

.footer-right-side {
     margin-top: 1.5rem;
}

.footer-left-side li span {
     font-size: 14px;
     color: lightslategrey;
}

.footer-left-side li span a {
     color: lightslategrey;
}

.footer-right-side li a {
     color: lightslategrey;
     font-weight: 400;
     font-size: 15px;
}

.footer-right-side li a:hover,
.footer-left-side li span a:hover {
     color: #fff;
}

.footer-right-side li {
     margin-bottom: 5px;
}

.footer-title {
     font-size: 18px;
     font-weight: 500;
     color: white;
}

.footersubtitle {
     display: -webkit-box;
     -webkit-line-clamp: 3;
     font-size: 14px;
     -webkit-box-orient: vertical;
     overflow: hidden;
     color: lightslategrey;
     font-weight: 400;
}

/* Blank Page */

.blank-page-height {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 75vh;
}

.blank-page-height img {
     width: 30%;
     height: 100%;
     object-fit: contain;
     padding-bottom: 50px;
}

.stripe-form #card-element .__PrivateStripeElement iframe {
     height: 40px !important;
     width: 100% !important;
     border: var(--bs-card-border-width) solid var(--bs-card-border-color);
     border-radius: var(--bs-card-border-radius);
     display: block;
     padding: 10px;
     margin-bottom: 16px;
}

.toast-success {
     background-color: #0daf45 !important;
}

.toast-error {
     background-color: #e44b4b !important;
}

/* Preloder New */

.preloader {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background: #fff;
     z-index: 2000;
     transition: all 2s;
     opacity: 1;
     visibility: visible;

     &.done {
          opacity: 0;
          visibility: hidden;
     }
}

.loader {
     width: 75px;
     height: 75px;
     border: 10px solid white;
     border-radius: 50%;
     border-top-color: var(--bs-primary);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     animation: 0.8s spin infinite linear;
}

@keyframes spin {
     from {
          transform: translate(-50%, -50%) rotate(0deg);
     }

     to {
          transform: translate(-50%, -50%) rotate(360deg);
     }
}

/* Preloder New End */
/*********************** load css ***********************/
.load {
     width: 20px;
     height: 20px;
     border: solid 3px var(--bs-secondary);
     border-radius: 50%;
     border-right-color: transparent;
     border-bottom-color: transparent;
     -webkit-transition: all 0.5s ease-in;
     -webkit-animation-name: rotate;
     -webkit-animation-duration: 1.0s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-timing-function: linear;
     transition: all 0.5s ease-in;
     animation-name: rotate;
     animation-duration: 0.5s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     margin: 5px !important;
}

@keyframes rotate {
     from {
          transform: rotate(0deg);
     }

     to {
          transform: rotate(360deg);
     }
}

@-webkit-keyframes rotate {
     from {
          -webkit-transform: rotate(0deg);
     }

     to {
          -webkit-transform: rotate(360deg);
     }
}

/* cookie */
.js-cookie-consent {
     position: fixed;
     left: 0;
     bottom: 0;
     margin-left: 30px;
     margin-right: 30px;
     margin-bottom: 20px;
     text-align: center;
     z-index: 9999;
     background-color: #fff;
     border-color: var(--bs-primary);
     border: solid 1px var(--bs-primary);
     border-radius: 0.375rem !important;
}

.js-cookie-consent-agree:hover {
     background-color: #000;
     color: #fff !important;
     border: 1px solid transparent !important;
}

.js-cookie-consent-agree {
     background-color: #000;
     color: #fff !important;
}

.js-cookie-consent-decline {
     background-color: rgb(211, 211, 211);
     color: rgb(0, 0, 0) !important;
}

.js-cookie-consent-decline:hover,
.js-cookie-consent-decline:active {
     background-color: rgb(211, 211, 211) !important;
     color: #000 !important;
     border: 1px solid transparent !important;
}

.cart-2 {
     position: absolute;
     top: -8px !important;
     left: calc(10px + (0 - 10) * ((100vw - 320px) / (1920 - 320))) !important;
     font-size: 10px !important;
     height: 15px !important;
     width: 15px !important;
     line-height: 19px;
}

/* whatsapp chat */
.whatsapp_icon_ltr {
     position: fixed !important;
     bottom: 40px !important;
     right: 20px !important;
     z-index: 100;
}

.whatsapp_icon_rtl {
     position: fixed !important;
     bottom: 40px !important;
     left: 70px !important;
     z-index: 100;
}

.chat-btn_ltr {
     position: fixed;
     right: 15px;
     bottom: 15px;
     cursor: pointer;
}

.chat-btn_rtl {
     position: fixed;
     left: 15px;
     bottom: 15px;
     cursor: pointer
}

.chat-btn .close {
     display: none
}

.chat-btn i {
     transition: all 0.9s ease
}

#check:checked~.chat-btn i {
     display: block;
     pointer-events: auto;
     transform: rotate(180deg)
}

#check:checked~.chat-btn .comment {
     display: none
}

.chat-btn i {
     font-size: 22px;
     color: #fff !important
}

.chat-btn {
     width: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50px;
     background-color: #25d366;
     color: #fff;
     font-size: 22px;
     border: none
}

.wrapper {
     position: fixed;
     right: 16px;
     bottom: 73px;
     width: 300px;
     background-color: #fff;
     border-radius: 5px;
     transition: all 0.4s;
     z-index: 9999;
}

.wrapper_rtl {
     position: fixed;
     left: 20px;
     bottom: 73px;
     width: 300px;
     background-color: #fff;
     border-radius: 5px;
     transition: all 0.4s;
     z-index: 9999;
}

.msg_header {
     padding: 13px;
     background-color: #128c7e;
     border-radius: 5px 5px 0px 0px;
     color: #fff
}

.chat-form {
     padding: 15px
}

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

.chat-form textarea {
     resize: none
}

#check {
     display: none !important
}

.msg {
     border-radius: 0px 7px 7px 7px;
}

.bg-msg {
     background-color: #e5ddd5;
}

.leyer {
     width: 100%;
     height: 100%;
     position: absolute;
     color: var(--color-white);
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: rgba(0, 0, 0, .6);
}

.line-1 {
     text-overflow: ellipsis;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
}

.line-2 {
     text-overflow: ellipsis;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
}


.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
     color: var(--bs-secondary);
     display: block;
}

.breadcrumb-rtl::before {
     float: right !important;
     padding-left: var(--bs-breadcrumb-item-padding-x) !important;
     padding-right: var(--bs-breadcrumb-item-padding-x) !important;
}

.theme-1category-width{
     width: 160px !important;
}

.theme1grid_image img {
     width: 100%;
     height: 100%;
}

.theme7grid_image img {
     width: 100%;
     height: 380px;
     object-fit: cover;
}


.carousel-inner .carousel-item img {
     width: 100%;
     height: 100%;
}

.theme_2_grid_img img {
     width:100% !important;
     height: 200px !important;
}


.scrollToTopBtn_main {
     position: fixed;
     bottom: 50px;
     z-index: 999;
     display: grid;
     place-content: center;
}

.browse_menu_btn {
     background-color: var(--bs-primary);
     border: none;
     color: #000;
     font-size: 14px;
     display: flex;
     align-items: center;
     margin: auto;
     padding: 11px 22px;
     border-radius: 17px;
     font-weight: 700;
}

.categories_imgbox {
     width: 40px;
     height: 40px;
}

.theme1quality-image i {
     color: var(--bs-primary);
}

.theme2quality-image i {
     color: var(--bs-primary);
}

.sale {
     padding: 10px 0px;
     background-color: #000;
     color: #fff;
}

.sale p {
     font-size: 14px;
}

.sale a {
     color: #fff;
}


/* ============= jenish extra ============= */
/* ============= theme-6 start ============ */

.theme-6 {
     margin-top: 60px;
}

.theme-6 img {
     width: 100%;
     height: 490px;
}

.theme-6banner-text {
     position: absolute;
     color: #fff;
     top: 0;
     left: 7%;
     right: 7%;
     bottom: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}

.theme-6banner-text h1 {
     font-weight: 600;
     color: #fff;
}

.theme-6-category-card li img {
     margin-bottom: 0px;
     width: 40px;
     height: 40px;
     border-radius: 0% !important;
     object-fit: contain;
}

.theme-6-margin-top .card:hover {
     background-color: var(--bs-primary) !important;
     transition: .5s;
     color: #fff;
}

.theme-6-margin-top .card:hover .hover-white {
     color: #fff !important;
     transition: .5s;
}

.theme-6-margin-top .card:hover .product-cart-icon i {
     color: #000 !important;

}

.theme-6-margin-top .card:hover .product-cart-icon {
     background-color: var(--bs-secondary) !important;
}

.theme-6-margin-top .active1 .act-6_ltr::before {
     content: ".";
     width: auto;
     height: 10px;
     position: absolute;
     top: 16%;
     left: 2%;
     transform: translateY(-100%);
     color: var(--bs-primary) !important;
     font-size: 35px;
}

.theme-6-margin-top .active1 .act-6_rtl::before {
     content: ".";
     width: auto;
     height: 10px;
     position: absolute;
     top: 16%;
     right: 2%;
     transform: translateY(-100%);
     color: var(--bs-secondary) !important;
     font-size: 35px;
}

.theme-6-margin-top .owl-stage-outer {
     border-radius: 0px !important;
}



.thme6categories {
     max-width: 100%;
     flex-direction: row;
     align-items: center;
}

.thme6categories img {
     width: 150px;
     height: 170px;
     padding: 0.5em;
     object-fit: cover;
     margin: auto;
     cursor: pointer;
}

.thme6categories .product-cart-icon {
     font-size: 13px;
}

.thme6categories .product-cart-icon {
     width: 32px;
     height: 32px;
     border: 0;
}

.thme6categories .title {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
}



.scrollToTopBtn_main-2 {
     position: fixed;
     bottom: 12px;
     z-index: 999;
     display: grid;
     place-content: center;
}

.browse_menu_btn-2 {
     background-color: var(--bs-primary);
     border: none;
     color: #000;
     font-size: 14px;
     display: flex;
     align-items: center;
     margin: auto;
     padding: 11px 22px;
     border-radius: 7px;
     font-weight: 700;
}

.category-card li span,
.theme-2-category-card li span,
.theme-3-category-card li span,
.theme-4-margin-top li span,
.theme-5-margin-top li span,
.theme-7-margin-top li span,
.theme-8-category-card li span {
     width: 25px;
     height: 25px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--bs-primary);
     color: #fff;
     font-size: 15px;
     font-weight: 400;
     border-radius: 50%;
}

.theme-6-margin-top li span {
     width: 25px;
     height: 25px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--bs-primary);
     color: #fff;
     font-size: 15px;
     font-weight: 400;
     border-radius: 0% !important;
}


/* ============= theme-6 end ============ */

/* ============= theme-7 start ============ */


.theme-7-category-card li .category-circle-theme-7 {
     width: 100% !important;
     height: 100px !important;
}

.theme-7 {
     margin-top: 60px;
}

.thme7categories {
     max-width: 100%;
     flex-direction: row;
     border-radius: var(--bs-border-radius-xxl);
     align-items: center;
}

.thme7categories img {
     width: 160px;
     height: 100%;
     padding: 1em;
     border-radius: var(--bs-border-radius-xxl);
     object-fit: cover;
     margin: auto;
     cursor: pointer;
}

.theme-7 img {
     width: 100%;
     height: 490px;
}

.theme-7banner-text {
     position: absolute;
     color: #fff;
     top: 0;
     left: 0;
     bottom: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}

.theme-7banner-text h1 {
     font-weight: 600;
     color: #fff;
}

.theme-7-category-card li img {
     margin-bottom: 0px;
     width: 40px;
     height: 40px;
     object-fit: contain;
}


.theme-7-category-card .active1 {
     color: var(--bs-primary);
}

.theme-7-category-card .category-box .category-circle-theme-7 .category-name::before {
     position: absolute;
     content: "";
     right: -5px;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     height: 16px;
     width: 2px;
     background-color: rgb(182, 182, 182);
     opacity: 0.4;
}

.theme-7-category-card .category-box .category-circle-theme-7 .category-name_rtl::before {
     position: absolute;
     content: "";
     left: -5px;
     top: 50%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     height: 16px;
     width: 2px;
     background-color: rgb(182, 182, 182);
     opacity: 0.4;
}

.theme-7-category-card li .category-circle-theme-7 {
     background-color: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #fff;
     position: relative;
}

.theme-7-margin-top .products-img .card:hover img {
     transform: none !important;
}


.theme-7-margin-top .card:hover,
.theme-7-margin-top .blogs-card .card:hover {
     box-shadow: 0 0px 32px 0 rgba(7, 28, 31, 0.1);
     transition: .5s;
}

.theme-7-margin-top .products-img .card img {
     background-color: #F9F9FA !important;

}

.theme-7-margin-top .card {
     border: 1px solid rgb(234, 234, 234) !important;
     background-color: #fff !important;
}

/* ------------ card-option start --------- */
.card .card-option {
     position: absolute;
     top: 25%;
     left: 0%;
     width: 100%;
     justify-content: center;
     height: 50px;
     opacity: 0;
     z-index: 2;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
     gap: calc(4px + (7 - 4) * ((100vw - 320px) / (1920 - 320)));
     transition: .4s;
}

.card:hover .card-option {
     opacity: 1;
     transition: .3s;
}

.card .card-option li .product-cart-icon,
.card .card-option-two li .product-cart-icon {
     background-color: transparent !important;
     border: none;
     padding: 20px;
}

.card .card-option li,
.card .card-option-two li {
     border-radius: 50% !important;
     background-color: #fff;
     height: 50px;
     width: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 4px;
     transition: .4s;
}

.card .card-option li i,
.card .card-option-two li i {
     color: #000;
}

.card .card-option li :hover i,
.card .card-option-two li :hover i {
     color: #fff !important;

}

.card .card-option li:hover,
.card .card-option-two li:hover {
     background-color: var(--bs-primary) !important;
}

.card .card-option li,
.card .card-option-two li {
     margin: 12px 4px;
}

/* ------------ card-option end --------- */


/* ------------ card-option-two start --------- */
.card .card-option-two {
     width: 100%;
     height: 50px;
     z-index: 2;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
     gap: calc(4px + (7 - 4) * ((100vw - 320px) / (1920 - 320)));
     transition: .4s;
}

.card .card-option li,
.card .card-option-two li {
     box-shadow: 0 0px 10px 0 rgba(7, 28, 31, 0.1) !important;
}

/* ------------ card-option-two end --------- */



.banner-imges-slider .owl-stage-outer,
.blogs-slider .owl-stage-outer {
     border-radius: 0px !important;
}


/* ====== animation card-option start ============ */

.card:hover .card-option li:nth-child(1) {
     animation: fadeInTop 400ms ease-in-out;
}

.card:hover .card-option li:nth-child(2) {
     animation: fadeInTop 600ms ease-in-out;
}

.card:hover .card-option li:nth-child(3) {
     animation: fadeInTop 800ms ease-in-out;
}

@keyframes fadeInTop {
     0% {
          opacity: 0;
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
     }
}

/* ============= theme-7 end ============ */


/* ============= theme-8 start ============ */

.theme-8 {
     margin-top: 60px;

}

.theme-8-bg {
     background-color: color-mix(in srgb, var(--bs-secondary), transparent 92%);
}

.thme8categories {
     max-width: 100%;
     flex-direction: row;
     border-radius: var(--bs-border-radius-xxl);
     align-items: center;
}

.thme8categories img {
     width: 170px;
     height: 100%;
     padding: 0.5em;
     border-radius: var(--bs-border-radius-xxl);
     object-fit: cover;
     margin: auto;
     cursor: pointer;
}

.theme-8 img {
     width: 100%;
     height: 490px;
}

.theme-8banner-text {
     position: absolute;
     color: #fff;
     top: 0;
     left: 0;
     bottom: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}

.theme-8banner-text h1 {
     font-weight: 600;
     color: #fff;
}

.theme-8-category-card img {
     margin-bottom: 0px;
     width: 40px !important;
     height: 40px !important;
     border-radius: 50%;
     object-fit: contain;
}

.theme-8-category-card .category-box {
     border-bottom: 2px solid transparent;
     margin: 10px 20px 10px 0px !important;
     min-width: fit-content;
}

.theme-8-category-card .category-circle-theme-8 {
     width: 100% !important;
     height: 50px !important;
     padding: 4px;
     border: 1px solid rgb(188, 188, 188);
     border-radius: 50px !important;
     background-color: transparent;
     color: rgb(188, 188, 188);
}

.theme-8-category-card .active1 .category-circle-theme-8 {
     border: 1px solid transparent !important;
     color: var(--bs-primary);
}

.theme-8-category-card .active1.item {
     color: var(--bs-primary);
     background-color: #fff;
     border-radius: 50px !important;
     box-shadow: 0 0px 12px 0 rgba(8, 28, 31, 0.1);
}

.theme-8-category-card .active1.mobile-active p {
     color: var(--bs-primary);

}

.theme-4-categories-list .mobile-active .active p {
     color: var(--bs-primary);

}


.theme-8-category-card li .category-circle-theme-8 {
     background-color: transparent;
     display: flex;
     align-items: center;
     position: relative;
}

.theme-8-margin-top .products-img .card img {
     height: 250px;

}

.theme-8-margin-top .products-img .card:hover img {
     transform: none !important;
}


.theme-8-margin-top .card:hover img {
     opacity: .3;
}

.theme-8-margin-top .item .card:hover img {
     opacity: 1 !important;
}

.theme-8-margin-top .card:hover {
     box-shadow: 0 0px 32px 0 rgba(8, 28, 31, 0.1);
     transition: .5s;
     border-color: rgb(221, 221, 221) !important;
}

.theme-8-margin-top .products-img .card img {
     background-color: transparent !important;
     border-radius: var(--bs-border-radius-xxl);
     ;

}

.theme-8-margin-top .card {
     border: 1px solid rgb(221, 221, 221) !important;
     background-color: transparent !important;
     border-radius: 30px !important;
     overflow: hidden;
}

.bg-none {
     background-color: transparent !important;
}

/* ------------ card-option start --------- */

/* ======== card option 1,2,3 ========= */

.card .card-option {
     position: absolute;
     top: 25%;
     left: 0%;
     width: 100%;
     justify-content: center;
     height: 50px;
     opacity: 0;
     z-index: 2;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
     gap: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
     transition: .4s;
}

.card .card-option-two,
.card .card-option-three {
     width: 100%;
     height: 50px;
     z-index: 2;
     -webkit-transition: all 0.5s ease;
     transition: all 0.5s ease;
     gap: calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
     transition: .4s;
}

.card .card-option-three {
     opacity: 0;
}

/* ======== card option 1,2,3 ========= */


.card:hover .card-option,
.card:hover .card-option-three {
     opacity: 1;
     transition: .3s;
}

.card .card-option li .product-cart-icon,
.card .card-option-three li .product-cart-icon,
.card .card-option-two li .product-cart-icon {
     background-color: transparent !important;
     border: none;
     padding: 20px;
}

.card .card-option li,
.card .card-option-two li,
.card .card-option-three li {
     border-radius: 50% !important;
     background-color: #fff;
     height: 45px;
     width: 45px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 4px;
     transition: .4s;
}

.card .card-option li i,
.card .card-option-two li i,
.card .card-option-three li i {
     color: #000;
}

.card .card-option li :hover i,
.card .card-option-two li :hover i,
.card .card-option-three li :hover i {
     color: #fff !important;

}

.card .card-option li:hover,
.card .card-option-two li:hover,
.card .card-option-three li:hover {
     background-color: var(--bs-primary) !important;
}

.card .card-option li,
.card .card-option-two li,
.card .card-option-three li {
     margin: 12px 4px;
}

.card .card-option li,
.card .card-option-two li,
.card .card-option-three li {
     box-shadow: 0 0px 10px 0 rgba(8, 28, 31, 0.1) !important;
}

/* ------------ card-option end --------- */





.banner-imges-slider .owl-stage-outer,
.blogs-slider .owl-stage-outer {
     border-radius: 0px !important;
}


/* ====== animation card-option start ============ */

.card:hover .card-option li:nth-child(1) {
     animation: fadeInTop 400ms ease-in-out;
}

.card:hover .card-option li:nth-child(2) {
     animation: fadeInTop 600ms ease-in-out;
}

.card:hover .card-option li:nth-child(3) {
     animation: fadeInTop 800ms ease-in-out;
}

@keyframes fadeInTop {
     0% {
          opacity: 0;
          -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
     }
}

/* ============= theme-8 end ============ */





.mobile-menu-footer {
     position: fixed;
     bottom: 0%;
     left: 0%;
     background-color: #fff;
     width: 100%;
     z-index: 999;
     padding: 10px;
     box-shadow: 0 -4px 10px 0 rgba(8, 28, 31, 0.1);
}

.mobile-menu-footer ul li a {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 2px;
}

.mobile-menu-footer ul li {
     width: 100%;
     text-align: center;
}

.mobile-menu-footer ul li span {
     color: #5a6862;
     font-size: 14px;
     font-weight: 500;
}


.cart-3 {
     position: absolute;
     top: 0px !important;
     font-size: 11px !important;
     height: 16px !important;
     width: 16px !important;
     line-height: 19px;
     background-color: #000;
     color: #fff;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.mobile-menu-footer ul li .active::before {
     content: " ";
     width: 5px;
     height: 5px;
     border-radius: 50%;
     transition: all 0.4s;
     background-color: var(--bs-primary);
     position: absolute;
     top: 46px;
     left: 50%;
     transform: translateX(-50%);
}









/* START TOOLTIP STYLES */
[tooltip] {
     position: relative;
}

[tooltip]::before,
[tooltip]::after {
     text-transform: none;
     font-weight: 200;
     font-size: 14px;
     line-height: 1;
     user-select: none;
     pointer-events: none;
     position: absolute;
     display: none;
     opacity: 0;
}

[tooltip]::before {
     content: '';
     border: 5px solid transparent;
     z-index: 1001;
}

[tooltip]::after {
     content: attr(tooltip);
     min-width: 3em;
     max-width: 21em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding: 1ch 1.5ch;
     border-radius: .3ch;
     box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
     background: rgb(39, 39, 39);
     color: #fff;
     z-index: 1000;
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
     display: block;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
     bottom: 100%;
     border-bottom-width: 0;
     border-top-color: #333;
}

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
     bottom: calc(100% + 5px);
}

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
     left: 50%;
     transform: translate(-50%, -.5em);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
     to {
          opacity: .9;
          transform: translate(-50%, 0);
     }
}

@keyframes tooltips-horz {
     to {
          opacity: .9;
          transform: translate(0, -50%);
     }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after {
     animation: tooltips-vert 300ms ease-out forwards;
}

/* ==================== toltip end =========== */

.install-app-btn-container {
     display: none;
}

.install-app-div {
     display: none;
}

.mobile-install-btn {
     background-color: var(--bs-primary);
     border-radius: 1rem;
     padding: 9px 28px;
     color: #fff;
     font-weight: 500;
     text-transform: capitalize;
     display: inline-block;
     transition: .2s all ease-in-out;
     border: none !important;
     border-radius: var(--bs-border-radius-xl);
}

.install-app-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px;
}

.pwa-close-btn {
     width: 35px;
     height: 35px;
     box-shadow: 0px 3px 10px 1px rgb(0 0 0 / 10%);
     border-radius: 50%;
     font-size: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
}

.mobile_drop_down {
     background-color: #fff;
     text-align: center;
     bottom: -100vh;
     left: 0;
     height: auto;
     width: 100vw;
     position: fixed;
     display: block;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     color: #000;
}

.mobile_drop_down li {
     line-height: 30px
}

.mobile_drop_down a {
     color: #204056;
     font-weight: bold;
     font-size: 14px;
     text-transform: uppercase;
}

.mobile_drop_down h5 {
     text-align: start;
     margin: 0px;
     font-size: 16px;
}

.mobile_drop_down p {
     text-align: start;
     margin: 0px;
     font-size: 16px;
}



/* STYLE WHATSAPP BUTTON*/
    
:root{
     --btn-color: #80b213;
 }

.btn-container{
     position: relative;
     min-height:  10vh;
     display: flex;
     align-items: center;
    
     }

.btn-container button{
     background-color: #80b213;
     padding: 20px 30px;
     border-radius: 50px;
     letter-spacing: 4px;
     font-size: 15px;
     color: #333;
     text-transform: uppercase;
border: 1px solid var(--btn-color);
position: relative;
}

.btn-container button::before{

     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0px;
     top: 0px;
     outline:  2px solid var(--btn-color);
     border-radius: 50px;
     outline-offset: 2px;
     outline-width: 2px;
     animation: animate 1s linear infinite;
}

@keyframes animate {
     0%{
          outline-offset: 2px;
          opacity: 1;
     }
     100%{
          outline-offset: 20px;
          opacity: 100;         
     }


}