@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
	--gren-gray-scale-900: #002603;
	--gren-gray-scale-800: #173b1a;
	--gren-gray-scale-700: #2b572e;
	--gren-gray-scale-600: #406b42;
	--gren-gray-scale-500: #618062;
	--gren-gray-scale-400: #7a997c;
	--gren-gray-scale-300: #96b297;
	--gren-gray-scale-200: #b4ccb4;
	--gren-gray-scale-100: #dae5da;
	--gren-gray-scale-50: #edf2ee;
	--gray-scale-gray-–-900: #1a1a1a;
	--gray-scale-gray-–-800: #333;
	--gray-scale-gray-–-700: #4d4d4d;
	--gray-scale-gray-–-600: #666;
	--gray-scale-gray-–-500: #808080;
	--gray-scale-gray-–-400: #999;
	--gray-scale-gray-–-300: #b3b3b3;
	--gray-scale-gray-–-200: #ccc;
	--gray-scale-gray-–-100: #e6e6e6;
	--gray-scale-gray-–-50: #f2f2f2;
	--gray-scale-white: #fff;
	--branding-success-bright: #84d187;
	--branding-success: #00b207;
	--branding-success-dark: #2c742f;
	--branding-warning: #ff8a00;
	--branding-error: #ea4b48;
  --font-family: "Poppins", sans-serif;
  --second-family: "Segoe Script", sans-serif;
  --third-family: "Dancing Script", sans-serif;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-family);
}
ul, li {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
}
form input, button, select, textarea {
	font-family: var(--font-family);
	outline: none;
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p, span, ul, li, a, form, address {
 margin: 0;
padding: 0;
}
address{font-family: var(--font-family);
font-weight: 400;
font-size: 12px;
line-height: 130%;
color: var(--gray-scale-gray-–-600);
}
iconify-icon{
    vertical-align: middle;
}
.navbtn{
	cursor: pointer;
	background-color: transparent;
	color: var(--gray-scale-gray-–-900);
	border: none;
	font-size: 24px;
}
/*=========================
    Header Top
==========================*/

/*=========================
        Header Top
==========================*/

#headertop{
    background: #f6fff4;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.header-top-wrapper{
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*=========================
        Left
==========================*/

.header-top-left{
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 13px;
    font-weight: 400;
    color: #4B5563;
}

.header-top-left iconify-icon{
    font-size: 17px;
    color: var(--branding-success);
}

/*=========================
        Right
==========================*/

.header-top-right{
    display: flex;
    align-items: center;
    gap: 16px;
}

/*=========================
      Dropdown
==========================*/

.top-dropdown{
    position: relative;
}

.top-dropdown select{
    background: transparent;
    border: none;
    cursor: pointer;

    font-size: 13px;
    font-weight: 500;
    color: #374151;

    transition: .3s;
}

.top-dropdown select:hover{
    color: var(--branding-success);
}

.top-dropdown select:focus{
    outline: none;
}

/*=========================
        Divider
==========================*/

.top-divider{
    width: 1px;
    height: 18px;
    background: #D1D5DB;
}

/* =========================
   Auth Links
========================= */

.auth-links {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;

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

.auth-links > span {
    color: #9CA3AF;
    font-size: 13px;
}

.auth-links > a {
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;

    transition: color 0.3s ease;
}

.auth-links > a:hover {
    color: var(--branding-success);
}


/* =========================
   User Menu
========================= */

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
}


/* =========================
   User Menu Button
========================= */

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 3px 5px;

    border: none;
    outline: none;
    background: transparent;

    color: var(--gray-scale-gray-–-800);

    font-family: var(--font-family);
    cursor: pointer;

    transition: color 0.3s ease;
}

.user-menu-btn:hover {
    color: var(--branding-success);
}


/* =========================
   User Avatar
========================= */

.user-avatar {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--branding-success);
    color: var(--gray-scale-white);

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
}


/* =========================
   User Name
========================= */

.user-name {
    max-width: 120px;

    color: var(--gray-scale-gray-–-800);

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: color 0.3s ease;
}

.user-menu-btn:hover .user-name {
    color: var(--branding-success);
}


/* =========================
   Dropdown Arrow
========================= */

.user-menu-btn > iconify-icon {
    font-size: 17px;
    color: var(--gray-scale-gray-–-500);

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}

.user-menu-btn:hover > iconify-icon {
    color: var(--branding-success);
}


/* =========================
   User Dropdown
========================= */

.user-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 200px;

    padding: 7px;

    background: var(--gray-scale-white);

    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 10px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    z-index: 9999;
}


/* =========================
   Dropdown Show
========================= */

.user-menu:hover .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================
   Arrow Animation
========================= */

.user-menu:hover .user-menu-btn > iconify-icon {
    transform: rotate(180deg);
}


/* =========================
   Dropdown Links
========================= */

.user-dropdown a {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 15px 11px;

    box-sizing: border-box;

    border-radius: 7px;

    color: var(--gray-scale-gray-–-800);

    font-family: var(--font-family);

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


/* Dropdown Link Hover */

.user-dropdown a:hover {
    background: var(--gren-gray-scale-50);
    color: var(--branding-success);
}


/* =========================
   Dropdown Icons
========================= */

.user-dropdown a iconify-icon,
.user-dropdown form button iconify-icon {
    width: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;

    flex-shrink: 0;
}


/* =========================
   Divider
========================= */

.dropdown-divider {
    height: 1px;

    margin: 5px 4px;

    background: var(--gray-scale-gray-–-100);
}


/* =========================
   Logout Form
========================= */

.user-dropdown form {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================
   Logout Button
========================= */

.user-dropdown form button {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 15px 11px;

    box-sizing: border-box;

    border: none;
    border-radius: 7px;

    background: transparent;

    color: var(--gray-scale-gray-–-800);

    font-family: var(--font-family);

    font-size: 13px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


/* Logout Hover */

.user-dropdown form button:hover {
    background: #fff1f1;
    color: var(--branding-error);
}


/* =========================
   Hover Bridge
========================= */

.user-dropdown::before {
    content: "";

    position: absolute;

    top: -11px;
    right: 0;

    width: 100%;
    height: 11px;
}

/*=========================
    Header Main
==========================*/

#headermid{
    padding: 28px 0;
    background: #fff;
}

.header-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/*=========================
    Logo
==========================*/

.header-logo{
    flex: 0 0 auto;
}

.header-logo img{
    max-width: 180px;
    display: block;
}

/*=========================
    Search
==========================*/

.header-search{
    flex: 1;
    max-width: 650px;
}

.search-box{
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-scale-gray-–-200);
    border-radius: 8px;
    overflow: hidden;
    background: var(--gray-scale-white);
}

.search-box iconify-icon{
    font-size: 22px;
    color: var(--gray-scale-gray-–-500);
    margin-left: 18px;
}

.search-box input{
    width: 100%;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 15px;
    font-size: 15px;
    font-family: var(--font-family);
}

.search-box button{
    height: 50px;
    padding: 0 28px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-scale-white);
    background: var(--branding-success);
    transition: .3s;
}

.search-box button:hover{
    background: var(--branding-success-dark);
}

/*=========================
    Header Action
==========================*/

.header-action{
    display: flex;
    align-items: center;
    gap: 20px;
}

.action-item{
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #1A1A1A;

    transition: all .3s ease;
}

.action-item iconify-icon{
    font-size: 22px;
    transition: all .3s ease;
}

.action-item:hover{
    background: rgba(0,178,7,.12);
}

.action-item:hover iconify-icon{
    color: var(--branding-success);
}

.divider{
    width: 1px;
    height: 32px;
    background: var(--gray-scale-gray-–-200);
}

/*=========================
        Cart
==========================*/

.cart{
    width: auto;
    height: auto;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 8px 12px;

    border-radius: 12px;

    transition: .3s;
}

.cart:hover{
    background: rgba(0,178,7,.08);
}

.cart-icon{
    position: relative;
}

.cart-icon iconify-icon{
    font-size: 24px;
}

.cart-icon .badge{
    position: absolute;

    top: -6px;
    right: -8px;

    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 10px;
    font-weight: 600;

    color: #fff;
    background: var(--branding-success);

    border: 2px solid #fff;
}

.cart-info{
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.cart-info small{
    font-size: 12px;
    color: #6B7280;
}

.cart-info strong{
    font-size: 15px;
    font-weight: 600;
    color: #1A1A1A;
}

.cart:hover strong{
    color: var(--branding-success);
}


/* =========================================
   Cart Sidebar
========================================= */

.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 38, 3, 0.35);
    z-index: 9998;

    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* Sidebar */

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;

    width: 420px;
    max-width: 90vw;
    height: 100vh;

    background: var(--gray-scale-white);

    z-index: 9999;

    display: flex;
    flex-direction: column;

    transform: translateX(100%);
    visibility: hidden;

    transition:
        transform 0.35s ease,
        visibility 0.35s ease;

    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12);
}

.cart-sidebar.active {
    transform: translateX(0);
    visibility: visible;
}

/* Header */

.cart-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 24px;

    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

.cart-sidebar-header h3 {
    margin: 0 0 4px;

    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 22px;
    font-weight: 600;
}

.cart-sidebar-header span {
    color: var(--gray-scale-gray-–-500);

    font-family: var(--font-family);
    font-size: 13px;
}

.cart-close {
    width: 38px;
    height: 38px;

    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 50%;

    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    color: var(--gray-scale-gray-–-700);

    transition: all 0.2s ease;
}

.cart-close iconify-icon {
    font-size: 20px;
}

.cart-close:hover {
    background: var(--branding-success);
    color: var(--gray-scale-white);
    border-color: var(--branding-success);
}


/* Body */

.cart-sidebar-body {
    flex: 1;

    overflow-y: auto;

    padding: 0 24px;
}


/* Cart Item */

.cart-sidebar-item {
    display: flex;
    gap: 16px;

    padding: 22px 0;

    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

.cart-item-image {
    width: 90px;
    height: 90px;

    flex-shrink: 0;

    border-radius: 8px;

    background: var(--gren-gray-scale-50);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.cart-item-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


.cart-item-content {
    flex: 1;

    min-width: 0;
}

.cart-item-content h4 {
    margin: 2px 0 7px;

    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 500;
}

.cart-item-price {
    display: block;

    color: var(--branding-success);

    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
}


/* Quantity */

.cart-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 12px;
}

.cart-quantity {
    display: flex;
    align-items: center;

    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 20px;

    overflow: hidden;
}

.cart-quantity button {
    width: 28px;
    height: 28px;

    border: 0;

    background: var(--gray-scale-gray-–-50);

    color: var(--gray-scale-gray-–-700);

    cursor: pointer;
}

.cart-quantity span {
    width: 30px;

    text-align: center;

    color: var(--gren-gray-scale-900);

    font-size: 13px;
}

.cart-remove {
    border: 0;
    background: transparent;

    color: var(--gray-scale-gray-–-400);

    cursor: pointer;

    font-size: 19px;
}

.cart-remove:hover {
    color: var(--branding-error);
}


/* Footer */

.cart-sidebar-footer {
    padding: 22px 24px;

    border-top: 1px solid var(--gray-scale-gray-–-100);

    background: var(--gray-scale-white);
}

.cart-subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.cart-subtotal span {
    color: var(--gray-scale-gray-–-600);

    font-family: var(--font-family);
    font-size: 15px;
}

.cart-subtotal strong {
    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 600;
}


/* Checkout */

.cart-checkout-btn {
    width: 100%;

    min-height: 50px;

    border-radius: 30px;

    background: var(--branding-success);
    color: var(--gray-scale-white);

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;

    transition: all .2s ease;
        position: relative;
    overflow: hidden;
}

.cart-checkout-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );

    transform: skewX(-20deg);

    animation: checkoutShine 2.5s infinite;
}

@keyframes checkoutShine {
    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 150%;
    }
}

.cart-checkout-btn:hover {
    background: var(--branding-success-dark);
    color: var(--gray-scale-white);
}


/* Continue Shopping */

.continue-shopping {
    width: 100%;

    margin-top: 12px;

    border: 0;
    background: transparent;

    color: var(--branding-success);

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;
}

/* =====================================
   Main Header End
===================================== */

/*=========================
        Navbar
==========================*/

.headerlast{
    background: #fff;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
}

.header-navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

/*=========================
        Menu
==========================*/

.main-menu ul{
    display: flex;
    align-items: center;
    gap: 42px;
    margin: 0;
    padding: 0;
}

.main-menu li{
    list-style: none;
}

.main-menu a{
    position: relative;
    display: inline-block;

    color: #374151;
    text-decoration: none;

    font-size: 16px;
    font-weight: 500;

    transition: all .3s ease;
}

.main-menu a:hover,
.main-menu a.active{
    color: var(--branding-success);
}

.main-menu a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -23px;

    width: 0;
    height: 2px;

    background: var(--branding-success);

    transition: width .3s ease;
}

.main-menu a:hover::after,
.main-menu a.active::after{
    width: 100%;
}

/*=========================
    Contact
==========================*/

.nav-contact a{
    display: flex;
    align-items: center;
    gap: 10px;

    color: #1a1a1a;
    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition: .3s;
}

.nav-contact a:hover{
    color: var(--branding-success);
}

.nav-contact iconify-icon{
    font-size: 20px;
    color: var(--branding-success);
}

/*=========================
    Contact
==========================*/

.nav-contact a{
    display: flex;
    align-items: center;
    gap: 12px;

    color: #1a1a1a;
    text-decoration: none;

    transition: .3s;
}

