@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..700;1,100..700&display=swap');





body {
  font-family:  "Inter", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

}



:root {
	--s-primary: #188051;
	--bs-primary-rgb: 24, 128, 81;
	--s-primary-dark: #188051;
	--s-secondary: #3749bb;
	--s-tertiary: #838383;
	/* --s-hf-bg: #081621; */
	--s-hf-bg: #404b52;
	--s-bg: #f2f4f8;
	--s-m-bg: #6e2594;
	--s-s-bg: rgba(55, 73, 187, 0.05);
	--s-f-c1: #666666;
	--s-f-c2: #fff;

	/** Boot fix **/

	--bs-primary: var(--s-primary);
	--bs-primary-rgb: var(--s-primary-rgb);




	--theme-deafult: #188051;
	--theme-secondary: #0f172a;
	--light-background: #f1f5f9;
	--body-font-color: #334155;
	--chart-border: #cbd5e1;
	--recent-chart-bg: #fcfcfd;
	--light-bg: #eef1f6;
	--white: #fff;
	--light2: #f5f6f9;
	--sidebar-border: rgba(0, 0, 0, 0.1);
	--chart-text-color: rgba(82, 82, 108, 0.8);
	--recent-dashed-border: rgba(82, 82, 108, 0.3);
	--chart-dashed-border: rgba(82, 82, 108, 0.2);
	--chart-progress-light: rgba(82, 82, 108, 0.1);
	--recent-box-bg: #f2f4f7;
	--recent-border: rgba(97, 101, 122, 0.25);
	--course-light-btn: #f2f3f7;
	--course-bg: #f7f7f7;
	--balance-profie-bg: #e0dfef;
	--view-grid-bg: #ecf3fa80;
	--view-border-marker: #cfcdfc;
	--light-slate: #f5f6f9;
	--text-gray: rgba(82, 82, 108, 0.8);
	--product-shadow: 0px 1px 0px rgba(82, 82, 108, 0.15);
	--bs-heading-color: #051a1a;
	--bs-card-color: #051a1a;
	--fc-button-bg-color: var(--theme-deafult);
	--fc-button-active-bg-color: var(--theme-deafult);
	--fc-button-active-border-color: var(--theme-deafult);
	--fc-button-border-color: var(--theme-deafult);
	--fc-button-hover-bg-color: var(--theme-deafult);
	--fc-button-hover-border-color: var(--theme-deafult);
	--normal: #eceaf3;
	--normal-shadow: #d9d8e3;
	--normal-mouth: #9795a4;
	--normal-eye: #595861;
	--active: #f8da69;
	--active-shadow: #f4b555;
	--active-mouth: #f05136;
	--active-eye: #313036;
	--active-tear: #76b5e7;
	--active-shadow-angry: #e94f1d;
	/* Do not show the "remove tag" (x) button when only a single tag remains */


}

:root .customLook {
	--tag-bg: var(--theme-deafult);
	--tag-hover: var(--theme-secondary);
	--tag-text-color: var(--white);
	--tags-border-color: silver;
	--tag-border-radius: 25px;
	--tag-text-color--edit: #111;
	--tag-remove-bg: var(--tag-hover);
	--tag-pad: 0.6em 1em;
	--tag-inset-shadow-size: 1.35em;
	--tag-remove-btn-bg--hover: #000;
	--tagify-dd-color-primary: var(var(--theme-deafult));
	--tagify-dd-bg-color: var(--course-light-btn);
}




.text-muted-dark {
	color: #0f172a;
}

.text-muted-light {
	color: var(--s-bg)
}


.dark-a a {
	color: var(--s-bg);
	text-decoration: none;
	font-weight: 600;
	opacity: 0.9;
}

a {
	color: var(--s-primary);
	text-decoration: none;
	font-weight: 600;
	opacity: 0.9;
}



.table {
	--bs-body-bg: auto;
}





/*****************/
.marks {
	display: flex;
	position: absolute;
	top: 15px;
	left: 0;
	z-index: 10;
	flex-direction: column;
	align-items: flex-start;
}


.marks .mark {
	background: var(--s-m-bg);
	width: auto;
	color: #fff;
	font-size: 12px;
	padding: 3px 10px;
	line-height: 14px;
	margin-bottom: 2px;
	border-radius: 0 20px 20px 0;
	flex: 0 0 auto;
}


/* Product Specific */

    /* Overlay container */
    .hover-actions {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
    }

    /* Show on hover */
    .p-item-img:hover .hover-actions {
        opacity: 1;
        visibility: visible;
    }

    /* Buttons */
    .hover-actions button {
        background: white;
        border: none;
        border-radius: 8px;
        padding: 6px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        cursor: pointer;
        height: 48px;
        width: 48px;
        font-size: 11px;
        color: #333;
        transition: transform 0.15s ease;
    }

    .hover-actions button:hover {
        transform: translateY(-2px);
    }

    /* Icons */
    .hover-actions .material-icons {
        font-size: 20px;
    }

    .p-item-img {
        position: relative;
        overflow: hidden;
        padding:0;
        margin:0
    }

    .p-item-img img {
        width: 100%;
        padding:0;
        margin: 0;
        display: block;
    }

    .img-wrap {
        display: flex;
        padding: 0;
        margin: 0;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .img-wrap img {
        object-fit: contain;
        display: block;
    }

.category-btn {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
}

   .category-btn.active{
    color: white;

    background-color: var(--s-primary);
  }

  .cat-name{
    color:#4b5563;
    font-weight: 600;
  }
    .cat-name:hover{
        color: var(--s-primary);
    }