:root{ 
    --body-font: Ebrima;  
    --navbar-font:  Ebrima;  
    --footer-title: Ebrima;   
    --footer-text: Ebrima ;  
    --title-primary: Ebrima ;  
    --title-secondary: Ebrima;  

    --bangla-font: Kalpurush; 
    --english-font: Ebrima; 

    --dashboard-font: Kalpurush; 
    --dashboard-title: Ebrima; 
    
    
 	--bg: #fff;
    --font: #000;
    --footercolor: #316167; 
    --primary: #f2f4f2;
    --primaryHover: #a6cfb1; 
    --primaryActive: #bbc0bd; 
    --primaryFont: #fff;
    --primaryBg: #000;
    --primaryBorder: #30b256;
    --primarySecendaryBorder: #8e8f8e;
    --primaryNote: #686868;
    --green: #07b836;

    --pubNavHeader: #f3f3f3;
    --pubNav: #e6e6e6;
    --pubFooter: #000;

    --footer: #0096FF;

    --bulletin: maroon;
    --bulletinBack: #c6deee;

    /* Tooltip */
    --tooltip: #000;
    --tooltipFont: #fff;
    
   /* input */ 
    --inputBackground: #fff;
    --inputFont: #000;
    --inputBorder: #59C7FA;
    /* Grid */
    --girdHeader: #1e9c82;
    --girdHeaderFont: #fff;
    --gridBody: #fff;
    --gridBodyFont: #000;
    --gridRowOdd: #FFFFDA;
    
   --girdHeaderalter: #D5D5D5;
   --girdHeaderFontalter: #000000;
   --gridBodyalter: #fff;
   --gridBodyFontA: #000;
   --gridRowOddA: #FFFFCC;
    /* Button */
   --primaryButton: #87CEEB;   /* used for Submit/Save/Search/Add New -- all for positive and add/update purpose */
   --primaryButtonHover: ;
   --primaryButtonFont: #fff;
   --primaryButtonBorder: #161D25;

    --alertButton: #ef5350; /*  used for Reset/Delete/Yes(delete confirmation) */
    --alertButtonHover: ;
    --alertButtonFont: #fff;
    --alertButtonBorder: #161D25;

    --secondaryButton: #000; /*  used for Cancel/No/Back */
    --secondaryButtonHover: ;
    --secondaryButtonFont: #fff;
    --secondaryButtonBorder: #161D25;


    --downloadButton: #30b256; /*  used for Cancel/No/Back */
    --downloadButtonHover: ;
    --downloadButtonFont: #fff;
    --downloadButtonBorder: #161D25;

    /* Popup/Modal */
    --modalHeader: #1e9c82; /* Modal header */
    --modalHeaderFont: #fff;

    --modalBody: #fff; /* Modal Body Content */
    --modalBodyFont: #000;

    /* Page */
    --bodyTitle: #1e9c82; /* Used for Title any information space */
    --bodyTitleFont: #000;

    --bodySubTitle: #1e9c82; /* Used for Sub-Title any information space */
    --bodySubTitleFont: #fff;

    --bodyContent: #fff; /* Used for Content Text of page */
    --bodyContentFont: #000;


     /* Card */
    --cardTitle: #1e9c82; /* Used for Title any information space */
    --cardTitleFont: #fff;

    --cardSubTitle: #fff; /* Used for Sub-Title any information space */
    --cardSubTitleFont: #000;

    --cardContent: #fff;  /* Used for Content Text of page */
    --cardContentFont: #000;
    --homeinfo: #ddeed7;


    /* InfoCard */
    --infoCardTitle: #1e9c82; /* Used for Title any information space */
    --infoCardTitleFont: #fff;

    --infoCardSubTitle: #fff; /* Used for Sub-Title any information space */
    --infoCardSubTitleFont: #000;

    --infoCardContent: #f4f3e4;  /* Used for Content Text of page */
    --infoCardContentFont: #000;
    --infoCard: #f7f5e2;
    --infoCardtitle: #f5f3ef;
    --infoCard: #f5f5f5;

    --eggshell: #F0EAD6;
    --pearl: #a6cfa4;
    --wlabel: #0018ff;
    --link:#0000FF;
    
    /* Cart Sidebar */

    --cartSidebarBack: #a6cfb1;
    --aboutTitle: #88d1c2;
    --aboutContent: #e0fded;
    --aboutTitle: #88d1c2;
    --aboutSubTitle: #caf8ef;

    --tooltip: #e5e9e6;
    --tooltipFont: #fff;

    --error: #ef5350;
    --errorgrid: #f7e4e4;
    --error_bg: rgb(253, 237, 237);

    --success: #30b256;
    --hl_success: #bde6c9;
    --success_bg: rgb(237, 247, 237);

    --warning: #ed6c02;
    --info: #000;
    --update: #217b3c;
    --download: #30b256;
    --secondary: #fff;
   --gray: #363636;
   --progressbar: #a6cfb1;
  }

