/* That means:
Minimum size: 14px (even on tiny screens)
Preferred formula: 1.2vw + 1rem (scales with viewport width)
Maximum size: 20px (on large screens) */
/* ===== CSS VARIABLES BASED ON BASE FONT SIZE ===== */
:root {
	/* Base font size - all calculations derive from this */
	--min-font: 8.0px;
	--max-font: 12.0px;
	--fluid-calc: calc(0.8rem + 0.6vw);
	--base-font-size: clamp(var(--min-font), var(--fluid-calc), var(--max-font));
	--footer-height: calc(var(--base-font-size) * 20);
	/* Enhanced Bootstrap spacing scale */
	--spacer-unit: calc(var(--base-font-size) * 0.25); /* 4px */
	--spacer-1: calc(var(--spacer-unit) * 1);  /* 4px */
	--spacer-2: calc(var(--spacer-unit) * 2);  /* 8px */
	--spacer-3: calc(var(--spacer-unit) * 3);  /* 12px */
	--spacer-4: calc(var(--spacer-unit) * 4);  /* 16px */
	--spacer-5: calc(var(--spacer-unit) * 6);  /* 24px */
	--spacer-6: calc(var(--spacer-unit) * 8);  /* 32px */
	--spacer-7: calc(var(--spacer-unit) * 12); /* 48px */
	--spacer-8: calc(var(--spacer-unit) * 16); /* 64px */
	/* Enhanced Bootstrap typography */
	--font-size-base: var(--base-font-size);
	--font-size-lg: calc(var(--base-font-size) * 1.25);
	--font-size-sm: calc(var(--base-font-size) * 0.875);
	--font-size-xl: calc(var(--base-font-size) * 1.5);
	--font-size-2xl: calc(var(--base-font-size) * 2);
	/* Enhanced Bootstrap component sizes */
	--btn-height: calc(var(--base-font-size) * 2.75);
	--input-height: calc(var(--base-font-size) * 2.5);
	/* Custom colors */
	--primary-light: #4dabf7;
	--primary-dark: #1864ab;
	--page-txt-color: #000000;
	--mnu-font-size: calc(var(--font-size-base) * 1.00);
	--mnu-color: #e6f7f5;
	--mnu-txt-color: #0c2a45;
	--font-family: Verdana,Geneva,sans-serif;
	--muted:#f8f8f8;
	--shadow:0 2px 8px rgba(0,0,0,.08);
}
/* ===== ENHANCED BOOTSTRAP STYLES ===== */
body {
    font-size: var(--font-size-base);
    line-height: 1.6;
}
/* Enhanced Typography */
.display-1 { font-size: calc(var(--base-font-size) * 4.5) !important; }
.display-2 { font-size: calc(var(--base-font-size) * 3.75) !important; }
.display-3 { font-size: calc(var(--base-font-size) * 3) !important; }
.display-4 { font-size: calc(var(--base-font-size) * 2.5) !important; }
h1, .h1 { font-size: calc(var(--base-font-size) * 2.25) !important; }
h2, .h2 { font-size: calc(var(--base-font-size) * 1.875) !important; }
h3, .h3 { font-size: calc(var(--base-font-size) * 1.5) !important; }
h4, .h4 { font-size: calc(var(--base-font-size) * 1.25) !important; }
h5, .h5 { font-size: calc(var(--base-font-size) * 1.125) !important; }
h6, .h6 { font-size: calc(var(--base-font-size) * 1) !important; }
.lead {
    font-size: calc(var(--base-font-size) * 1.25) !important;
}
strong > * {
    font-size: calc(var(--base-font-size) * .8);
}
.fa-icon.spin {
    animation: fa-spin 1s linear infinite;
}
.sign-icon {
    background: transparent !important;
    border: none;
    width: calc(var(--font-size-base) * 1.4);
    height: calc(var(--font-size-base) * 1.4);
    transition: all 0.3s ease;
}
.sign-icon-mnu-txt {
    filter: brightness(0) saturate(100%) invert(85.27%) sepia(38.82%) saturate(41304.35%) hue-rotate(208.42deg) brightness(64.16%) contrast(100.42%);
}
.sign-icon-mnu-txt:hover {
    filter: brightness(0) saturate(100%) invert(4.61%) sepia(47.06%) saturate(3441.30%) hue-rotate(172.94deg) brightness(144.78%) contrast(100.04%);
}
.sign-icon-mnu-bg {
	filter: brightness(0) saturate(100%) invert(4.61%) sepia(47.06%) saturate(3441.30%) hue-rotate(172.94deg) brightness(144.78%) contrast(100.04%);
}
.sign-icon-mnu-bg:hover {
	filter: brightness(0) saturate(100%) invert(85.27%) sepia(38.82%) saturate(41304.35%) hue-rotate(208.42deg) brightness(64.16%) contrast(100.42%);
}
.dropdown-item:hover .sign-icon-mnu-bg {
    filter: brightness(0) invert(1);   /* Example: make image white */
    transform: scale(1.1);             /* Slight zoom */
    transition: 0.2s ease;
}
.dropdown-item.active .sign-icon-mnu-bg {
    filter: brightness(0) invert(1);
    transform: scale(1.2);
}
.nav-item:hover .sign-icon-mnu-txt {
    filter: brightness(0) invert(1);   /* Example: make image white */
    transform: scale(1.1);             /* Slight zoom */
    transition: 0.2s ease;
}
.nav-item.active .sign-icon-mnu-txt {
    filter: brightness(0) invert(1);
    transform: scale(1.2);
}
.sign-icon:focus {
    background-color: white;
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.3);
}
.sign-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Enhanced Buttons */
.btn {
    min-height: var(--btn-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: all 0.2s ease;
}
.btn-lg {
    min-height: calc(var(--btn-height) * 1.2);
    font-size: calc(var(--font-size-base) * 1.125);
}
.btn-sm {
    min-height: calc(var(--btn-height) * 0.8);
    font-size: calc(var(--font-size-base) * 0.875);
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* Enhanced Form Controls */
.form-control {
    min-height: var(--input-height);
    font-size: var(--font-size-base);
}
.form-control-lg {
    min-height: calc(var(--input-height) * 1.2);
    font-size: calc(var(--font-size-base) * 1.125);
}
.form-control-sm {
    min-height: calc(var(--input-height) * 0.8);
    font-size: calc(var(--font-size-base) * 0.875);
}
/* Enhanced Navbar */
.navbar {
    transition: all 0.3s ease;
}
.navbar-brand {
    font-size: calc(var(--font-size-base) * 1.25);
    font-weight: 600;
}
.nav-link {
    font-weight: 500;
    transition: color 0.2s ease;
}
/* Enhanced Cards */
.card {
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.card-title {
    font-size: var(--font-size-base);
	margin-bottom: calc(var(--spacer-unit) * 3);
	overflow-wrap: break-word;
	word-break: break-word;
}
@media (max-width: 1024px) {
	.card-title {
		font-size: calc(var(--font-size-base) * .6);
	}
}
/* Enhanced Spacing Utilities */
.p-custom-1 { padding: var(--spacer-1) !important; }
.p-custom-2 { padding: var(--spacer-2) !important; }
.p-custom-3 { padding: var(--spacer-3) !important; }
.p-custom-4 { padding: var(--spacer-4) !important; }
.p-custom-5 { padding: var(--spacer-5) !important; }
.p-custom-6 { padding: var(--spacer-6) !important; }
.p-custom-7 { padding: var(--spacer-7) !important; }
.p-custom-8 { padding: var(--spacer-8) !important; }
.m-custom-1 { margin: var(--spacer-1) !important; }
.m-custom-2 { margin: var(--spacer-2) !important; }
.m-custom-3 { margin: var(--spacer-3) !important; }
.m-custom-4 { margin: var(--spacer-4) !important; }
.m-custom-5 { margin: var(--spacer-5) !important; }
.m-custom-6 { margin: var(--spacer-6) !important; }
.m-custom-7 { margin: var(--spacer-7) !important; }
.m-custom-8 { margin: var(--spacer-8) !important; }
/* Enhanced Container */
.container-custom {
    max-width: calc(var(--base-font-size) * 140.0); /* 1200px */
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
/* Custom Components */
.feature-icon {
    width: calc(var(--base-font-size) * 4);
    height: calc(var(--base-font-size) * 4);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacer-5);
    color: white;
    font-weight: 600;
}
.testimonial-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}
.testimonial-card::before {
    content: """;
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: calc(var(--base-font-size) * 6);
    opacity: 0.3;
    font-family: var(--font-family);
}
.zoom-demo {
    background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
    color: white;
    border-radius: 10px;
    border: none;
}
.gradient-bg {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
/* Enhanced Shadows */
.shadow-custom {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}
.shadow-custom-lg {
    box-shadow: 0 8px 40px rgba(0,0,0,0.2) !important;
}
/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    :root {
        --base-font-size: 15px;
    }
    .display-1 { font-size: calc(var(--base-font-size) * 3.5) !important; }
    .display-2 { font-size: calc(var(--base-font-size) * 3) !important; }
    .display-3 { font-size: calc(var(--base-font-size) * 2.5) !important; }
    .display-4 { font-size: calc(var(--base-font-size) * 2) !important; }
    h1, .h1 { font-size: calc(var(--base-font-size) * 1.75) !important; }
    h2, .h2 { font-size: calc(var(--base-font-size) * 1.5) !important; }
	#pageContent { order: 1; }
    #firstBuff { order: 2; }
	#divParent1 { order: 3; }
}
@media (max-width: 576px) {
    :root {
        --base-font-size: 14px;
    }
    .feature-icon {
        width: calc(var(--base-font-size) * 3);
        height: calc(var(--base-font-size) * 3);
        font-size: calc(var(--font-size-base) * 1.25);
    }
    .btn {
        width: 100%;
        margin-bottom: var(--spacer-2);
    }
    .btn-group .btn {
        width: auto;
    }
}
/* Print Styles */
@media print {
    :root {
        --base-font-size: 12pt;
    }
    .navbar, .btn, .alert, .badge {
        display: none !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}
/* High DPI Support */
@media (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}
/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
/* ===== END CSS VARIABLES BASED ON BASE FONT SIZE ===== */
/* for same font size for all element */
html {
 	font-size: var(--font-size-base);
 	position: relative;
	min-height: 100%;
    scroll-behavior: smooth;
}
body {
	font-size: var(--font-size-base); /* equals html font-size */
	color: --page-txt-color;
	position: relative;
	height: 100%;
}
/* footer height  */
.jsp-padding-top {
    margin-bottom: var(--footer-height);
}
.cursor {
	cursor: pointer;
}
.blink_me {
  animation: blinker 2s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/* footer css */
/* Fixed Footer Solution */
.footer {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    z-index: 1000;
	background: var(--mnu-color);
	background: -webkit-linear-gradient(59deg, #3A6073, var(--mnu-color));
	background: linear-gradient(59deg, #3A6073, var(--mnu-color));
	color: var(--mnu-txt-color);
	margin-top: calc(var(--font-size-base) * 5) !important;
}
/* Alternative: Sticky but not fixed */
.footer-sticky {
    position: sticky;
    bottom: 0;
    width: 100%;
    z-index: 1000;
	background: var(--mnu-color);
	background: -webkit-linear-gradient(59deg, #3A6073, var(--mnu-color));
	background: linear-gradient(59deg, #3A6073, var(--mnu-color));
	color: var(--mnu-txt-color);
}
/* Responsive footer padding */
.footerPad {
	font-size: var(--mnu-font-size);
    padding: 0.5rem 0;
}
.footer a {
  color: var(--mnu-txt-color);
  transition-duration: 0.2s;
}
h4.footerPad {
}
.footer a:hover {
	border-radius: 6px;
 	background-color: rgba(12, 42, 69, .3); 
	color: #3885eb;
  	text-decoration: none;
}
/* Fix touch targets using dynamic base font size */
.footer ul li {
    margin: calc(var(--font-size-base) * 0.35) 0;   /* ~6px if base = 16px */
}
.footer ul li a {
    display: block;
    padding: calc(var(--font-size-base) * 0.6) 0;  /* ~12px top & bottom */
    line-height: calc(var(--font-size-base) * 1.25);
}
.footer-middle {
  padding-top: 10px;
  color: white;
}
.copy {
  color: var(--mnu-txt-color);
  border-top: 1px solid var(--mnu-txt-color);
}
.fa-colors {
  color: var(--mnu-txt-color);
}
.fa-icon {
	font-size: var(--font-size-base) !important;
	width: calc(var(--font-size-base) * 2) !important;
	height: calc(var(--font-size-base) * 2) !important;
	padding: calc(var(--font-size-base) * .3) !important;
}
/* Footer social icons list */
ul.social-network {
    list-style: none;
    display: inline-flex;                   /* better than inline */
    gap: calc(var(--font-size-base) * 0.40); /* spacing between icons (~6px) */
    padding: 0;
    margin: 0 !important;
}
/* Each list item */
ul.social-network li {
    display: inline-flex;
}
/* Social icon clickable area */
.social-circle li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--mnu-txt-color);
    text-decoration: none;
    transition: background-color .2s, transform .2s;
}
/* Hover animation */
.social-circle li a:hover .fa-icon,
.triggeredHover .fa-icon {
    transform: rotate(360deg);
    transition: all 0.2s;
}
/* Icon inside clickable area */
.social-circle li .fa-icon {
    margin: 0;
    line-height: 1; /* center icon perfectly */
    text-align: center;
}
li a.footer-icon-social > .fa-icon {
    margin: calc(var(--font-size-base) * 0.25) calc(var(--font-size-base) * 0.5);  /* ~4px spacing */
    border-radius: 50%;                          /* neat circular buttons */
    line-height: 1 !important;
    vertical-align: middle;
}
/* Default icon color */
.social-network a {
    color: var(--mnu-txt-color);
    background-color: transparent; /* avoid forcing BG */
}
/* end footer css */
/* text for ellipsis */
.text {
	font-size: var(--font-size-base);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 6; /* number of lines to show */
	-webkit-box-orient: vertical;
}
.text-2 {
	font-size: var(--font-size-base);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2; /* number of lines to show */
	-webkit-box-orient: vertical;
}
.text-3 {
	font-size: var(--font-size-base);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* number of lines to show */
	-webkit-box-orient: vertical;
}
.text-4 {
	font-size: var(--font-size-base);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4; /* number of lines to show */
	-webkit-box-orient: vertical;
}
.text-5 {
	font-size: var(--font-size-base);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 5; /* number of lines to show */
	-webkit-box-orient: vertical;
}
/* text for ellipsis */
.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.no-pad {
  margin-right:0;
  margin-left:0;
}
.nopad {
	padding: 0px !important;
	margin: 0px !important;
	padding-right: 0px !important;
	padding-bottom: 0px !important;
}
.border-5 {
    border-width: 5px !important;
    border-bottom-width: 10px !important;
}
.center-vertical {
	vertical-align: middle;
	margin: auto;
	align-items: center;
	justify-content: center;
}
.newsHideScroll {
	overflow: hidden;
}
.newsColumn {
  overflow: auto; /* Add the ability to scroll */
  max-height: 2400px;
}
.hide-scrollbar::-webkit-scrollbar {
  overflow-y: scroll; /* Add the ability to scroll */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 2px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #f0faf9; 
}
/* width */
::-webkit-scrollbar {
  width: 15px;
}
.thin_scrollbar::-webkit-scrollbar {
  width: 2px;
  height: 8px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--mnu-color); 
}
.height-400 {
	height: 400px;
}
.height-200 {
	height: 200px;
}
.height-180 {
	height: 180px;
}
.height-320 {
	height: 320px;
}
.news-sidebar-txt {
	color: gray;
}
h6.card-subtitle {
	font-size: calc(var(--font-size-base) * .6) !important;
}
h6.card-title, h5.card-title {
	font-weight: bold;
}
#pageBodyLeft 	{ order: 1; padding: 0 !important; margin: 0 !important; }
#pageBody 		{ order: 2; }
#pageBodyRight 	{ order: 3; padding: 0 !important; margin: 0 !important; }
@media (max-width: 768px) {
	#pageBodyLeft 	{ order: 2; }
	#pageBody 		{ order: 1; }
	#pageBodyRight { 
		order: 3; 
		margin-top: calc(var(--font-size-base) * .6) !important;
	}
	#pageBodyLeft { 
		margin-top: calc(var(--font-size-base) * .6) !important;
	}
} 
.img-fill {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* FIX image container width */
.img-div {
    flex: 0 0 calc(var(--font-size-base) * 7); /* ~112px if base=16px */
    /* REMOVE float, breaks flex */
    float: none !important;
}
/* FIX image styling */
.img-div img {
    width: 100%;
    height: calc(var(--font-size-base) * 7); /* ~80px */
    object-fit: cover;     /* THIS FIXES THE DISTORTION */
    border-radius: 4px;
}
/* Tablet responsive */
@media (min-width: 768px) and (max-width: 1100px) {
    .news-cols {
        flex-direction: column;
    }
    .img-div {
        flex: none;
        width: 100%;
    }
    .img-div img {
        width: 100%;
        height: calc(var(--font-size-base) * 12);
        object-fit: cover;
    }
}
/* Mobile responsive */
@media (max-width: 768px) {
    .img-div {
        flex: 0 0 calc(var(--font-size-base) * 9);
    }
    .img-div img {
        height: calc(var(--font-size-base) * 6);
    }
}
.cursor12 {
	cursor: pointer;
}
.cursor14 {
	cursor: pointer;
}
.cursor16 {
	cursor: pointer;
}
.cbxSize {
	width: calc(var(--font-size-base) * .8);
	height: calc(var(--font-size-base) * .8);
}
.circle {
  width: 10px;
  height: 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.circleRed {
  background: red;
}
.circleGreen {
	background: green;
}
.circleYellow {
	background: #FF03DC;
}
.circleOrange {
	background: orange;
}
.circleGray {
	background: gray;
}
.circlePurple {
	background: purple;
}
.btn-container {
	flex-wrap: wrap;
	gap: var(--spacer-2, 8px);
}
/* ensure buttons scale nicely */
.btnCss {
	font-size: var(--font-size-base);
	min-width: 120px;
	text-align: center;
	padding: var(--spacer-1) var(--spacer-2);
	margin-right: var(--spacer-2);
	margin-bottom: var(--spacer-2);
	transition: all 0.3s ease-in-out;
	color: #000000;
	border-color: #000000; 
	background-color: #ffffff;
	border-width: 2px;
	border-radius: 6px;
}
.btnCss:hover {
	color: #ffffff;
	background-color: #000000;
}
.btnCss * {
	font-size: var(--font-size-base);
}
legend, legend b {
	color: gray;
	font-size: calc(var(--font-size-base) * .9) !important;
}
label b {
	color: gray;
	font-size: calc(var(--font-size-base) * .9) !important;
}
.textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
}
div.polaroid {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
	padding: 10px;
	border-radius: 10px;
}
span.right {
	position: absolute;
	right: 0;
}
/* Make the image fully responsive */
.carousel-inner img {
	width: 100%;
	height: 100%;
}
/* below style used for div left right center  */
#paginationDiv {
    width:100%;
}
#previousLeft {
    float:left;
}
#nextRight {
    float:right;
}
.tales {
  width: 100%;
}
.media img {
    width: 60px;
    height: 60px
}
.reply a {
    text-decoration: none
}
/* style for page_script_layout.js only */
.minHeight {
	min-height: 100px;
}
.no-marginLR {
  margin-left:0;
  margin-right:0;
}
.no-padding {
    padding: 0px;
}
.compIcon {
	width: 20px;
	height: 20px;
}
.htmltag:hover {
	cursor: pointer;
	color: white;
	background-color: var(--mnu-color);
}
/* style for page_script_layout.js only */
.dataTables_filter {
	float: right;
}
.dataTables_paginate {
	float: right;
}
/* when table load fom database */
table.loading tbody {
	position: relative;
}
table.loading tbody:after {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.1);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50px 50px;
	content: "";
}
/* when table load fom database */
/* Sticky Social Icons */
.sticky-container {
	padding: 0px;
	margin: 0px;
	right: -130px;
	width: 210px;
	z-index: 1100;
	position: fixed;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.sticky li {
	list-style-type: none;
	color: #efefef;
	height: 43px;
	padding: 0px;
	margin: 0px 0px 1px 0px;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	cursor: pointer;
	border-radius: 5px 0px 0px 5px;
  	background: #DADADA;
}
.sticky li:hover {
	margin-left: -115px;
}
.sticky li img {
	float: left;
	margin: 5px 4px;
	margin-right: 5px;
}
.sticky li p {
	padding-top: 5px;
	margin: 0px;
	line-height: 16px;
}
.sticky li p a {
	text-decoration: none;
	color: black;
}
.sticky li p a:hover {
	text-decoration: underline;
}
/* Sticky Social Icons */
.footerPad {
	color: var(--mnu-txt-color);
	h4 {
		opacity: .5;
	}
	a:hover {
		color: var(--mnu-txt-color);
	}
	ul { 
		list-style-type: none;
	}
	ul, li { margin: 0 !important; padding: 0 !important; }
}
@media only screen and (max-width: 1280px) {
	.height-200, .height-180, .height-320 {
	  	height: 300px;
	}
}
/* to avoid tooltip blink */
.tooltip {
  cursor: pointer;
  pointer-events: none;
}
.quote-color {
	color: var(--mnu-txt-color);
}
.star {
	color: yellow;
}
/* for sticky side navigation */
.content-section {
  min-height: 1000px !important;
}
.sidebar-item {
  position: relative !important;
  top: 4.1vmax !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Position the items */
  margin-bottom: calc(var(--font-size-base) * 10) !important;
  padding-left: calc(var(--font-size-base) * 1.6) !important;
  padding-right: calc(var(--font-size-base) * 1.6) !important;
}
.make-me-sticky {
  top: 4.1vmax !important;
  position: sticky !important;
  padding: 0 0px !important;
}
/* for side news nav panel */
.side-news-column  {
	min-height: 100vh;
	overflow: visible;
}
/* for sticky side navigation */
@media (max-width: 768px) {
    /* Disable sticky on mobile */
    .make-me-sticky {
        position: static !important;
        top: auto !important;
        margin-top: calc(var(--font-size-base) * 4) !important;
    }
    /* FIX: Remove absolute position on sidebar completely */
    .sidebar-item {
        position: static !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        margin-top: calc(var(--font-size-base) * 1.2) !important;
    }
    /* FIX: Sidebar must scroll normally */
    .side-news-column {
        max-height: none !important;
        overflow: visible !important;
    }
    .hide-scrollbar {
		overflow-y: hidden !important;  /* remove vertical scroll */
		overflow-x: hidden !important;
		width: auto !important;         /* or set to your required width */
    }
}
.card-pricing.popular {
    z-index: 1;
    border: 3px solid var(--mnu-color);
}
.card-pricing .list-unstyled li {
    padding: .5rem 0;
    color: #6c757d;
}
.cardSideNavImg60 {
	object-fit: contain;
	width: auto;
	height: calc(var(--base-font-size) * 6);
	overflow: hidden;
	padding-left: calc(var(--base-font-size) * .2);
	padding-right:  calc(var(--base-font-size) * .2);
}
.cardSideNavImg90 {
	object-fit: contain;
	width: auto;
	height: calc(var(--base-font-size) * 9);
	overflow: hidden;
	padding-left: calc(var(--base-font-size) * .2);
	padding-right:  calc(var(--base-font-size) * .2);
}
@media (max-width: 768px) {
	.col-sm-3, .col-sm-4 {
		flex: 0 0 100% !important;   /* forces full width */
        max-width: 100% !important; /* sets width to 100% */
	}
}
/* Apply only between 768px and 1200px */
@media (min-width: 768px) and (max-width: 1500px) {
    /* Case 1: BOTH left & right are empty -> center full width */
    .row:has(#pageBodyLeft:empty):has(#pageBodyRight:empty) #pageBody {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Case 2: LEFT not empty, RIGHT empty -> left 4, center 8 */
    .row:has(#pageBodyLeft:not(:empty)):has(#pageBodyRight:empty) #pageBodyLeft {
        flex: 0 0 33.333% !important;   /* col-md-4 */
        max-width: 33.333% !important;
    }
    .row:has(#pageBodyLeft:not(:empty)):has(#pageBodyRight:empty) #pageBody {
        flex: 0 0 66.666% !important;   /* col-md-8 */
        max-width: 66.666% !important;
    }
    /* Case 3: LEFT empty, RIGHT not empty -> right 4, center 8 */
    .row:has(#pageBodyLeft:empty):has(#pageBodyRight:not(:empty)) #pageBodyRight {
        flex: 0 0 33.333% !important;   /* col-md-4 */
        max-width: 33.333% !important;
    }
    .row:has(#pageBodyLeft:empty):has(#pageBodyRight:not(:empty)) #pageBody {
        flex: 0 0 66.666% !important;   /* col-md-8 */
        max-width: 66.666% !important;
    }
    /* hide empty columns */
    #pageBodyLeft:empty,
    #pageBodyRight:empty {
        display: none !important;
    }
}
/* ==== Back To Top Button Stylish ==== */
#btnScrollTop {
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--mnu-color)/* linear-gradient(135deg, #ff004c, #ff7b00) */;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease; 
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
}
/* Hover effect */
#btnScrollTop:hover {
    transform: translateY(-8px) scale(1.08);
    box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.35);
    background: var(--mnu-color)/* linear-gradient(135deg, #ff7b00, #ff004c) */;
}
/* Show button when scrolling */
#btnScrollTop.show {
    opacity: 1;
    visibility: visible;
}
/* cookie dialog end here */
.cookie-banner {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(50px);
    width: min(450px, 96%);
    padding: 16px 20px;
    background: #262626; /* change here for custom color: #xxx */
    color: #fff;
    border-radius: 16px;
    box-shadow: 0px 8px 25px rgba(0,0,0,.35);
    display: none;
    opacity: 0;
    z-index: 99999;
    transition: all .35s ease;
}
.cookie-banner.show {
    opacity: 1;
    display: flex;
    flex-direction: column;
    transform: translateX(-50%) translateY(0);
}
.cookie-content h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
}
.cookie-content p {
    font-size: 14px;
    margin: 0;
    color: #e5e5e5;
}
.cookie-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}
.cookie-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: all .25s ease;
}
/* Accept button */
.cookie-btn.accept {
    background: transparent;
    border: 1px solid var(--mnu-color);
    color: #fff;
}
.cookie-btn.accept:hover {
    background: transparent;
    border: 1px solid var(--mnu-color);
    transform: translateY(-2px);
}
/* Decline button */
.cookie-btn.decline {
    background: transparent;
    border: 1px solid var(--mnu-color);
    transform: translateY(-2px);
    color: #fff;
}
.cookie-btn.decline:hover {
    background: rgba(255,255,255,0.15);
}
/* cookie dialog end here */
/* div item will animate end here */
.animateParent {
    opacity: 0;
    transform: translateY(50px);
    transition: all .8s ease-out;
}
.animateParent.visible {
    opacity: 1;
    transform: translateY(0);
}
/* div item will animate end here */
/* ---- Side Panels ---- */
/* panels */
.side-panel{
  border-radius:12px; box-shadow:var(--shadow);
  overflow:hidden; z-index:300;
}
.panel-header{
  padding:12px 14px;
  background:var(--mnu-color);
  color:white;
  font-weight:600;
}
/* menus */
.menu, .submenu { list-style:none; margin:0; padding:0; }
.menu-item{
  width:100%;
  border:0;
  border-bottom:1px solid #eee;
  background:#fff;
  padding:12px 14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  font-size: calc(var(--font-size-base) * 1.2);
}
.menu-item:hover{ 
	background: var(--mnu-color);
	color: var(--mnu-txt-color);
}
.menu-item .left{ display:flex; align-items:center; gap:10px; }
.menu-item i{ color:var(--mnu-color); }
.arrow{ transition:transform .25s ease; }
li.open > .menu-item .arrow{ transform:rotate(180deg); }
/* nested menu */
.submenu {
  font-size: calc(var(--font-size-base) * 1.2);
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}
/* indentation depth */
.submenu > li > .menu-item{ padding-left:34px; }
.submenu .submenu > li > .menu-item{ padding-left:54px; }
.submenu .submenu .submenu > li > .menu-item{ padding-left:74px; }
li > .menu-item.active {
	background: var(--mnu-color);
	color: var(--mnu-txt-color);
}
/* separator (must be <li>) */
.menu-separator{
  height:1px; background:#ddd; pointer-events:none;
}
/* MOBILE DRAWER */
@media(max-width:768px) {
  .side-panel{
    position:fixed;top:0;height:100%;width:270px;max-width:82%;
    transition:transform .35s ease;box-shadow:0 0 14px rgba(0,0,0,.3)
  }
  .panel-wrap{padding:0}
  .left-panel{ left:0; transform:translateX(-100%) }
  .right-panel{ right:0; transform:translateX(100%) }
  .left-panel.active{ transform:translateX(0) }
  .right-panel.active{ transform:translateX(0) }
  /* arrow buttons */
  .drawer-tab {
    position:fixed;top:20%;transform:translateY(-50%);
    background:var(--mnu-color);
    color:var(--mnu-txt-color);
    padding:10px 12px;
    border-radius:0 10px 10px 0;
    cursor:pointer;z-index:400;
    box-shadow:var(--shadow)
  }
  .drawer-tab.right{ right:0;border-radius:10px 0 0 10px; }
  /* overlay */
  .overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transition:.25s;z-index:280
  }
  .overlay.active{opacity:1;visibility:visible}
}
/* hide drawer buttons/overlay on desktop */
@media(min-width:769px){
  .drawer-tab, .overlay{ display:none !important; }
}
/* side navigation css end here */
/* image zoom display start here */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal-dialog {
  max-height: 90%;
  max-width: 100%;
}
.modal-content {
  border-radius: 20px !important;
  max-height: 80%;
  overflow: auto;
}
/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
/* The Close Button */
.close {
  position: absolute;
  top: -50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 20px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
	max-height: 650px;
    overflow: auto;
  }
  .modal-dialog {
	height: 100%;
	max-width: 100%;
  }
}
/* image zoom display end here */


/* img_upload.css.gz css start here */
.preview-images-zone {
    width: 100%;
    border: 1px solid #ddd;
    min-height: 180px;
    /* display: flex; */
    padding: 5px 5px 0px 5px;
    position: relative;
    overflow:auto;
}
.preview-images-zone > .preview-image:first-child {
    height: 185px;
    width: 185px;
    position: relative;
    margin-right: 5px;
}
.preview-images-zone > .preview-image {
    height: 90px;
    width: 90px;
    position: relative;
    margin-right: 5px;
    float: left;
    margin-bottom: 5px;
}
.preview-images-zone > .preview-image > .image-zone {
    width: 100%;
    height: 100%;
}
.preview-images-zone > .preview-image > .image-zone > img {
    width: 100%;
    height: 100%;
}
.preview-images-zone > .preview-image > .tools-edit-image {
    position: absolute;
    z-index: 100;
    color: #fff;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    display: none;
}
.preview-images-zone > .preview-image > .image-cancel {
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    margin-right: 10px;
    cursor: pointer;
    display: none;
    z-index: 100;
}
.preview-image:hover > .image-zone {
    cursor: move;
    opacity: .5;
}
.preview-image:hover > .tools-edit-image,
.preview-image:hover > .image-cancel {
    display: block;
}
.ui-sortable-helper {
    width: 90px !important;
    height: 90px !important;
}
.container {
    padding-top: 50px;
}
/* img_upload.css.gz css end here */

/* nav_sunil.css.gz css start here */
/* change the background color */
.navbar-custom {
	font-family: var(--font-family);
	background-color: var(--mnu-color);
}
#navIcon {
    max-height: 60px !important;
    max-width: 210px !important;
    height: auto;
    width: auto;
    object-fit: contain;
}
.hamburger {
	height: calc(var(--mnu-font-size) * 2) !important;
	width: calc(var(--mnu-font-size) * 2) !important;
}
/* change the brand and text color */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text {
	color: var(--mnu-txt-color);
	font-family: var(--font-family);
	font-weight: bold;
}
/* change the link color and add padding for height */
.navbar-custom .navbar-nav .nav-link {
	font-family: var(--font-family);
	color: var(--mnu-txt-color);
	padding: calc(var(--font-size-base) * .8);
	margin-left: calc(var(--font-size-base) * .3);
	margin-right: calc(var(--font-size-base) * .3);
}
.navbar-custom .nav-link *, .navbar-custom .navbar-text, .navbar-custom .nav-link, .navbar-custom .dropdown-item, .navbar-custom .dropdown-item > * {
	font-size: calc(var(--mnu-font-size) * 1.2) !important;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
	border-radius: 6px;
  	background-color: rgba(12, 42, 69, .1);
  	border-radius: 6px 6px 6px 6px ; 
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
	color: var(--mnu-txt-color);
}
/* for dropdown only - change the color of droodown */
.navbar-custom .dropdown-menu {
	background-color: #ffffff;
}
.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
	color: var(--mnu-txt-color) !important;
	background-color: var(--mnu-color) !important;
}
.navbar-custom .dropdown-item.active {
	background-color: #0b9c8f !important;
}
/* For Policies dropdown only */
.navbar-nav .dropdown-toggle::after {
    font-size: 14px;
}
/* caret font-size Remove the <b class="caret"></b> and use Bootstrap's ::after */
.nav-link.dropdown-toggle::after {
	font-size: calc(var(--mnu-font-size) * 1.2) !important;
    margin-left: 5px;
}
.dropdown-item.dropdown-toggle::after {
	font-size: calc(var(--mnu-font-size) * 1.2) !important;
    margin-left: 5px;
}
/* caret font-size  */
.nav-scroll {
  max-height: 90vh;
  overflow-y: scroll;
}
/* for navigation menu end */
.bars-text, .nav-link.bars-text {
	color: var(--mnu-txt-color);
}
.dropdown-item.bars-text {
	color: var(--mnu-color);
}
/* 	overflow: auto; */
.side-nav {
	max-height: 100%;
	color: var(--mnu-txt-color);
	font-family: var(--font-family);
	ul { 
		list-style-type: none !important;
	}
	ul, li { margin: 0 !important; padding: 0 !important; }
}
/* sub menu css start  */
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu:active {
	background-color: #0b9c8f !important;
}
.dropdown-submenu>.dropdown-menu {
	top: 0;
	left: 100%;
	/* margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px; */
}
.dropdown:hover>.dropdown-menu {
  display: block;
}
.dropdown-submenu:hover>.dropdown-menu {
	display: block;
}
.dropdown-submenu>a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #ccc;
	margin-top: 5px;
	margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
	border-left-color: #fff;
}
.dropdown-submenu.pull-left {
	float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
	left: -100%;
	margin-left: 10px;
	/* -webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px; */
}
/* submenu css end  */
.notification {
  text-decoration: none;
  position: relative;
  display: inline-block;
  border-radius: 2px;
  color: var(--mnu-txt-color);
}
.notification .badge {
  position: absolute;
  top: -12px;
  right: -20px;
  padding: 5px 10px;
  border-radius: 50%;
  color: var(--mnu-txt-color);
}
@media ( max-width : 767px) {
	.notification .badge {
		right: -20px;
	}
}
/* search collapsable icon */
.navbar-collapse form[role="search"] {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 40%;
	padding: 0px;
	margin: 0px;
	z-index: 0;
}
.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
	padding: 8px 12px;
	border-radius: 0px;
	border-width: 0px;
	color: rgb(119, 119, 119);
	background-color: rgb(248, 248, 248);
	border-color: rgb(231, 231, 231);
	box-shadow: none;
	outline: none;
}
.navbar-collapse form[role="search"] input {
	padding: 16px 12px;
	font-size: 14pt;
	font-style: italic;
	color: rgb(160, 160, 160);
	box-shadow: none;
}
.navbar-collapse form[role="search"] button[type="reset"] {
	display: none;
}
@media (max-width: 768px)  {
	.navbar-collapse form[role="search"] {
		position: inherit;
	}
	#navIcon {
		max-height: calc(60 * .4)px !important;
		max-width: calc(210 * .4)px !important;
    }
}
/*
.cover-bg {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	cursor: pointer;
}
*/
.custom-breadcrumb {
	background: transparent;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0;
}
.breadcrumb-item {
	content: "" !important;
	position: relative;
	padding: 10px 20px 10px 30px;
	background-color: #e8e8e8;
	color: #666;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
	transition: all 0.3s ease;
	text-decoration: none;
	display: flex;
	align-items: center;
	min-height: 40px;
}
.breadcrumb-item:first-child {
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
	padding-left: 10px;
}
.breadcrumb-item:last-child {
	/* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); */
	padding-left: 20px;
}
.breadcrumb-item:first-child:last-child {
	clip-path: none;
}
.breadcrumb-item a {
	color: #666;
	text-decoration: none;
	display: flex;
	align-items: center;
}
/* Apply margin-left only if not the first breadcrumb item */
.breadcrumb-item:not(:first-child) a {
	margin-left: 20px;
}
.breadcrumb-item a:hover {
	color: #333;
}
.breadcrumb-item i {
	margin-right: 8px;
	font-size: 16px;
}
.breadcrumb-item.active {
	background-color: var(--mnu-color);
	color: white;
	font-weight: 500;
}
.breadcrumb-item.active a {
	color: white;
}
.breadcrumb-item + .breadcrumb-item::before {
	display: none !important;
}
/* Hover effects */
.breadcrumb-item:not(.active):hover {
	background-color: #d0d0d0;
}
/* Alternative rounded style */
.rounded-breadcrumb .breadcrumb-item {
    border-radius: 20px;
    clip-path: none;
    margin-right: 5px;
    padding: 10px 20px;
}
.rounded-breadcrumb .breadcrumb-item:first-child {
    margin-left: 0px;
}
.rounded-breadcrumb .breadcrumb-item:not(:last-child) a {
    margin-left: 0px !important;
}
/* nav_sunil.css.gz css end here */