/* RMG Services 2026 1.2.1 2026-10-18: /services/ only. Nothing outside #rmgas .pills and .browse is touched. Fix 1: All Services buttons (All + 10 services): bigger, even, centred 5 + 6; phone All + 2 x 5. Fix 2: "Our services" cards show the exact All Services card icons. Fix 3: "Our services" cards in the faded top-card style with big icons using the page icon animation (Seion 7:40 PM). Fix 4: All Services card arrows always inside the card. */ /* ---- Fix 1: 11 buttons (All + 10 services), bigger, even, centred: desktop (1101px+) 5 on top + 6 below, full width, no gaps; tablet 'All' full width + 5 x 2; phone 'All' full width + 2 x 5 ---- */ #rmgsv #rmgas.svc .pills{display:grid!important;grid-template-columns:repeat(30,minmax(0,1fr));gap:12px!important;justify-content:center!important;align-items:stretch;flex-wrap:nowrap!important;overflow:visible!important;margin:0 auto 22px!important;padding:0!important} #rmgsv #rmgas.svc .pills .pill{grid-column:span 6} #rmgsv #rmgas.svc .pills .pill:nth-child(n+6){grid-column:span 5} #rmgsv #rmgas.svc .pills .pill,#rmgsv #rmgas.svc .pills .pill.on{width:100%;min-width:0;min-height:58px;justify-content:center;gap:10px;padding:8px 14px 8px 8px!important;font-size:15px;font-weight:600;flex:none!important;white-space:normal!important;text-align:left;line-height:1.2;overflow:hidden} #rmgsv #rmgas.svc .pills .pill .pl{min-width:0;overflow-wrap:normal;word-break:normal;hyphens:none} #rmgsv #rmgas .pills .pi{width:40px;height:40px} #rmgsv #rmgas .pills .pi svg{width:28px;height:28px} #rmgsv #rmgas .pills .pill-rs .pi{width:44px;height:40px} #rmgsv #rmgas .pills .pill-rs .pi svg{width:40px;height:30px} @media (max-width:1300px){#rmgsv #rmgas.svc .pills .pill,#rmgsv #rmgas.svc .pills .pill.on{font-size:14px;white-space:normal;line-height:1.2}} @media (min-width:821px) and (max-width:1100px){ #rmgsv #rmgas.svc .pills{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr} #rmgsv #rmgas.svc .pills .pill,#rmgsv #rmgas.svc .pills .pill:nth-child(n+6){grid-column:auto} #rmgsv #rmgas.svc .pills .pill:first-child{grid-column:1/-1} #rmgsv #rmgas.svc .pills .pill,#rmgsv #rmgas.svc .pills .pill.on{font-size:13.5px;gap:8px;padding:8px 10px 8px 8px!important} } @media (max-width:820px){ #rmgsv #rmgas.svc .pills{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px!important;padding-bottom:0!important} #rmgsv #rmgas.svc .pills .pill,#rmgsv #rmgas.svc .pills .pill:nth-child(n+6){grid-column:auto} #rmgsv #rmgas.svc .pills .pill:first-child{grid-column:1/-1;justify-content:center} #rmgsv #rmgas.svc .pills .pill,#rmgsv #rmgas.svc .pills .pill.on{min-height:52px;justify-content:flex-start;gap:7px;white-space:normal;text-align:left;line-height:1.2;padding:6px 8px 6px 6px!important;font-size:12.5px} #rmgsv #rmgas.svc .pills .pill .pl{overflow-wrap:normal;word-break:normal;hyphens:none} #rmgsv #rmgas.svc .pills .pill:first-child{justify-content:center} #rmgsv #rmgas .pills .pi{width:30px;height:30px} #rmgsv #rmgas .pills .pi svg{width:22px;height:22px} #rmgsv #rmgas .pills .pill-rs .pi{width:34px;height:30px} #rmgsv #rmgas .pills .pill-rs .pi svg{width:30px;height:23px} } /* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:900 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:900 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:900 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:900 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:900 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:900 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:900 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}/* ---- Fix 2 + 3 (Seion 7:40 PM): exact top-card icons on the bottom cards; faded top-card style; page icon animation ---- */ /* Bottom "Our services" cards (9): faded style of the top All Services cards (not blue), big icons with the page's icon animation (same keyframes/timing as the All Services buttons: bob 3.2s, shine sweep 5.5s, pop on hover). */ #rmgsv .o2 .browse .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:24px} #rmgsv .o2 .browse .row.cat{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:0;text-align:center;margin:0;padding:20px 16px 18px;background:linear-gradient(180deg,#fbfdff,#f3f7fd);border:1px solid #e3ebf6;border-radius:14px;box-shadow:0 4px 14px #1a3c6a0d;color:#1A1B1E;text-decoration:none!important;font-family:'Red Hat Text',sans-serif;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} #rmgsv .o2 .browse .row.cat::before,#rmgsv .o2 .browse .row.cat::after{content:none!important;display:none!important} #rmgsv .o2 .browse .row.cat:hover,#rmgsv .o2 .browse .row.cat:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px #1f6fe022;border-color:#d3e2f4} #rmgsv .o2 .browse .row.cat .il{position:relative;overflow:hidden;flex:none;width:124px!important;height:124px!important;min-height:0!important;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#eef4ff,#e3ecfa)!important;box-shadow:none;transition:box-shadow .25s} #rmgsv .o2 .browse .row.cat .il::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffffb3,transparent);transform:skewX(-18deg);animation:rmgas-mmShine 5.5s ease-in-out infinite;pointer-events:none;z-index:1} #rmgsv .o2 .browse .row.cat .il svg{position:relative;display:block;width:92px!important;height:92px!important;max-width:none;padding:0;background:none;box-shadow:none;border-radius:0;transform-origin:50% 60%;animation:rmgas-mmBob 3.2s ease-in-out infinite!important} #rmgsv .o2 .browse .row.cat:nth-child(3n+2) .il svg{animation-delay:-1.1s!important} #rmgsv .o2 .browse .row.cat:nth-child(3n) .il svg{animation-delay:-2.2s!important} #rmgsv .o2 .browse .row.cat:nth-child(n+5) .il::before{animation-delay:.6s} #rmgsv .o2 .browse .row.cat:nth-child(n+9) .il::before{animation-delay:1.2s} #rmgsv .o2 .browse .row.cat:hover .il svg,#rmgsv .o2 .browse .row.cat:focus-visible .il svg{animation:rmgas-mmPop .7s cubic-bezier(.3,1.6,.5,1) both!important} #rmgsv .o2 .browse .row.cat:hover .il{box-shadow:0 4px 10px #1f6fe033} #rmgsv .o2 .browse .row.cat .il .float{animation:rmgas-fl 3s ease-in-out infinite} #rmgsv .o2 .browse .row.cat .il g{transform-box:fill-box;transform-origin:center} #rmgsv .o2 .browse .row.cat:hover .il .a-pulse{animation:rs-pulse .8s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-spin{animation:rs-spin 1.1s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat:hover .il .a-draw path{animation:rs-draw .9s cubic-bezier(.2,.8,.2,1)} #rmgsv .o2 .browse .row.cat .rb{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;flex:1;padding:14px 2px 0;margin:0} #rmgsv .o2 .browse .row.cat .rt{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px} #rmgsv .o2 .browse .row.cat .kicker{font:700 12.5px/1.2 'Red Hat Text',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#FE4C1C} #rmgsv .o2 .browse .row.cat .tag{display:inline-flex;white-space:nowrap;border-radius:999px;padding:3px 11px;font:700 12px/1.3 'Red Hat Text',sans-serif} #rmgsv .o2 .browse .row.cat .tag.c{background:#E3F6EA;color:#11643A} #rmgsv .o2 .browse .row.cat .tag.q{background:#FFE9DF;color:#A3300C} #rmgsv .o2 .browse .row.cat h3{margin:2px 0 0;font:800 22px/1.15 'Red Hat Display',sans-serif;letter-spacing:normal;color:#1A1B1E;text-transform:none} #rmgsv .o2 .browse .row.cat p{margin:0;font-size:14px;line-height:1.45;font-weight:400;color:#5b6472} #rmgsv .o2 .browse .row.cat .sub{font-weight:700;font-size:14px;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pkn{font-size:13.5px!important;color:#1A1B1E!important} #rmgsv .o2 .browse .row.cat .pkn b{color:#1a6be3} #rmgsv .o2 .browse .row.cat .rmgos-slot{width:100%;padding:12px;border:2px dashed #b9cbe4;border-radius:12px;background:#fff;color:#5b6472;font-style:italic} #rmgsv .o2 .browse .row.cat .rf{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;width:100%;margin-top:auto;padding-top:12px} #rmgsv .o2 .browse .row.cat .pr{display:block;text-align:center;font:900 30px/1.1 'Red Hat Display',sans-serif;color:#1A1B1E} #rmgsv .o2 .browse .row.cat .pr small{font:500 13px/1.2 'Red Hat Text',sans-serif;color:#5b6472} #rmgsv .o2 .browse .row.cat .rf .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid #dbe4ef;border-radius:999px;background:#fff;color:#1a6be3;font:700 16px/1.2 'Red Hat Display',sans-serif;text-align:center;box-shadow:none;transition:background .25s,color .25s,border-color .25s} #rmgsv .o2 .browse .row.cat:hover .rf .btn{background:#1a6be3;border-color:#1a6be3;color:#fff} @media (max-width:1100px){#rmgsv .o2 .browse .rows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:820px){#rmgsv .o2 .browse .rows{grid-template-columns:1fr;gap:14px}#rmgsv .o2 .browse .row.cat .il{width:104px!important;height:104px!important}#rmgsv .o2 .browse .row.cat .il svg{width:78px!important;height:78px!important}#rmgsv .o2 .browse .row.cat h3{font-size:20px}#rmgsv .o2 .browse .row.cat p{display:block}#rmgsv .o2 .browse .row.cat .pr{font-size:26px}} @media (prefers-reduced-motion:reduce){#rmgsv .o2 .browse .row.cat,#rmgsv .o2 .browse .row.cat .rf .btn{transition:none}#rmgsv .o2 .browse .row.cat:hover{transform:none}#rmgsv .o2 .browse .row.cat .il::before{display:none}#rmgsv .o2 .browse .row.cat .il svg,#rmgsv .o2 .browse .row.cat .il .float,#rmgsv .o2 .browse .row.cat .il g,#rmgsv .o2 .browse .row.cat .il path{animation:none!important}} /* ---- Fix 4 (Seion 7:40 PM): All Services card arrows stay inside every card. Cause: rmgas.css sets .card h4{white-space:nowrap}, so long titles (Media Planning & Buying, Web Hosting & Domains) pushed the round arrow to/over the card edge at 1101-1440px. Titles may now wrap; the text column shrinks, the arrow never does. */ #rmgsv #rmgas .cards .card{overflow:hidden} #rmgsv #rmgas .card>span:not(.ic):not(.rb){flex:1 1 auto;min-width:0} #rmgsv #rmgas .card h4{white-space:normal;overflow-wrap:anywhere;line-height:1.2} #rmgsv #rmgas .card .rb{flex:0 0 30px;margin-left:auto}