/* ============================================================
   CENTERSPREAD v6.2 — BALANCED HOMEPAGE HERO SERVICE CARDS
============================================================ */

/*
 * Make ALL seven floating service cards more compact and balanced.
 * The six original Framer cards keep their existing positions except
 * for the lower row, which is explicitly rebalanced.
 */
.cs-home-v11 .framer-exact-header-hero :is(
  .framer-2tymdc,
  .framer-dgrhzh,
  .framer-ayeqck,
  .framer-1mlaead,
  .framer-1yhb5ft,
  .framer-ifqd6m,
  .cs-home-uiux-card
){
  border-radius:15px !important;
  box-shadow:0 11px 26px rgba(33,26,48,.10) !important;
}

/* Existing 6 cards: tighten width/padding/type */
.cs-home-v11 .framer-exact-header-hero :is(
  .framer-2tymdc,
  .framer-dgrhzh,
  .framer-ayeqck,
  .framer-1mlaead,
  .framer-1yhb5ft,
  .framer-ifqd6m
){
  width:148px !important;
  padding:15px !important;
  gap:9px !important;
}

/* Original service-card titles */
.cs-home-v11 .framer-exact-header-hero :is(
  .framer-8i4tl6,
  .framer-at3rd6,
  .framer-11ojdcz,
  .framer-xrk85k,
  .framer-nawetz,
  .framer-9xt004
) p{
  font-size:16px !important;
  line-height:1.05 !important;
}

/* Original service-card descriptions */
.cs-home-v11 .framer-exact-header-hero :is(
  .framer-1e6hf1v,
  .framer-111linb,
  .framer-17zh1ee,
  .framer-1ak7c7e,
  .framer-b5kj7f,
  .framer-igq89n
) p{
  font-size:12.5px !important;
  line-height:1.35 !important;
}

/* Smaller existing icons */
.cs-home-v11 .framer-exact-header-hero :is(
  .framer-gk6ty2,
  .framer-1n0yg87,
  .framer-1hqs0aa,
  .framer-esly54,
  .framer-13l1fkx,
  .framer-axfu5m
){
  transform:scale(.9);
  transform-origin:left top;
}

/* Website UI/UX card matches the reduced size exactly. */
.cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
  z-index:4;
  width:148px !important;
  min-width:148px !important;
  padding:15px !important;
  gap:9px !important;
  background:#fff;
  border:1px solid rgba(24,26,34,.05);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  position:absolute;
  left:50% !important;
  bottom:10px !important;
  transform:translateX(-50%);
}

.cs-home-v11 .framer-exact-header-hero .cs-home-uiux-icon{
  width:27px;
  height:27px;
  color:#91298b;
}

.cs-home-v11 .framer-exact-header-hero .cs-home-uiux-title p{
  margin:0;
  color:#1a1b23;
  font-size:16px;
  font-weight:700;
  line-height:1.05;
  white-space:nowrap;
}

.cs-home-v11 .framer-exact-header-hero .cs-home-uiux-description{
  width:116px;
}

.cs-home-v11 .framer-exact-header-hero .cs-home-uiux-description p{
  margin:0;
  color:#535967;
  font-size:12.5px;
  font-weight:400;
  line-height:1.35;
}

/* ------------------------------------------------------------
   DESKTOP — explicit lower 3-card row with no overlap
------------------------------------------------------------ */
@media(min-width:1200px){
  .cs-home-v11 .framer-exact-header-hero .framer-1yhb5ft{
    width:148px !important;
    left:20px !important;
    right:auto !important;
    bottom:10px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    width:148px !important;
    left:50% !important;
    bottom:10px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-ifqd6m{
    width:148px !important;
    right:20px !important;
    left:auto !important;
    bottom:10px !important;
  }
}

/* ------------------------------------------------------------
   TABLET — slightly smaller 3-card lower row
------------------------------------------------------------ */
@media(min-width:810px) and (max-width:1199.98px){
  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-2tymdc,
    .framer-dgrhzh,
    .framer-ayeqck,
    .framer-1mlaead,
    .framer-1yhb5ft,
    .framer-ifqd6m,
    .cs-home-uiux-card
  ){
    width:132px !important;
    min-width:132px !important;
    padding:12px !important;
    gap:7px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-1yhb5ft{
    left:12px !important;
    right:auto !important;
    bottom:8px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    left:50% !important;
    bottom:8px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-ifqd6m{
    right:12px !important;
    left:auto !important;
    bottom:8px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-title p{
    font-size:14px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-description{
    width:104px;
  }

  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-description p{
    font-size:11px !important;
  }
}

/* ------------------------------------------------------------
   MOBILE — 3-card lower row, titles only, no overlap
------------------------------------------------------------ */
@media(max-width:809.98px){
  .cs-home-v11 .framer-exact-header-hero .framer-rfogp2{
    height:525px !important;
  }

  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-2tymdc,
    .framer-dgrhzh,
    .framer-ayeqck,
    .framer-1mlaead
  ){
    width:116px !important;
    padding:10px !important;
  }

  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-1yhb5ft,
    .framer-ifqd6m,
    .cs-home-uiux-card
  ){
    width:96px !important;
    min-width:96px !important;
    min-height:82px !important;
    padding:8px !important;
    gap:5px !important;
    bottom:10px !important;
    border-radius:12px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-1yhb5ft{
    left:4px !important;
    right:auto !important;
  }

  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    left:50% !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-ifqd6m{
    right:4px !important;
    left:auto !important;
  }

  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-13l1fkx,
    .framer-axfu5m,
    .cs-home-uiux-icon
  ){
    width:21px !important;
    height:21px !important;
  }

  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-nawetz,
    .framer-9xt004
  ) p,
  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-title p{
    font-size:11px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-b5kj7f,
    .framer-igq89n,
    .cs-home-uiux-description
  ){
    display:none !important;
  }
}

@media(max-width:370px){
  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-1yhb5ft,
    .framer-ifqd6m,
    .cs-home-uiux-card
  ){
    width:90px !important;
    min-width:90px !important;
    padding:7px !important;
  }

  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-nawetz,
    .framer-9xt004
  ) p,
  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-title p{
    font-size:10px !important;
  }
}

