body,
button {
  line-height: inherit;
  margin: 0;
}
a,
button {
  color: inherit;
}
body,
button,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
.bg-gray-200,
.bg-gray-50,
.bg-white {
  --tw-bg-opacity: 1;
}

.transition,
.transition-\[left\,width\],
.transition-\[margin\,opacity\],
.transition-\[width\,height\,padding\],
.transition-\[width\],
.transition-all,
.transition-colors,
.transition-opacity,
.transition-transform {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.-translate-x-1\/2,
.-translate-x-px,
.-translate-y-1\/2,
.\[\&\>svg\+div\]\:translate-y-\[-3px\] > svg + div,
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction="vertical"]
  > div,
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg,
.hover\:-translate-y-1:hover,
.hover\:-translate-y-2:hover,
.hover\:scale-105:hover,
.transform,
.translate-x-\[-50\%\],
.translate-x-px,
.translate-y-\[-50\%\] {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scroll-snap-strictness: proximity;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scroll-snap-strictness: proximity;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
}
:after,
:before {
  --tw-content: "";
}

:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  text-decoration: inherit;
}

.hover\:shadow-2xl:hover,
.hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover,
.hover\:shadow-xl:hover,
.shadow-2xl,
.shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\],
.shadow-lg,
.shadow-md,
.shadow-none,
.shadow-sm,
.shadow-xl {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

img,
object,
svg {
  display: block;
  vertical-align: middle;
}
img {
  max-width: 100%;
  height: auto;
}

* {
  border-color: var(--border);
}
body {
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Satoshi, sans-serif;
}
.container,
.w-full {
  width: 100%;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 1024px) {

      .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-4 {
  margin-bottom: 1rem;
}

.mr-4 {
  margin-right: 1rem;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}

.h-64 {
  height: 16rem;
}

.h-full {
  height: 100%;
}

.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-8 {
  gap: 2rem;
}

.overflow-hidden {
  overflow: hidden;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.border {
  border-width: 1px;
}

.border-transparent {
  border-color: transparent;
}

.bg-gray-200 {
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-white {
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.p-6 {
  padding: 1.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading],
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-semibold {
  font-weight: 600;
}

.hover\:shadow-2xl:hover,
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
}


.transition-all {
  transition-property: all;
}
.transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
}


.duration-300 {
  transition-duration: 0.3s;
  animation-duration: 0.3s;
}

.hover\:text-sage-green:hover,
.text-sage-green {
  color: var(--sage-green);
}

.text-charcoal {
  color: var(--charcoal);
}


:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(20, 14.3%, 4.1%);
  --muted: hsl(60, 4.8%, 95.9%);
  --muted-foreground: hsl(25, 5.3%, 44.7%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(20, 14.3%, 4.1%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(20, 14.3%, 4.1%);
  --border: hsl(20, 5.9%, 90%);
  --input: hsl(20, 5.9%, 90%);
  --primary: hsl(120, 10%, 60%);
  --primary-foreground: hsl(46, 13%, 97%);
  --secondary: hsl(60, 4.8%, 95.9%);
  --secondary-foreground: hsl(24, 9.8%, 10%);
  --accent: hsl(60, 4.8%, 95.9%);
  --accent-foreground: hsl(24, 9.8%, 10%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(60, 9.1%, 97.8%);
  --ring: hsl(20, 14.3%, 4.1%);
  --radius: 0.5rem;
  --warm-gray: hsl(46, 13%, 85%);
  --sage-green: hsl(120, 10%, 60%);
  --beige: hsl(36, 22%, 83%);
  --off-white: hsl(46, 13%, 97%);
  --charcoal: hsl(0, 0%, 18%);
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
}

.rental-card-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.rental-card-link:visited {
  color: inherit !important;
}
.rental-card-link:hover {
  text-decoration: none !important;
}


.mb-2 {
	margin-bottom: .5rem
}

.mb-4 {
	margin-bottom: 1rem
}


.flex {
	display: flex
}

.inline-flex {
	display: inline-flex
}


.grid {
	display: grid
}




.h-64 {
	height: 16rem
}


.h-full {
	height: 100%
}


.w-full {
	width: 100%
}



.transform {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}


.items-center {
	align-items: center
}


.justify-center {
	justify-content: center
}

.justify-between {
	justify-content: space-between
}


.gap-2 {
	gap: .5rem
}


.overflow-hidden {
	overflow: hidden
}


.rounded-2xl {
	border-radius: 1rem
}


.rounded-full {
	border-radius: 9999px
}


.border {
	border-width: 1px
}



.border-transparent {
	border-color: transparent
}



.bg-gray-200 {
	--tw-bg-opacity: 1;
	background-color: rgb(229 231 235/var(--tw-bg-opacity))
}



.bg-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255/var(--tw-bg-opacity))
}



.object-cover {
	-o-object-fit: cover;
	object-fit: cover
}

.object-center {
	-o-object-position: center;
	object-position: center
}

.p-6 {
	padding: 1.5rem
}

.px-2\.5 {
	padding-left: .625rem;
	padding-right: .625rem
}

.py-0\.5 {
	padding-top: .125rem;
	padding-bottom: .125rem
}

.text-sm {
	font-size: .875rem;
	line-height: 1.25rem
}


.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem
}

.text-xs,
.text-xs\/4 {
	font-size: .75rem;
	line-height: 1rem
}


.font-semibold {
	font-weight: 400
}


.shadow-\[4px_4px_12px_0_rgba\(0\2c 0\2c 0\2c 0\.10\)\],
.shadow-lg {
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
}


.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-colors {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}


.hover\:shadow-2xl:hover {
	--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
	--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}


*,
:after,
:before {
	box-sizing: border-box;
	border: 0 solid #e5e7eb
}

:after,
:before {
	--tw-content: ""
}

:host,
html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: Satoshi, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-feature-settings: normal;
	font-variation-settings: normal;
	-webkit-tap-highlight-color: transparent
}

body {
	margin: 0;
	line-height: inherit
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit
}

a {
	color: inherit;
	text-decoration: inherit
}

button,
input,
select {
	font-family: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
	padding: 0
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0
}


img,
object,
svg {
	display: block;
	vertical-align: middle
}

img {
	max-width: 100%;
	height: auto
}



*,
:after,
:before {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-scroll-snap-strictness: proximity;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-scroll-snap-strictness: proximity;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000
}


:root {
	--swiper-theme-color: #007aff
}


:root {
	--f-spinner-width: 36px;
	--f-spinner-height: 36px;
	--f-spinner-color-1: rgba(0, 0, 0, .1);
	--f-spinner-color-2: rgba(17, 24, 28, .8);
	--f-spinner-stroke: 2.75
}



:root {
	--f-carousel-dots-width: 24px;
	--f-carousel-dots-height: 30px;
	--f-carousel-dot-width: 8px;
	--f-carousel-dot-height: 8px;
	--f-carousel-dot-radius: 50%;
	--f-carousel-dot-color: var(--f-carousel-theme-color, currentColor);
	--f-carousel-dot-opacity: 0.2;
	--f-carousel-dot-hover-opacity: 0.4
}

:root {
	--f-button-width: 40px;
	--f-button-height: 40px;
	--f-button-border: 0;
	--f-button-border-radius: 0;
	--f-button-color: #374151;
	--f-button-bg: #f8f8f8;
	--f-button-hover-bg: #e0e0e0;
	--f-button-active-bg: #d0d0d0;
	--f-button-shadow: none;
	--f-button-transition: all 0.15s ease;
	--f-button-transform: none;
	--f-button-svg-width: 20px;
	--f-button-svg-height: 20px;
	--f-button-svg-stroke-width: 1.5;
	--f-button-svg-fill: none;
	--f-button-svg-filter: none;
	--f-button-svg-disabled-opacity: 0.65
}



/* Repair Block for Flex Icons */
.flex.items-center svg.lucide {
    display: inline-block !important;
    width: 1rem; /* h-4 */
    height: 1rem; /* w-4 */
    margin-right: 0.5rem; /* mr-2 */
    vertical-align: text-bottom;
}

/* Fix the alignment and add the 20px padding */
.flex.items-center.text-charcoal\/60 {
    display: flex !important;
    align-items: center !important;
    padding-bottom: 20px; /* The 20px bottom spacing you requested */
}

/* Ensure the icons inside stay inline and don't jump to new lines */
.flex.items-center.text-charcoal\/60 svg {
    display: inline-block !important;
    margin-right: 0.5rem; /* Keeps the gap between icon and text */
    flex-shrink: 0;      /* Prevents icons from squishing */
}

.flex.items-center span {
    display: inline-block;
}