a {text-decoration:none;}
body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
		}

.bg {
  /* The image used */
  background-image: url("/images/truck4000.png");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.business-header {
	background-color:#003399;
	font-size:4em;
	text-align:center;
	margin-bottom:25px;
	
}
.headline {
	font-size:3em;
	color:#003366;
		}
		
.title-bar {
	height:80px;
	color:white;
	font-size:4em;
	text-align:center;
	background-color:#666633;
}
.tagline {
    text-shadow: 0 0 10px #000;
    color: #fff;
}

.img-center {
    margin: 0 auto;
}

.headline {
	font-size:3em;
	color:#336699;
}

.thick-bar {
	height:1.5em;
	color:black;
}
footer {margin: 50px 0;}
.btn-menu {
	width:80%;
	margin:5px;
}
.pcicolor {
	color: #ffffff;
	background-color:#666633;
}


.upsize {font-size:1.2em;}
.bg-margin {margin-top:50px;}
.bg-margin2 {margin-top:75px;}
.margin50 {margin-top:50px;margin-bottom:50px;}
.bg-yellow{background-color:yellow;}
.trademark {font-size:.7em;}
.fontxl {font-size:2.5em;}
.textsize13 {font-size:1.3em;}
.textsize12 {font-size:1.2em;}

.btn-stage2 {background-color:#330000; color: white;}
.btn-stage2:hover {background-color: #330000; color: white; opacity: 0.8;}
.btn-stage3 {background-color: orange; color: white;}
.btn-stage3:hover {background-color: orange; color: white; opacity: 0.8;}
.btn-stage4 {background-color: yellow;}
.btn-stage4:hover {background-color: yellow; opacity: 0.7; }
.btn-stage5 {background-color: brown; color: white;}
.btn-stage5:hover {background-color: brown; color: white; opacity: 0.8;}
.btn-sidebar {width:150px;}


.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}
.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}
.form-inline .form-control-static{display:inline-block}
.form-inline .input-group{display:inline-table;vertical-align:middle}
.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}
.form-inline .input-group>.form-control{width:100%}
.form-inline .control-label{margin-bottom:0;vertical-align:middle}
.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}
.form-inline .checkbox label,.form-inline .radio label{padding-left:0}
.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}
.form-inline .has-feedback .form-control-feedback{top:0}}
.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}


.card1 {
    background: rgb(22, 105, 173);
	color:white;
}
.card2 {
    background: rgb(203, 67, 53);
	color:white;
}
.card3 {
    background: rgb(214, 137, 16);
	color:white;
}
.card4 {
    background: rgb(40, 180, 99);
	color:white;
}
.qrcode{
	height: 700px;
	width: 700px;
}
@media print {
	a[href]:after {content: none}
	.noprint {display:none}
	.form {display:none}
	.form-inline {display:none}
	.offcanvas {display:none}

}

.bg-navy {
    background: #005A92;
	color:white;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

.dropstart .dropdown-menu {
  right: 100%;  
  top: 0;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    user-select: none; /* Disable text selection */
    gap: 5px; /* Add some space between cells */
}

.calendar div {
    border: 1px solid #ccc;
    padding: 5px; /* Decrease padding to make height smaller */
    text-align: center;
    font-size: 14px; /* Slightly larger font size for better readability */
    border-radius: 10px; /* Round the edges */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover and selection */
    height: 1fr; /* Set a fixed height for smaller cells */
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-slot {
    cursor: pointer;
}

.time-slot:hover {
    background-color: #f0f0f0; /* Light grey background on hover */
}

.selected {
    background-color: #007bff;
    color: white;
}

.selected:hover {
    background-color: #0056b3; /* Darker blue on hover when selected */
}


.selected:hover {
    background-color: #0056b3; /* Darker blue on hover when selected */
}

.nav-link.active {
    background-color: rgba(13, 110, 253, 0.25) !important; /* Bootstrap 5 primary color with 50% transparency */
    border-color: rgba(13, 110, 253, 0.25) !important; /* Bootstrap 5 primary color with 50% transparency */
    
}
.single-plan {
    background-color: #f9f9f9; /* Very light gray */
    border: 1px solid #e0e0e0;
}

.basic-plan {
    background-color: #f2f9ff; /* Very light blue */
    border: 1px solid #d0e7ff;
}

/* Standard Plan - Slightly Darker */
.standard-plan {
    background-color: #FFFFE0; /* Very light blue */
    border: 1px solid #FFFF00;
}

/* Premium Plan - Highlighted */
.premium-plan {
    background-color: #e8f9f1; /* Very light green */
    border: 1px solid #bfe3d0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.single-plan-header {
	background-color: #dc3545; /* Bootstrap Danger */
	color: white;
	padding: 10px;
	border-bottom: 1px solid #c82333;
}

.basic-plan-header {
	background-color: #007bff; /* Bootstrap Primary */
	color: white;
	padding: 10px;
	border-bottom: 1px solid #0056b3;
}

.standard-plan-header {
	background-color: #FFFF00; /* Bootstrap Success */
	color: white;
	padding: 10px;
	border-bottom: 1px solid #FFD700;
}

.premium-plan-header {
	background-color: #28a745; /* Bootstrap Success */
	color: white;
	padding: 10px;
	border-bottom: 1px solid #218838;
}

  /* Add hover effect to custom hover cards */
.hover-card:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Add a transition to the box shadow to make the hover effect smoother */
.hover-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	user-select: none;
}

.pricing-card {
    transform: scale(1.10);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.pricing-card:hover {
    transform: scale(1.12);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


 







