.text-sm{
				font-size: small;
				font-weight: 300;
				color: black !important;
			}
			.label{
				font-size: x-small;
				padding: 2px 4px;
				border-radius: 5px;
			}
			.label-primary{
				background-color: #0544c4;
				color: white;
				font-weight: 400;
			}
			#pricing h4{
				margin: 0px;
				padding: 5px;
			}
			.li-fe-name{
				text-align: left;
				font-weight: 600;
			}
			.li-fe-name-av{
				text-align: center;
				font-weight: 300;
			}
			#pflist .row{
				padding: 5px;
				/* margin-top: 5px; */
				border-bottom: 1px solid #ccc;
			}
			#pflist-header .li-fe-name-av{
				font-weight: bold;
				
			}
			.small{
				font-size: 0.8em;
				font-weight: 200;
			}
			.title-text{
				font-weight: 800;
				margin-top:5px;
				padding: 4px;
				font-size: 1.2em;
			}
			.btn-pricing-register{
				font-family: Arial;
				font-weight: 200 !important;
			}
			.btn-color-starter{
				background-color:#005fb3!important;
			}
			.btn-color-pro{
				background-color:#5796cf!important;
			}
			.btn-color-biz{
				background-color:#589aa2!important;
			}
			.btn-color-enterprise{
				background-color:#0d86f1!important;
			}
			.plan-box-three{
				border: 1px solid color(srgb 0.7895 0.9055 0.9807) !important;
				margin-bottom: inherit;
				background-color: #f0f9ff !important;
			}
			#fsm .plan-box-three{
				border: 1px solid #f9ff06!important;
				margin-bottom: inherit;
				background-color: #fffff0!important;
			}
			.price-details-peruser{
				font-size: small;
				font-weight: 600;
			}
			.price-details-peruser .price-currency{
				font-size: small;
			}
			.price-details-peruser .price-amount{
				font-size: 20px;
			}
			.price-details-peruser .price-term{
				font-size: small;
			}
			.ppu{
				font-size: small;
			}
			.user-limit{
				font-weight: 400;
				color: rgb(2, 5, 149);
			}
			.feature-heading-row{
				background-color: #f9f9f9!important;
				padding-top: 20!important;
				color: rgb(7, 114, 117);
				padding-bottom: 20px!important;
			}
			.feature-heading-row .col-6{
				background-color: inherit !important;
				color: inherit !important;
				font-weight: 600 !important;
			}
			#pflist-header{
				/* background-color: rgb(15, 87, 150); */
				background-color: #eff8ff;
				color: white;
			}
			#pflist-header h4{
				font-size: large;
				background-color: aliceblue;
				color: black;
				padding: 10px;
				border-radius: 5px;
			}
			#pflist .col-6{
				background-color: #fafbfb;
				color: #495057;
				font-weight: 500;
			}
			.pricing-details .card-top-features{
				padding-bottom: inherit;
			}
			/*
			.table-pricing-feature{
				border: 10px solid rgb(230, 230, 230);
				box-shadow: -1px 3px 11px 3px rgb(145, 145, 145);
			}
			*/
			.card-top-features .card-body{
				text-align: center;
			}
			ul.crm-price-features-list{
			    font-size: 16px;
				color: #17356b;
				font-weight: 500;
			}
			ul.ts-price-features-list{
			    font-size: 14px;
				color: #444444;
				font-weight: 200;
			}
			#pflist .row:hover{
				background-color: rgba(237, 237, 237, 0.89);
			}
			#pflist .row.mt-1{
				margin-top: 0px !important;
			}
			.heading-container .row{
				padding: 0px;
			}
			.unlimited{
				font-size: 18px;
				color: #035276;
			}
			.training-video{
				    text-decoration: underline;
					font-size: small;
			}
		#fsm .pricing-details .card {
		    min-height: auto;
		    height: auto;
		    }
		.strike {
		  position: relative;
		  display: inline-block;
		}
		
		.strike::before {
		  content: '';
		  position: absolute;
		  top: 50%;
		  left: 0;
		  width: 100%;
		  height: 2px; /* Thickness of the strike line */
		  background-color: red;
		  /* transform: rotate(-30deg); */ /* You can adjust the angle if necessary */
		  transform-origin: left center;
		  pointer-events: none;
		}
		.off50{
			    text-align: center;
		    color: #009cff;
		    font-weight: 500;
		    font-size: 18px;
		    text-shadow: 0px 1px 1px #074369;
		    background: #ffffff;
		}.pricing-strike{
				color: rgb(152, 1, 1);font-size: large;font-weight: 400;background-color: #f6e1db;padding: 4px 8px;border-radius: 1px;
				background: rgb(255,255,255);
		background: linear-gradient(to right, rgba(255, 255, 255, 0.19791666666666663), rgba(242, 146, 58, 0.2) 30%, rgba(255, 255, 255, 0.6124824929971988));
			}
			.pricing-strikethrough{
				color:black
			}
			.plan-save{
				background-color: color(srgb 0.3456 0.5166 0.96);
				border-radius: 5px;
				padding: 5px 10px;
				color: #fff;
				font-size: 14px;
				font-weight: 500;
				box-shadow: -10px 3px 5px 1px rgb(187, 220, 255);
			}
			.plan-save.red{
				background-color: #ff8b8b;
				box-shadow: -10px 3px 5px 1px rgba(255, 236, 186, 1);
			}
			/** switch style */
		.switch-wrapper {
			position: relative;
			display: inline-flex;
			padding: 4px;
			border: 1px solid lightgrey;
			border-radius: 30px;
			background: var(--white);
		}
		.switch-wrapper [type="radio"] {
			position: absolute;
			left: -9999px;
			}
			.switch-wrapper [type="radio"]:checked#p_mo ~ label[for="p_mo"],
			.switch-wrapper [type="radio"]:checked#p_yr ~ label[for="p_yr"],
			.switch-wrapper [type="radio"]:checked#u_25 ~ label[for="u_25"],
			.switch-wrapper [type="radio"]:checked#u_50 ~ label[for="u_50"],
			.switch-wrapper [type="radio"]:checked#u_100 ~ label[for="u_100"],
			.switch-wrapper [type="radio"]:checked#u_200 ~ label[for="u_200"],
			.switch-wrapper [type="radio"]:checked#u_ul ~ label[for="u_ul"] {
				background: #0037c2;
				color: var(--white);
			}
			.switch-wrapper [type="radio"]:checked#p_mo ~ label[for="p_mo"]:hover,
			.switch-wrapper [type="radio"]:checked#p_yr ~ label[for="p_yr"]:hover,
			.switch-wrapper [type="radio"]:checked#u_25 ~ label[for="u_25"]:hover,
			.switch-wrapper [type="radio"]:checked#u_50 ~ label[for="u_50"]:hover,
			.switch-wrapper [type="radio"]:checked#u_100 ~ label[for="u_100"]:hover,
			.switch-wrapper [type="radio"]:checked#u_200 ~ label[for="u_200"]:hover,
			.switch-wrapper [type="radio"]:checked#u_ul ~ label[for="u_ul"]:hover  {
				background: #0037c2;
			}
			
			.switch-wrapper label {
				font-size: 16px;
				z-index: 1;
				min-width: 100px;
				line-height: 32px;
				cursor: pointer;
				border-radius: 30px;
				transition: color 0.25s ease-in-out;
			}
			.switch-wrapper label:hover {
				background: var(--lightgray);
			}
			.switch-wrapper .highlighter {
			position: absolute;
			top: 4px;
			left: 4px;
			/*
			width: calc(100% - 8px);
			height: calc(100% - 8px);
			*/
			border-radius: 30px;
			background: var(--darkgreen);
			transition: transform 0.25s ease-in-out;
			}
			.hide {
			display: none;
			}
			.hide_data{
				display: none;
			}
			.punch-line{
				height: auto !important;
			    min-height: auto !important;
			    background-color: #fffff0;
			    font-weight: 600;
			    color: #006e8e;
			}
			.li-a{
				color: #0671ce;
			}
			.fa-bullet-list {
			    list-style: none; /* Remove default bullet points */
			    padding-left: 0; /* Remove left padding from ul */
			}
			
			.fa-bullet-list li {
			    position: relative;
			    padding-left: 25px; /* Add padding to the left for the icon */
			}
			
			.fa-bullet-list li::before {
			    content: "\21DB"; /* Unicode for the Font Awesome icon (check icon in this case) */
			    font-family: "Font Awesome 5 Free";
			    font-weight: 900; /* Use solid version of icon */
			    position: absolute;
			    left: 0;
			    top: 0;
			}
			li.li-a-1{
				color: #353535;
				list-style: none; /* Remove default bullet points */
			    padding-left: 0; /* Remove left padding from ul */
			     position: relative;
			    padding-left: 25px; /* Add padding to the left for the icon */
			}
			li.li-a-1:before {
			    content: "\*"; /* Unicode for the Font Awesome icon (check icon in this case) */
			    font-family: "Font Awesome 5 Free";
			    font-weight: 900; /* Use solid version of icon */
			    position: absolute;
			    left: 0;
			    top: 0;
			}
			.info-text{
				background-color: #eaeae9;
			    padding: 10px 10px;
			    font-size: 0.9em;
			    border: 1px solid #e7e2e2;
			    border-radius: 10px;
			    margin-top: -5px;
			    display: inline;
			    border-top: 0px;
			    border-top-left-radius: 0px;
			    border-top-right-radius: 0px;
			}
			.p-a-1{
				font-weight: 800;
			    border: 1px solid #e2e2e2;
			    border-radius: 5px;
			    padding: 10px 20px;
			    text-align: center;
			    background-color: white;
			    color: #103928 !important;
			    font-size: 14px;

			}
			.a-underline{
				border-bottom: 1px dashed #509eba;
				padding-bottom: 3px;
			}
			.price-box-1{
				min-height: 600px !important;
				height: auto !important;
			}
			.price-box-1 a.btn-pricing-register{
				font-family: Arial;
				font-weight: 200 !important;
				width: 100%;
				display: block;
			}
			.bold{
				font-weight: 600;
				padding-bottom: 10px;
				padding-left:10px;
				color: black;
			}
			/* Container for buttons with a sliding indicator */
		    .btn-slider-group {
		      position: relative;
		      display: inline-flex;
		      border: 1px solid #0d6efd;
		      border-radius: .25rem;
		      overflow: hidden;
		    }
		    .btn-slider-group .btn {
		      position: relative;
		      z-index: 2;
		      background: transparent;
		      border: none;
		      color: #0d6efd;
		      padding: .5rem 1rem;
		    }
		    .btn-slider-group .btn.active {
		      color: #fff;
		    }
		    .btn-slider-group .slider-indicator {
		      position: absolute;
		      top: 0;
		      left: 0;
		      height: 100%;
		      width: 0;
		      background-color: #0d6efd;
		      transition: all 0.3s ease;
		      z-index: 1;
		    }
			@media only screen and (max-width: 760px) {
				/* For mobile phones: */
			
				.content-block-header {
					margin-top: -100px;
				
				}
				.li-fe-name{
					padding-left: inherit !important;
				}
				sup {
				/* top: -.5em; */
				/* display: block; */
				position: initial;
				line-height: 15px;
				}
				.content-block-header h1:after {
					max-width: inherit;
				}
				.info-text{
					display: block;
				}
			}
			#pricing-links a{
				padding-left: 10px;
				padding: 5px;
			    border: 1px solid #cfe4f4;
			    background-color: aliceblue;
			    border-radius: 5px;
			}
			/* ===== USER SLIDER ===== */
			#user-slider input[type=range]{
			  -webkit-appearance:none; width:100%; height:6px;
			  background:#cfe4f4; border-radius:3px; outline:none;
			}
			#user-slider input[type=range]::-webkit-slider-thumb{
			  -webkit-appearance:none; appearance:none;
			  width:20px; height:20px; border-radius:50%;
			  background:#0544c4; border:2px solid #fff; cursor:pointer;
			  box-shadow:0 0 4px rgba(0,0,0,.25);
			}
			#user-slider input[type=range]::-moz-range-thumb{       /* Firefox */
			  width:20px; height:20px; border-radius:50%;
			  background:#0544c4; border:2px solid #fff; cursor:pointer;
			}
			/* ===== RANGE LABELS ===== */
			.range-wrap {position:relative;}
			.range-wrap .range-label{
			  position:absolute; top:24px;            /* space below the track */
			  font-size:.8rem; font-weight:600; color:#515281;
			  user-select:none;
			}
			.range-wrap .range-label.min{left:0;     transform:translateX(-5%);}
			.range-wrap .range-label.max{right:0;    transform:translateX(50%);}
			
			.badge{
				color: black;
			}
			/* ===== Plan features (below CTA) ===== */
