/* directory.css */

.intro p {
	font-size: var(--r20px); /* 20px */
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-style: normal;
	color: var(--page-intro-color);
	text-align: center;
	line-height: 1.6; /* Ensuring optimal readability */
	margin-top: 5px; /* Adjusted value for aesthetic spacing */
	margin-bottom: 20px;
}

/* Jump To Function */
.jump-to {
	display: flex;
	align-items: stretch; /* Stretch buttons to same height */
	margin-bottom: 30px;
	width: 100%; /* Full width container */
	gap: 10px; /* Add space between buttons */
	overflow-x: auto; /* Enable horizontal scrolling if necessary */
}

/* Button Styles */
.jump-to a {
	/* Layout and Flex Properties */
	display: flex;
	flex: 1 1 auto; /* Equal width buttons that can shrink */
	align-items: center;
	justify-content: center;
	box-sizing: border-box; /* Include padding and border in width */
	min-width: 100px; /* Minimum width to prevent buttons from becoming too narrow */

	/* Box Model */
	margin: 0;
	padding: 15px; /* Adequate touch targets */
	border: 1px solid #1F6EA8;
	border-radius: 4px;

	/* Visual Styles */
	background-color: #0E86D4;
	color: #FFF;

	/* Typography */
	font-size: calc(16px + 0.5vw); /* Responsive font size */
	text-decoration: none;
	white-space: nowrap; /* Prevent text wrapping */
	overflow: hidden; /* Hide overflow if text is too long */
	text-overflow: ellipsis; /* Show ellipsis if text overflows */
}

/* Hover Effect */
.jump-to a:hover {
	background-color: #3E9EDC;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
	.jump-to a {
		font-size: calc(14px + 1vw); /* Adjust font size for small screens */
		padding: 12px; /* Adjust padding if necessary */
	}
}

/* Services Section */
.services-section {
	margin-bottom: 50px;
}
.services-section h2 {
	margin-bottom: 20px;
	font-size: 1.5em;
	color: var(--service-section-title);
	border-bottom: 2px solid var(--service-section-title);
	padding-bottom: 10px;
}
.service-item {
	background: rgba(255, 255, 255, 1);
	padding: 15px;
	margin-bottom: 15px;
	border: 1px solid #89CFF8;
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 12px 12px 24px rgba(134, 185, 221, 0.3), -12px -12px 24px rgba(222, 238, 250, 0.6);
}
.service-item:nth-child(odd) {
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid #89CFF8;
}
.service-item h3 {
	font-size: 1.2em;
	color: var(--service-section-title);
}
.service-item p {
	margin: 10px 0;
	font-size: 0.95em;
	color: var(--text-color);
}
/* Responsive */
@media (max-width: 600px) {
	.service-item {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Service Content */
.service-content {
	flex: 1; /* Allow content to grow and fill available space */
	margin-right: 20px; /* Space between content and button */
}

/* Optionally, adjust the service-item to add a gap */
.service-item {
	display: flex;
	align-items: center;
	gap: 20px; /* Space between flex items */
}

/* Responsive Adjustments for Service Item */
@media (max-width: 600px) {
	.service-item {
		flex-direction: column;
		align-items: stretch; /* Ensure children stretch to full width */
	}
	.service-content {
		margin-right: 0; /* Remove right margin on small screens */
		margin-bottom: 15px; /* Add space below content */
	}
	.button-container {
		align-self: center; /* Center the button on small screens */
	}
}

/* Ensure the get-quote-button doesn't shrink */
.get-quote-button {
	flex-shrink: 0; /* Prevent the button from shrinking */
}

/* Get Quote Button Styles */
.get-quote-button {
	/* Layout */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px; /* Fixed width */
	height: 50px; /* Fixed height */
	white-space: nowrap; /* Prevent text wrapping */

	/* Typography */
	font-size: 16px; /* Ensure text fits within the button */
	font-weight: 600;
	letter-spacing: 1.5px;

	/* Appearance */
	background: var(--c-button-bg);
	color: #FFF; /* Text color */
	border: none;
	border-radius: 4px;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
	-webkit-backdrop-filter: blur(10px); /* For Safari */
	backdrop-filter: blur(10px);

	/* Interactions */
	cursor: pointer;
	transition: all 0.3s;
	user-select: none;
	touch-action: manipulation;

	/* Override global link styles */
	text-decoration: none;
}

/* Override global link styles */
.get-quote-button:link,
.get-quote-button:visited,
.get-quote-button:hover,
.get-quote-button:active,
.get-quote-button:focus {
	color: #FFF; /* Ensure text color is always white */
	text-decoration: none; /* Remove underline */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
	.get-quote-button {
		width: 160px; /* Adjusted width for smaller screens */
		height: 40px; /* Adjusted height for smaller screens */
		font-size: 14px; /* Adjusted font size */
	}
}