.nav-contact a:hover{
    color: var(--branding-success);
}

.nav-contact iconify-icon{
    font-size: 22px;
    color: var(--branding-success);

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0, 178, 7, 0.08);
}

.contact-info{
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.contact-info small{
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

.contact-info span{
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.nav-contact a:hover .contact-info span{
    color: var(--branding-success);
}

/*=========================
    Contact
==========================*/

.nav-contact a{
    display: flex;
    align-items: center;
    gap: 12px;

    color: #1a1a1a;
    text-decoration: none;

    transition: .3s;
}

.nav-contact a:hover{
    color: var(--branding-success);
}

.nav-contact iconify-icon{
    font-size: 22px;
    color: var(--branding-success);

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0, 178, 7, 0.08);
}

.contact-info{
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.contact-info small{
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

.contact-info span{
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.nav-contact a:hover .contact-info span{
    color: var(--branding-success);
}

.nav-contact iconify-icon{
    transition: .3s;
}

.nav-contact a:hover iconify-icon{
    background: var(--branding-success);
    color: #fff;
}

#banner{
	background-color: var(--gray-scale-gray-–-50);
	position: relative;
    margin-bottom: 50px;
}
.swiper-slide .bsOne h5{
	padding-top: 100px;
	font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 0.02em;
color: var(--branding-success);
}
.swiper-slide .bsOne h1{
	padding-top: 8px;
	font-family: var(--font-family);
font-weight: 600;
font-size: 68px;
line-height: 120%;
color: var(--gray-scale-gray-–-900);
}
.swiper-slide .bsOne p{
	padding-top: 28px;
	font-family: var(--font-family);
font-weight: 400;
font-size: 32px;
line-height: 120%;
color: var(--gray-scale-gray-–-900);
}
.swiper-slide .bsOne b{
	font-weight: 600;
color: var(--branding-warning);
font-size: 32px;
line-height: 120%;
}
.swiper-slide .bsOne span{
	padding-top: 12px;
	font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 150%;
color: var(--gray-scale-gray-–-500);
}
.swiper-slide .bsOne button{
	margin-top: 32px;
	border-radius: 53px;
	margin-bottom: 100px;
padding: 16px 40px;
background: var(--branding-success);
font-family: var(--font-family);
font-weight: 600;
font-size: 16px;
line-height: 120%;
color: var(--gray-scale-white);
}
.swiper-slide .bsOne img{
	margin-top: 100px;
}
.swiper-wrapper{
	position: relative;
}
.swiper-pagination-bullet{

	background: var(--gray-scale-gray-–-200);
	opacity: 1;
}
.swiper-pagination-bullet-active{
	background: var(--branding-success);
	opacity: 1;
	border-radius: 50px;
}

/*=====================================
    FEATURE SECTION START
======================================*/

#why-choose{
    margin-bottom: 100px;
}

.why-card{
    position: relative;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 28px 22px;

    background: var(--gray-scale-white);

    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 16px;

    overflow: hidden;

    transition: all .35s ease;
}

/* Top Accent Line */

.why-card::before{
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 0;
    height: 3px;

    background: var(--branding-success);

    transform: translateX(-50%);
    transition: .35s ease;
}

/* Hover */

.why-card:hover{

    transform: translateY(-8px);

    border-color: rgba(0,178,7,.25);

    box-shadow: 0 20px 40px rgba(44,116,47,.12);

}

.why-card:hover::before{

    width: 100%;

}

/*=====================================
    ICON
======================================*/

.why-icon{

    width: 62px;
    height: 62px;

    min-width: 62px;

    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0,178,7,.08);

    transition: .35s ease;

}

.why-icon iconify-icon{

    font-size: 30px;

    color: var(--branding-success);

    transition: .35s ease;

}

.why-card{
    height: 100%;
}

.why-card:hover .why-icon{

    background: var(--branding-success);

    transform: rotate(-10deg) scale(1.08);

}

.why-card:hover .why-icon iconify-icon{

    color: #fff;

}

/*=====================================
    CONTENT
======================================*/

.why-content h5{

    font-size: 18px;

    font-weight: 600;

    color: var(--gren-gray-scale-900);

    margin-bottom: 6px;

    transition: .35s;

}

.why-content p{

    font-size: 14px;

    color: var(--gray-scale-gray-–-600);

    margin: 0;

    line-height: 24px;

}

.why-card:hover .feature-content h5{

    color: var(--branding-success);

}

/*=====================================
    RESPONSIVE
======================================*/

@media(max-width:991px){

    #why-choose{

        padding: 50px 0;

    }

    .why-card{

        padding: 22px 18px;

    }

}

@media(max-width:576px){

    .why-card{

        gap: 15px;

    }

    .why-icon{

        width: 54px;
        height: 54px;
        min-width: 54px;

    }

    .why-icon iconify-icon{

        font-size: 24px;

    }

    .why-content h5{

        font-size: 16px;

    }

    .why-content p{

        font-size: 13px;

    }

}


/* =====================================
   Category start 
===================================== */

#category{
    margin-bottom: 100px;
}

#category .heading{
    margin-bottom: 35px;
}

#category .heading h2{
    font-size: 34px;
    font-weight: 500;
    color: var(--gray-scale-gray-–-700);
    margin: 0;
    line-height: 1.2;
}

#category .heading a{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 16px;
    font-weight: 500;
    color: var(--branding-success);

    text-decoration: none;

    transition: all .35s ease;
}

#category .heading a span{
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform .35s ease;
}

#category .heading a:hover{
    color: var(--branding-success-dark);
}

#category .heading a:hover span{
    transform: translateX(6px);
}

#category .categoryCard{
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 5px;
    padding: 16px 0px 24px;
    margin-top: 24px;

    transition: all .35s ease;
}

#category .categoryCard h5{
    font-weight: 500;
    font-size: 16px;
    color: var(--gray-scale-gray-–-700);
    margin-top: 16px;

    transition: color .35s ease;
}
#category .categoryCard:hover{
    border: 1px solid var(--branding-success);
    box-shadow: 0 0 12px 0 rgba(32, 181, 38, 0.32);
    background: var(--gray-scale-white);
}
#category .categoryCard:hover h5{
    color: var(--branding-success);
}

/* =====================================
   Category End 
===================================== */
/* =====================================
   Product Start Here
===================================== */

#product{
    padding: 50px 0;
}

#product .heading{
    margin-bottom: 50px;
}

#product .heading h2{
    font-size: 34px;
    font-weight: 500;
    color: var(--gray-scale-gray-–-700);
    margin: 0;
    line-height: 1.2;
}

#product .heading a{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 16px;
    font-weight: 500;
    color: var(--branding-success);

    text-decoration: none;

    transition: all .35s ease;
}

#product .heading a span{
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform .35s ease;
}

#product .heading a:hover{
    color: var(--branding-success-dark);
}

#product .heading a:hover span{
    transform: translateX(6px);
}

#product .productCard{
    position: relative;
    overflow: hidden;

    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 12px;
    background: var(--gray-scale-white);

    cursor: pointer;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
        margin-bottom: 20px;
}

#product .productCard .productImg{
    position: relative;
    text-align: center;
}

#product .productCard .productImg .hoverIcon{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 10px;
    top: 16px;
    right: 16px;
    opacity: 0;
    transform: translateY(-50px);
    transition: 0.3s;
}

#product .productCard:hover .hoverIcon{
    opacity: 1;
    transform: translateY(0px);
}

#product .productCard .productImg .hoverIcon a iconify-icon{
    padding: 10px;
    border-radius: 50%;
    border: 1px solid var(--gray-scale-gray-–-100);
    background-color: var(--gray-scale-white);
    color: var(--gray-scale-gray-–-700);
    transition: 0.3s;
}

#product .productCard .productImg .hoverIcon a iconify-icon:hover{
    background-color: rgb(212, 242, 212);
    color: var(--branding-success);
}

#product .productCard .productImg .discount p{
    position: absolute;
    display: inline;
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-scale-white);
    padding: 4px 8px;
    background-color: var(--branding-error);
    border-radius: 3px;
    top: 16px;
    left: 16px;
}

#product .productCard .productCnt{
    position: relative;
    padding: 12px;
}

#product .productCard .productCnt a{
    font-weight: 400;
    font-size: 14px;
    color: var(--gray-scale-gray-–-700);
}

#product .productCard .productCnt p{
    font-weight: 500;
    font-size: 16px;
    color: var(--gray-scale-gray-–-900);
}

#product .productCard .productCnt p del{
    font-weight: 400;
    font-size: 16px;
    color: var(--gray-scale-gray-–-400);
}

#product .productCard .productCnt .rating iconify-icon{
    color: var(--branding-warning);
    margin-left: -5px;
}

#product .productCard .productCnt .rating .mutedStar{
    color: var(--gray-scale-gray-–-200);
}

#product .productCard .productCnt .addToCart iconify-icon{
    position: absolute;
    color: var(--gray-scale-gray-–-900);
    background-color: var(--gray-scale-gray-–-100);
    padding: 10px;
    border-radius: 50%;
    top: 23px;
    right: 16px;
        transition:
        transform .35s ease,
}

#product .productCard:hover .addToCart iconify-icon{
    background-color: var(--branding-success);
    color: var(--gray-scale-white);
}

#product .productCard:hover .productCnt a{
    color: var(--branding-success-dark);
}

#product .productCard:hover{
    transform: translateY(-8px);

    border-color: var(--branding-success);

    box-shadow:
        0 18px 40px rgba(44,116,47,.12);
}

#product .hoverIcon a{

    opacity:0;

    transform:translateX(20px);

    transition:.35s;

}


#product .productCard:hover .hoverIcon a{

    opacity:1;

    transform:translateX(0);
    

}

#product .hoverIcon a:nth-child(1){

    transition-delay:.05s;

}

#product .hoverIcon a:nth-child(2){

    transition-delay:.1s;

}

#product .hoverIcon a:nth-child(3){

    transition-delay:.15s;

}

#product .addToCart iconify-icon{

    transition:
    .35s;

}

#product .productCard:hover .addToCart iconify-icon{

    transform:scale(1.08);

}

#product .productCnt a{

    transition:.3s;

}

#product .rating{

    transition:.35s;

}

#product .productCard:hover .rating{

    transform:translateY(-2px);

}

#product .rating{

    transition:.35s;

}

#product .productCard:hover .rating{

    transform:translateY(-2px);

}

/* =====================================
   Product End Here
===================================== */

#cot{
    padding: 50px 0;
}
#cot .cot_bg1{
    background: url(../img/vegImg.png);
    height: 465px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right:17px;
    padding-top: 25px;
}
#cot .cot_bg2{
    background: url(../img/MeatImg.png);
    height: 465px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right:17px;
    padding-top: 25px;
}
#cot .cot_bg3{
    background: url(../img/fruitImg.png);
    height: 465px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 25px;
}
#cot h6{
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    color: var(--gray-scale-white);
}
#cot h3{
    font-weight: 600;
    font-size: 35px;
    line-height: 120%;
    text-align: center;
    color: var(--gray-scale-white);
}
#cot p{
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    color: var(--gray-scale-white);
    margin-top: 10px;
    margin-bottom: 15px;
}
#cot p span.span_1{
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
    text-align: center;
    color: var(--branding-warning);
}
#cot p span.span_2{
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    color: #fcc900;
    background: var(--gren-gray-scale-900);
    border-radius: 5px;
    padding: 6px 12px;
    width: 100px;
    height: 39px;
}
#cot a {
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    text-align: justify;
    color: var(--branding-success);
    border-radius: 43px;
    padding: 13px 32px;
    width: 165px;
    height: 45px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12);
    background: var(--gray-scale-white);
    display: block;
    margin: auto;
}
#cot .cot_sale_timer{
    margin-bottom: 15px;
}
#cot .cot_sale_timer span{
    color: white;
    display: block;
    text-align: center;
    margin-right: 15px;
}
#cot .cot_sale_timer span.span_1{
    color: white;
    text-align: center;
    font-size: 20px;
}
#cot .cot_sale_timer span{
    color: white;
    text-align: center;
    font-size: 15px;
}
#cot .cot_sale_timer span.colon_sign{
    display: flex;
    align-items: center;
    font-size: 25px;
}

/* =====================================
   Hot Deals Start here
===================================== */

#hotdeals{
    padding: 50px 0;
    background-color: #F7F7F7;
}

#hotdeals .heading{
    margin-bottom: 50px;
}

#hotdeals .heading h2{
    font-size: 34px;
    font-weight: 500;
    color: var(--gray-scale-gray-–-700);
    margin: 0;
    line-height: 1.2;
}

#hotdeals .heading a{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 16px;
    font-weight: 500;
    color: var(--branding-success);

    text-decoration: none;

    transition: all .35s ease;
}

#hotdeals .heading a span{
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform .35s ease;
}

#hotdeals .heading a:hover{
    color: var(--branding-success-dark);
}

#hotdeals .heading a:hover span{
    transform: translateX(6px);
}
 
.hotdealTop {
    display: flex;
    gap: 20px;
    align-items: stretch;
}
 
/* ---------- Featured card ---------- */
 
.hotdealFeatured {
    position: relative;
    flex: 0 0 32%;
    border: 1px solid var(--branding-success);
    border-radius: 12px;
    padding: 20px;
    background: var(--gray-scale-white);
}
 
