.navbar {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1000;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.navbar-nav {
	font-size: 0.9rem;
}

.navbar-brand {
	display: inline-block;
	width: 14rem;
	height: 6rem;
	background: url('../img/etrpro-og-1.png') center/contain no-repeat;
	background-size: contain;
}

@media (max-width: 991.98px) {
	.navbar-brand {
		height: 5rem;
		width: 14.5rem;
		background-size: contain;
	}
}

.navbar-toggler {
	border: none !important;
}

.navbar-toggler:focus {
	border: none !important;
	box-shadow: none !important;
}

.navbar li {
	display: inline-block;
	margin: 0 25px 0 0px;
}

@media (max-width: 991.98px) {
	.dropdown-menu li {
		margin: 0 !important;
		padding: 0.25rem 0.5rem 0.25rem 0.5rem;
	}
}

.nav-link:focus,
.nav-link {
	color: #22458d !important;
}

.nav-link:hover {
	color: #747575 !important;
}

.nav-link.active {
	color: #747575 !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
	color: #747575 !important;
}

.navbar-collapse.collapse.show {
	align-items: center;
}

@media (max-width: 991.98px) {
	.navbar-nav {
		flex-direction: column;
		padding-bottom: 1rem;
		align-items: center; /* centers toggle link itself */
		text-align: center; /* ensures all children align center */
	}

	.dropdown-menu {
		position: static !important; /* pushes content down */
		width: auto !important; /* fit to content */
		min-width: unset !important; /* remove Bootstrap's default width */
		margin: 0 auto; /* center horizontally */
		text-align: center; /* center text inside the dropdown */
		background-color: transparent;
		box-shadow: none;
		padding: 0;
	}

	.dropdown.show .dropdown-menu {
		display: block;
	}

	.dropdown-item {
		display: block;
		width: 100%;
		padding: 0rem !important;
		text-align: center; /* optional: center link text */
	}
}

.dropdown-item {
	color: #22458d;
	padding: 0.25rem 1rem 0.25rem 0;
	background-color: transparent;
}

.dropdown-item:hover {
	color: #747575;
	background-color: transparent;
}

.dropdown-menu {
	font-size: 0.9rem;
	border: 0px;
	min-width: 18.2rem;
	padding: 0 0.5rem;
	background: none;
}

ul.dropdown-menu.show {
	display: block;
	opacity: 1;
	z-index: 98;
	position: absolute;
	-webkit-animation: fadein 2s; /* Safari and Chrome */
	-moz-animation: fadein 2s; /* Firefox */
	-ms-animation: fadein 2s; /* Internet Explorer */
	-o-animation: fadein 2s; /* Opera */
	animation: fadein 2s;
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Firefox */
@-moz-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Opera */
@-o-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* HERO BACKGROUND + OVERLAY */
.hero {
	position: relative;
	background: url('../img/bluecar-1440x765-1.png') center/cover no-repeat;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	/* dark-blue gradient overlay */
	background: linear-gradient(
		135deg,
		rgba(0, 14, 55, 0.85) 0%,
		rgba(0, 56, 142, 0.6) 100%
	);
	z-index: 1;
}

/* keep your content above the overlay */
.hero .container {
	position: relative;
	z-index: 2;
	padding: 8rem 0;
	/* adjust vertical space */
}

/* TITLE & SUBTITLE */
.hero-title {
	font-size: 3.25rem;
	/* large desktop size */
	line-height: 1.1;
	margin-bottom: 5.5rem;
}

.hero-lead {
	font-size: 1.25rem;
	max-width: 42rem;
	margin-bottom: 5.5rem;
}

/* HERO BUTTONS */
.btn-hero {
	padding: 1rem 2rem;
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
	text-transform: none;
	border: none;
	border-radius: 0px;
	background: linear-gradient(135deg, #002d7d 0%, #0040c3 100%);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s, box-shadow 0.2s;
	min-width: 16vw !important;
}

.btn-hero:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
	.hero-title {
		font-size: 2.5rem;
	}

	.btn-hero {
		width: 100%;
		max-width: 16rem;
		margin: 0 auto;
	}

	.d-flex.gap-4 {
		flex-direction: column;
		gap: 1rem !important;
	}
}

/* full-bleed wrapper with angle edge */
.solutions-header-wrapper {
	position: relative;
	width: 60vw;
	margin-left: calc(50% - 50vw);
	height: 8.4375rem;
	/* per Figma */
	overflow: hidden;
	background-color: #22458d;
	clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
	padding-left: 8vw;
}

/* svg covers the wrapper */
.solutions-header-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

@media (min-width: 992px) {
	.solutions-header-wrapper {
		width: 75vw;
	}
	.btn-hero {
		min-width: 12rem;
	}
}

/* the nested `.container` will center content responsively */
.solutions-header-wrapper .container {
	position: relative;
	/* so text sits above the svg */
	z-index: 1;
}

.py-5 {
	padding-bottom: 8rem !important;
	padding-top: 5rem !important;
}

.mb-5 {
	margin-bottom: 5rem !important;
}

/* typography unchanged */
.solutions-title {
	color: #fff;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 2.5rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

/* === Feature List Container === */
.solutions-content {
	/* border-left: 4px solid #22458D; */
	/* left border */
	padding-left: 2rem;
	/* space between border & text */
}

/* === Each Solution Item === */
.solution-item {
	/* spacing is controlled by Bootstrap’s g-4 gutter + this margin */
	margin-bottom: 2rem;
}

.solution-item:last-child {
	margin-bottom: 0;
}

/* Item heading (you can leave this at your preferred size) */
.solution-item h5 {
	font-size: 1.6875rem;
	font-weight: 500;
	color: #22458d;
	margin-bottom: 0.5rem;
}

/* Smaller text underneath */
.solution-item p {
	color: #22458d;
	/* Figma: same blue */
	font-family: 'Roboto Flex', sans-serif;
	font-size: 1.25rem;
	font-weight: 200;
	/* semibold */
	line-height: 1.21;
	/* 121% */
	margin: 0;
}

/* Mobile tweaks (≤768px) */
@media (max-width: 768px) {
	/* Make the header bar full-width and flush */
	.solutions-header-wrapper {
		width: 85vw;
		margin-left: 0;
		padding-left: 0.5rem;
		/* a little breathing room */
		height: auto;
		/* allow it to grow if text wraps */
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	/* Smaller, wrapping title */
	.solutions-title {
		font-size: 1.75rem;
		/* down from 3.125rem */
		line-height: 1.2;
		white-space: normal;
		/* allow wrapping */
	}

	/* Reduce left padding on the list */
	.solutions-content {
		padding-left: 1rem;
	}

	/* Smaller headings and text */
	.solution-item h5 {
		font-size: 1.25rem;
		/* down from 1.6875rem */
	}

	.solution-item p {
		font-size: 0.95rem;
		/* down from 1rem */
	}
}

/* --- Why Choose ETRpro --- */

#why {
	background-color: #22458d;
}

@media (min-width: 992px) {
	#why > .container {
		width: 90rem;
		height: 20.1875rem;
		margin: 0 auto;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		vertical-align: middle;
	}
}

/* Flex header with title + rule */
.why-header {
	display: flex;
	align-items: baseline; /*why choose ETRpro white line*/
	gap: 1rem;
}

/* Main title */
.why-title {
	color: #fff;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 2rem;
	/* Figma */
	font-style: italic;
	font-weight: 600;
	/* extra bold */
	line-height: 1;
	/* 100% of 3.125rem */
	letter-spacing: 0.05125rem;
	margin: 0;
	white-space: nowrap;
}

/* SVG rule */
.why-line {
	flex-grow: 1;
	height: 3px;
	/* Figma */
}

/* Body text */
.why-text {
	color: #fff;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 1.25rem;
	/* Figma */
	font-weight: 300;
	line-height: 1.2;
	/* 120% */
	letter-spacing: 0.05063rem;
	margin: 0 1rem 0 0;
	padding-bottom: 0;
}

/* Responsive tweaks */
@media (max-width: 768px) {
	#why > .container {
		padding: 0 1.5rem 0 1.5rem;
	}
	.why-header {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 4rem !important;
	}

	.why-title {
		font-size: 2rem;
		/* smaller on mobile */
	}

	.why-line {
		width: 100%;
	}

	.why-text {
		font-size: 1.25rem;
		/* smaller on mobile */
	}
}

/* --- CTA SECTION --- */
.cta-section {
	/* let the SVG bleed full-width */
	width: 100vw;
	margin: 4rem 0 4rem 0;
	overflow: hidden;
}

.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #00163f;
	clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
	z-index: 0;
}

