html{
	scroll-padding-top: 120px;
}
            body {
                /*height: 2000px; /* for scroll demonstration */*/
            }

            .navbar {
                transition: background-color 0.3s ease;
            }

            .navbar.transparent {
                background-color: rgba(255, 255, 255, 0.95);
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            .banner {
                height: 60px;
                width: auto;
            }

            .navbar-brand img {
                height: 40px;
            }


            .navbar-border-shadow{
				border-bottom: 1px solid #ccc;
				box-shadow: 0 2px 4px rgba(0,0,0,0.1);            	
            }

            .hero {
                height: 400px;
                background: linear-gradient(to right, #4facfe, #00f2fe);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 2rem;
            }


            h6{
                word-wrap: break-word;
                white-space: normal;
            }

            footer{
                background-color: #E4B3B5;
            }





              .navbar-spacer-custom{
              	display:block;
              	height:80px;
              	
              }

              .product-image-area{
              	background-color: #eee;
              }

              .image-background-grey{
              	background-color: #eee;
              }


              h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .font-commissioner {
			  font-family: 'Commissioner', sans-serif;
			  color:#434343;
			}

			h1, .h1{
				font-weight:600;
			}

			/* Custom danger button color */
			.btn-danger {
			  background-color: #B12024; /* Your custom red */
			  border-color: #B12024;
			  color: white;
			}

			.btn-danger:hover {
			  background-color: #911B1F;
			  border-color: #911B1F;
			}

			.btn-outline-danger {
			  color: #B12024;
			  border-color: #B12024;
			  background-color: transparent;
			}

			.btn-outline-danger:hover,
			.btn-outline-danger:focus {
			  background-color: #B12024;
			  color: #fff;
			  border-color: #B12024;
			}			

			.border-danger {
				border-color: #B12024 !important;
			}


			.bg-danger {
				background-color: #B12024 !important;
				color: #fff;
			}




			.btn-secondary {
			  background-color: #434343;
			  border-color: #434343;
			  color: #fff;
			}

			.btn-secondary:hover,
			.btn-secondary:focus {
			  background-color: #2e2e2e; /* Slightly darker for hover */
			  border-color: #2e2e2e;
			  color: #fff;
			}			


			.btn-outline-secondary {
			  color: #434343;
			  border-color: #434343;
			  background-color: transparent;
			}

			.btn-outline-secondary:hover,
			.btn-outline-secondary:focus {
			  background-color: #434343;
			  color: #fff;
			  border-color: #434343;
			}



			.grey-200 {
				color: #EBEBEB;
			}

			.grey-300{
				color: #CFCFCF;
			}

			.grey-400{
				color: #989898;
			}

			.grey-500{
				color: #6e6e6e;
			}

			.grey-600{
				color: #434343;
			}



			.text-danger {
			  color: #B12024 !important;
			}

			.text-danger:hover,
			.text-danger:focus {
			  color: #911B1F !important;
			}

			:root {
				--bs-primary: #0d3b66;
			    --bs-warning: #F46036;
			    --bs-warning-rgb: 244, 96, 54;
			}


			.bg-primary {
			  background-color: var(--bs-primary) !important;
			}

			.text-primary {
			  color: var(--bs-primary) !important;
			}

			.border-primary {
			  border-color: var(--bs-primary) !important;
			}

			.btn-primary {
			  color: #fff;
			  background-color: var(--bs-primary);
			  border-color: var(--bs-primary);
			}

			.btn-primary:hover {
			  background-color: #0b3357;
			  border-color: #0b3357;
			}

			.alert-primary {
			  color: #0d3b66;
			  background-color: #d6e6f5;
			  border-color: #b4d2ec;
			}

			.badge-primary {
			  background-color: var(--bs-primary);
			}

			.link-primary {
			  color: var(--bs-primary);
			}

			.text-bg-primary {
				/*color: var(--bs-primary-text) !important;*/
				background-color: var(--bs-primary) !important;
			}


			.bg-success {
			    background-color: #5b9279 !important;
			}

			.bg-success-subtle {
			    background-color: #d5e3dd !important;
			}

			/* Text */
			.text-success {
			    color: #5b9279 !important;
			}

			/* Borders */
			.border-success {
			    border-color: #5b9279 !important;
			}

			/* Buttons: Solid */
			.btn-success {
			    color: #fff;
			    background-color: #5b9279;
			    border-color: #5b9279;
			}

			.btn-success:hover {
			    background-color: #4b7b67;
			    border-color: #4b7b67;
			}

			/* Buttons: Outline */
			.btn-outline-success {
			    color: #5b9279;
			    border-color: #5b9279;
			}

			.btn-outline-success:hover {
			    color: #fff;
			    background-color: #5b9279;
			    border-color: #5b9279;
			}

			/* Optional: Focus/Active/Disabled States */
			.btn-success:focus,
			.btn-outline-success:focus {
			    box-shadow: 0 0 0 0.25rem rgba(91, 146, 121, 0.5);
			}



			.bg-warning {
			background-color: #F46036 !important;
			}

			.text-warning {
			color: #F46036 !important;
			}

			.border-warning {
			border-color: #F46036 !important;
			}

			.alert-warning {
			background-color: rgba(244, 96, 54, 0.1);
			border-color: #F46036;
			color: #F46036;
			}

			.btn-warning {
			background-color: #F46036;
			border-color: #F46036;
			color: #fff;
			}

			.btn-warning:hover {
			background-color: #d84f2f;
			border-color: #d84f2f;
			color: #fff;
			}

			.text-bg-warning {
			background-color: #d84f2f !important;
			color: #fff !important;
			}


			.bg-caution {
			    background-color: #FFB100 !important;
			}

			.text-caution {
			    color: #FFB100 !important;
			}

			.border-caution {
			    border-color: #FFB100 !important;
			}

			/* Alert styling with 10% opacity background */
			.alert-caution {
			    /*background-color: rgba(255, 177, 0, 0.1);*/
			    background-color: #FFF7E6; /* Solid equivalent of 10% gold on white */
			    border-color: #FFB100;
			    color: #855d00; /* Darkened for accessibility/readability on light backgrounds */
			}

			/* Button styling */
			.btn-caution {
			    background-color: #FFB100;
			    border-color: #FFB100;
			    color: #000; /* Black text usually looks better on bright yellow/gold */
			}

			.btn-caution:hover {
			    background-color: #e69f00;
			    border-color: #e69f00;
			    color: #000;
			}

			/* Modern Bootstrap Text-BG utility */
			.text-bg-caution {
			    background-color: #FFB100 !important;
			    color: #000 !important;
			}


			.nav-pills .nav-link {
				color: #0d3b66 !important; /* Deep blue color */
			}


			/* Change background color of the active nav link */
			.nav-pills .nav-link.active {
				background-color: #0d3b66 !important; /* Deep blue background */
				color: white !important; /* Make text white when active */
			}

			/* Optional: Hover effect to change the background on hover */
			.nav-pills .nav-link:hover {
				background-color: #0d3b66 !important; /* Blue background on hover */
				color: white !important; /* White text on hover */
			}

			/* Optional: Focus effect to maintain accessibility */
			.nav-pills .nav-link:focus {
				background-color: #0d3b66 !important; /* Blue background on focus */
				color: white !important; /* White text on focus */
			}




			.blue-banner-bar{
				background-color: #d3dbe3;
			}


			/*
			////////////
			////////////
			////////////

			PRogress Cards

			////////////
			////////////
			///////////
			*/


			.hr-dashed {
			    border: none;
			    border-top: 2px dashed #0d3b66; /* Bootstrap's default gray-600 */
			    margin: 1rem 0;

			    position: relative;
			    top: 104px;
			    left: 0;
			    z-index: 1000;
			}


			.custom-image-sizer{
				width:200px;
				height:200px;
				object-fit: contain;
				object-position: center center;
			}

			.hr-big-space-around{
				margin-top:80px;
				margin-bottom:80px;
			}


			.hero-image-with-gradiants {
				position: relative;
				background-image: 
				linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 120px), /* White gradient */
				linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%); /* Black gradient */
				background-size: cover;
				background-position: center;
				height: 400px; /* Adjust the height as needed */
			}




			.green-banner-bar{
				background-color: #D6E4DD;
				border-bottom: 5px solid #5B9279;
			}
			.dark-green-text{
				color: #1A4833;
			}


			.square-background-grey{
				background-color: #F7F7F7;
			}





			/*
			////////////
			////////////
			////////////

			Home Hero image

			////////////
			////////////
			///////////
			*/



			.hero-image-with-gradiants img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.hero-image-with-gradiants-text-area{
				/*top:160px;*/
				padding-top:124px;
			}

			.top-space-100{
				margin-top: 100px;
			}
			.bottom-space-100{
				margin-bottom: 100px;
			}

			.top-space-150{
				margin-top: 150px;
			}
			.bottom-space-150{
				margin-bottom: 150px;
			}

			.top-space-200{
				margin-top: 200px;
			}
			.bottom-space-200{
				margin-bottom: 200px;
			}


			/*
			///////////////
			///////////////
			///// noUiSlider styling to look like boostrap
			///////////////
			*/

			/* Base Track */
			.noUi-target {
			    background: #dee2e6; /* Bootstrap's $gray-300 */
			    border-radius: 0.25rem;
			    height: 0.5rem;
			    border: none;
			    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
			}

			/* Connect (filled range) */
			.noUi-connect {
			    background: #198754; /* Bootstrap success */
			}

			/* Handles (thumbs) */
			.noUi-horizontal .noUi-handle{
			    width: 1rem;
			    height: 1rem;


				/*				

				width: 34px;
				height: 28px;

			    right: -17px;
				top: -6px;

				*/				

			    right: -.3rem;

			}
			.noUi-handle {
			    width: .1rem;
			    height: .1rem;
			    border-radius: 50%;
			    background: #fff;
			    border: 2px solid #198754;
			    top: -0.3rem;
			    cursor: pointer;
			    box-shadow: 0 0.25rem 0.5rem rgba(25, 135, 84, 0.25);
			    transition: border-color 0.3s, box-shadow 0.3s;
			}

			.noUi-handle:focus,
			.noUi-handle:active {
			    outline: none;
			    border-color: #146c43; /* Bootstrap success-dark */
			    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
			}

			/* Hide outline indicators */
			.noUi-handle:after,
			.noUi-handle:before {
			    display: none;
			}

			/* Tooltips */
			.noUi-tooltip {
			    font-size: 0.875rem;
			    padding: 0rem 0.5rem;
			    background: transparent;
			    /*color: #fff;*/
			    color: #198754;
			    border:none;
			   /* border-radius: 0.2rem;
			    border: none;
			    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);*/
			}


			.over-image-tag{
				position: absolute;
				top:30px;
				right: 30px;
			}