.hotdealBadges {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
 
.badge-sale {
    background: var(--branding-error);
    color: var(--gray-scale-white);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
}
 
.badge-best {
    background: #2f6fed;
    color: var(--gray-scale-white);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
}
 
.hotdealImgPlaceholder {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    margin-bottom: 16px;
    background: var(--gren-gray-scale-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}
 
.hotdealActions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
 
.iconCircle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--gren-gray-scale-50);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-scale-gray-–-700);
    cursor: pointer;
    font-size: 18px;
    text-decoration: none;
}
 
.addToCartBtn {
    flex: 1;
    background: var(--branding-success);
    color: var(--gray-scale-white);
    border: none;
    border-radius: 30px;
    padding: 12px 20px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
 
.hotdealInfo {
    text-align: center;
}
 
.hotdealTitle {
    color: var(--branding-success);
    font-weight: 500;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}
 
.hotdealPrice {
    font-size: 20px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 8px;
}
 
.hotdealPrice del {
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-scale-gray-–-400);
    margin-left: 6px;
}
 
.rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
 
.rating .star {
    color: var(--branding-warning);
    font-size: 14px;
}
 
.rating .star.muted {
    color: var(--gray-scale-gray-–-100);
}
 
.feedbackCount {
    color: var(--gray-scale-gray-–-500);
    font-size: 13px;
    margin-left: 4px;
}
 
.hotdealCountdown {
    margin-top: 16px;
    border-top: 1px solid var(--gray-scale-gray-–-50);
    padding-top: 16px;
}
 
.offerLabel {
    color: var(--gray-scale-gray-–-500);
    font-size: 13px;
    margin-bottom: 10px;
}
 
.countdownTimer {
    display: flex;
    justify-content: center;
    gap: 18px;
}
 
.timeBlock {
    text-align: center;
}
 
.timeBlock span {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
}
 
.timeBlock small {
    font-size: 10px;
    letter-spacing: 0.5px;
    color: var(--gray-scale-gray-–-400);
    text-transform: uppercase;
}


/* =====================================
   Discount Banner css Start 
===================================== */
#discount-banner{
    padding: 50px 0;
}
#discount-banner .sale-banner {
    position: relative;
    width: 100%;
    min-height: 234px;

    display: flex;
    align-items: center;

    overflow: hidden;
    border-radius: 6px;

    background-image: url("../img/discount-bannar.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#discount-banner .sale-banner__content {
    position: relative;
    z-index: 2;

    width: 50%;
    margin-left: 62%;

    color: #fff;
}

#discount-banner .sale-banner__subtitle {
    display: block;

    margin-bottom: 6px;

    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.2px;

    color: #fff;
}

#discount-banner .sale-banner__title {
    margin: 0 0 12px;

    font-size: 36px;
    font-weight: 400;
    line-height: 1;

    color: #fff;
}

#discount-banner .sale-banner__title strong {
    color: #ff8a00;
    font-weight: 700;
}

#discount-banner .sale-banner__description {
    max-width: 285px;

    margin: 0 0 24px;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;

    color: #a9a9a9;
}

#discount-banner .sale-banner__button {
    position: relative;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    min-width: 126px;
    height: 35px;
    padding: 0 16px;

    border-radius: 20px;

    background: #00b207;
    color: #fff;

    font-size: 11px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.2s ease;
}

/* Shine effect */
#discount-banner .sale-banner__button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;

    width: 50%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );

    transform: skewX(-20deg);

    animation: buttonShine 2.8s ease-in-out infinite;
}

@keyframes buttonShine {
    0% {
        left: -100%;
    }

    45% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

/* Keep content above shine */
#discount-banner .sale-banner__button iconify-icon,
.sale-banner__button {
    isolation: isolate;
}

#discount-banner .sale-banner__button:hover {
    background: #009c06;
}

#discount-banner .sale-banner__button iconify-icon {
    position: relative;
    z-index: 2;

    font-size: 18px;
    transition: transform 0.2s ease;
}

#discount-banner .sale-banner__button:hover iconify-icon {
    transform: translateX(3px);
}


/* =========================
   Responsive
========================= */

@media (max-width: 768px) {
    .sale-banner {
        min-height: 220px;
        background-position: center;
    }

    .sale-banner__content {
        width: 55%;
        margin-left: 45%;
        padding-right: 20px;
    }

    .sale-banner__title {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .sale-banner {
        min-height: 300px;

        background-position: 35% center;
    }

    .sale-banner__content {
        width: 100%;
        margin-left: 0;

        padding: 35px 25px;

        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.25)
        );
    }

    .sale-banner__title {
        font-size: 32px;
    }
}

/* =====================================
   Discount Banner End 
===================================== */

/* =====================================
   Latest News Start
===================================== */

#news {
    padding: 60px 0;
}

#news h2 {
    margin-bottom: 32px;

    color: var(--gray-scale-gray-–-700);
    font-size: 34px;
    font-weight: 500;
    text-align: center;
}


/* ---------- News Card ---------- */

#news .newsCard {
    cursor: pointer;
}


/* ---------- News Image ---------- */

#news .newsCard .newsCardImg {
    position: relative;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
}

#news .newsCard .newsCardImg > a {
    display: block;
    overflow: hidden;
}

#news .newsCard .newsCardImg img {
    width: 100%;
    display: block;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


/* ---------- Date ---------- */

#news .newsCard .newsCardImg .newsDate {
    position: absolute;
    z-index: 2;
    bottom: 24px;
    left: 24px;

    min-width: 58px;
    padding: 10px 14px;

    background-color: var(--gray-scale-white);
    border-radius: 5px;

    text-align: center;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

#news .newsCard .newsCardImg .newsDate h6 {
    color: var(--gray-scale-gray-–-900);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

#news .newsCard .newsCardImg .newsDate p {
    margin-top: 2px;

    color: var(--gray-scale-gray-–-500);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}


/* ---------- Content ---------- */

#news .newsCard .newsCardCnt {
    padding: 24px;

    background-color: var(--gray-scale-white);
    border: 1px solid var(--gray-scale-gray-–-100);
    border-top: 0;
    border-radius: 0 0 5px 5px;

    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


/* ---------- Meta Information ---------- */

#news .newsCard .newsCardCnt .newsInfo .icon {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}

#news .newsCard .newsCardCnt .newsInfo .icon a {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin: 0;

    color: var(--gray-scale-gray-–-700);
    font-size: 14px;
    font-weight: 400;

    transition: color 0.3s ease;
}

#news .newsCard .newsCardCnt .newsInfo .icon a iconify-icon {
    color: var(--gray-scale-gray-–-300);
    font-size: 20px;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* ---------- Title ---------- */

#news .newsCard .newsCardCnt .newsInfo h4 {
    margin: 12px 0 20px;

    color: var(--gray-scale-gray-–-900);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;

    transition:
        color 0.4s ease,
        transform 0.4s ease;
}


/* ---------- Read More ---------- */

#news .newsCard .newsCardCnt .newsInfo > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--branding-success);
    font-size: 16px;
    font-weight: 600;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}

#news .newsCard .newsCardCnt .newsInfo > a iconify-icon {
    font-size: 18px;

    transition: transform 0.3s ease;
}


/* =====================================
   Hover Animation
===================================== */

/* Image Zoom */
#news .newsCard:hover .newsCardImg img {
    transform: scale(1.06);
    filter: brightness(0.96);
}


/* Date Animation */
#news .newsCard:hover .newsDate {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}


/* Card Content */
#news .newsCard:hover .newsCardCnt {
    border-color: var(--branding-success);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}


/* Meta Text */
#news .newsCard:hover .newsInfo .icon a {
    color: var(--branding-success);
}


/* Meta Icons */
#news .newsCard:hover .newsInfo .icon a iconify-icon {
    color: var(--branding-success);
    transform: translateY(-2px);
}


/* Title */
#news .newsCard:hover .newsInfo h4 {
    color: var(--branding-success);
}


/* Read More */
#news .newsCard:hover .newsInfo > a {
    gap: 10px;
}

#news .newsCard:hover .newsInfo > a iconify-icon {
    transform: translateX(4px);
}


/* =====================================
   Latest News End
===================================== */

/* =====================================
   Testimonial Start
===================================== */

#testimonial {
    padding: 60px 0;
    background-color: var(--gray-scale-gray-–-50);
}


/* ---------- Heading ---------- */

#testimonial .testimonialHeading {
    margin-bottom: 32px;
}

#testimonial .testimonialHeading h2 {
    margin: 0;

    color: var(--gray-scale-gray-–-700);
    font-size: 34px;
    font-weight: 500;
}


/* ---------- Arrow Navigation ---------- */

#testimonial .testimonialHeading .arrowIcon {
    display: flex;
    align-items: center;
    gap: 12px;
}

#testimonial .testimonialHeading .arrowIcon iconify-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: var(--gray-scale-gray-–-900);

    border: 1px solid var(--gray-scale-gray-–-200);
    border-radius: 50%;

    cursor: pointer;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

#testimonial .testimonialHeading .arrowIcon iconify-icon:hover {
    color: var(--gray-scale-white);
    background-color: var(--branding-success);
    border-color: var(--branding-success);

    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


/* =====================================
   Testimonial Card
===================================== */

#testimonial .testimonialCard {
    height: 100%;

    padding: 24px;

    background-color: var(--gray-scale-white);
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 8px;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}

#testimonial .testimonialCard:hover {
    border-color: var(--branding-success);

    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}


/* ---------- Testimonial Content ---------- */

#testimonial .testimonialCard .testimonialCnt {
    position: relative;

    padding-bottom: 24px;
}

#testimonial .testimonialCard .testimonialCnt > iconify-icon {
    margin-bottom: 14px;

    color: var(--branding-success);

    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

#testimonial .testimonialCard:hover .testimonialCnt > iconify-icon {
    transform: translateY(-4px) scale(1.05);
}

#testimonial .testimonialCard .testimonialCnt p {
    margin: 0;

    color: var(--gray-scale-gray-–-500);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}


/* ---------- Person ---------- */

#testimonial .testimonialCard .testimonialPerson {
    padding-top: 20px;

    border-top: 1px solid var(--gray-scale-gray-–-100);
}


/* ---------- Person Info ---------- */

#testimonial .testimonialCard .personInfo {
    gap: 12px;
}

#testimonial .testimonialCard .personImg {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    overflow: hidden;

    border-radius: 50%;
}

#testimonial .testimonialCard .personImg img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}

#testimonial .testimonialCard:hover .personImg img {
    transform: scale(1.1);
}


/* ---------- Person Name ---------- */

#testimonial .testimonialCard .personName h6 {
    margin: 0 0 4px;

    color: var(--gray-scale-gray-–-900);
    font-size: 15px;
    font-weight: 500;

    transition: color 0.3s ease;
}

#testimonial .testimonialCard:hover .personName h6 {
    color: var(--branding-success);
}

#testimonial .testimonialCard .personName p {
    margin: 0;

    color: var(--gray-scale-gray-–-400);
    font-size: 13px;
    font-weight: 400;
}


/* ---------- Rating ---------- */

#testimonial .testimonialCard .rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

#testimonial .testimonialCard .rating iconify-icon {
    color: #ffb800;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

#testimonial .testimonialCard:hover .rating iconify-icon {
    transform: translateY(-2px);
}

#testimonial .testimonialCard:hover .rating iconify-icon:nth-child(1) {
    transition-delay: 0.02s;
}

#testimonial .testimonialCard:hover .rating iconify-icon:nth-child(2) {
    transition-delay: 0.04s;
}

#testimonial .testimonialCard:hover .rating iconify-icon:nth-child(3) {
    transition-delay: 0.06s;
}

#testimonial .testimonialCard:hover .rating iconify-icon:nth-child(4) {
    transition-delay: 0.08s;
}

#testimonial .testimonialCard:hover .rating iconify-icon:nth-child(5) {
    transition-delay: 0.10s;
}


/* =====================================
   Responsive
===================================== */

@media (max-width: 991px) {

    #testimonial {
        padding: 50px 0;
    }

    #testimonial .testimonialCard {
        margin-bottom: 24px;
    }

}


@media (max-width: 575px) {

    #testimonial {
        padding: 40px 0;
    }

    #testimonial .testimonialHeading h2 {
        font-size: 28px;
    }

    #testimonial .testimonialHeading .arrowIcon {
        gap: 8px;
    }

    #testimonial .testimonialHeading .arrowIcon iconify-icon {
        width: 38px;
        height: 38px;
    }

    #testimonial .testimonialCard {
        padding: 20px;
    }

    #testimonial .testimonialCard .testimonialPerson {
        align-items: flex-start !important;
        gap: 15px;
    }

    #testimonial .testimonialCard .rating {
        padding-top: 5px;
    }

}

/* =====================================
   Testimonial End
===================================== */

/* =====================================
   Advertisement start 
===================================== */

#advertisement {
    padding: 50px 0;
}

/* =====================================
   Advertisement start 
===================================== */

/* =====================================
   Instagram Start Here
===================================== */

#instaPost {
    padding: 60px 0;
}

#instaPost h2 {
    margin-bottom: 32px;
    color: var(--gray-scale-gray-–-700);
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}

/* Instagram Image */
#instaPost .instaImg {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

/* Image */
#instaPost .instaImg img {
    display: block;
    width: 100%;
    transition: transform 0.5s ease;
}

/* Glass Overlay */
#instaPost .instaImg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(82, 196, 124, 0.35);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);

    opacity: 0;
    transform: scale(0.95);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        backdrop-filter 0.4s ease;
}