@font-face {
  font-family: 'Ebrima';
  src: url('../fonts/ebrima.ttf') format("truetype"); 
}
@font-face {
  font-family: 'Nikosh';
  src: url('/fonts/Nikosh.ttf') format("truetype"); 
} 
@font-face {
  font-family: 'Kalpurush';
  src: url('../fonts/kalpurush.ttf') format("truetype"); 
} 

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 100;
  /* For IE6-8 */
  src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url('/fonts/material-icon.woff2') format('woff2');
} 

@font-face {
	font-family: 'Material Symbols Outlined';
	font-style: normal;
	font-weight: 100 700;
	src: url('/fonts/material-icon-ic.woff2');
	/* For IE6-8 */
	src: local('Material Icons'),
	    local('MaterialIcons-Regular'),
	    url('/fonts/material-icon-ic.woff2') format('woff2');
}


body { font-family: var(--english-font) !important; }

body[data-lang="bn"] {
  	font-family: var(--bangla-font) !important;
}

body[data-lang="en"] {
  	font-family: var(--english-font) !important;
}

.bangla-font {
	font-family: var(--bangla-font) !important;
}

.english-font {
	font-family: var(--english-font) !important;
}

nav { 
	position: sticky;  
 	background: linear-gradient(135deg, #fff 0%, #a6cfa4 100%);
  	box-shadow: "inherit";
  	transition: all 0.3s ease-in-out;
  	z-index:   1001;
	top: 0; 
	width: 100%; 
	align-items: center;
	display: flex; 
	padding:5px 0; 
	ul {
		display: flex;
	    list-style: none;
	    align-items: center;
	    justify-content: left;
	    padding: 0;
	    margin:0;
	    text-transform: capitalize !important; 
	  } 
}

.typography-lg {
	display: block;
    text-transform: initial;
    width: auto;
    font-size: 34px;
    font-weight: bold;
    line-height: normal;
    color: rgb(0, 0, 0); 
    text-align: left;
    user-select: text;
    text-decoration: none;
    margin: 0px;
}

.typography-md {
	display: block;
    text-transform: initial;
    width: auto;
    font-size: 17px;
    font-weight: normal;
    line-height: normal;
    color: rgb(0, 0, 0); 
    text-align: left;
    user-select: text;
    text-decoration: none;
    margin: 0px;
}

.typography-sm {
	display: block;
    text-transform: initial;
    width: auto;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    color: rgb(0, 0, 0); 
    text-align: left;
    user-select: text;
    text-decoration: none;
    margin: 0px;
}

.typography-xs {
	display: block;
    text-transform: initial;
    width: auto;
    font-size: 12px;
    font-weight: bold;
    line-height: normal;
    color: rgb(0, 0, 0); 
    text-align: left;
    user-select: text;
    text-decoration: none;
    margin: 0px;
}

.typography-footer {
	display: block;
    text-transform: initial;  
    line-height: normal;
    color: #fff; 
    text-align: center;
    user-select: text;
    text-decoration: none;
    margin: 0px;
}

.txt-start {
	text-align: start !important;
}
.txt-center {
	text-align: center !important;
}
.txt-end {
	text-align: end !important;
}

.txt-justify {
	text-align: justify !important;
}

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

.fnt-10{
	font-size: 10px !important;
}

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

.fnt-13{
	font-size: 13px !important;
}

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

.fnt-15{
	font-size: 15px !important;
}

.fnt-16{
	font-size: 16px !important;
}

.fnt-17{
	font-size: 17px !important;
}

.fnt-18{
	font-size: 18px !important;
}

.fnt-20{
	font-size: 20px !important;
}

.fnt-24{
	font-size: 24px !important;
}

.fnt-22{
	font-size: 22px !important;
}

.fnt-30{
	font-size: 30px !important;
}

.fnt-32{
	font-size: 32px !important;
}

.fnt-34{
	font-size: 34px !important;
}

.fnt-40{
	font-size: 40px !important;
}

.fnt-50{
	font-size: 50px !important;
}
.fnt-150{
	font-size: 150px !important;
}
.hvh-65{
	height: 65vh !important;
}
.hvh-70{
	height: 70vh !important;
}
.hvh-72{
	height: 72vh !important;
}
.hvh-75{
	height: 75vh !important;
}
.hvh-82{
	height: 82vh !important;
}
.hvh-85{
	height: 85vh !important;
}

.bg-blue{color: #0d6efd;}
.txt-green{color: #11692a;display: inline-flex;}
.w-space-08{ word-spacing: 0.8rem;}

.pd-left-0{
	padding-left: 0px !important;
}
.pd-left-5{
	padding-left: 5px !important;
}
.pd-left-10{
	padding-left: 10px !important;
}

.pd-right-0{
	padding-right: 0px !important;
}
.pd-right-5{
	padding-right: 5px !important;
}
.pd-right-10{
	padding-right: 10px !important;
}

.pd-top-0{
	padding-top: 0px !important;
}
.pd-top-5{
	padding-top: 5px !important;
}
.pd-top-10{
	padding-top: 10px !important;
}

.pd-bottom-0{
	padding-bottom: 0px !important;
}
.pd-bottom-5{
	padding-bottom: 5px !important;
}
.pd-bottom-10{
	padding-bottom: 10px !important;
}

.mg-right-0{
	margin-right: 0px !important;
}
.mg-right-5{
	margin-right: 5px !important;
}
.mg-right-10{
	margin-right: 10px !important;
}

.mg-left-0{
	margin-left: 0px !important;
}
.mg-left-5{
	margin-left: 5px !important;
}
.mg-left-10{
	margin-left: 10px !important;
}

.mg-top-0{
	margin-top: 0px !important;
}
.mg-top-5{
	margin-top: 5px !important;
}
.mg-top-10{
	margin-top: 10px !important;
}

.mg-bottom-0{
	margin-bottom: 0px !important;
}
.mg-bottom-5{
	margin-bottom: 5px !important;
}
.mg-bottom-10{
	margin-bottom: 10px !important;
}

img { 
	margin: 0px;
    padding: 5px;
    border: none;
    height: auto;
    width: auto;
    display: block;
    cursor: pointer;
    max-height: 500px;
}
.nav-image {
	 display: flex;
	 justify-self: start; 
}
.nav-title {
	display: block;
    text-transform: initial;
    width: auto;
    font-size: 34px;
    font-weight: bold;
    line-height: normal;
    color: rgb(0, 0, 0); 
    text-align: left;
    user-select: text;
    text-decoration: none;
    margin: 0px;
}
.menu-bar-area {
	
}
.menu-bar{
	display:none;
	cursor:pointer;
}
.nav-menu-item a{ 
	 padding:5px  10px;
     color: var(--font);
     font-size : 17px; 
     text-decoration: none;  
} 
.nav-menu-item:hover{ 
	 background: var(--primaryHover); 
}

.nav-menu-item:hover .style-popup-menu {
  	opacity:1;
}

.nav-menu-item .style-popup-menu:hover {
  	opacity:1;
}

.nav-menu-item.active{ 
	 background: var(--primaryActive); 
}

.nav-menu-item-lng a{ 
	 padding:5px  10px;
     color: var(--font);
     font-size : 17px; 
     text-decoration: none;
     cursor: pointer;  
} 
.nav-menu-item-lng:hover{ 
	 background: var(--primaryHover); 
	 text-decoration: underline; 
}

.nav-menu-item-lng.active{   
	 text-decoration: underline; 
}

.menu-main-menu-aside{
	display: block;
	text-align: left;
}
.footer-main {
	bottom: 0px;  
    color: #fff;  
    max-width: 100%;
    padding: 10px ; 
    display: block; 
    box-sizing: border-box;
    background: #316167; 
    height: auto; 
}

.footer-main a{
	 display:inline-flex;
	 color: var(--primaryFont);
	 text-decoration: none; 
}
.footer-main a:hover{
	 color: var(--download); 
	 text-decoration: underline; 
}
.hr-bar{
	margin: 0 5px;
    width: 2px;
    background: #000;
}
.red-line {
	display:block;
    height:  1.6px;
    width: 100%;
    margin: 2px 0;
    background-color:rgb(243, 52, 52);
}

.style-popup-menu {
	display: block;
    position: absolute;
    z-index: 1000;
    left: 0;
    right: 0;
    background: #f4f4f4;
    top: 60px;
    height: 0;
    width: 0;
    pointer-events: auto;
    -webkit-transform: rotateX(-15deg);
    -ms-transform: rotateX(-15deg);
    transform: rotateX(-15deg);
    -webkit-transform-origin: 50% -50px;
    -ms-transform-origin: 50% -50px;
    transform-origin: 50% -50px;
    opacity: 0;
    will-change: transform, opacity;
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
}
.style-popup-menu:hover{
	opacity: 1;
}
.style-popup-menu-bg {
	background: #f2f4f2;
    position: absolute;
    will-change: transform;
    -webkit-transform: translateX(61px);
    -ms-transform: translateX(61px);
    transform: translateX(61px);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
    width: 650px;
    left: 0;
    top: 0;
    height: auto;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
.style-popup-menu-arrow {
	-webkit-transform: translateX(366px) rotate(45deg);
    -ms-transform: translateX(366px) rotate(45deg);
    transform: translateX(366px) rotate(45deg);
    position: absolute;
    left: 0;
    top: -8px;
    margin: 35px 0 0 -6px;
    width: 15px;
    height: 15px;
    border-radius: 4px 0 0;
    background: #fff;
    box-shadow: -3px -3px 5px rgba(82, 95, 127, .04);
    will-change: transform;
    z-index: 10001;
}

.style-popup-menu-container { 
	width: 400px;
    overflow: hidden;
    background: #f2f4f2;
    -webkit-transform: translateX(56px);
    -ms-transform: translateX(56px);
    transform: translateX(56px);
    height: auto;
    border-radius: 5px;
    box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
    will-change: transform, width, height;
    margin: 35px 0 0 150px;
}

.hover-card {
	height: 100%;
    background: #fff;
    margin-top: 0;
    position: center; 
    display: flex;
    border-radius: 10px;
}

.info-card{
	height: 100%; 
	padding: 10px;
    background: #ddeed7;
    margin-top: 0;
    position: initial;
}

/* Wrapper for tooltip and hover element */
.tooltip-wrapper {
	position: relative;
	display: inline-block;
}

/* Hoverable text/button */
.hover-target {
	padding: 5px 10px;
	cursor: pointer;
	color: var(--font);
	font-size: 17px;
	text-decoration: none;
}

.hover-target:hover {
	cursor: pointer;
}

/* Tooltip box hidden by default */
.custom-tooltip {
	position: absolute;
	top: 110%;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	display: none;
	z-index: 1000;
	transition: opacity 0.3s ease, transform 0.3s ease;
	opacity: 0;
	pointer-events: none;
}

.tooltip-wrapper:hover .custom-tooltip {
	display: block;
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

/* Inner box */
.tooltip-box {
	position: relative; /* Added */
	background-color: #fff;
	width: auto;
	height: auto;
	padding: 0.7rem 4rem;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	justify-content: flex-start;
}

.tooltip-box::before {
	content: "";
	position: absolute;
	top: -10px; /* Above the box */
	left: 50%;
	transform: translateX(-50%);
	border-width: 0 10px 10px 10px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
}

/* Each item inside */
.tooltip-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: none;
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
	color: #000;
	font-family: Kalpurush;
}

.tooltip-item img {
	object-fit: contain;
}

.tooltip-item span {
	text-align: center;
}


.sidebar-panel{
	height: 100vh; 
  	right: 0;
  	top: 0;
  	padding-bottom: 50px;
	position: fixed;
	margin-left: 0;
	margin-right: -271px;
	width: 270px;
	z-index: 1020;
	overflow: hidden !important;
	overflow-y: auto;
	transition: 0.5s;
	background: var(--bg);
	box-shadow: 0 12px 30px rgba(80, 143, 244, 0.1);  
	display: block;
}  
.sidebar-panel.collapsed {
	margin-right: 0px;
}

.logo {
	display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
} 

.overlay {
  position: fixed;
  top: 0;
  right: 270px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden; 
  transition: right opacity 0.5s ease;
  z-index: 999; 
}

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

/*mobile / small screen*/ 
@media (min-width: 576px) {
    .nav-image {
	 	display: flex;
	 	justify-self: center; 
	}
	.nav-title{
		text-align: center;
		font-size: 22px;
	}
	.menu-bar{ 
		display: block;
        align-content: center;
        text-align: center;
	}
	#navbar-menu-panel{
		display: none;
	}
	.carousel{
		padding: 20px 0;
	}
}


/*laptop / tab*/ 
@media (min-width: 992px) {
	 .nav-image {
	 	display: flex;
	 	justify-self: start; 
	}
	.nav-title{
		text-align: left;
		font-size: 34px;
	}
	.menu-bar {
		display:none;
	}
	#navbar-menu-panel{
		display: block;
	}
}
 
/*desktop / large screen*/ 
@media (min-width: 1200px) {
     .menu-bar{
		display: none;
	}
	.nav-title{
		text-align: left; 
		font-size: 34px;
	}
	#navbar-menu-panel{
		display: block;
	}
}