/* Keep the subtle floating animation, with only vertical movement. */
@keyframes csHomeUiuxFloatV62{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-5px)}
}

.cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
  animation:csHomeUiuxFloatV62 6s ease-in-out infinite;
}

@media(prefers-reduced-motion:reduce){
  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    animation:none !important;
    transform:translateX(-50%) !important;
  }
}


/* ============================================================
   V6.3 — CENTER WEBSITE UI/UX CARD
============================================================ */

/*
 * Position the lower three cards as an evenly spaced row.
 * Website UI/UX is locked to the exact horizontal center.
 */
@media(min-width:1200px){
  .cs-home-v11 .framer-exact-header-hero .framer-1yhb5ft{
    left:7% !important;
    right:auto !important;
    bottom:10px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    left:50% !important;
    right:auto !important;
    bottom:10px !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-ifqd6m{
    right:7% !important;
    left:auto !important;
    bottom:10px !important;
  }
}

/*
 * Tablet: keep the same visual center while allowing slightly
 * tighter side spacing.
 */
@media(min-width:810px) and (max-width:1199.98px){
  .cs-home-v11 .framer-exact-header-hero .framer-1yhb5ft{
    left:5% !important;
    right:auto !important;
  }

  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-ifqd6m{
    right:5% !important;
    left:auto !important;
  }
}

/*
 * Mobile: center remains exact even when the side cards reduce.
 */
@media(max-width:809.98px){
  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
  }
}

/* Preserve the vertical floating motion around the exact center point. */
@keyframes csHomeUiuxFloatV63{
  0%,100%{
    transform:translateX(-50%) translateY(0);
  }
  50%{
    transform:translateX(-50%) translateY(-5px);
  }
}

.cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
  animation:csHomeUiuxFloatV63 6s ease-in-out infinite !important;
}

@media(prefers-reduced-motion:reduce){
  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    animation:none !important;
    transform:translateX(-50%) !important;
  }
}


/* ============================================================
   V10.4 — HOMEPAGE HERO CARD SIZE + AI AUTOMATION TEXT FIX
   Only affects the floating hero service cards.
============================================================ */

@media(min-width:1200px){

  /* Slightly larger service cards */
  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-2tymdc,
    .framer-dgrhzh,
    .framer-ayeqck,
    .framer-1mlaead,
    .framer-1yhb5ft,
    .framer-ifqd6m,
    .cs-home-uiux-card
  ){
    width:162px !important;
    min-width:162px !important;
    padding:17px !important;
    gap:10px !important;
    border-radius:17px !important;
  }

  /* Titles */
  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-8i4tl6,
    .framer-at3rd6,
    .framer-11ojdcz,
    .framer-xrk85k,
    .framer-nawetz,
    .framer-9xt004
  ) p,
  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-title p{
    font-size:17px !important;
    line-height:1.08 !important;
  }

  /* All descriptions get the full available card width */
  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-1e6hf1v,
    .framer-111linb,
    .framer-t9n5vw,
    .framer-1awqfut,
    .framer-b5kj7f,
    .framer-igq89n,
    .cs-home-uiux-description
  ){
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-1e6hf1v,
    .framer-111linb,
    .framer-t9n5vw,
    .framer-1awqfut,
    .framer-b5kj7f,
    .framer-igq89n,
    .cs-home-uiux-description
  ) p{
    width:100% !important;
    max-width:100% !important;
    font-size:13px !important;
    line-height:1.38 !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }

  /* AI Automation needs a little more vertical room */
  .cs-home-v11 .framer-exact-header-hero .framer-ayeqck{
    min-height:142px !important;
    overflow:visible !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-t9n5vw{
    flex:none !important;
    height:auto !important;
  }

  /* Website UI/UX follows the same larger dimensions */
  .cs-home-v11 .framer-exact-header-hero .cs-home-uiux-card{
    width:162px !important;
    min-width:162px !important;
  }
}

/* Tablet: modest increase without disturbing the layout */
@media(min-width:810px) and (max-width:1199.98px){
  .cs-home-v11 .framer-exact-header-hero :is(
    .framer-2tymdc,
    .framer-dgrhzh,
    .framer-ayeqck,
    .framer-1mlaead,
    .framer-1yhb5ft,
    .framer-ifqd6m,
    .cs-home-uiux-card
  ){
    width:140px !important;
    min-width:140px !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-t9n5vw{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
  }

  .cs-home-v11 .framer-exact-header-hero .framer-t9n5vw p{
    white-space:normal !important;
    overflow-wrap:break-word !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
  }
}