/* Instagram Icon */
#instaPost .instaIcon a {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    color: var(--gray-scale-white);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        opacity 0.35s ease,
        transform 0.4s ease,
        background 0.3s ease;
}

/* Hover Overlay */
#instaPost .instaImg:hover::before {
    opacity: 1;
    transform: scale(1);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Hover Image */
#instaPost .instaImg:hover img {
    transform: scale(1.05);
}

/* Hover Icon */
#instaPost .instaImg:hover .instaIcon a {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Icon Hover */
#instaPost .instaIcon a:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%) scale(1.08);
}

/* =====================================
   Instagram End Here
===================================== */

#newsletter{
    padding: 60px 0;
    background: var(--gren-gray-scale-50);
}
#newsletter .newsletterTypo h5{
    font-weight: 500;
    font-size: 24px;
    line-height: 150%;
    color: var(--gray-scale-gray-–-900);
}
#newsletter .newsletterTypo p{
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--gray-scale-gray-–-400);
}
#newsletter .mailSubmit{
    display: flex;
}
#newsletter .mailSubmit input{
    padding: 10px 14px;
    border: none;
    width: 300px;
    border-top-left-radius: 46px;
    border-bottom-left-radius: 46px;
    outline: none;
}
#newsletter .mailSubmit a{
    width: 100px;
    padding: 11px 12px;
    background: var(--branding-success);
    color: var(--gray-scale-white);
    border-bottom-right-radius: 46px;
    border-top-right-radius: 46px;
}
footer {
    padding: 80px 0 0 0;
    background: var(--gray-scale-gray-–-900);
}
footer ul li{
    margin-bottom: 12px;
}
footer h5{
    color: var(--gray-scale-white);
    margin-bottom: 25px;
}
footer p{
    color: var(--gray-scale-gray-–-500);
}
footer a{
    color: var(--gray-scale-gray-–-400);
    transition: .2s;
}
footer a:hover{
    color: var(--gray-scale-white);
}
footer .contact{
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--gray-scale-white);
    border-bottom: 2px solid var(--branding-success);
    padding: 0 0 6px 0;
    margin-top: 20px;
    display: inline-block;
}
footer .about span{
  color: var(--gray-scale-gray-–-500);
}
footer .apps span{
    color: var(--gray-scale-gray---200);
}

footer .apps a{
    font-size: 10px;
    text-align: center;
	color: var(--gray-scale-gray-–-300);
}
footer .appStore, .playStore{
	width: 130px;
background: var(--gray-scale-gray-–-800);
}
footer .appStore span{
    font-size: 16px;
	color: var(--gray-scale-white);
}
footer .playStore span{
    font-size: 16px;
	color: var(--gray-scale-white);
}
.appStore iconify-icon,
.playStore iconify-icon{
    font-size: 40px;
}
footer .copyright{
    border-top: 1px solid var(--gray-scale-gray---500);
    padding-top: 15px;
}
footer .socialMedia ul{
    display: flex;
    gap: 12px;
}
footer .socialMedia ul li a{
    color: var(--gray-scale-white);
    font-size: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 40px;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .socialMedia ul li:hover a{
    background: var(--branding-success);
}
footer .copyright p{
	font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 150%;
color: var(--gray-scale-gray-–-500);
}
footer .payment li{
	padding-right: 8px;
}


/* =========================================
   Checkout Page Start 
========================================= */

#checkout-page{
    padding: 60px 0;
}

.checkout-header {
    position: relative;

    margin-bottom: 60px;
    padding: 55px 20px 50px;

    text-align: center;

    background: var(--gren-gray-scale-50);

    border-radius: 12px;

    overflow: hidden;
}

.checkout-header::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -150px;
    left: -80px;

    border-radius: 50%;

    background: rgba(0, 178, 7, 0.07);
}

.checkout-header::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    bottom: -130px;

    border-radius: 50%;

    background: rgba(0, 178, 7, 0.06);
}


.checkout-header-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* Icon */

.checkout-header-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--gray-scale-white);

    color: var(--branding-success);

    box-shadow: 0 5px 18px rgba(0, 178, 7, 0.10);
}

.checkout-header-icon iconify-icon {
    font-size: 25px;
}


/* Small Label */

.checkout-header-label {
    margin-bottom: 8px;

    color: var(--branding-success);

    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}


/* Title */

.checkout-header h1 {
    margin: 0;

    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 38px;
    font-weight: 600;

    line-height: 1.25;
}


/* Description */

.checkout-header p {
    max-width: 520px;

    margin: 10px 0 20px;

    color: var(--gray-scale-gray-–-600);

    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.7;
}


/* Breadcrumb */

.checkout-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    font-family: var(--font-family);
    font-size: 13px;
}

.checkout-breadcrumb a {
    color: var(--branding-success);

    text-decoration: none;

    font-weight: 500;
}

.checkout-breadcrumb iconify-icon {
    color: var(--gray-scale-gray-–-400);

    font-size: 15px;
}

.checkout-breadcrumb span {
    color: var(--gray-scale-gray-–-500);
}


/* Card */

.checkout-card {
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 10px;
    background: var(--gray-scale-white);
}

.checkout-card-header {
    padding: 24px 28px;

    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

.checkout-card-header h3,
.checkout-summary h3 {
    margin: 0;

    color: var(--gren-gray-scale-900);
    font-family: var(--font-family);
    font-size: 20px;
    font-weight: 600;
}

.checkout-form {
    padding: 28px;
}


/* Inputs */

.checkout-input {
    margin-bottom: 22px;
}

.checkout-input label {
    display: block;

    margin-bottom: 8px;

    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
}

.checkout-input label span {
    color: var(--branding-error);
}

.checkout-input label small {
    color: var(--gray-scale-gray-–-500);
    font-weight: 400;
}

.checkout-input input,
.checkout-input select,
.checkout-input textarea {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 6px;

    outline: none;

    background: var(--gray-scale-white);

    color: var(--gray-scale-gray-–-700);

    font-family: var(--font-family);
    font-size: 14px;

    transition: border-color 0.2s ease;
}

.checkout-input textarea {
    resize: vertical;
}

.checkout-input input:focus,
.checkout-input select:focus,
.checkout-input textarea:focus {
    border-color: var(--branding-success);
}


/* Checkbox */

.checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 2px 0 22px;
}

.checkout-checkbox input {
    width: 17px;
    height: 17px;

    accent-color: var(--branding-success);

    cursor: pointer;
}

.checkout-checkbox label {
    color: var(--gray-scale-gray-–-700);

    font-family: var(--font-family);
    font-size: 14px;

    cursor: pointer;
}


/* Order Summary */

.checkout-summary {
    padding: 28px;

    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 10px;

    background: var(--gray-scale-white);
}

.checkout-summary h3 {
    margin-bottom: 24px;
}


/* Products */

.summary-product {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 18px;
}

.summary-product-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.summary-product-image {
    width: 58px;
    height: 58px;

    border-radius: 6px;

    background: var(--gren-gray-scale-50);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.summary-product-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.summary-product h5 {
    margin: 0 0 4px;

    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
}

.summary-product span {
    color: var(--gray-scale-gray-–-500);

    font-family: var(--font-family);
    font-size: 12px;
}

.summary-product strong {
    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
}


/* Divider */

.summary-divider {
    width: 100%;
    height: 1px;

    margin: 18px 0;

    background: var(--gray-scale-gray-–-100);
}


/* Summary Rows */

.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;

    font-family: var(--font-family);
    font-size: 14px;
}

.summary-row span {
    color: var(--gray-scale-gray-–-600);
}

.summary-row strong {
    color: var(--gren-gray-scale-900);
    font-weight: 500;
}

.free-shipping {
    color: var(--branding-success) !important;
}


/* Total */

.summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-total span {
    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 600;
}

.summary-total strong {
    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 22px;
    font-weight: 600;
}


/* Payment */

.payment-section {
    margin-top: 28px;
}

.payment-section h4 {
    margin: 0 0 15px;

    color: var(--gren-gray-scale-900);

    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
}

.payment-option {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;

    color: var(--gray-scale-gray-–-700);

    font-family: var(--font-family);
    font-size: 14px;

    cursor: pointer;
}

.payment-option input {
    position: absolute;
    opacity: 0;
}

.payment-radio {
    width: 18px;
    height: 18px;

    border: 1px solid var(--gray-scale-gray-–-300);
    border-radius: 50%;

    position: relative;
}

.payment-option input:checked + .payment-radio {
    border-color: var(--branding-success);
}

.payment-option input:checked + .payment-radio::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    top: 3px;
    left: 3px;

    border-radius: 50%;

    background: var(--branding-success);
}


/* Place Order */

.place-order-btn {
    width: 100%;

    margin-top: 25px;
    padding: 14px 20px;

    position: relative;
    overflow: hidden;

    border: 0;
    border-radius: 30px;

    background: var(--branding-success);
    color: var(--gray-scale-white);

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s ease;

    isolation: isolate;
}

.place-order-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );

    transform: skewX(-20deg);

    animation: placeOrderShine 2.5s infinite;

    z-index: 1;

    pointer-events: none;
}

@keyframes placeOrderShine {

    0% {
        left: -100%;
    }

    45%,
    100% {
        left: 150%;
    }

}

.place-order-btn:hover {
    background: var(--branding-success-dark);
}



/* Responsive */

@media (max-width: 991px) {

    .checkout-page {
        padding: 50px 0 70px;
    }

    .checkout-header {
        margin-bottom: 35px;
    }

    .checkout-summary {
        margin-top: 5px;
    }
}


@media (max-width: 575px) {

    .checkout-page {
        padding: 40px 0 60px;
    }

    .checkout-header h1 {
        font-size: 28px;
    }

    .checkout-form,
    .checkout-summary {
        padding: 20px;
    }

    .checkout-card-header {
        padding: 20px;
    }
}


/* =========================================
   Checkout Page End 
========================================= */

/*  sign in start*/
.login-box {
    margin: 30px 0 30px 0;
border: 1px solid var(--gray-scale-gray-–-50);
border-radius: 8px;
padding: 24px 24px 32px;
width: 520px;
box-shadow: 0 0 56px 0 rgba(0, 38, 3, 0.08);
background: var(--gray-scale-white);
}
.login-box h2 {
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
}
.input-group {
    margin-bottom: 15px;
}
.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}
.input-group input:focus {
    outline: none;
    border-color: var(--branding-success-dark);
}
.password-group {
    position: relative;
}
.eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.forgetPass{
    color: var(--gray-scale-gray-–-900);
    margin-left: 196px;
}
.forgetPass, .remember{
    margin-bottom: 20px;
}
.login-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background: var(--branding-success);
    color: white;
    font-size: 16px;
    border-radius: 25px;
    cursor: pointer;
    transition: 0.3s;
}
.login-btn:hover {
    background: var(--branding-success);
}
.register-text {
    margin-top: 18px;
    color: var(--gray-scale-gray-–-900);
    font-size: 14px;
}

/*  sign in end*/
/*  sign up start*/
.form-wrapper {
    max-width: 520px;
    margin: auto;
    padding: 30px 0;
}


.card {
 box-shadow: 0 0 56px 0 rgba(0, 38, 3, 0.08);
background: var(--gray-scale-white);
border: 1px solid var(--gray-scale-gray-–-50);
border-radius: 8px;
padding: 24px 24px 32px;
}

.card h2 {
  margin-bottom: 20px;
  color: #333;
}
.input-group {
  margin-bottom: 15px;
  position: relative;
}
.input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-size: 14px;
}
.input-group input:focus {
  border-color: #22c55e;
}
.password-box .eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.6;
}
.terms {
  text-align: left;
  font-size: 13px;
  margin-bottom: 15px;
  color: #555;
}
.terms input {
  margin-right: 5px;
}
.login-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 25px;
  background: var(--branding-success);
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s;
}

.login-text {
  margin-top: 15px;
  font-size: 13px;
  color: #777;
}
.login-text a {
  color: var(--gray-scale-gray-–-600);
  font-weight: 600;
  text-decoration: none;
}
.login-text b{
font-weight: 600;
color: var(--gray-scale-gray-–-900);
}
/*  sign up end*/
/*  contact Start*/
.contactCardFull{
border-radius: 8px;
box-shadow: 0 0 56px 0 rgba(0, 38, 3, 0.08);
background: var(--gray-scale-white);
margin: 50px 0;
}
.contactCard a{
    text-align: center;
    color: var(--gray-scale-gray-–-900);
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
}
.contactCard iconify-icon {
    font-size: 50px;
    margin-left: 151px;
    padding: 24px 0;
    color: var(--branding-success);
}
.cardHello {
    border-radius: 8px;
    box-shadow: 0 0 56px 0 rgba(0, 38, 3, 0.08);
background: var(--gray-scale-white);
margin: 50px 0;
}
.cardHello h2{
font-weight: 600;
font-size: 24px;
line-height: 150%;
color: var(--gray-scale-gray-–-900);
margin-bottom: 8px ;
}
.cardHello p{
font-weight: 400;
font-size: 14px;
line-height: 150%;
color: var(--gray-scale-gray-–-500);
margin-bottom: 24px;
}
.cardHello .one{
    font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 130%;
color: var(--gray-scale-gray-–-600);
border: 1px solid var(--gray-scale-gray-–-100);
border-radius: 6px;
padding: 14px 16px;
background: var(--gray-scale-white);
margin-left: 15px;
width: 340px;
}
.cardHello #two{
    font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 130%;
