.about {background: linear-gradient(180deg, #f4f9ff 0%, #fff 100%); padding: 40px 0 56px; position: relative;}
.about__grid {display: grid; grid-template-columns: minmax(280px, 1fr) 1.55fr; gap: 48px; align-items: center;}
.about__text p {margin: 16px 0 16px; max-width: 440px; font-size: 15.5px;}
.services {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
.service {background: #fff; border-radius: var(--radius); padding: 26px 14px 22px; text-align: center;
  box-shadow: 0 6px 24px rgba(11, 37, 84, .08); border: 1px solid rgba(219, 230, 242, .7);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .4s;
  position: relative; overflow: hidden;}
.service::before {content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--grad-blue); transform: scaleX(0); transition: transform .45s var(--ease);}
.service:hover {transform: translateY(-8px); box-shadow: var(--shadow-lg); background: linear-gradient(180deg, #fff, #f3f9ff);}
.service:hover::before {transform: scaleX(1);}
.service__ic {display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 12px; color: var(--blue-600); border-radius: 50%; transition: background .4s, color .4s, transform .5s var(--ease);}
.service:hover .service__ic {background: var(--grad-blue); color: #fff; transform: rotate(-8deg) scale(1.05);}
.service h3 {font-size: 16px; font-weight: 600; line-height: 1.3;}
.service p {font-size: 12.5px; color: var(--muted); margin-top: 8px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .35s;}
.service:hover p,
.service:focus-within p {max-height: 60px; opacity: 1;}
.services {grid-template-columns: repeat(var(--svc-cols, 4), 1fr);}
.service {background: var(--card-bg, #fff);}
.service::before {background: var(--card-line, var(--blue-500));}
.service:hover {transform: translateY(calc(var(--card-lift, 8px) * -1)); background: var(--card-hover-bg, #f3f9ff);}
.service__ic {color: var(--card-ic, var(--blue-600)); width: calc(var(--card-ic-size, 38px) + 16px); height: calc(var(--card-ic-size, 38px) + 16px);}
.service:hover .service__ic {background: var(--card-ic-hover-bg, var(--blue-500)); color: var(--card-ic-hover, #fff);}
.service h3 {color: var(--card-title, var(--ink));}
.service__link {display: block; color: inherit;}
@media (max-width: 1240px) {
.about__grid {grid-template-columns: 1fr; gap: 28px;}
.about__text {text-align: center;}
.about__text p {margin-inline: auto;}
}
@media (max-width: 1024px) {
.services {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 767px) {
.about {padding-top: 30px;}
.about__text {text-align: left;}
.services {grid-template-columns: 1fr 1fr; gap: 12px;}
.service {padding: 20px 10px 18px;}
.service h3 {font-size: 14.5px;}
.service p {display: none;}
}
.elementor-widget-sonay-intro {width: 100%;}
.service__ic .sonay-ic {font-size: var(--card-ic-size, 38px);}
.service__ic .ic {width: 38px; height: 38px; stroke-width: 1.6;}
.service:hover .service__ic .ic {width: 28px; height: 28px;}
.service__ic .ic {width: var(--card-ic-size, 38px); height: var(--card-ic-size, 38px);}
.service:hover .service__ic .ic {width: calc(var(--card-ic-size, 38px) * .72); height: calc(var(--card-ic-size, 38px) * .72);}