/* ====================================== NGO ENROLL ============================================= */

:root{
	--color-theme: #ed6a26;
	--color-theme2: #f9f7ec;
	--title-color-theme: #a16e55;
}
/*  toggle menu  */
.text-color-theme {
	color: var(--color-theme);
}
.text-color-theme2 {
	color: var(--color-theme2);
}
.title-color-theme {
	color: var(--title-color-theme);
}
.bg-color-theme {
	background-color: var(--color-theme);
}
.bg-color-theme2 {
	background-color: var(--color-theme2);
}
.menu2 {
	width: auto;
	/* border: 1px solid #ccc; */
}
.menu2-header {
	background: var(--color-theme2);
	padding: 10px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	font-weight: bold;
}
.menu2-item {
	padding: 10px;
		color: rgb(61, 61, 61);
	/* border-top: 1px solid #ddd;
	background: #f9f9f9; */
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;

}
.menu2-item:hover {
	background: #e9e9e9;
	color: var(--color-theme);
}
.menu2-item:focus {
	background: #e9e9e9;
	color: var(--color-theme2);
}
.submenu2 {
	display:block;
	background: white; /*background: #96b441;*/
}
.menu-link.memu-theme {
	color: black;
	font-size: x-large;
	font-weight: normal;
	/* border: 1px solid #ccc; */
}
.menu-link.memu-theme:hover {
	color: #ed6a26;
	font-size: x-large;
	font-weight: normal;
	/* border: 1px solid #ccc; */
}
.button.button-border.button-light.button-theme:hover {
	color: white;
	font-size: x-large;
	font-weight: normal;
	background-color: white;
}
/* input[type="checkbox"] {
	display: none;
}
input[type="checkbox"]:checked + .submenu2 {
	display: block;
} */
/*  End toggle menu  */

/*  toggle menu - grid & list  */
.view-toggle {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	cursor: pointer;
}
.view-toggle span {
	padding: 5px;
	display: inline-block;    
}
.view-toggle span:hover {
	background: white;
}
.hidden {
    display: none  !important;
}
.toggle-icon i {
	color: lightgray;
	font-size: 20px;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}
.toggle-icon.active i {
	color: grey; /* Active icon is yellow */
}
.toggle-icon:hover i {
	color: lightgray; /* Darken color on hover */
}
/*  End toggle menu- grid & list  */

/*  list info  */ 
.list-info {
	font-size: 16px;
	line-height: 2.0;
}
.list-info b {
	font-weight: bold;
}
.list-info p {
	margin: 5px 0;
}
.list-button {
	display: inline-block;
	background: #2f632b;
	color: white;
	padding: 8px 20px;
	font-size: 16px;
	border: none;
	border-radius: 0px;
	cursor: pointer;
	text-decoration: none;
	margin-top: 20px;
}
.list-button:hover {
	background: #358a2f; 
	color: white;
}
/* Flexbox Fix for Proper Alignment */
.list-content-div {
	display: table;
}
.list-content-div .label {
	display: table-cell;
	white-space: nowrap;
	padding-right: 5px;
}
.list-content-div .content {
	display: table-cell;
}
 /*  end list info  */ 

 

/*=======   Custom-check boxm ======= */
	.custom-checkbox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 50px;          /* custom size */
	height: 50px;
	border: 2px solid  var(--color-theme);  /* border color */
	border-radius: 4px;       /* rounded corners */
	cursor: pointer;
	position: relative;
	background-color: #fff;   /* background color */
	transition: all 0.2s ease;
	margin: 10px 0px;
	}
	/* Hover effect */
	.custom-checkbox:hover {
	border-color:  var(--color-theme);
	}

	/* Checked state */
	.custom-checkbox:checked {
	background-color:  var(--color-theme);  /* checked color */
	border-color:  var(--color-theme);
	}

	/* Optional checkmark icon */
	.custom-checkbox:checked::after {
	content: '';
	color: var(--color-theme);
	position: absolute;
	top: 2px;
	left: 5px;
	font-size: 16px;
	}
/*=======  #Custom-check box end======= */
		
/*=======   Footer tab menu  ======= */
/* Footer shell */
.app-footer {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0; right: 0;
	padding: 0px var(--footer-gap);
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0px);
	background: transparent;
	z-index: 1030;
}
.coyright-mb{
	margin-bottom:0px;
}
.add-to-cart-mb{
	bottom:0px;
}
.gotoTop-display{
    display:block;
}
/* Card-like bar */
.tabbar {
	background: #fff;
	border-top-left-radius:  var(--footer-radius);
	border-top-right-radius:  var(--footer-radius);
	box-shadow: 0 6px 24px rgba(0,0,0,.08), 0 -2px 12px rgba(0,0,0,.06);
	padding: var(--footer-pad-y) 6px;
}
/* Each tab button */
.tab-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	border: 0;
	background: transparent;
	border-radius: 12px;
	width: 100%;
	padding: 10px 4px;
	color: #6c757d;
	transition: background .2s, color .2s, transform .08s ease-in-out;
}
.tab-btn:active { transform: scale(.98); }
.tab-btn.active {
	/* background: var(--active-bg); */
	color: var(	--color-theme);
}
.tab-btn i {
	font-size: 1.35rem;      /* icon size */
	line-height: 1;
}
.tab-label {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2px;
}

/* Larger touch targets on small screens */
@media (max-width: 480px) {
	.app-footer {
	display: block;
	}
	.add-to-cart-mb{
	bottom:70px;
    }
	.gotoTop-display{
	display: none;
    }
	.tab-btn { padding: 12px 4px; }
	.tab-btn i { font-size: 1.4rem; }
	.tab-label { font-size: .76rem; }
	.coyright-mb{
	margin-bottom:90px;
}
}
/*=======   #Footer tab menu end ======= */

/*=======  Custom checkbox  ======= */
.custom-checkbox {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 50px;          /* custom size */
	height: 50px;
	border: 2px solid  var(--color-theme);;   /* border color */
	border-radius: 4px;       /* rounded corners */
	cursor: pointer;
	position: relative;
	background-color: #fff;   /* background color */
	transition: all 0.2s ease;
	margin: 10px 0px;
}
/* Hover effect */
.custom-checkbox:hover {
	border-color:  var(--color-theme);
}
/* Checked state */
.custom-checkbox:checked {
	background-color:  var(--color-theme);  /* checked color */
	border-color:  var(--color-theme);
}
/* Optional checkmark icon */
.custom-checkbox:checked::after {
	content: '';
	color: var(--color-theme);
	position: absolute;
	top: 2px;
	left: 5px;
	font-size: 16px;
}
/*=======  Custom checkbox #end ======= */