.mod-instance[data-inst="index-html--servicesvalue"] /* /home/norus/Documents/Vscode-Projects/site-tonoassets/modules/text-content/services-value-grid-6/text-content.css */
.servicesValue-value-services{
        /* reduce top space so the grid sits higher */
        padding: 0.5rem 1rem 0;
        margin-top: 0;
        background-color: #12141e;
        color: #d1d5e0;
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__container{
	max-width: 80rem;
	margin: 0 auto;
	width: 100%;
	padding-top: 0; /* keep container top padding removed */
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__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: #d1d5e0;
        overflow: visible;
        white-space: normal; /* Allow wrapping on small screens */
        background-color: transparent;
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__grid{
	display: grid;
	gap: clamp(0.75rem, 5vw, 3rem);
	padding-left: clamp(0.25rem, 2vw, 0.5rem);
        padding-right: clamp(0.25rem, 2vw, 0.5rem);

	/* lift grid up more */
	margin-top: clamp(-1rem, -3vw, -2rem);
	grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 30vw, 15rem), 1fr));
	width: 100%;
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item{
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0; /* remove inter-element gap to bring text closer to SVG */
	transition: transform 0.3s ease-in-out;
	position: relative;
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item-title{
        /* removed underline */
        text-decoration: none !important;
        /* keep other styles */
        font-size: clamp(0.9rem, 3vw, 1.5rem);
        margin-top: 0; /* bring title closer to SVG */
        position: relative;
}.mod-instance[data-inst="index-html--servicesvalue"] /* keep links without underline by default */
.servicesValue-value-services__item-title, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item-title a{
        text-decoration: none !important;
        color: inherit;
}.mod-instance[data-inst="index-html--servicesvalue"] /* Also ensure any anchor inside has no underline */
.servicesValue-value-services__item-title a, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item-title a:hover, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item-title:hover, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item-title:hover a{
	text-decoration: none !important;
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item p{
        margin-top: clamp(-1rem, -3vw, -1.25rem);
        font-size: clamp(0.8rem, 2vw, 1rem);
        line-height: 1.5;
        color: inherit;
}.mod-instance[data-inst="index-html--servicesvalue"] /* Image container */
.servicesValue-value-services__image{
	width: 100%;
	aspect-ratio: 4 / 3; /* reduce height to make section shorter */
	overflow: hidden;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease-in-out;
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image img{
	/* keep image behavior unchanged for raster images */
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}.mod-instance[data-inst="index-html--servicesvalue"] /* SVG styling */
.servicesValue-value-services__svg{
        /* Explicit width-based scaling to ensure visibility (3% smaller) */
        width: clamp(53.5%, 13.6vw, 72.8%);
        height: auto;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0 auto;

        /* Default SVG color uses semantic text color */
        color: #d1d5e0;
        /* Use explicit fill with semantic color for reliability */
        fill: #d1d5e0;
        transition: color 0.3s ease-in-out, fill 0.3s ease-in-out, transform 0.3s ease-in-out;
}.mod-instance[data-inst="index-html--servicesvalue"] /* Apply the hover effect to the image container instead */
.servicesValue-value-services__item:hover .servicesValue-value-services__image{
	transform: translateY(-4px);
}.mod-instance[data-inst="index-html--servicesvalue"] /* Maintain scale effect for SVG and images */
.servicesValue-value-services__item:hover .servicesValue-value-services__svg, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item:hover .servicesValue-value-services__image svg, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item:hover .servicesValue-value-services__image img{
        transform: scale(1.05);

}.mod-instance[data-inst="index-html--servicesvalue"] /* Ensure SVG container has proper sizing */
.servicesValue-value-services__image svg{
        /* let .servicesValue-value-services__svg control size; keep rendering stable */
        display: block;
        /* Ensure fallback SVGs adopt text color by default */
        color: #d1d5e0;
        fill: #d1d5e0;
        transition: color 0.3s ease-in-out, fill 0.3s ease-in-out, transform 0.3s ease-in-out;
}.mod-instance[data-inst="index-html--servicesvalue"] /* fallback for inline SVGs without the helper class */
.servicesValue-value-services__image svg:not(.servicesValue-value-services__svg){
        /* Fallback: explicit width so SVGs without class remain visible */
        width: clamp(53.5%, 13.6vw, 72.8%);
        height: auto;
        max-height: 100%;
}.mod-instance[data-inst="index-html--servicesvalue"] /* Ensure child shapes default to the section text color */
.servicesValue-value-services__svg path, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image svg path, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__svg rect, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image svg rect, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__svg circle, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image svg circle, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__svg polygon, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image svg polygon, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__svg polyline, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image svg polyline, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__svg line, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image svg line{
    transition: color 0.3s ease-in-out, fill 0.3s ease-in-out;
    fill: #d1d5e0 !important;
}.mod-instance[data-inst="index-html--servicesvalue"] /* Desktop only: hover changes color */
@media (min-width: 1201px){
  .servicesValue-value-services__item:hover .servicesValue-value-services__svg,
  .servicesValue-value-services__item:hover .servicesValue-value-services__image svg,
  .servicesValue-value-services__item:hover .servicesValue-value-services__svg *,
  .servicesValue-value-services__item:hover .servicesValue-value-services__image svg * {
    /* Desktop: animate to brand hover color */
    color: #9F6EDD;
    fill: #9F6EDD !important;
  }
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item:hover .servicesValue-value-services__svg{
         /* Keep SVG white on hover */
        transform: scale(1.05);
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item:hover .servicesValue-value-services__image svg{
       /* Keep SVG white on hover */
        transform: scale(1.05);
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__link{
	color: inherit;
	text-decoration: none;
}.mod-instance[data-inst="index-html--servicesvalue"] /* --------------------------------------------------------------------------
   Mobile: make service SVGs bigger
   -------------------------------------------------------------------------- */
@media (max-width: 768px){
  .servicesValue-value-services__svg,
  .servicesValue-value-services__image svg:not(.servicesValue-value-services__svg) {
    /* 3% smaller on small tablets/phones */
    width: clamp(60.1%, 50.4vw, 85.4%);
  }

  /* Disable all hover animations/interactions on mobile */
  .servicesValue-value-services__item:hover .servicesValue-value-services__image,
  .servicesValue-value-services__item:hover .servicesValue-value-services__svg,
  .servicesValue-value-services__item:hover .servicesValue-value-services__image svg,
  .servicesValue-value-services__item:hover .servicesValue-value-services__image img,
  .servicesValue-value-services__item:hover .servicesValue-value-services__svg path,
  .servicesValue-value-services__item:hover .servicesValue-value-services__image svg path {
    transform: none !important;
    /* Keep hover color same as normal */
    color: #d1d5e0 !important;
    fill: #d1d5e0 !important;
    stroke: #d1d5e0 !important;
    opacity: 1 !important;
    fill-opacity: 1 !important;
    stroke-opacity: 1 !important;
    transition: none !important;
  }

  /* Also lock base (non-hover) state to prevent inherited link hovers */
  .servicesValue-value-services__image svg,
  .servicesValue-value-services__svg,
  .servicesValue-value-services__image svg *,
  .servicesValue-value-services__svg * {
    color: #d1d5e0 !important;
    fill: #d1d5e0 !important;
    stroke: #d1d5e0 !important;
    opacity: 1 !important;
    fill-opacity: 1 !important;
    stroke-opacity: 1 !important;
    transition: none !important;
  }

  /* 3.svg nudge: use positional offsets (not transforms) */
  .servicesValue-value-services__item[data-img$="/3.svg"] .servicesValue-value-services__svg,
  .servicesValue-value-services__item[data-img$="/3.svg"] .servicesValue-value-services__image svg:not(.servicesValue-value-services__svg) {
    position: relative;
    left: 4%;
    top: 6%;
  }
  .servicesValue-value-services__item[data-img$="/3.svg"]:hover .servicesValue-value-services__svg,
  .servicesValue-value-services__item[data-img$="/3.svg"]:hover .servicesValue-value-services__image svg:not(.servicesValue-value-services__svg) {
    position: relative;
    left: 4%;
    top: 6%;
  }

  /* Also disable transitions to avoid jump on interaction */
  .servicesValue-value-services__image,
  .servicesValue-value-services__image img,
  .servicesValue-value-services__image svg {
    transition: none !important;
  }
}.mod-instance[data-inst="index-html--servicesvalue"] /* --------------------------------------------------------------------------
   Small tablets (landscape/portrait): keep SVG sizing and spacing like 768px
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px){
  .servicesValue-value-services__svg,
  .servicesValue-value-services__image svg:not(.servicesValue-value-services__svg) {
    /* Match mobile visual scale for 820×1180 and 1024×768 */
    width: clamp(60.1%, 50.4vw, 85.4%);
  }

  .servicesValue-value-services__grid {
    /* Much tighter row/column spacing for 1024×768 */
    gap: clamp(0.25rem, 1.2vw, 0.75rem) !important;
    /* Bring grid closer to the section title */
    margin-top: clamp(-2rem, -5vw, -3rem) !important;
    /* Trim side padding so columns sit closer */
    padding-left: clamp(0rem, 1vw, 0.25rem);
    padding-right: clamp(0rem, 1vw, 0.25rem);
  }

  /* Bring section title closer to grid like at 768px */
  .servicesValue-value-services__title {
    margin: 0 auto 0 auto !important;
  }

  /* Reduce space between each SVG and its item title */
  .servicesValue-value-services__item-title {
    margin-top: clamp(-0.75rem, -1.5vw, -0.5rem) !important;
  }

  /* Tighter text spacing below each item to compress vertically */
  .servicesValue-value-services__item p {
    margin-top: clamp(-1.25rem, -2vw, -1rem) !important;
  }
}@media (max-width: 480px) {.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__svg, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image svg:not(.servicesValue-value-services__svg){
    /* 3% smaller on phones */
    width: clamp(65.0%, 55.3vw, 85.4%);
  }.mod-instance[data-inst="index-html--servicesvalue"] }

/* Ensure SVG-in-link is centered within the image container */
.servicesValue-value-services__image > .servicesValue-value-services__link{
        display: inline-flex;
        align-items: center;
        justify-content: center;
}.mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__description-wrapper{
        display: flex;
        flex-direction: row;
        /* keep lines on the same row as the subtitle */
        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--servicesvalue"] .servicesValue-value-services__divider{
        /* fixed side lines that do not 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--servicesvalue"] .servicesValue-value-services__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;
        /* let long subtitles wrap into multiple lines */
        flex: 0 1 auto;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
}.mod-instance[data-inst="index-html--servicesvalue"] /* Cancel hover effects for screens under 1200px */
@media (max-width: 1200px){
	.servicesValue-value-services__item:hover .servicesValue-value-services__image {
		transform: none !important;
	}

        /* Keep the SVG/icon color the same as the default */
        .servicesValue-value-services__item:hover .servicesValue-value-services__svg,
        .servicesValue-value-services__item:hover .servicesValue-value-services__image svg,
        .servicesValue-value-services__item:hover .servicesValue-value-services__image img,
        .servicesValue-value-services__item:hover .servicesValue-value-services__svg *,
        .servicesValue-value-services__item:hover .servicesValue-value-services__image svg * {
                transform: none !important;
                color: #d1d5e0 !important;
                fill: #d1d5e0 !important;
                stroke: #d1d5e0 !important;
                opacity: 1 !important;
                fill-opacity: 1 !important;
                stroke-opacity: 1 !important;
                transition: none !important;
        }

        /* Also disable any transition on SVGs/paths for non-desktop to prevent fades */
        .servicesValue-value-services__svg,
        .servicesValue-value-services__image svg,
        .servicesValue-value-services__image img,
        .servicesValue-value-services__svg *,
        .servicesValue-value-services__image svg * {
                transition: none !important;
        }

        /* Ensure visibility stays solid on hover */
        .servicesValue-value-services__item:hover .servicesValue-value-services__svg,
        .servicesValue-value-services__item:hover .servicesValue-value-services__image svg,
        .servicesValue-value-services__item:hover .servicesValue-value-services__image img,
        .servicesValue-value-services__item:hover .servicesValue-value-services__svg *,
        .servicesValue-value-services__item:hover .servicesValue-value-services__image svg * {
                opacity: 1 !important;
                fill-opacity: 1 !important;
                stroke-opacity: 1 !important;
        }

        /* Lock base (non-hover) state to normal color/visibility to avoid inherited link hover styles */
        .servicesValue-value-services__image svg,
        .servicesValue-value-services__svg,
        .servicesValue-value-services__image svg *,
        .servicesValue-value-services__svg * {
                color: #d1d5e0 !important;
                fill: #d1d5e0 !important;
                stroke: #d1d5e0 !important;
                opacity: 1 !important;
                fill-opacity: 1 !important;
                stroke-opacity: 1 !important;
        }
}.mod-instance[data-inst="index-html--servicesvalue"] /* Force 2-column layout at medium sizes */
@media (max-width: 1250px) and (min-width: 481px){
	.servicesValue-value-services__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}.mod-instance[data-inst="index-html--servicesvalue"] /* Keep items readable on small screens */
@media (max-width: 768px){
	.servicesValue-value-services__item-title {
		margin-top: 0; /* bring title closer to SVG on small screens */
	}
	.servicesValue-value-services__item p {
		margin-top: clamp(-0.5rem, -1.5vw, -0.5rem);
	}
}.mod-instance[data-inst="index-html--servicesvalue"] /* remove large upward offset to prevent cropping in shorter container */
.servicesValue-value-services__svg, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__image svg{
	margin-top: 0;
	transition: margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease-in-out;
}.mod-instance[data-inst="index-html--servicesvalue"] /* keep the upward offset when hovering (hover still applies scale) */
.servicesValue-value-services__item:hover .servicesValue-value-services__svg, .mod-instance[data-inst="index-html--servicesvalue"] .servicesValue-value-services__item:hover .servicesValue-value-services__image svg{
	transform: scale(1.05);
	margin-top: 0;
}.mod-instance[data-inst="index-html--servicesvalue"] /* Phones: ensure no underline on titles/links */
@media (max-width: 480px){
	/* Phones: force single-column grid */
	.servicesValue-value-services__grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.servicesValue-value-services__item-title,
	.servicesValue-value-services__item-title a,
	.servicesValue-value-services__link,
	.servicesValue-value-services__link:hover,
	.servicesValue-value-services__item-title:hover,
	.servicesValue-value-services__item-title:hover a {
		text-decoration: none !important;
	}
}.mod-instance[data-inst="index-html--servicesvalue"] /* Final desktop-only hover override to ensure violet color */
@media (hover: hover) and (pointer: fine) and (min-width: 1201px){
  .servicesValue-value-services__item:hover .servicesValue-value-services__image svg,
  .servicesValue-value-services__item:hover .servicesValue-value-services__image svg *,
  .servicesValue-value-services__item:hover .servicesValue-value-services__svg,
  .servicesValue-value-services__item:hover .servicesValue-value-services__svg * {
    color: #9F6EDD !important;
    fill: #9F6EDD !important;
  }
}{}