color: var(--gray-scale-gray-–-600);
border: 1px solid var(--gray-scale-gray-–-100);
border-radius: 6px;
padding: 14px 16px;
background: var(--gray-scale-white);
margin-left: 15px;
width: 95%;
margin-top: 16px;
}
.cardHello textarea{
    border: 1px solid var(--gray-scale-gray-–-100);
border-radius: 6px;
padding: 14px 16px;
background: var(--gray-scale-white);
font-weight: 400;
font-size: 16px;
line-height: 130%;
color: var(--gray-scale-gray-–-400);
margin-left: 15px;
width: 95%;
margin-top: 16px;
}
.cardHello .massage{
    border-radius: 43px;
padding: 16px 40px;
background: var(--branding-success);
font-weight: 600;
font-size: 16px;
line-height: 120%;
color: var(--gray-scale-white);
margin-left: 15px;
margin-top: 16px;
margin-bottom: 16px;
}
.cardHello{
    border-radius: 8px;
box-shadow: 0 0 56px 0 rgba(0, 38, 3, 0.08);
background: var(--gray-scale-white);
margin: 50px 0;
}
#map{
    margin: 50px 0;
}
/*  contact end*/
/*  Shop Star */
#shopBanner{
    margin: 25px 0 50px 0;
}
#shopBanner ul{
    margin-bottom: 25px;
}
#shopBanner ul li a{
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--gray-scale-gray-–-600);
padding-right: 10px;
transition: 0.3s;
}
#shopBanner ul li a:hover{
    color: var(--branding-success);
}
.shopBannertxt{
    position: relative;
}
.shopBannertxt img{
    height: 356px;
}
.shopBannertxt p{
font-weight: 500;
font-size: 14px;
line-height: 100%;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--gray-scale-white);
position: absolute;
top: 68px;
left: 60px;
z-index: 10;
}
.shopBannertxt h2{
font-weight: 600;
font-size: 40px;
line-height: 120%;
color: var(--gray-scale-white);
position: absolute;
top: 94px;
left: 60px;
z-index: 10;
}
.shopBannertxt button{
    border-radius: 43px;
padding: 14px 32px;
background: var(--branding-success);
font-weight: 600;
font-size: 14px;
line-height: 120%;
text-align: justify;
color: var(--gray-scale-white);
position: absolute;
top: 246px;
left: 60px;
z-index: 10;
}
.shopBannertxt .circle{
    border-radius: 220px;
padding: 25px 0px;
width: 100px;
height: 100px;
background: var(--branding-warning);
position: absolute;
top: 57px;
left: 472px;
z-index: 10;
}
.shopBannertxt h5{
font-weight: 600;
font-size: 24px;
line-height: 150%;
text-align: center;
color: var(--gray-scale-white);
}
.shopBannertxt span {
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    padding-left: 37px;
    color: rgba(255, 255, 255, 0.8);
}
.dropdown{
    border: 1px solid var(--gray-scale-gray-–-100);
border-radius: 4px;
padding: 10px 16px;
margin-left: 16px;
margin-bottom: 24px;
}
#activeFilter{
    box-shadow: 0 1px 0 0 #e5e5e5, 0 -1px 0 0 #e5e5e5;
background: var(--gray-scale-white);
padding: 16px;
margin-bottom: 32px;
}
#activeFilter p{
font-weight: 400;
font-size: 14px;
line-height: 150%;
color: var(--gray-scale-gray-–-500);
}
#activeFilter p b{
font-weight: 500;
font-size: 14px;
line-height: 150%;
color: var(--gray-scale-gray-–-900);
}
#shopAreaOne, #shopAreaTwo, #shopAreaThree{
    margin-bottom: 24px;
}
/*  Shop end*/
/*  filter Start   */



/*  filter end   */

/* Quick View Modal Styles */
#quickViewModal .modal-content {
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

#quickViewModal .modal-header {
    border-bottom: 1px solid var(--gray-scale-gray-–-200);
    padding: 20px 24px;
    background-color: var(--gray-scale-white);
}

#quickViewModal .modal-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 20px;
    line-height: 120%;
    color: var(--gray-scale-gray-–-900);
}

#quickViewModal .modal-body {
    padding: 30px;
}

.quickViewImg {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--gray-scale-gray-–-50);
}

.quickViewImg img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.quickViewDetails {
    padding-left: 20px;
}

.quickViewDetails h3 {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 28px;
    line-height: 120%;
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 12px;
}

.quickViewRating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.quickViewRating .stars {
    display: flex;
    color: var(--branding-warning);
}

.quickViewRating .stars iconify-icon {
    font-size: 18px;
}

.quickViewRating .reviewCount {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    color: var(--gray-scale-gray-–-500);
}

.quickViewPrice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.quickViewPrice .currentPrice {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    color: var(--branding-success-dark);
}

.quickViewPrice .oldPrice {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    color: var(--gray-scale-gray-–-400);
    text-decoration: line-through;
}

.quickViewDescription {
    margin-bottom: 24px;
}

.quickViewDescription p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    color: var(--gray-scale-gray-–-600);
}

.quickViewQuantity {
    margin-bottom: 24px;
}

.quickViewQuantity label {
    display: block;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    color: var(--gray-scale-gray-–-700);
    margin-bottom: 10px;
}

.quantitySelector {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--gray-scale-gray-–-300);
    border-radius: 6px;
    overflow: hidden;
    width: fit-content;
}

.qtyBtn {
    width: 40px;
    height: 40px;
    border: none;
    background-color: var(--gray-scale-gray-–-50);
    color: var(--gray-scale-gray-–-700);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qtyBtn:hover {
    background-color: var(--gray-scale-gray-–-100);
}

.qtyInput {
    width: 60px;
    height: 40px;
    border: none;
    border-left: 1px solid var(--gray-scale-gray-–-300);
    border-right: 1px solid var(--gray-scale-gray-–-300);
    text-align: center;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-scale-gray-–-900);
}

.qtyInput:focus {
    outline: none;
}

.quickViewActions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
}

.quickViewActions .addToCartBtn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background-color: var(--branding-success);
    border: none;
    border-radius: 6px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: var(--gray-scale-white);
    cursor: pointer;
    transition: all 0.3s ease;
}

.quickViewActions .addToCartBtn:hover {
    background-color: var(--branding-success-dark);
}

.quickViewActions .addToCartBtn iconify-icon {
    font-size: 20px;
}

.quickViewActions .wishlistBtn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-scale-gray-–-300);
    border-radius: 6px;
    background-color: transparent;
    color: var(--gray-scale-gray-–-700);
    cursor: pointer;
    transition: all 0.3s ease;
}

.quickViewActions .wishlistBtn:hover {
    border-color: var(--branding-success);
    color: var(--branding-success);
}

.quickViewActions .wishlistBtn iconify-icon {
    font-size: 20px;
}

.quickViewMeta {
    border-top: 1px solid var(--gray-scale-gray-–-200);
    padding-top: 20px;
}

.quickViewMeta p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    color: var(--gray-scale-gray-–-600);
    margin-bottom: 8px;
}

.quickViewMeta p:last-child {
    margin-bottom: 0;
}

.quickViewMeta strong {
    font-weight: 600;
    color: var(--gray-scale-gray-–-700);
}
.smallNav{
    background: url(../img/Breadcrumbs.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 18px 0;
}
.smallNav ul li a{
    font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 150%;
color: var(--gray-scale-gray-–-400);
padding-right: 10px;
transition: 0.3s ease;
}
.smallNav ul li a:hover{
    color: var(--branding-success);
}
.smallNav ul li .active{
    color: var(--branding-success);
}


 
    .meta-tag a:hover { text-decoration: underline; }
    #desAddReview .reviewNav{
        
        margin-bottom: 20px;
    }
    #desAddReview .reviewNav ul li a{
        font-family: var(--font-family);
        border-bottom: 1px solid var(--gray-scale-gray-–-200);
        margin-right: 10px;
font-weight: 500;
font-size: 16px;
line-height: 150%;
color: var(--gray-scale-gray-–-500);
transition: 0.3s;
    }
    #desAddReview .reviewNav ul li a:hover{
        color: var(--gray-scale-gray-–-900);
        border-bottom: 1px solid var(--branding-success);
    }
    #desAddReview .reviewNav ul li .active{
        color: var(--gray-scale-gray-–-900);
        border-bottom: 1px solid var(--branding-success);
    }
    .reviews-wrapper {
      max-width: 560px;
      margin: 0 auto;
      border-radius: 16px;
      padding: 28px 28px 20px 28px;
    }
 
    .review-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 0;
      border-bottom: 1px solid #ebebeb;
    }
 
    .review-item:last-of-type {
      border-bottom: none;
    }
 
    .avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: #e0e0d8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 600;
      color: #888;
      overflow: hidden;
    }
 
    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
 
    .review-body {
      flex: 1;
    }
 
    .review-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
 
    .reviewer-name {
      font-size: 14px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0;
    }
 
    .review-time {
      font-size: 12px;
      color: #aaa;
      white-space: nowrap;
      margin-left: 12px;
    }
 
    .stars {
      display: flex;
      gap: 2px;
      margin-bottom: 7px;
    }
 
    .stars .iconify {
      width: 16px;
      height: 16px;
      color: #f5a623;
    }
 
    .stars .iconify.empty {
      color: #ddd;
    }
 
    .review-text {
      font-size: 13px;
      line-height: 1.65;
      color: #555;
      margin: 0;
    }
 
    .load-more-btn button{
      display: block;
      width: 120px;
      margin: 20px 0 4px 0;
      padding: 9px 0;
      background: #ffffff;
      color: #3b7d3f;
      border: 1.5px solid #c8e6c9;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      font-family: var(--font-family);
      text-align: center;
      cursor: pointer;
      transition: background 0.18s, color 0.18s, border-color 0.18s;
    }
 
    .load-more-btn button:hover {
      background: #e8f5e9;
      border-color: #81c784;
      color: #2e6b32;
    }
    #relatedProduct {
        margin: 50px 0;
    }
    #relatedProduct h2{
        font-family: var(--font-family);
font-weight: 600;
font-size: 32px;
line-height: 120%;
color: var(--gray-scale-gray-–-900);
text-align: center;
padding-bottom: 20px;
    }
    #relatedProduct .offer{
        border-radius: 4px;
padding: 3px 8px;
background: var(--branding-error);
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 150%;
color: var(--gray-scale-white);
position: absolute;
top: 9px;
left: 9px;
z-index: 2;
    }


/* Login Page Css Redesign*/

/* =====================================
   ADMIN LOGIN DESIGN
===================================== */

#admin-login {
    min-height: calc(100vh - 100px);
    padding: 80px 0;
    background: var(--gren-gray-scale-50);
    display: flex;
    align-items: center;
}


/* Main Wrapper */

.admin-login-wrapper{

    width:100%;

    max-width:1050px;

    margin:auto;

    display:flex;

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
    0 25px 70px rgba(0,38,3,.12);

}



/* ===============================
   LEFT BRAND SECTION
================================ */

.login-brand {

    width: 45%;
    background: linear-gradient(
        145deg,
        #edf2ee,
        #ffffff
    );

    padding: 50px 40px;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: center;

}


.brand-content {
    position: relative;
    z-index: 2;
}


.brand-logo {

    width: 170px;
    margin-bottom: 25px;

}


.admin-tag {

    display: inline-block;

    background: rgba(0,178,7,0.12);
    color: var(--branding-success);

    padding: 7px 18px;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;

    margin-bottom: 20px;

}



.login-brand h1 {

    font-size: 38px;
    line-height: 1.2;

    color: var(--gren-gray-scale-900);

    font-weight: 700;

    margin-bottom: 15px;

}



.login-brand p {

    color: var(--gray-scale-gray-–-600);

    font-size: 15px;

    line-height: 1.7;

    max-width: 350px;

}



/* =====================================
   ECO DECORATIVE SHAPES (SPACED)
===================================== */


.eco-shape{

    position:absolute;

    z-index:1;

}



.eco-shape span{

    position:absolute;

    font-size:42px;

    opacity:.6;

    animation:floating 4s ease-in-out infinite;

}



/* TOP DECORATION */

.eco-top{

    top:25px;

    left:35px;

    width:300px;

    height:150px;

}



.eco-top span:nth-child(1){

    top:0;

    left:0;

}



.eco-top span:nth-child(2){

    top:70px;

    left:120px;

    animation-delay:.8s;

}



.eco-top span:nth-child(3){

    top:15px;

    right:10px;

    animation-delay:1.5s;

}



/* BOTTOM DECORATION */

.eco-bottom{

    bottom:25px;

    right:35px;

    width:320px;

    height:170px;

}



.eco-bottom span:nth-child(1){

    bottom:10px;

    left:0;

}



.eco-bottom span:nth-child(2){

    bottom:90px;

    left:140px;

    animation-delay:.8s;

}



.eco-bottom span:nth-child(3){

    bottom:25px;

    right:0;

    animation-delay:1.5s;

}




@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-12px);

    }

}



/* ===============================
   RIGHT LOGIN CARD
================================ */


.login-card {

    width:55%;

    padding:55px 50px;

}



.login-header {

    margin-bottom:35px;

}


.login-header h2 {

    font-size:32px;

    color:var(--gren-gray-scale-900);

    margin-bottom:8px;

}



.login-header p {

    color:var(--gray-scale-gray-–-600);

    font-size:14px;

}




