.mod-instance[data-inst="index-html--services"] /* /home/norus/Documents/Vscode-Projects/site-tonoassets/modules/text-content/reasons-grid-6/text-content.css */
.services-reasons-grid{
	padding: 1rem 0.5rem;
	background-color: #0a0b13;
	width: 100%;
	/* Prevent any horizontal overflow within this section */
	overflow-x: hidden;
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__title{
	text-align: center;
	width: 100%; /* Responsive width */
	max-width: 1200px; /* Limit to carousel width */
	margin: 0 auto clamp(0.5rem, 2vw, 1rem) auto; /* Less space below, closer to carousel */
	font-size: clamp(1.5rem, 5vw, 3rem); /* Responsive font size */
	font-weight: bold;
	color: #eceff4;
	overflow: visible;
	white-space: normal; /* Allow wrapping on small screens */
	background-color: #0a0b13;
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, auto);
	gap: 0.5rem;
	max-width: 80rem;
	margin: 0 auto;
	/* Ensure grid never exceeds container width */
	width: 100%;
	box-sizing: border-box;
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__item{
	background: #12141e; /* White box */
	padding: 1rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	border-radius: 12px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s, transform 0.2s;
	padding-top: calc(0.125rem - 0.75rem);
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__item:hover{
	box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.12);
	transform: translateY(-4px) scale(1.03);
	z-index: 2;
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__item h3{
	font-size: 1.5rem;
	color: #7A44C0;
	margin-bottom: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	/* Prevent long words from causing horizontal scroll */
	word-break: break-word;
	overflow-wrap: anywhere;
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__item p{
	font-size: 1rem;
	color: #d1d5e0;
	line-height: 1.75;
	margin: 0;
	text-align: left;
	flex-grow: 1;
	background: transparent;
	transition: background 0.2s;
	/* Prevent long words from causing horizontal scroll */
	word-break: break-word;
	overflow-wrap: anywhere;
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__description-wrapper{
	display: flex;
	flex-direction: row;
	/* Keep lines beside text; prevent wrapping to next row */
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2rem);
	max-width: 900px;
	margin: clamp(0.5rem, 2vw, 1rem) auto 0;
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__description-divider{
	/* fixed-size side lines that never wrap */
	flex: 0 0 auto;
	flex-shrink: 0;
	width: clamp(30px, 10vw, 60px);
	height: 2px;
	background-color: #47286E;
	margin-top: clamp(-0.5rem, -1vw, -1rem);
}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__description{
	text-align: center;
	font-size: clamp(0.8rem, 2vw, 1.25rem);
	color: #7A44C0;
	margin: clamp(-0.5rem, -1vw, -1rem) 0 0;
	line-height: 1.6;
	/* allow the text to wrap across multiple lines between the fixed side lines */
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
}.mod-instance[data-inst="index-html--services"] /* Responsive design */
@media (max-width: 768px){
	.services-reasons-grid {
		padding: 2rem 1rem;
	}

	/* Phones: single column */
	.services-reasons-grid__grid {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: auto;
		gap: 1rem;
	}

	.services-reasons-grid__item {
		padding: 1rem;
	}

	.services-reasons-grid__item h3 {
		font-size: 1.25rem;
		margin-bottom: 0.75rem;
	}

	.services-reasons-grid__item p {
		font-size: 1rem;
	}
}@media (min-width: 769px) and (max-width: 1024px) {.mod-instance[data-inst="index-html--services"] .services-reasons-grid{
		padding: 2.25rem 1.25rem;
	}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__grid{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		gap: 1.25rem;
	}.mod-instance[data-inst="index-html--services"] .services-reasons-grid__item{
		padding: 1.25rem;
	}.mod-instance[data-inst="index-html--services"] }

@media (max-width: 1200px){
	.services-reasons-grid__item:hover {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
		transform: none;
		z-index: 1;
	}
}.mod-instance[data-inst="index-html--services"] /* Ensure consistent height across all items */
.services-reasons-grid__grid::after{
	content: '';
	display: block;
	clear: both;
}{}