.cta-split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 250px;
}

.cta-left {
	flex: 1;
	background-color: #00163f;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cta-right {
	flex: 0 0 45%;
	background-color: white;
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rem;
	position: relative;
	z-index: 1;
}

.cta-section .container {
	/* constrain your content to Bootstrap’s normal container widths */
	margin-left: auto;
	margin-right: 0;
	padding: 0px !important;
	max-width: 100rem;
	border-top: 3px solid #00163f;
	border-bottom: 3px solid #00163f;
}

/* full-bleed SVG 
.cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}*/

/* content on top of the SVG */
.cta-content {
	position: relative;
	z-index: 1;
}

/* left paragraph */
.cta-text {
	flex: 0 0 75%;
	/* roughly 60% of row on desktop */
	color: #fff;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 1.65rem;
	/* Figma */
	font-weight: 400;
	line-height: 1.5;
	/* 150% */
	margin: 0;
	padding: 0 4rem;
	max-width: 70vw;
}

/* right “Request a Demo” */
.cta-action {
	flex: 0 0 auto;
	margin-right: auto;
	margin-left: auto;
}

.cta-title {
	background-color: #003aa5;
	background-image: linear-gradient(to right, #003aa5 22%, #00163f 100%);
	background-image: conic-gradient(to right, #003aa5 22%, #00163f 100%);
	background-size: 100%;
	background-repeat: repeat;
	background-clip: text;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-text-fill-color: transparent;
	/* Animate the text when loading the element. */
	/* This animates it on page load and when hovering out. */
	animation: gradient-animation-rev 0.75s ease forwards;
	font-family: 'Roboto Flex', sans-serif;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	padding: 1rem 2rem;
	/* slanted panel—using clip-path */
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
	margin: 0;
}

.cta-title:hover {
	animation: gradient-animation 2s ease-in forwards;
}

@media (max-width: 576px) {
	/* angled border code here */
	/* remove the big blue slab */
	.cta-section::before {
		content: none;
	}

	.cta-right {
		position: relative;
		background: transparent; /* white comes from ::after */
		clip-path: none; /* we'll shape with pseudos */
		padding: 3rem 1rem;
		flex: none;
		width: 100% !important;
		justify-content: center;
		text-align: center;
	}

	/* outer navy shape = the border */
	.cta-right::before {
		content: '';
		position: absolute;
		inset: 0;
		background: #00163f;
		clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
		z-index: 0;
	}

	/* inner white shape = panel (inset by the border thickness) */
	.cta-right::after {
		content: '';
		position: absolute;
		inset: 0; /* keep full size */
		background: #fff;
		/* 3px border thickness */
		clip-path: polygon(
			calc(10% + 3px) 0px,
			calc(100% - 0px) 0px,
			calc(100% - 0px) calc(100% - 0px),
			3px calc(100% - 0px)
		);
		z-index: 1;
	}

	/* keep your text above the layers */
	.cta-right > * {
		position: relative;
		z-index: 2;
	}
}

.cta-split {
	flex-direction: column;
}

/* Make the left (blue) section full width */
.cta-left {
	flex: none;
	width: 100%;
	/*clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); removing the angle for the dark blue - mobile*/
	padding: 2rem 2rem;
	text-align: left;
}

.cta-text {
	font-size: 1.25rem;
	padding: 0;
	max-width: 100%;
}

/* Make the right section slanted even on mobile 
  .cta-right {
    flex: none;
    width: 100% !important;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    border-left: 3px solid #00163f;
    padding: 3rem 1rem;
    justify-content: center;
    text-align: center;
  }*/

.cta-title {
	font-size: 2rem;
	clip-path: none; /* text should be normal, not clipped */
	padding: 0;
}

/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes gradient-animation-rev {
	0% {
		background-size: 650%;
	}
	40% {
		background-size: 650%;
	}
	100% {
		background-size: 100%;
	}
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes gradient-animation {
	0% {
		background-size: 100%;
	}
	80% {
		background-size: 650%;
	}
	100% {
		background-size: 650%;
	}
}

/*DESKTOP & TABLET — same look for ≥ 577px */
@media (min-width: 577px) {
	/* Reset anything mobile messed up */
	.cta-split {
		flex-direction: row;
	}

	.cta-left {
		flex: 1;
		background-color: #00163f;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: left;
		padding: 0;
	}

	.cta-right {
		flex: 0 0 45%;
		background-color: white;
		clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
		padding: 8rem;
		position: relative;
		z-index: 1;
		width: auto;
	}

	.cta-title {
		clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
		padding: 1rem 2rem;
	}

	.cta-section::before {
		content: '';
		position: absolute;
		inset: 0;
		background-color: #00163f;
		clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
		z-index: 0;
	}
}

/* RESPONSIVE ADJUSTMENTS */
/*@media (max-width: 768px) {
  .cta-right {
    width: 35vw;
  }
*/
/*@media (max-width: 992px) {
  .cta-text {
    flex: 0 0 100%;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    max-width: 100vw;
  }

  .cta-action {
    flex: 0 0 100%;
    text-align: center;
  }
  .cta-right {
    width: 40vw;
  }

  .cta-title {
    font-size: 2rem;
    clip-path: none;
    /* square on small 
  }
}*/

/* ─── CTA: height + white border on large screens ─── 
@media (min-width: 992px) {
  .cta-bg {
    width: 62%;
  }

  .cta-section {
    /* thick white “padding” above & below 
    border-top: 4rem solid #fff;
    border-bottom: 4rem solid #fff;

    /* full‐bleed shape still spans the entire viewport 
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .cta-content {
    /* force the inner content to be as tall as your other section 
    min-height: 19.1875rem;
    /* vertically center text + button 
    align-items: center;
  }
}

/* ─── small screens: let it collapse naturally ─── 
@media (max-width: 991px) {
  .cta-section {
    border: none;
    /* remove the big white borders 
    width: auto;
    margin: 2rem 0 2rem 0;
  }
  .cta-right {
    width: 40vw;
    /* full width on small screens 
  }

  .cta-content {
    min-height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}*/

/* CONTACT SECTION BACKGROUND + OVERLAY */
.contact-section {
	position: relative;
	overflow: hidden;
}

/* full-bleed background image */
.contact-bg {
	position: absolute;
	inset: 0;
	background: url('../img/adobestock-848492681-preview-1.png') no-repeat
		center/cover;
	z-index: 1;
}

/* dark overlay to improve readability */
/* dark teal-blue tint over the background image */
.contact-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 22, 63, 0.75);
	z-index: 2;
}

/* the white card */
.contact-card {
	position: relative;
	z-index: 3;
	background: rgba(35, 66, 150, 0.7);
	/* semi-transparent blue */
	color: #fff;
}

/* Floating labels on dark background */
.contact-card .form-floating .form-control,
.contact-card .form-floating .form-select {
	background: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
}

/* On focus, keep white underline */
.contact-card .form-control:focus,
.contact-card .form-select:focus {
	border-color: #fff;
	box-shadow: none;
	outline: none;
}

/* Submit button styling */
.btn-submit {
	background: linear-gradient(135deg, #00163f 0%, #003aa5 100%);
	color: #fff;
	padding: 0.75rem 2rem;
	border: none;
	border-radius: 0px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
	width: 100%;
	font-size: 1rem;
	font-weight: 500;
	transition: transform 0.2s, box-shadow 0.2s;
}

.btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

/* RESPONSIVE (stack on small) */
@media (max-width: 768px) {
	.contact-card {
		padding: 2rem 1.5rem;
	}

	.btn-submit {
		font-size: 0.9rem;
		padding: 0.6rem 1.5rem;
	}
}

.form-select .contact-input {
	position: relative;
	display: inline-block;
	width: 200px;
}

/* CONTACT FORM: custom select styling */
.contact-card .form-floating .form-select {
	background-color: transparent !important;
	border: none !important;
	border-bottom: 1px solid #fff !important;
	border-radius: 0 !important;
	padding-right: 2.5rem !important; /* space for the arrow */
	color: #fff !important;
	background: none !important; /* remove Bootstrap's icon */

	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

/* Wrapper for the select and chevron */
.select-wrapper {
	position: relative;
	display: block;
	width: 100%; /* Make it responsive inside Bootstrap col */
}

/* Custom dropdown arrow container */
.my-chevron {
	position: absolute;
	padding-bottom: 0.7rem !important; /* space for the chevron */
	top: 50%;
	right: 0.75rem; /* padding inside the select's right side */
	transform: translateY(-50%);
	pointer-events: none;
	transition: transform 0.3s ease;
	height: 1rem;
	width: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff; /* match the select text */
}

/* Flip chevron when select is focused */
.select-wrapper select:focus + .my-chevron {
	transform: translateY(-50%) rotate(180deg);
}

/* Chevron icon */
.my-chevron::before {
	content: '⌄'; /* or use a chevron SVG via background-image */
	font-size: 1.25rem;
	line-height: 1;
}

/* Ensure select has room for chevron */
.contact-input {
	padding-right: 2.5rem !important; /* space for chevron */
	background-color: transparent !important;
	border: none !important;
	border-bottom: 1px solid #fff !important;
	border-radius: 0 !important;
	color: #fff !important;

	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: none !important;
}

/* On focus, keep underline white */
.contact-input:focus {
	border-color: #fff !important;
	box-shadow: none !important;
	outline: none !important;
}

/* On focus, keep the underline white and remove shadow */
.contact-card .form-select:focus {
	border-color: #fff;
	box-shadow: none;
	outline: none;
}

/* in the CONTACT form cards, keep the closed .form-select text white */
.contact-card .form-select {
	color: #fff;
}

/* once open, options should be dark on white */
.contact-card .form-select option {
	color: #22458d;
	/* your dark-blue text */
	background-color: #fff;
	/* white background */
}

/* optional: hover & selected states in the dropdown list */
.contact-card .form-select option:hover,
.contact-card .form-select option:checked {
	background-color: #e6eefd;
	/* a very light blue highlight */
	color: #22458d;
}

.navbar .btn-hero {
	padding: 0.5rem 1.5rem;
	margin: 0 !important;
	font-size: 1rem;
}

.navbar-nav .btn {
	border-radius: 0px;
	font-size: 0.9rem;
	min-width: 0 !important;
}

.btn-hero:hover,
.btn-hero:focus {
	color: #fff !important;
}

.navbar .btn-hero:hover,
.navbar .btn-hero:focus {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
	color: #22458d !important;
	text-transform: none;
	background: white;
	border: 2px solid #747575;
}

.contact-card .form-floating > label {
	background-color: transparent;
	padding: 0 0.25rem;
}

/* Classic stacked labels for contact card */
.contact-card .form-label {
	display: block;
	margin-bottom: 0.5rem;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
}

/* Inputs, selects & textarea styling */
.contact-card .contact-input {
	background: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	border-radius: 0;
	color: #fff;
	padding: 0.5rem 0;
	width: 100%;
	box-shadow: none;
}

/* Placeholder color */
.contact-card .contact-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

/* Focus state */
.contact-card .contact-input:focus {
	outline: none;
	border-color: #fff;
}

/* Remove any leftover form-floating rules */
.contact-card .form-floating {
	display: block;
}

.contact-card .form-floating > label,
.contact-card .form-floating .form-control,
.contact-card .form-floating .form-select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
}

/* simple parallax fallback */
.hero {
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

.dropdown-toggle::after {
	content: '';
	display: inline-block;
	width: 12px; /* Size of the chevron*/
	height: 9px; /* Size of the chevron */
	background-image: url('../img/vector-1.svg') !important;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 0.5rem;
	vertical-align: middle;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: none !important;
	transition: transform 0.4s ease;
	transform-origin: center;
}

.dropdown-toggle:hover::after {
	content: '';
	display: inline-block;
	width: 12px; /* Size of the chevron */
	height: 9px; /* Size of the chevron */
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 0.5rem;
	vertical-align: middle;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: none !important;
}

/* Optional: If you have an up chevron too */
.dropdown-toggle[aria-expanded='true']::after {
	transform: rotateZ(180deg); /* Spins in place */
}