/* Input */

.login-input {

    margin-bottom:22px;

    position:relative;

}


.login-input label {

    display:block;

    font-size:14px;

    font-weight:600;

    color:var(--gren-gray-scale-800);

    margin-bottom:8px;

}



.login-input input {

    width:100%;

    height:52px;

    border:1px solid var(--gray-scale-gray-–-200);

    border-radius:12px;

    padding:0 18px;

    font-family:var(--font-family);

    font-size:14px;

    outline:none;

    transition:.3s;

}



.login-input input:focus {

    border-color:var(--branding-success);

    box-shadow:0 0 0 4px rgba(0,178,7,.12);

}



/* Password Eye */


.password-field button {

    position:absolute;

    right:15px;

    bottom:13px;

    border:0;

    background:none;

    cursor:pointer;

    color:var(--gray-scale-gray-–-500);

}





/* Options */


.login-options {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    font-size:14px;

}



.login-options label {

    color:var(--gray-scale-gray-–-600);

}


.login-options a {

    color:var(--branding-success);

    font-weight:600;

    text-decoration:none;

}



/* Button */


.admin-login-btn {


    width:100%;

    height:54px;

    border:none;

    border-radius:12px;

    background:var(--branding-success);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;


}



.admin-login-btn:hover {

    background:var(--branding-success-dark);

    transform:translateY(-2px);

}



/* Secure Text */


.secure-text {

    margin-top:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-size:13px;

    color:var(--gray-scale-gray-–-500);

}



/* Responsive */


@media(max-width:992px){


    .admin-login-wrapper{

        flex-direction:column;

    }


    .login-brand,
    .login-card{

        width:100%;

    }


}


@media(max-width:576px){


    #admin-login{

        padding:30px 15px;

    }


    .login-card{

        padding:35px 25px;

    }


    .login-brand{

        padding:35px 25px;

    }


    .login-brand h1{

        font-size:30px;

    }


}


/* =====================================
   FINAL LOGIN UI POLISH
===================================== */


.admin-login-wrapper {

    transition: .35s ease;

}


.admin-login-wrapper:hover {

    box-shadow: 
    0 35px 90px rgba(0,38,3,.16);

}

.brand-logo {

    animation: logoFloat 4s ease-in-out infinite;

}


@keyframes logoFloat {

    0%,100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

}

.admin-tag {

    transition:.3s ease;

}


.admin-tag:hover {

    background:var(--branding-success);

    color:white;

}

.login-input input:hover {

    border-color:var(--branding-success);

}


.login-input input::placeholder {

    color:var(--gray-scale-gray-–-400);

}

.password-field button {

    width:35px;
    height:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    transition:.3s ease;

}



.password-field button:hover {

    background:var(--gren-gray-scale-50);

    color:var(--branding-success);

}

.admin-login-btn {

    position:relative;

    overflow:hidden;

}


.admin-login-btn::before {

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );


    transition:.6s;

}



.admin-login-btn:hover::before {

    left:100%;

}

.login-brand::before {

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    background:rgba(0,178,7,.08);

    border-radius:50%;

    top:-80px;
    right:-80px;

}



.login-brand::after {

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:rgba(0,178,7,.05);

    border-radius:50%;

    bottom:-60px;
    left:-50px;

}

.login-card {

    animation: cardSlide .7s ease forwards;

}

/* ==========================
   Login Divider
========================== */

.login-divider {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 12px;

    margin: 20px 0;
}

.login-divider span {
    flex: 1;

    height: 1px;

    background: #e5e7eb;
}

.login-divider p {
    margin: 0;

    color: #9ca3af;

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.5px;
}


/* ==========================
   Google Login Button
========================== */

.google-login-btn {
    position: relative;

    width: 100%;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    overflow: hidden;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    background: #fff;

    color: #374151;

    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* ==========================
   Shine Effect
========================== */

.google-login-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(224, 224, 224, 0.75),
            transparent
        );

    transition: .6s;
}


/* ==========================
   Hover
========================== */

.google-login-btn:hover::before {
    left: 100%;
}

.google-login-btn:hover {
    border-color: #d1d5db;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .06);

    transform: translateY(-1px);
}


/* ==========================
   Google Icon
========================== */

.google-login-btn iconify-icon {
    position: relative;
    z-index: 1;

    font-size: 20px;

    flex-shrink: 0;
}


/* ==========================
   Google Text
========================== */

.google-login-btn span {
    position: relative;
    z-index: 1;
}




@keyframes cardSlide {

    from {

        opacity:0;

        transform:translateX(40px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }

}

@media(max-width:768px){


    .eco-shape{

        display:none;

    }


    .brand-logo{

        width:140px;

    }


    .login-header h2{

        font-size:26px;

    }


}

/* Login Page Css Redesign End*/

/*=====================================
    CONTACT HERO START
======================================*/

#contactHero{
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    text-align: center;
    background: linear-gradient(180deg,#F7FFF8 0%,#FFFFFF 100%);
    z-index: 1;
}

#contactHero .container{
    position: relative;
    z-index: 2;
}

.contact-subtitle{
    display: inline-block;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.contact-title{
    font-size: 52px;
    font-weight: 700;
    color: var(--green-900);
    margin-bottom: 20px;
}

.contact-title span{
    color: var(--primary);
}

.contact-description{
    max-width: 650px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 28px;
    color: var(--gray-600);
}

/*=====================================
    HERO SHAPES
======================================*/

.hero-shape{
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .35;
    animation: floatShape 8s ease-in-out infinite;
}

.hero-shape-1{
    width: 260px;
    height: 260px;
    background:#00B207;
    top: -80px;
    left: -80px;
}

.hero-shape-2{
    width: 320px;
    height: 320px;
    background:#00B207;
    right: -100px;
    bottom: -120px;
    animation-delay: 2s;
}

@keyframes floatShape{

    0%{
        transform: translateY(0px);
    }

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

    100%{
        transform: translateY(0px);
    }

}

/*=====================================
    CONTACT SECTION START
======================================*/

#contactInfo{
    padding: 50px 0;
}

.contact-info-card{
    position: relative;
    height: 100%;
    padding: 40px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
    overflow: hidden;
}

/* Green Accent Line */

.contact-info-card::after{
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(0,178,7,.05);
}

/*=====================================
    CARD HEADER
======================================*/

.card-tag{
    display: inline-block;
    margin-bottom: 12px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-info-card h3{
    font-size: 30px;
    font-weight: 700;
    color: var(--green-900);
    margin-bottom: 15px;
}

.contact-info-card > p{
    color: var(--gray-600);
    line-height: 28px;
    margin-bottom: 35px;
}

/*=====================================
    INFO ITEM
======================================*/

.info-item{
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--gray-100);
    transition: .35s ease;
}

.info-item:last-of-type{
    border-bottom: none;
}

.info-item:hover{
    transform: translateX(8px);
}

/*=====================================
    ICON
======================================*/

.info-icon{
    width: 58px;
    height: 58px;
    min-width: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0,178,7,.10);

    transition: .35s ease;
}

.info-icon iconify-icon{
    font-size: 24px;
    color: var(--primary);
    transition: .35s ease;
}

.info-item:hover .info-icon{
    background: rgba(0,178,7,.12);
    transform: rotate(8deg) scale(1.08);
}

.info-item:hover .info-icon iconify-icon{
    color: var(--primary);
}

/*=====================================
    TEXT
======================================*/

.info-content span{
    display: block;
    margin-bottom: 6px;
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 500;
}

.info-content h6{
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    color: var(--green-900);
}

/*=====================================
    SOCIAL
======================================*/

.contact-social{
    display: flex;
    gap: 12px;
    margin-top: 35px;
}

.contact-social a{
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: var(--gray-50);

    color: var(--gray-700);
    font-size: 20px;

    transition: .35s ease;
    border: 1px solid transparent;
}

.contact-social a:hover{
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-5px);
}

/*=====================================
    RESPONSIVE
======================================*/

@media (max-width:991px){

    #contactInfo{
        padding: 70px 0;
    }

    .contact-info-card{
        padding: 30px;
    }

}

@media (max-width:575px){

    .contact-info-card{
        padding: 25px;
        border-radius: 18px;
    }

    .contact-info-card h3{
        font-size: 26px;
    }

    .info-item{
        gap: 14px;
    }

    .info-icon{
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

}

/*=====================================
    CONTACT FORM CARD
======================================*/

.contact-form-card{
    position: relative;
    height: 100%;
    padding: 40px;
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
    overflow: hidden;
}

.contact-form-card .card-tag{
    display: inline-block;
    margin-bottom: 12px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-form-card h3{
    font-size: 30px;
    font-weight: 700;
    color: var(--green-900);
    margin-bottom: 15px;
}

.contact-form-card > p{
    color: var(--gray-600);
    line-height: 28px;
    margin-bottom: 35px;
}

/*=====================================
    FORM
======================================*/

.contact-form-card form{
    margin-top: 10px;
    background: rgba(255,255,255,.72);
}

.contact-form-card input,
.contact-form-card textarea{
    width: 100%;
    border: 1px solid #dedede;
    border-radius: 14px;
    background: rgba(255,255,255,.85);

    color: var(--green-900);

    transition: .3s ease;
}

.contact-form-card input{
    height: 58px;
    padding: 0 18px;
}

.contact-form-card textarea{
    min-height: 180px;
    resize: none;
    padding: 18px;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder{
    color: var(--gray-scale-gray-–-300);
}

.contact-form-card input:focus,
.contact-form-card textarea:focus{

    outline: none;

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(0,178,7,.08);

}

.contact-form-card::after{
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(0,178,7,.05);
}
.contact-form-card::before{
    content: "";
    position: absolute;
    bottom: -70px;
    left: -70px;

    width: 200px;
    height: 200px;

    border-radius: 50%;

    background: rgba(132,209,135,.08);

    z-index: 0;
}

/*=====================================
    BUTTON
======================================*/

.contact-btn{

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 16px 34px;

    border: none;

    border-radius: 14px;

    background: var(--primary);

    color: var(--branding-success-bright);

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: .35s ease;

}

.contact-btn iconify-icon{

    font-size: 20px;

    transition: .35s ease;

}

.contact-btn:hover{

    background: var(--branding-success-bright);

    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(0,178,7,.25);

    color: #fff;

}

.contact-btn:hover iconify-icon{

    transform: translateX(6px);

}

/* =====================================
   Responsive
===================================== */
@media (max-width:991px){

    .contact-form-card{

        padding:30px;

    }

}

@media (max-width:575px){

    .contact-form-card{

        padding:25px;

        border-radius:18px;

    }

    .contact-form-card h3{

        font-size:26px;

    }

    .contact-btn{

        width:100%;

        justify-content:center;

    }

}

/*=====================================
    CONTACT MAP
======================================*/

#contactMap{
    padding: 50px 0;
}

.section-heading{
    max-width: 650px;
    margin: 0 auto 50px;
    text-align: center;
}

.section-heading h2{
    font-size: 42px;
    font-weight: 700;
    color: var(--green-900);
    margin: 15px 0;
}

.section-heading p{
    color: var(--gray-600);
    line-height: 28px;
}

.map-card{
    position: relative;
    overflow: hidden;

    border-radius: 24px;

    background: rgba(255,255,255,.75);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,.6);

    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

.map-card iframe{
    width: 100%;
    height: 500px;
    border: none;
    display: block;
}

/*=====================================
    ERROR PAGE START
======================================*/

#errorPage{
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background: linear-gradient(180deg, #F7FFF8 0%, #FFFFFF 100%);
}

.error-content{
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

/*=====================================
    IMAGE
======================================*/

.error-image{
    margin-bottom: 40px;
}

.error-image img{
    max-width: 100%;
    width: 520px;
    height: auto;
    user-select: none;
    animation: floatImage 4s ease-in-out infinite;
}

/*=====================================
    TEXT
======================================*/

.error-subtitle{
    display: inline-block;
    margin-bottom: 12px;
    color: var(--branding-error);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.error-text h1{
    font-size: 48px;
    font-weight: 700;
    color: var(--gren-gray-scale-900);
    margin-bottom: 18px;
}

.error-text p{
    max-width: 560px;
    margin: 0 auto;
    color: var(--gray-scale-gray-–-600);
    font-size: 16px;
    line-height: 30px;
}

/*=====================================
    BUTTONS
======================================*/

.error-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
}

.error-btn a{
    min-width: 190px;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: .35s;
}

/* Primary */

.error-btn .primary-btn{
    background: var(--branding-success);
    color: #fff;
}

.error-btn .primary-btn:hover{
    background: var(--branding-success-dark);
    transform: translateY(-4px);
}

.primary-btn{
    position: relative;
    overflow: hidden;
}

.primary-btn::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.25);
    transform:skewX(-25deg);
    transition:.6s;
}

.primary-btn:hover::before{
    left:120%;
}

/* Secondary */

.error-btn .secondary-btn{
    color: var(--branding-success);
    border: 2px solid var(--branding-success);
    background: transparent;
}

.error-btn .secondary-btn:hover{
    background: var(--branding-success);
    color: #fff;
    transform: translateY(-4px);
}

/*=====================================
    DECORATION
======================================*/

#errorPage::before{
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(0,178,7,.06);
    top: -120px;
    left: -120px;
    filter: blur(60px);
}

#errorPage::after{
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(132,209,135,.08);
    bottom: -100px;
    right: -100px;
    filter: blur(60px);
}

