/* Sare3.Me - content additions
   - "AI Visualizer" service card (4th card, clone of the Graphic Design card rules)
   - Services "Card Container" layout for 4 cards
   - "AI Visualizer" radio option in the contact form
   Loaded after Framer's own CSS. Everything is scoped under .framer-V7Ipc (page root);
   layout overrides use one extra class of specificity so they also win over any
   styles Framer injects at runtime. */

/* ---------- AI Visualizer service card (copy of .framer-1r3wtkb & children) ---------- */
.framer-V7Ipc .framer-s3ai-card{will-change:var(--framer-will-change-effect-override,transform);border-radius:12px;flex-flow:column;flex:1 0 0;place-content:flex-start;align-items:flex-start;gap:54px;width:1px;height:432px;padding:30px 40px;display:flex;position:relative;overflow:hidden}
.framer-V7Ipc .framer-s3ai-icon{flex:none;width:62px;height:62px;position:relative}
.framer-V7Ipc .framer-s3ai-glow{will-change:var(--framer-will-change-override,transform);z-index:-1;background:linear-gradient(#00ff004a 0%,#0f00 100%);border-radius:12px;flex:none;position:absolute;inset:2px;overflow:hidden}
.framer-V7Ipc .framer-s3ai-bg{will-change:var(--framer-will-change-override,transform);z-index:-1;background:linear-gradient(#00ff004a 0%,#0f00 100%);border-radius:12px;flex:none;position:absolute;inset:0;overflow:hidden}
.framer-V7Ipc .framer-s3ai-body{flex-flow:column;flex:none;place-content:flex-start;align-items:flex-start;gap:24px;width:100%;height:min-content;padding:0;display:flex;position:relative;overflow:visible}
.framer-V7Ipc .framer-s3ai-title{--framer-paragraph-spacing:0px;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;flex:none;width:326px;height:auto;position:relative}
.framer-V7Ipc .framer-s3ai-desc{--framer-paragraph-spacing:0px;opacity:.8;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;flex:none;width:100%;height:auto;position:relative}
@media (min-width:1200px) and (max-width:1439.98px){
  .framer-V7Ipc .framer-s3ai-card{flex:none;place-self:start;width:100%;height:min-content;padding:30px 40px 40px}
}
@media (min-width:810px) and (max-width:1199.98px){
  .framer-V7Ipc .framer-s3ai-card{flex:none;width:100%;height:min-content;padding:30px 40px 79px}
}
@media (max-width:809.98px){
  .framer-V7Ipc .framer-s3ai-card{flex:none;width:100%}
}

/* ---------- Services "Card Container": 4 cards ----------
   >= 1800px : 4 equal columns in one row
   810-1799px: balanced 2 x 2 grid, equal-height cards
   < 810px   : unchanged Framer layout (cards stacked full width) */
@media (min-width:810px){
  .framer-V7Ipc .framer-pkbz9v .framer-1baq6r5{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:1fr;align-content:start;align-items:stretch;justify-items:stretch;gap:27px;height:min-content}
  .framer-V7Ipc .framer-1baq6r5>.framer-1ozzjti,
  .framer-V7Ipc .framer-1baq6r5>.framer-1pi339l,
  .framer-V7Ipc .framer-1baq6r5>.framer-1r3wtkb,
  .framer-V7Ipc .framer-1baq6r5>.framer-s3ai-card{flex:none;place-self:stretch;width:auto;min-width:0;height:auto;min-height:0;padding:36px 40px 40px}
  .framer-V7Ipc .framer-1baq6r5 .framer-brg512,
  .framer-V7Ipc .framer-1baq6r5 .framer-1ybvzid,
  .framer-V7Ipc .framer-1baq6r5 .framer-5615h8,
  .framer-V7Ipc .framer-1baq6r5 .framer-s3ai-title{width:100%;max-width:100%}
}
@media (min-width:810px) and (max-width:1199.98px){
  .framer-V7Ipc .framer-pkbz9v .framer-1baq6r5{gap:24px}
  .framer-V7Ipc .framer-1baq6r5>.framer-1ozzjti,
  .framer-V7Ipc .framer-1baq6r5>.framer-1pi339l,
  .framer-V7Ipc .framer-1baq6r5>.framer-1r3wtkb,
  .framer-V7Ipc .framer-1baq6r5>.framer-s3ai-card{gap:40px;padding:30px 32px 36px}
}
/* the 2 x 2 grid makes the section taller; keep the big decorative "Group 14" graphic
   where it sat before (Framer centres it vertically in the section at >= 1440px:
   calc(50% - 352px) of the original 926px-tall section = 111px from the section top) */
@media (min-width:1440px) and (max-width:1799.98px){
  .framer-V7Ipc .framer-pkbz9v .framer-fvz51q{top:111px}
}
@media (min-width:1800px){
  .framer-V7Ipc .framer-pkbz9v .framer-1baq6r5{grid-template-columns:repeat(4,minmax(0,1fr))}
  .framer-V7Ipc .framer-1baq6r5>.framer-1ozzjti,
  .framer-V7Ipc .framer-1baq6r5>.framer-1pi339l,
  .framer-V7Ipc .framer-1baq6r5>.framer-1r3wtkb,
  .framer-V7Ipc .framer-1baq6r5>.framer-s3ai-card{padding:32px 32px 40px}
}

/* ---------- Contact form: 4th radio option (copy of .framer-1yalubh / .framer-mss2n2 / .framer-om33af) ---------- */
.framer-V7Ipc .framer-s3ai-rlabel{flex-flow:row;flex:none;place-content:center flex-start;align-items:center;gap:10px;width:100%;height:min-content;padding:0;display:flex;position:relative}
.framer-V7Ipc .framer-s3ai-rinput{--framer-input-background:#bbb3;--framer-input-boolean-checked-background:#fff;--framer-input-boolean-checked-border-color:#09f;--framer-input-boolean-checked-border-style:solid;--framer-input-boolean-checked-border-width:1px;--framer-input-boolean-checked-box-shadow:inset 0px 0px 0px 5px #09f;--framer-input-border-bottom-width:1px;--framer-input-border-color:#8883;--framer-input-border-left-width:1px;--framer-input-border-radius-bottom-left:8px;--framer-input-border-radius-bottom-right:8px;--framer-input-border-radius-top-left:8px;--framer-input-border-radius-top-right:8px;--framer-input-border-right-width:1px;--framer-input-border-style:solid;--framer-input-border-top-width:1px;--framer-input-focused-border-color:#09f;--framer-input-focused-border-style:solid;--framer-input-focused-border-width:1px;--framer-input-icon-mask-image:none;aspect-ratio:1;flex:none;width:16px;height:auto;position:relative}
.framer-V7Ipc .framer-s3ai-rtext{-webkit-user-select:none;user-select:none;white-space:pre;flex:none;width:auto;height:auto;position:relative}

/* ---------- Projects grid order at 1200-1439px ----------
   Framer re-orders the six project slots with `order` at this breakpoint only
   (n3hleu 3, 1dsy50a 2, 1wz1sog 4, 8ndcji 5). The slots' contents were swapped
   (n3hleu = AI VISUALIZER, 1dsy50a = GRAPHIC DESIGN), so restore DOM order here:
   top row 3D VISUALS, VIDEO EDITING, AI VISUALIZER;
   bottom row GRAPHIC DESIGN, LYRIC VIDEOS, MOTION GRAPHICS.
   .ssr-variant wrappers are display:contents, so `order` applies to the containers. */
@media (min-width:1200px) and (max-width:1439.98px){
  .framer-V7Ipc .framer-g4dmk .framer-1l3425l-container{order:0}
  .framer-V7Ipc .framer-g4dmk .framer-1a2mhiz-container{order:1}
  .framer-V7Ipc .framer-g4dmk .framer-n3hleu-container{order:2}
  .framer-V7Ipc .framer-g4dmk .framer-1dsy50a-container{order:3}
  .framer-V7Ipc .framer-g4dmk .framer-8ndcji-container{order:4}
  .framer-V7Ipc .framer-g4dmk .framer-1wz1sog-container{order:5}
}

/* ---------- Projects: equal-height cards ----------
   Each card now carries its own description, so text lengths differ. The grid rows are
   already equal (Framer: grid-auto-rows minmax(0,1fr)) and the slot containers fill them;
   let the card fill its slot too so the boxes in a row line up. */
.framer-V7Ipc .framer-g4dmk .framer-5WPmK.framer-1vg5y79{height:100%}
/* on phones Framer gives only the Video Editing slot height:auto, which leaves a gap
   under that card now that the rows are as tall as the longest description */
@media (max-width:809.98px){
  .framer-V7Ipc .framer-g4dmk .framer-1a2mhiz-container{height:100%}
}