/*
Nav Search
*/

  /* Use body prefix to outrank generic theme styles */
    body div.fuse-search-main-container {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }

    body .fuse-search-wrapper {
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important; 
        background: transparent !important;
        border-radius: 30px !important;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        border: 1px solid transparent !important;
        padding-right: 5px !important;
        height: 40px !important; /* Fixed height to prevent navbar jumping */
    }

    /* Active/Hover State */
    body .fuse-search-wrapper:hover, 
    body .fuse-search-wrapper.fuse-search-active-state {
        background: #ffffff !important;
        border-color: #dee2e6 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }

    /* The Input Field - Extra Specificity */
    body input[type="text"]#fuse-search-input.form-control {
        width: 0 !important; 
        min-width: 0 !important;
        opacity: 0 !important; 
        padding: 0 !important;
        margin: 0 !important;
        border: none !important; 
        transition: all 0.35s ease !important;
        background: transparent !important; 
        outline: none !important; 
        box-shadow: none !important;
        pointer-events: none !important;
    }

    /* Expansion logic */
    body .fuse-search-wrapper:hover input#fuse-search-input.form-control, 
    body .fuse-search-wrapper.fuse-search-active-state input#fuse-search-input.form-control {
        width: 250px !important; 
        opacity: 1 !important; 
        padding: 0.375rem 0.75rem !important;
        pointer-events: auto !important;
    }

    /* Results Dropdown */
    body #fuse-search-results-dropdown.list-group {
        max-height: 400px !important; 
        overflow-y: auto !important; 
        z-index: 99999 !important;
        min-width: 320px !important; 
        display: none; 
        border-radius: 8px !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        margin-top: 10px !important;
    }