.error-image img:hover{
    transform: scale(1.02);
}

/*=====================================
    ANIMATION
======================================*/

@keyframes floatImage{

    0%,100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-12px);
    }

}

/*=====================================
    RESPONSIVE
======================================*/

@media(max-width:991px){

    #errorPage{
        padding: 80px 0;
    }

    .error-image img{
        width: 430px;
    }

    .error-text h1{
        font-size: 40px;
    }

}

@media(max-width:575px){

    #errorPage{
        padding: 60px 0;
    }

    .error-image{
        margin-bottom: 30px;
    }

    .error-image img{
        width: 100%;
    }

    .error-text h1{
        font-size: 32px;
    }

    .error-text p{
        font-size: 15px;
        line-height: 28px;
    }

    .error-btn{
        flex-direction: column;
    }

    .error-btn a{
        width: 100%;
    }

}

/* =====================================
   Floating Leaves
===================================== */

.floating-leaves{

    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;

}

.leaf{

    position:absolute;
    color:rgba(0,178,7,.35);
    font-size:28px;

    animation:leafFloat linear infinite;

}

.leaf-1{

    top:12%;
    left:8%;

    animation-duration:10s;

}

.leaf-2{

    top:20%;
    right:12%;

    animation-duration:14s;
    animation-delay:2s;

}

.leaf-3{

    bottom:25%;
    left:15%;

    animation-duration:12s;
    animation-delay:1s;

}

.leaf-4{

    bottom:12%;
    right:8%;

    animation-duration:15s;

}

.leaf-5{

    top:45%;
    left:50%;

    animation-duration:18s;
    animation-delay:3s;

}

@keyframes leafFloat{

    0%{

        transform:
        translateY(0)
        rotate(0deg);

    }

    50%{

        transform:
        translateY(-18px)
        rotate(18deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(0deg);

    }

}

/* =====================================
   Floating Leaves
===================================== */
/* =====================================
   Shop Page Redesign
====================================== */

/* Shop Hero Banner */
#shopHero {
    padding: 40px 0 50px;
    background: linear-gradient(135deg, var(--gren-gray-scale-50) 0%, var(--gray-scale-white) 100%);
    margin-bottom: 0;
}

.shopBreadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 30px;
}

.shopBreadcrumb a {
    color: var(--gray-scale-gray-–-500);
    text-decoration: none;
    transition: 0.3s;
}

.shopBreadcrumb a:hover {
    color: var(--branding-success);
}

.shopBreadcrumb span {
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-scale-gray-–-900);
}

.shopBreadcrumb iconify-icon {
    color: var(--gray-scale-gray-–-400);
}

.shopBannerContent h1 {
    font-weight: 600;
    font-size: 42px;
    line-height: 1.2;
    color: var(--gray-scale-gray-–-900);
    margin: 12px 0 16px;
}

.shopBannerLabel {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--branding-success);
}

.shopBannerDesc {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-scale-gray-–-500);
    max-width: 480px;
    margin-bottom: 28px;
}

.shopBannerActions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.shopBtnPrimary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--branding-success);
    color: var(--gray-scale-white);
    font-weight: 600;
    font-size: 14px;
    border-radius: 43px;
    text-decoration: none;
    transition: 0.3s;
}

.shopBtnPrimary:hover {
    background: var(--branding-success-dark);
    color: var(--gray-scale-white);
}

.shopBtnOutline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: transparent;
    color: var(--gray-scale-gray-–-700);
    font-weight: 600;
    font-size: 14px;
    border-radius: 43px;
    border: 1px solid var(--gray-scale-gray-–-200);
    text-decoration: none;
    transition: 0.3s;
}

.shopBtnOutline:hover {
    border-color: var(--branding-success);
    color: var(--branding-success);
}

.shopBannerImage {
    position: relative;
}

.shopBannerImage img {
    max-height: 280px;
}

/* Mobile Filter Bar */
#shopMobileFilter {
    padding: 16px 0;
    background: var(--gray-scale-white);
    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

.mblFilterRow {
    display: flex;
    gap: 12px;
    align-items: center;
}

.mblFilterBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid var(--gray-scale-gray-–-200);
    border-radius: 6px;
    background: var(--gray-scale-white);
    font-weight: 500;
    font-size: 14px;
    color: var(--gray-scale-gray-–-700);
    cursor: pointer;
    transition: 0.3s;
}

.mblFilterBtn:hover {
    border-color: var(--branding-success);
    color: var(--branding-success);
}

.mblSortBtn {
    flex: 1;
}

.mblSortBtn .form-select {
    padding: 10px 14px;
    border: 1px solid var(--gray-scale-gray-–-200);
    border-radius: 6px;
    font-size: 14px;
    color: var(--gray-scale-gray-–-700);
}

/* Filter Groups (Mobile Offcanvas) */
.filterGroup {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

.filterGroupTitle {
    font-weight: 600;
    font-size: 15px;
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 14px;
}

.filterCheckList .form-check {
    margin-bottom: 10px;
}

.filterCheckList .form-check-label {
    font-size: 14px;
    color: var(--gray-scale-gray-–-600);
}

.priceRangeInputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.priceRangeInputs .form-control {
    padding: 10px 14px;
    border: 1px solid var(--gray-scale-gray-–-200);
    border-radius: 6px;
    font-size: 14px;
}

.priceRangeInputs .form-control:focus {
    border-color: var(--branding-success);
    box-shadow: none;
}

.priceSep {
    color: var(--gray-scale-gray-–-400);
    font-weight: 500;
}

.filterActions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.filterApplyBtn {
    flex: 1;
    padding: 12px;
    background: var(--branding-success);
    color: var(--gray-scale-white);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.filterApplyBtn:hover {
    background: var(--branding-success-dark);
}

.filterClearBtn {
    padding: 12px 20px;
    background: transparent;
    color: var(--gray-scale-gray-–-500);
    border: 1px solid var(--gray-scale-gray-–-200);
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s;
}

.filterClearBtn:hover {
    border-color: var(--branding-error);
    color: var(--branding-error);
}

/* Desktop Sidebar */
#shopProducts {
    padding: 40px 0 60px;
}

.shopSidebar {
    position: sticky;
    top: 100px;
}

.sidebarWidget {
    background: var(--gray-scale-white);
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.widgetTitle {
    font-weight: 600;
    font-size: 16px;
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

.sidebarSearch {
    display: flex;
    gap: 0;
}

.sidebarSearch .form-control {
    padding: 10px 14px;
    border: 1px solid var(--gray-scale-gray-–-200);
    border-radius: 6px 0 0 6px;
    font-size: 14px;
    flex: 1;
}

.sidebarSearch .form-control:focus {
    border-color: var(--branding-success);
    box-shadow: none;
}

.sidebarSearch button {
    padding: 10px 16px;
    background: var(--branding-success);
    color: var(--gray-scale-white);
    border: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: 0.3s;
}

.sidebarSearch button:hover {
    background: var(--branding-success-dark);
}

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

.sidebarCategoryList li {
    margin-bottom: 4px;
}

.sidebarCategoryList a {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-scale-gray-–-600);
    text-decoration: none;
    border-radius: 6px;
    transition: 0.3s;
}

.sidebarCategoryList a:hover {
    background: var(--gren-gray-scale-50);
    color: var(--branding-success);
}

.sidebarCategoryList a.active {
    background: var(--branding-success);
    color: var(--gray-scale-white);
    font-weight: 500;
}

.sidebarPriceFilter {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.priceFilterBtn {
    padding: 10px;
    background: var(--branding-success);
    color: var(--gray-scale-white);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
}

.priceFilterBtn:hover {
    background: var(--branding-success-dark);
}

.sidebarPromo {
    background: linear-gradient(135deg, var(--branding-success) 0%, var(--branding-success-dark) 100%);
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    color: var(--gray-scale-white);
}

.sidebarPromo .promoIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    margin-bottom: 14px;
}

.sidebarPromo h6 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 6px;
}

.sidebarPromo p {
    font-size: 13px;
    opacity: 0.85;
}

/* Sort Bar */
.shopSortBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--gray-scale-gray-–-50);
    border-radius: 8px;
    margin-bottom: 24px;
}

.sortLeft p {
    font-size: 14px;
    color: var(--gray-scale-gray-–-500);
    margin: 0;
}

.sortLeft b {
    color: var(--gray-scale-gray-–-900);
}

.searchResult{
    position: absolute;
    background-color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 1px solid #eee;
    width: 100%;
    z-index: 10;
    display: none;
}

.searchResult li {
    padding: 5px 25px;
    border-bottom: 1px solid #ddd;
}

.searchResult li a:hover{
    color: var(--branding-success);
}

/* =====================================
   Shop Info Page CSS
===================================== */

/*=========================================
        PAGE BANNER
=========================================*/

#pageBanner{
    padding: 70px 0;
}

#pageBanner .pb-wrapper{
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 70px 40px;
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        var(--gren-gray-scale-50) 100%
    );
    border: 1px solid var(--gray-scale-gray-–-100);
}

/* Soft Glow */

#pageBanner .pb-wrapper::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:-120px;
    top:-120px;
    border-radius:50%;
    background:rgba(0,178,7,.06);
}

#pageBanner .pb-wrapper::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:-80px;
    bottom:-80px;
    border-radius:50%;
    background:rgba(0,178,7,.04);
}

/* Content */

#pageBanner .pb-content{
    position:relative;
    z-index:2;
    text-align:center;
}

#pageBanner h1{
    font-size:48px;
    font-weight:700;
    color:var(--gray-scale-gray-–-900);
    margin-bottom:18px;
}

#pageBanner ul{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

#pageBanner ul li{
    font-size:15px;
    color:var(--gray-scale-gray-–-500);
}

#pageBanner ul li a{
    color:inherit;
    transition:.3s;
}

#pageBanner ul li a:hover{
    color:var(--branding-success);
}

#pageBanner iconify-icon{
    color:var(--gray-scale-gray-–-400);
    font-size:16px;
}


/*=========================================
    PRODUCT DETAILS
=========================================*/

#itemDetails{
    padding: 80px 0;
}

#itemDetails .pd-wrapper{
    display: grid;
    grid-template-columns: 620px 1fr;
    gap: 70px;
    align-items: flex-start;
}

/*=========================================
    GALLERY
=========================================*/

#itemDetails .pd-gallery{
    position: sticky;
    top: 30px;
}

#itemDetails .pd-main-image{
    width: 100%;
    height: 620px;
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 18px;
    overflow: hidden;
    background: var(--gray-scale-white);
}

#itemDetails .pd-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
    cursor: zoom-in;
}

#itemDetails .pd-main-image:hover img{
    transform:scale(1.08);
}

#itemDetails .pd-thumbs{
    margin-top:20px;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

#itemDetails .pd-thumb{
    width:90px;
    height:90px;
    padding:0;
    border:none;
    background:none;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    transition:.3s;
}

#itemDetails .pd-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

#itemDetails .pd-thumb:hover{
    transform:translateY(-4px);
}

#itemDetails .pd-thumb.active{
    border-color:var(--branding-success);
}

/*=========================================
    PRODUCT INFORMATION
=========================================*/

#itemDetails .pd-info{
    display: flex;
    flex-direction: column;
}

#itemDetails .pd-badge{
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 18px;
    border-radius: 50px;
    background: rgba(0, 178, 7, .08);
    color: var(--branding-success);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

#itemDetails .pd-title{
    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 18px;
}

#itemDetails .pd-rating-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

#itemDetails .pd-stars{
    display: flex;
    gap: 3px;
}

#itemDetails .pd-stars iconify-icon{
    font-size: 20px;
    color: #FDB022;
}

#itemDetails .pd-rating-value{
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
}

#itemDetails .pd-reviews{
    font-size: 15px;
    color: var(--gray-scale-gray-–-500);
}

/*=========================================
    PRICE
=========================================*/

#itemDetails .pd-price-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
}

#itemDetails .pd-discount {
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(234, 75, 72, .10);
    color: var(--branding-error);
    font-size: 13px;
    font-weight: 600;
    display: inline-block;
}

#itemDetails .pd-price-line {
    display: flex;
    align-items: center;
    gap: 15px;
}

#itemDetails .pd-price {
    font-size: 42px;
    font-weight: 700;
    color: var(--branding-success);
    line-height: 1;
}

#itemDetails .pd-old-price {
    font-size: 24px;
    color: var(--gray-scale-gray-–-400);
    text-decoration: line-through;
}

/*=========================================
    DESCRIPTION
=========================================*/

#itemDetails .pd-desc{
    font-size: 16px;
    line-height: 1.9;
    color: var(--gray-scale-gray-–-600);
    margin-bottom: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

/*=========================================
    PRODUCT META
=========================================*/

#itemDetails .pd-meta{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-bottom: 35px;
}

#itemDetails .pd-meta-item{
    padding: 20px;
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 16px;
    background: var(--gray-scale-white);
    transition: .35s ease;
}

#itemDetails .pd-meta-item:hover{
    transform: translateY(-5px);
    border-color: var(--branding-success);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

#itemDetails .pd-meta-item span{
    display: block;
    font-size: 13px;
    color: var(--gray-scale-gray-–-500);
    margin-bottom: 8px;
}

#itemDetails .pd-meta-item strong{
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
}

#itemDetails .pd-meta-item .in-stock{
    color: var(--branding-success);
}

/*=========================================
    QUANTITY CARD
=========================================*/