.plan-features{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}
.plan-features-title{
  font-size: .85rem;
  font-weight: 700;
  color: #1f2a37;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.plan-features-title .pill{
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #374151;
  background: #fafafa;
}
.plan-feature-list{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0 0;
  display: grid;
  gap: 8px;
}
.plan-feature-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: .88rem;
  line-height: 1.25rem;
  color: #334155;
}
.plan-feature-list .icon{
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 18px;
  background: #eef6ff;
  border: 1px solid #dbeafe;
  color: #1d4ed8;
  font-size: 12px;
}
.plan-feature-list .muted{
  color:#64748b;
  font-size:.82rem;
  display:block;
  margin-top:2px;
}
.plan-feature-footer{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-size: .82rem;
  color:#475569;
}
:root {
            --primary-crm: #4f46e5; /* Indigo for CRM */
            --primary-crm-light: #e0e7ff;
            --primary-ts: #059669; /* Emerald for TeamSpoor */
            --primary-ts-light: #d1fae5;
            --text-dark: #1f2937;
            --text-muted: #6b7280;
            --bg-color: #f3f4f6;
            --card-bg: #ffffff;
        }

        

        /* --- Custom Pricing Controls Section --- */
        .pricing-controls {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            max-width: 800px;
            margin: 0 auto 3rem auto;
        }

        /* --- Redesigned Tabs (Nav Pills) --- */
        /* Keeping original classes but overriding styles */
        #pr-cont1 .nav-pills {
            background-color: #f9fafb;
            padding: 0.5rem;
            border-radius: 1rem;
            border: 1px solid #e5e7eb;
            display: inline-flex; /* Center naturally */
            flex-wrap: wrap;
        }

        #pr-cont1 .nav-pills .nav-item {
            margin: 0;
        }

        #pr-cont1 .nav-pills .nav-link {
            border-radius: 0.75rem;
            padding: 1rem 2rem;
            color: var(--text-muted);
            font-weight: 600;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            display: flex;
            align-items: center;
            gap: 10px;
            text-align: left;
            position: relative;
            overflow: hidden;
        }

        #pr-cont1 .nav-pills .nav-link:hover {
            background-color: #fff;
            color: var(--text-dark);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        /* Specific Styling for ZNICRM Tab */
        #pr-cont1 .nav-pills .nav-link#crm-tab.active {
            background-color: #fff;
            color: var(--primary-crm);
            border-color: var(--primary-crm-light);
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
        }
        
        /* Specific Styling for TeamSpoor Tab */
        #pr-cont1 .nav-pills .nav-link#ts-tab.active {
            background-color: #fff;
            color: var(--primary-ts);
            border-color: var(--primary-ts-light);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
        }

        /* Tab Icon Styling */
        #pr-cont1 .tab-icon {
            font-size: 1.5rem;
            padding: 10px;
            border-radius: 50%;
            background: #f3f4f6;
            transition: all 0.3s ease;
        }

        #pr-cont1 .nav-link.active .tab-icon {
            background: var(--primary-crm-light); /* Default fallback */
        }

        #crm-tab.active .tab-icon {
            background: var(--primary-crm-light);
            color: var(--primary-crm);
        }

        #ts-tab.active .tab-icon {
            background: var(--primary-ts-light);
            color: var(--primary-ts);
        }

        /* Subtext in tabs */
        .tab-text {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }
        .tab-desc {
            font-size: 0.75rem;
            font-weight: 400;
            opacity: 0.8;
        }
        .user-slider{
	        max-width: 520px;
		    background-color: #fafafa;
		    padding: 10px 20px;
		    border-radius: 10px;
		    box-shadow: 1px 1px 12px 0px #b6b5b569;
        }
        .user-slider-name{
	        font-size: small;
			font-weight: 500;
        }