#itemDetails .pd-quantity-card{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 25px;
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 18px;
    margin-bottom: 30px;
    background: var(--gray-scale-white);
}

#itemDetails .pd-label{
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
}

/*=========================================
    QUANTITY BOX
=========================================*/

#itemDetails .pd-qty-box{
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 50px;
}

#itemDetails .pd-qty-box button{
    width: 46px;
    height: 46px;
    border: none;
    background: transparent;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
    color: var(--gray-scale-gray-–-900);
}

#itemDetails .pd-qty-box button:hover{
    background: var(--branding-success);
    color: var(--gray-scale-white);
}

#itemDetails .pd-qty-box input{
    width: 65px;
    height: 46px;
    border: none;
    outline: none;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
    background: transparent;
}

/*=========================================
    ACTION BUTTONS
=========================================*/

#itemDetails .pd-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

#itemDetails .pd-cart-btn,
#itemDetails .pd-buy-btn{
    height: 58px;
    border: none;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all .35s ease;
}

#itemDetails .pd-cart-btn iconify-icon,
#itemDetails .pd-buy-btn iconify-icon{
    font-size: 22px;
}

/* Add To Cart */

#itemDetails .pd-cart-btn{
    background: var(--branding-success);
    color: var(--gray-scale-white);
}

#itemDetails .pd-cart-btn:hover{
    transform: translateY(-4px);
    background: var(--branding-success-dark);
    box-shadow: 0 18px 35px rgba(0,178,7,.25);
}

/* Buy Now */

#itemDetails .pd-buy-btn{
    background: transparent;
    border: 2px solid var(--branding-success);
    color: var(--branding-success);
}

#itemDetails .pd-buy-btn:hover{
    background: var(--branding-success);
    color: var(--gray-scale-white);
    transform: translateY(-4px);
}

/*=========================================
    ADD TO CART SHINE EFFECT
=========================================*/

#itemDetails .pd-cart-btn {
    position: relative;
    overflow: hidden;
}


/* Shine */

#itemDetails .pd-cart-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent
        );

    transition: .6s;
}


/* Shine Animation */

#itemDetails .pd-cart-btn:hover::before {
    left: 100%;
}


/* Keep Content Above Shine */

#itemDetails .pd-cart-btn iconify-icon,
#itemDetails .pd-cart-btn span {
    position: relative;
    z-index: 1;
}

/*=========================================
    SECONDARY BUTTONS
=========================================*/

#itemDetails .pd-secondary-actions{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin-bottom: 35px;
}

#itemDetails .pd-secondary-actions button{
    height: 52px;
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 14px;
    background: var(--gray-scale-white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all .35s ease;
    color: var(--gray-scale-gray-–-700);
}

#itemDetails .pd-secondary-actions button iconify-icon{
    font-size: 20px;
}

#itemDetails .pd-secondary-actions button:hover{
    border-color: var(--branding-success);
    color: var(--branding-success);
    transform: translateY(-3px);
}

/*=========================================
    DELIVERY SECTION
=========================================*/

#itemDetails .pd-delivery{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#itemDetails .pd-delivery-item{
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 16px;
    background: var(--gray-scale-white);
    transition: all .35s ease;
}

#itemDetails .pd-delivery-item:hover{
    transform: translateY(-5px);
    border-color: var(--branding-success);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

#itemDetails .pd-delivery-item iconify-icon{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(0,178,7,.08);
    color: var(--branding-success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

#itemDetails .pd-delivery-item h6{
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
}

#itemDetails .pd-delivery-item p{
    margin: 0;
    font-size: 14px;
    color: var(--gray-scale-gray-–-500);
    line-height: 1.6;
}


/*=========================================
    PRODUCT TABS
=========================================*/

#productTabs{
    padding: 90px 0;
}

#productTabs .pt-wrapper{
    background: var(--gray-scale-white);
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 20px;
    overflow: hidden;
}

/*=========================================
    TAB NAVIGATION
=========================================*/

#productTabs .pt-nav{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 18px;
    background: #fafafa;
    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

#productTabs .pt-btn{
    position: relative;
    border: none;
    outline: none;
    background: transparent;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-600);
    font-family: var(--font-family);
    cursor: pointer;
    transition: all .35s ease;
}

#productTabs .pt-btn:hover{
    background: rgba(0,178,7,.08);
    color: var(--branding-success);
}

/* #productTabs .pt-btn.active{
    background: var(--branding-success);
    color: var(--gray-scale-white);
    box-shadow: 0 10px 25px rgba(0,178,7,.25);
} */

/*=========================================
    TAB CONTENT
=========================================*/

#productTabs .pt-body{
    padding: 40px;
    background: var(--gray-scale-white);
    min-height: 350px;
}

/*=========================================
    TAB PANEL
=========================================*/

#productTabs .pt-panel{
    display: none;
    animation: ptFade .35s ease;
}

#productTabs .pt-panel.active{
    display: block;
}

/*=========================================
    CONTENT TYPOGRAPHY
=========================================*/

#productTabs .pt-panel h1,
#productTabs .pt-panel h2,
#productTabs .pt-panel h3,
#productTabs .pt-panel h4,
#productTabs .pt-panel h5,
#productTabs .pt-panel h6{
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 18px;
    font-weight: 600;
    line-height: 1.4;
}

#productTabs .pt-panel p{
    color: var(--gray-scale-gray-–-600);
    line-height: 1.9;
    margin-bottom: 18px;
}

#productTabs .pt-panel ul,
#productTabs .pt-panel ol{
    margin: 20px 0;
    padding-left: 22px;
}

#productTabs .pt-panel li{
    color: var(--gray-scale-gray-–-600);
    line-height: 1.9;
    margin-bottom: 10px;
}

#productTabs .pt-panel img{
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 25px 0;
}

#productTabs .pt-panel table{
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
}

#productTabs .pt-panel table th,
#productTabs .pt-panel table td{
    padding: 16px;
    border: 1px solid var(--gray-scale-gray-–-100);
}

#productTabs .pt-panel table th{
    background: #fafafa;
    font-weight: 600;
}

/*=========================================
    ANIMATION
=========================================*/

@keyframes ptFade{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*=========================================
    STICKY TAB NAVIGATION
=========================================*/

#productTabs .pt-nav{
    position: sticky;
    top: 90px;
    z-index: 100;
}

/*=========================================
    TAB UNDERLINE
=========================================*/

#productTabs .pt-btn{
    position: relative;
    overflow: hidden;
}

#productTabs .pt-btn::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--branding-success);
    border-radius: 30px;
    transform: translateX(-50%);
    transition: .35s ease;
}

#productTabs .pt-btn:hover::after{
    width: 65%;
}

#productTabs .pt-btn.active::after{
    width: 65%;
}

/*=========================================
    SCROLL BEHAVIOR
=========================================*/

html{
    scroll-behavior: smooth;
}

/*=========================================
    TAB PANEL SPACING
=========================================*/

#productTabs .pt-panel > *:first-child{
    margin-top: 0;
}

#productTabs .pt-panel > *:last-child{
    margin-bottom: 0;
}

/*=========================================
    BLOCKQUOTE
=========================================*/

#productTabs .pt-panel blockquote{
    margin: 25px 0;
    padding: 20px 25px;
    border-left: 4px solid var(--branding-success);
    background: var(--gren-gray-scale-50);
    border-radius: 0 12px 12px 0;
}

#productTabs .pt-panel blockquote p{
    margin: 0;
}

/*=========================================
    CODE
=========================================*/

#productTabs .pt-panel code{
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--gray-scale-gray-–-50);
    font-size: 14px;
}

#productTabs .pt-panel pre{
    padding: 20px;
    overflow-x: auto;
    border-radius: 12px;
    background: #1E1E1E;
    color: #fff;
    margin: 25px 0;
}


/*=========================================
    REVIEW SUMMARY
=========================================*/

#desAddReview{
    padding: 90px 0;
}

#desAddReview .reviews-wrapper{
    background: var(--gray-scale-white);
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 20px;
    padding: 40px;
}

#desAddReview .reviews-wrapper>h3{
    font-size: 34px;
    font-weight: 700;
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 35px;
}

/*=========================================
    SUMMARY
=========================================*/

#desAddReview .review-summary{
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 45px;
    margin-bottom: 45px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--gray-scale-gray-–-100);
}

/*=========================================
    OVERALL
=========================================*/

#desAddReview .review-overall{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 35px;
    border: 1px solid var(--gray-scale-gray-–-100);
    border-radius: 20px;
    background: var(--gray-scale-white);
}

#desAddReview .review-overall h2{
    font-size: 60px;
    font-weight: 700;
    color: var(--branding-success);
    margin: 0;
    line-height: 1;
}

#desAddReview .overall-stars{
    margin: 15px 0;
    font-size: 24px;
    letter-spacing: 3px;
    color: #FDB022;
}

#desAddReview .review-overall span{
    font-size: 15px;
    color: var(--gray-scale-gray-–-500);
}

/*=========================================
    PROGRESS
=========================================*/

#desAddReview .review-progress{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

#desAddReview .progress-item{
    display: grid;
    grid-template-columns: 50px 1fr 45px;
    align-items: center;
    gap: 18px;
}

#desAddReview .progress-item span{
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-700);
}

#desAddReview .progress-item strong{
    text-align: right;
    font-size: 15px;
    color: var(--gray-scale-gray-–-700);
}

#desAddReview .progress{
    height: 10px;
    background: var(--gray-scale-gray-–-100);
    border-radius: 50px;
    overflow: hidden;
}

#desAddReview .progress-bar{
    background: linear-gradient(
        90deg,
        var(--branding-success),
        var(--branding-success-dark)
    );
    border-radius: inherit;
}


/*=========================================
    REVIEW CARDS
=========================================*/

#desAddReview .review-card{
    position: relative;
    padding: 30px !important;
    margin-bottom: 25px !important;
    border: 1px solid var(--gray-scale-gray-–-100) !important;
    border-radius: 20px !important;
    background: var(--gray-scale-white);
    transition: all .35s ease;
}

#desAddReview .review-card:hover{
    transform: translateY(-6px);
    border-color: var(--branding-success);
    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

/*=========================================
    REVIEW HEADER
=========================================*/

#desAddReview .review-card .avatar img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gray-scale-white);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

#desAddReview .reviewer-name{
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 4px !important;
}

#desAddReview .review-time{
    font-size: 14px;
    color: var(--gray-scale-gray-–-500) !important;
}

/*=========================================
    STARS
=========================================*/

#desAddReview .stars{
    display: flex;
    gap: 3px;
    font-size: 18px !important;
    color: #FDB022 !important;
}

/*=========================================
    REVIEW BODY
=========================================*/

#desAddReview .review-body{
    margin-top: 20px !important;
    padding-top: 20px;
    border-top: 1px solid var(--gray-scale-gray-–-100);
}

#desAddReview .review-body h6{
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-scale-gray-–-900);
    margin-bottom: 12px !important;
}

#desAddReview .review-text{
    font-size: 15px;
    line-height: 1.9;
    color: var(--gray-scale-gray-–-600) !important;
}

/*=========================================
    VERIFIED BADGE (Future Ready)
=========================================*/

#desAddReview .verified-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 30px;
    background: rgba(0,178,7,.08);
    color: var(--branding-success);
    font-size: 13px;
    font-weight: 600;
}

#desAddReview .verified-badge iconify-icon{
    font-size: 15px;
}

/*=========================================
    REVIEW DIVIDER
=========================================*/

#desAddReview hr{
    margin: 60px 0 !important;
    border-color: var(--gray-scale-gray-–-100);
}


/*=========================================
    REVIEW FORM
=========================================*/

#desAddReview form{
    margin-top:35px;
    padding:40px;
    border:1px solid var(--gray-scale-gray-–-100);
    border-radius:20px;
    background:var(--gray-scale-white);
}

/* Heading */

#desAddReview form h3{
    margin-bottom:25px;
}

/* Label */

#desAddReview .form-label{
    font-size:15px;
    font-weight:600;
    color:var(--gray-scale-gray-–-800);
    margin-bottom:10px;
}

/* Input */

#desAddReview .form-control{

    height:56px;

    border-radius:14px;

    border:1px solid var(--gray-scale-gray-–-200);

    box-shadow:none;

    transition:.3s;

}

#desAddReview textarea.form-control{

    height:180px;

    resize:none;

    padding-top:18px;

}

#desAddReview .form-control:focus{

    border-color:var(--branding-success);

    box-shadow:0 0 0 4px rgba(0,178,7,.08);

}

/*=========================================
    STAR RATING
=========================================*/

#desAddReview .rating-stars{

    display:flex;

    flex-direction:row-reverse;

    justify-content:flex-end;

    gap:6px;

}

#desAddReview .rating-stars input{

    display:none;

}

#desAddReview .rating-stars label{

    font-size:34px;

    color:#d9d9d9;

    cursor:pointer;

    transition:.25s;

}

#desAddReview .rating-stars label:hover,

#desAddReview .rating-stars label:hover~label{

    color:#FDB022;

}

#desAddReview .rating-stars input:checked~label{

    color:#FDB022;

}

/*=========================================
    BUTTON
=========================================*/

#desAddReview .btn-success{

    min-width:220px;

    height:58px;

    border:none;

    border-radius:14px;

    background:var(--branding-success);

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

#desAddReview .btn-success:hover{

    background:var(--branding-success-dark);

    transform:translateY(-4px);

    box-shadow:0 16px 30px rgba(0,178,7,.22);

}