/* Theme Name: Rank-Brew Child Theme URI: https://rank-brew.com/ Description: Astra child theme for Rank-Brew. Header, Hero, Services, Footer, the mega menu and the floating Book-a-Call button are fully editable through ACF Pro (Theme Settings). Everything between Services and the Footer is built with Elementor. Author: Rank-Brew Author URI: https://rank-brew.com/ Template: astra Version: 1.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: rankbrew */ /* ========================================================================== FONTS (CDN). Also enqueued from functions.php; the browser de-dupes the URL. @import must stay above every rule below. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Fragment+Mono&display=swap'); /* ========================================================================== 1. DESIGN VARIABLES — every value the theme uses lives here. Namespaced --rb-* so nothing collides with Astra (--ast-*) or Elementor (--e-global-*). The ACF colour/typography pickers simply re-declare these same names, so the site is never unstyled. ========================================================================== */ :root { /* colours */ --rb-accent: #6d3ef0; --rb-accent-2: #9d8bff; --rb-accent-soft: #e4dcff; --rb-logo-2: #008bd7; --rb-ink: #111114; --rb-ink-2: #55555e; --rb-bg: #ffffff; --rb-bg-gray: #f1f1f1; --rb-line: rgba(0, 0, 0, .1); --rb-dark: #0a0a0c; /* fonts — always used as font-family (never the `font:` shorthand) */ --rb-font-heading: 'Geist', system-ui, -apple-system, sans-serif; --rb-font-body: 'Geist', system-ui, -apple-system, sans-serif; --rb-font-mono: 'Fragment Mono', ui-monospace, monospace; /* metrics */ --rb-container: 1440px; --rb-gutter: 40px; /* header (overridden from ACF) */ --rb-header-bg: rgba(255, 255, 255, .85); --rb-header-blur: 16px; --rb-header-color: #111114; --rb-headcta-bg: #0a0a0c; --rb-headcta-color: #ffffff; --rb-logo-w: 150px; /* notice bar */ --rb-notice-bg: linear-gradient(90deg, #f6e7b2, #f6c9d4 45%, #aebdf2); --rb-notice-color: #111114; /* hero */ --rb-hero-bg-image: none; --rb-hero-overlay: 0; /* footer */ --rb-footer-bg: #000000; --rb-footer-color: #ffffff; --rb-footer-muted: #8a8a92; --rb-footer-soft: #d5d5da; --rb-footer-rule: rgba(255, 255, 255, .2); --rb-footer-rule-soft: rgba(255, 255, 255, .14); /* booking */ --rb-book-bg: #0a0a0c; --rb-book-color: #ffffff; --rb-book-popup-bg: #ffffff; --rb-book-bottom: 20px; --rb-book-right: 20px; } /* ========================================================================== 2. BASE — scoped to our own sections only, so Elementor content is untouched. Every selector below is prefixed with .rb-theme (added to ), which gives 2 classes of specificity and therefore outranks Elementor's global kit rules such as `.elementor-kit-123 h1 {}`. ========================================================================== */ html { overflow-x: hidden; } button:focus, .menu-toggle:hover, button:hover, .ast-button:hover, .ast-custom-button:hover .button:hover, .ast-custom-button:hover, input[type=reset]:hover, input[type=reset]:focus, input#submit:hover, input#submit:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus, body .wp-block-file .wp-block-file__button:hover, body .wp-block-file .wp-block-file__button:focus { color: initial !important; background-color: initial !important; border-color: initial !important; } .rb-theme .rb-page, .rb-theme .rb-footer, .rb-theme .rb-overlay, .rb-theme .rb-floatcta, .rb-theme .rb-modal { box-sizing: border-box; } .rb-theme .rb-page *, .rb-theme .rb-footer *, .rb-theme .rb-overlay *, .rb-theme .rb-floatcta *, .rb-theme .rb-modal * { box-sizing: border-box; } .rb-theme .rb-page a, .rb-theme .rb-footer a, .rb-theme .rb-overlay a, .rb-theme .rb-floatcta a { text-decoration: none; } .rb-theme ::selection { background: var(--rb-accent); color: #fff; } /* shared container */ .rb-theme .rb-wrap { max-width: var(--rb-container); width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--rb-gutter); padding-right: var(--rb-gutter); } /* the scrolling page above the fixed footer */ .rb-theme .rb-page { position: relative; z-index: 2; background: var(--rb-bg); box-shadow: 0 40px 120px rgba(0, 0, 0, .5); margin-bottom: 100vh; } figure.rb-cs2-shot { box-shadow: none; } /* ========================================================================== 3. PRISM BLOB ========================================================================== */ .rb-theme .rb-prism { position: absolute; top: 50vh; right: 20px; width: 700px; height: 700px; margin-top: -300px; pointer-events: none; z-index: 1; will-change: transform; } .rb-theme .rb-prism-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 45% 40%, rgba(196, 181, 253, .55) 0%, rgba(249, 196, 215, .42) 45%, rgba(253, 230, 180, .32) 65%, rgba(255, 255, 255, 0) 82%); filter: blur(38px); } .rb-theme .rb-prism-spin { position: absolute; inset:9%; will-change: transform; } /* ========================================================================== 4. BUTTONS (exact values from the design) ========================================================================== */ .rb-theme .rb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 28px; border: 0; border-radius: 100px; cursor: pointer; font-family: var(--rb-font-mono) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; transition: background .3s ease, color .3s ease, border-color .3s ease; } .rb-theme .rb-btn-dark { background: var(--rb-dark); color: #fff !important; } .rb-theme .rb-btn-dark:hover { background: var(--rb-accent); color: #fff !important; } .rb-theme .rb-btn-ghost { background: #fff; color: var(--rb-ink) !important; border: 1px solid var(--rb-line); } .rb-theme .rb-btn-ghost:hover { border-color: var(--rb-accent); color: var(--rb-accent) !important; } .rb-theme .rb-btn-accent { background: var(--rb-accent); color: #fff !important; } .rb-theme .rb-btn-accent:hover { background: #fff; color: #000 !important; } .rb-theme .rb-btn-white { background: #fff; color: #000 !important; } .rb-theme .rb-btn-white:hover { background: var(--rb-accent); color: #fff !important; } .rb-theme .rb-btn-sm { padding: 13px 24px; font-size: 12.5px !important; } /* ========================================================================== 5. LOGO (badge + wordmark) ========================================================================== */ .rb-theme .rb-logo { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .rb-theme .rb-logo-img { display: block; height: auto; max-width: var(--rb-logo-w); } .rb-theme .rb-logo-badge { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--rb-accent), var(--rb-logo-2)); display: inline-flex; align-items: center; justify-content: center; color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; } .rb-theme .rb-logo-word { font-family: var(--rb-font-heading) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -.02em !important; color: var(--rb-header-color) !important; } .rb-theme .rb-logo-word-light { color: #fff !important; } /* ========================================================================== 6. NOTICE / TOP BAR ========================================================================== */ .rb-theme .rb-notice { background: linear-gradient(90deg, #f6e7b2, #f3c9d8 40%, #b9a8f5); text-align: center; padding: 12px 20px; font-family: var(--rb-font-mono) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--rb-dark) !important; } .rb-theme .rb-notice a { color: var(--rb-dark) !important; } /* ========================================================================== 7. HEADER ========================================================================== */ .rb-theme .rb-header { position: sticky; top: 0; z-index: 30; background: var(--rb-header-bg); -webkit-backdrop-filter: blur(var(--rb-header-blur)); backdrop-filter: blur(var(--rb-header-blur)); color: var(--rb-header-color); } .rb-theme .rb-header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; } .rb-theme .rb-header-right { display: flex; align-items: center; gap: 12px; } /* nav pills */ .rb-theme .rb-nav { display: flex; align-items: center; } .rb-theme .rb-menu { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .rb-theme .rb-menu > li { position: relative; } .rb-theme .rb-pill { display: inline-flex; align-items: center; gap: 4px; padding: 10px 18px; background: var(--rb-bg-gray); border: 0; border-radius: 100px; cursor: pointer; white-space: nowrap; color: var(--rb-ink) !important; font-family: var(--rb-font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important; transition: background .25s ease, color .25s ease; } .rb-theme .rb-pill:hover, .rb-theme .rb-has-mega.is-open > .rb-pill, .rb-theme .rb-has-drop.is-open > .rb-pill { background: var(--rb-accent-soft); color: var(--rb-accent) !important; } .rb-theme .rb-caret { font-size: 12px !important; line-height: 1 !important; transition: transform .25s ease; } .rb-theme .rb-has-mega.is-open .rb-caret, .rb-theme .rb-has-drop.is-open .rb-caret { transform: rotate(180deg); } /* header CTA */ .rb-theme .rb-headcta { display: inline-flex; align-items: center; padding: 12px 24px; border-radius: 100px; background: var(--rb-headcta-bg); color: var(--rb-headcta-color) !important; font-family: var(--rb-font-mono) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; transition: background .3s ease, color .3s ease; } .rb-theme .rb-headcta:hover { background: var(--rb-accent); color: #fff !important; } /* burger */ .rb-theme .rb-burger { display: none; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; width: 36px; height: 36px; padding: 0 5px; background: #fff; cursor: pointer; } .rb-theme .rb-burger span { display: block; height: 2.5px; background: var(--rb-ink); } .rb-theme .rb-burger span:nth-child(1) { width: 28px; } .rb-theme .rb-burger span:nth-child(2) { width: 16px; } /* ========================================================================== 8. SIMPLE DROPDOWN ========================================================================== */ .rb-theme .rb-drop { position: absolute; top: calc(100% + 12px); left: 0; min-width: 230px; padding: 10px; margin: 0; list-style: none; background: #fff; border: 1px solid var(--rb-line); border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 40; } .rb-theme .rb-has-drop:hover .rb-drop, .rb-theme .rb-has-drop.is-open .rb-drop { opacity: 1; visibility: visible; transform: translateY(0); } .rb-theme .rb-drop a { display: block; padding: 11px 13px; border-radius: 11px; color: var(--rb-ink) !important; font-family: var(--rb-font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.35 !important; transition: background .2s ease, color .2s ease; } .rb-theme .rb-drop a:hover { background: var(--rb-accent-soft); color: var(--rb-accent) !important; } /* ========================================================================== 9. MEGA MENU (desktop) — redesigned: promo card + auto-fitting category grid ========================================================================== */ .rb-theme .rb-mega { position: fixed; top: calc(100% + 14px); left: 50%; width: min(1240px, calc(100vw - 48px)); max-height: calc(100vh - 170px); overflow-y: auto; padding: 30px; background: #fff; border: 1px solid var(--rb-line); border-radius: 24px; box-shadow: 0 40px 90px rgba(20, 10, 60, .16); display: grid; grid-template-columns: 290px 1fr; gap: 30px; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity .26s ease, transform .26s ease, visibility .26s; z-index: 40; } .rb-theme .rb-has-mega:hover .rb-mega, .rb-theme .rb-has-mega.is-open .rb-mega { opacity: 1; visibility: visible; } .rb-theme .rb-mega-noprom { grid-template-columns: 1fr; } /* promo card */ .rb-theme .rb-mega-promo { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 18px; background: linear-gradient(160deg, var(--rb-accent-soft), #ffffff 70%); border: 1px solid var(--rb-line); } .rb-theme .rb-mega-promo-title { margin: 0; color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -.015em !important; } .rb-theme .rb-mega-promo-text { margin: 0; color: var(--rb-ink-2) !important; font-family: var(--rb-font-body) !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.6 !important; } .rb-theme .rb-mega-promo-btn { align-self: flex-start; } .rb-theme .rb-mega-promo-img { display: block; width: 100%; margin-top: auto; border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; } /* category columns */ .rb-theme .rb-mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 28px; align-items: start; } .rb-theme .rb-mega-col { min-width: 0; margin-bottom: 16px; } .rb-theme .rb-mega-heading { display: block; position: relative; margin: 0 0 14px; padding-bottom: 10px; color: var(--rb-accent) !important; font-family: var(--rb-font-mono) !important; font-size: 13px !important; text-transform: uppercase !important; font-weight: 300 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; } .rb-theme .rb-mega-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; border-radius: 2px; background: var(--rb-accent); } .rb-theme a.rb-mega-heading:hover { color: var(--rb-ink) !important; } .rb-theme .rb-mega-list { list-style: none; margin: 0; padding: 0; } .rb-theme .rb-mega-list a { display: block; padding: 7px 0; color: var(--rb-ink) !important; font-family: var(--rb-font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.45 !important; transition: color .2s ease, transform .2s ease; } .rb-theme .rb-mega-list a:hover { color: var(--rb-accent) !important; transform: translateX(3px); } /* mega footer row */ .rb-theme .rb-mega-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; padding-top: 20px; border-top: 1px solid var(--rb-line); } /* ========================================================================== 10. MOBILE OVERLAY (multi-panel: main list -> sub panel with back arrow) ========================================================================== */ .rb-theme .rb-overlay { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--rb-dark); color: #fff; transform: translateY(-100%); transition: transform .55s cubic-bezier(.77, 0, .18, 1); } .rb-theme .rb-overlay.is-open { transform: translateY(0); } .rb-theme .rb-ov-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .rb-theme .rb-ov-actions { display: flex; align-items: center; gap: 10px; } .rb-theme .rb-ov-cta { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 100px; background: var(--rb-accent); color: #fff !important; font-family: var(--rb-font-mono) !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .07em !important; text-transform: uppercase !important; } .rb-theme .rb-ov-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; } button.rb-back { padding: 0; } .rb-theme .rb-sheet { position: relative; flex: 1; overflow: hidden; } .rb-theme .rb-panel { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 24px 32px; overflow-y: auto; background: var(--rb-dark); } .rb-theme .rb-panel-sub { transform: translateX(100%); transition: transform .4s cubic-bezier(.77, 0, .18, 1); } .rb-theme .rb-panel-sub.is-active { transform: translateX(0); } .rb-theme .rb-mlist { list-style: none; margin: 0; padding: 0; } .rb-theme .rb-mlist > li { border-bottom: 1px solid rgba(255, 255, 255, .12); } .rb-theme .rb-mlink, .rb-theme .rb-mopen { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 2px; border: 0; background: transparent; text-align: left; cursor: pointer; color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: -.01em !important; text-transform: none !important; } .rb-theme .rb-mlink:hover, .rb-theme .rb-mopen:hover { color: var(--rb-accent-2) !important; } .rb-theme .rb-marrow { font-size: 20px !important; line-height: 1 !important; width: 24px; } .rb-theme .rb-mcta { margin-top: 24px; align-self: flex-start; } .rb-theme .rb-ov-foot { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 6px; } .rb-theme .rb-ov-foot a { color: #9a9aa2 !important; font-family: var(--rb-font-mono) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; } .rb-theme .rb-panel-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .12); } .rb-theme .rb-back { flex: none; width: 28px; height: 26px; background: transparent; color: #fff; font-size: 19px; line-height: 1; cursor: pointer; } .rb-back svg { width: 24px; } .rb-back svg path { stroke: #fff; } .rb-theme .rb-panel-title { color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 1.3 !important; } .rb-theme .rb-sublist { list-style: none; margin: 0 0 6px; padding: 0; } .rb-theme .rb-sublist a { display: block; padding: 13px 2px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff !important; font-family: var(--rb-font-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.4 !important; } .rb-theme .rb-sublist a:hover { color: var(--rb-accent-2) !important; } .rb-theme .rb-subhead { margin: 22px 0 6px; color: var(--rb-accent-2) !important; font-family: var(--rb-font-mono) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .rb-theme .rb-suball { margin-top: 24px; align-self: flex-start; } /* ========================================================================== 11. HERO ========================================================================== */ .rb-theme .rb-hero { position: relative; background-color: var(--rb-bg); background-image: var(--rb-hero-bg-image); background-size: cover; background-position: center; } .rb-theme .rb-hero-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, var(--rb-hero-overlay)); } .rb-theme .rb-hero-in { position: relative; z-index: 2; padding-top: 64px; } .rb-theme .rb-tagline { margin: 0 0 28px; } .rb-theme .rb-tag { display: inline-block; padding: 5px 8px; background: var(--rb-accent-soft); color: var(--rb-accent) !important; font-family: var(--rb-font-mono) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .rb-theme .rb-hero-title { margin: 0 0 26px; max-width: 700px; color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 62px !important; font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: -.025em !important; text-transform: none !important; } .rb-theme .rb-hero-title .rb-hl { color: var(--rb-accent) !important; } .rb-theme .rb-hero-text { margin: 0 0 34px; max-width: 470px; color: var(--rb-ink-2) !important; font-family: var(--rb-font-body) !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.6 !important; } .rb-theme .rb-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 76px; } /* awards */ .rb-theme .rb-awards { display: flex; flex-wrap: wrap; align-items: center; gap: 44px; margin-bottom: 84px; } .rb-theme .rb-award { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .01em !important; } .rb-theme .rb-award-badge { width: 22px; height: 22px; border-radius: 50%; background: var(--rb-ink); display: inline-flex; align-items: center; justify-content: center; color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; } /* collage */ .rb-theme .rb-collage { position: relative; z-index: 2; display: grid; grid-template-columns: 5fr 2fr 1fr 2.2fr; gap: 30px; align-items: start; padding-top: 30px; padding-bottom: 90px; } .rb-theme .rb-tile { position: relative; overflow: hidden; margin: 0; background: linear-gradient(135deg, #e9e6f8, #d3ccf0); } .rb-theme .rb-tile img { display: block; width: 100%; height: 100%; object-fit: cover; } .rb-theme .rb-tile:nth-child(1) { aspect-ratio: 4 / 3; margin-top: 70px; } .rb-theme .rb-tile:nth-child(2) { aspect-ratio: 1 / 1; } .rb-theme .rb-tile:nth-child(4) { aspect-ratio: 3 / 4; margin-top: 20px; } .rb-theme .rb-collage-gap { display: block; } .rb-theme .rb-tile-cap { position: absolute; bottom: 12px; left: 14px; color: var(--rb-accent) !important; font-family: var(--rb-font-mono) !important; font-size: 10px !important; font-weight: 400 !important; line-height: 1 !important; } /* ========================================================================== 12. SERVICES + TRUSTED STRIP (prism stops here) ========================================================================== */ .rb-theme .rb-services { position: relative; background: var(--rb-bg); padding-top: 40px; } .rb-theme .rb-services-in { position: relative; z-index: 2; } .rb-theme .rb-services-title { margin: 0 0 26px; color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 52px !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -.025em !important; text-transform: none !important; } .rb-theme .rb-services-text { margin: 0 0 70px; max-width: 560px; color: var(--rb-ink-2) !important; font-family: var(--rb-font-body) !important; font-size: 16.5px !important; font-weight: 400 !important; line-height: 1.6 !important; } .rb-theme .rb-svc-list { list-style: none; margin: 0 0 30px; padding: 0; max-width: 400px; } .rb-theme .rb-svc-item { border-top: 1px solid var(--rb-line); } .rb-theme .rb-svc-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 2px; color: var(--rb-ink) !important; font-family: var(--rb-font-mono) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: .06em !important; text-transform: uppercase !important; transition: padding-left .3s ease, color .3s ease; } .rb-theme .rb-svc-link:hover { padding-left: 12px; color: var(--rb-accent) !important; } .rb-theme .rb-trusted { position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 50px; margin-top: 90px; padding-top: 34px; padding-bottom: 60px; border-top: 1px solid var(--rb-line); } .rb-theme .rb-trusted-label { color: var(--rb-ink) !important; font-family: var(--rb-font-mono) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: .1em !important; text-transform: uppercase !important; } .rb-theme .rb-clients { flex: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 40px; } .rb-theme .rb-client { white-space: nowrap; color: #9a9aa2 !important; font-family: var(--rb-font-heading) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: .02em !important; } /* Elementor builds everything below Services — leave its styles alone. */ .rb-theme .rb-elementor-zone { position: relative; z-index: 2; background: var(--rb-bg); } /* ========================================================================== 13. FLOATING BOOK-A-CALL ========================================================================== */ .rb-theme .rb-floatcta { position: fixed; right: var(--rb-book-right); bottom: var(--rb-book-bottom); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; background: linear-gradient(90deg, #f6e7b2, #f3c9d8 40%, #b9a8f5); box-shadow: 0 14px 40px rgba(20, 10, 60, .2); opacity: 0; pointer-events: none; transition: opacity .35s ease, bottom .2s ease; } .rb-theme .rb-floatcta.is-visible { opacity: 1; pointer-events: auto; } .rb-theme .rb-floatcta-img { flex: none; width: 50px; height: 50px; border-radius: 100%; object-fit: cover; background: linear-gradient(135deg, #d8cef5, #a892e8); object-position: top; } .rb-theme .rb-floatcta-meta { line-height: 1.4; } .rb-theme .rb-floatcta-name { display: block; color: #111114 !important; font-family: var(--rb-font-mono) !important; font-size: 11.5px !important; font-weight: 400 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .rb-theme .rb-floatcta-role { display: block; color: #55555e !important; font-family: var(--rb-font-mono) !important; font-size: 10.5px !important; font-weight: 400 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } .rb-theme .rb-floatcta-btn { display: inline-flex; align-items: center; padding: 11px 20px; border: 0; border-radius: 100px; cursor: pointer; background: var(--rb-book-bg); color: var(--rb-book-color) !important; font-family: var(--rb-font-mono) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase !important; transition: background .3s ease; } .rb-theme .rb-floatcta-btn:hover { background: var(--rb-dark); color: #fff !important; } /* booking popup */ .rb-theme .rb-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; } .rb-theme .rb-modal[hidden] { display: none; } .rb-theme .rb-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); } .rb-theme .rb-modal-dialog { position: relative; width: 100%; max-width: 420px; padding: 30px 30px 34px; border-radius: 18px; background: var(--rb-book-popup-bg); box-shadow: 0 40px 100px rgba(0, 0, 0, .45); } .rb-theme .rb-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rb-line); background: #fff; font-size: 16px; line-height: 1; cursor: pointer; } .rb-theme .rb-modal-img { display: block; width: 100%; border-radius: 12px; margin-bottom: 18px; } .rb-theme .rb-modal-title { margin: 0 0 10px; color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 26px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -.02em !important; } .rb-theme .rb-modal-text { margin: 0 0 22px; color: var(--rb-ink-2) !important; font-family: var(--rb-font-body) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.6 !important; } /* ========================================================================== 14. FOOTER (sticky-reveal on desktop, static on mobile) ========================================================================== */ .hanuman-ji-img__wrap.phone { display: none; } .rb-theme .rb-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; gap: 50px; padding: 70px 0 30px; background: var(--rb-footer-bg); color: var(--rb-footer-color); } .rb-social svg { height: 15px; width: 15px; fill: #fff; } .rb-social svg path{ fill: #fff; } .rb-theme .rb-ftop { display: flex; align-items: center !important; justify-content: space-between; gap: 100px; flex-wrap: nowrap; flex-direction: row; align-content: center; } .rb-theme .rb-flogo-badge { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--rb-accent), var(--rb-logo-2)); display: inline-flex; align-items: center; justify-content: center; color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; } .rb-theme .rb-flogo-word { font-family: var(--rb-font-heading) !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: -.02em !important; color: var(--rb-footer-color) !important; } .rb-theme .rb-socials { display: flex; gap: 10px; } .rb-theme .rb-social { width: 35px; height: 35px; border-radius: 5px; border: 1px solid rgb(255 255 255 / 11%); display: inline-flex; align-items: center; justify-content: center; color: var(--rb-footer-color) !important; transition: background .25s ease, border-color .25s ease; } .rb-theme .rb-social:hover { background: var(--rb-accent); border-color: var(--rb-accent); } .rb-theme .rb-fgrid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 50px 60px; align-items: start; } .rb-theme .rb-fcol { border-top: 1px solid var(--rb-footer-rule); padding-top: 24px; } .rb-theme .rb-fleft { border-top: 1px solid var(--rb-footer-rule-soft); padding-top: 28px; grid-row: 1 / 3; } .rb-theme .rb-fintro { margin: 0 0 38px; max-width: 480px; color: var(--rb-footer-color) !important; font-family: var(--rb-font-heading) !important; font-size: 26px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: -.015em !important; } .rb-theme .rb-fbtns { display: flex; flex-wrap: wrap; gap: 12px; } .rb-theme .rb-fhead { margin: 0 0 20px; color: var(--rb-footer-muted) !important; font-family: var(--rb-font-body) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; } .rb-theme .rb-flinks { display: flex; flex-direction: column; gap: 11px; } .rb-theme .rb-flink { color: var(--rb-footer-color) !important; font-family: var(--rb-font-body) !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.4 !important; transition: color .25s ease; } .rb-theme .rb-flink:hover { color: var(--rb-accent-2) !important; } .rb-theme .rb-fcontact { margin: 0 0 20px; font-family: var(--rb-font-body) !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.9 !important; } .rb-theme .rb-fcontact a { color: var(--rb-footer-color) !important; } .rb-theme .rb-fcontact a:hover { color: var(--rb-accent-2) !important; } .rb-theme .rb-faddr { margin: 0; color: var(--rb-footer-soft) !important; font-family: var(--rb-font-body) !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.75 !important; } .rb-theme .rb-finfo { margin: 0 0 16px; color: var(--rb-footer-soft) !important; font-family: var(--rb-font-body) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.7 !important; } .rb-theme .rb-finfo:last-child { margin-bottom: 0; } .rb-theme .rb-finfo-label { display: block; color: var(--rb-footer-muted) !important; } .rb-theme .rb-fbottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 30px; padding-top: 20px; border-top: 1px solid var(--rb-footer-rule-soft); } .rb-theme .rb-fcopy { color: var(--rb-footer-soft) !important; font-family: var(--rb-font-body) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; } .rb-theme .rb-flegal { display: flex; flex-wrap: wrap; gap: 28px; } .rb-theme .rb-flegal a { white-space: nowrap; color: var(--rb-footer-color) !important; font-family: var(--rb-font-body) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; } .rb-theme .rb-flegal a:hover { color: var(--rb-accent-2) !important; } /* ========================================================================== 15. RESPONSIVE ========================================================================== */ @media (max-width: 1200px) { .rb-theme .rb-mega { grid-template-columns: 250px 1fr; } } @media (max-width: 900px) { .rb-theme .rb-nav, .rb-theme .rb-headcta { display: none !important; } .rb-theme .rb-burger { display: inline-flex !important; } .rb-theme .rb-hero-title { font-size: 42px !important; } .rb-theme .rb-services-title { font-size: 31px !important; } .rb-theme .rb-collage { grid-template-columns: 1fr 1fr !important; } .rb-theme .rb-collage-gap { display: none !important; } .rb-theme .rb-tile:nth-child(1), .rb-theme .rb-tile:nth-child(4) { margin-top: 0; } .rb-theme .rb-fgrid { grid-template-columns: 1fr 1fr !important; gap: 34px 24px !important; } .rb-theme .rb-fleft { grid-column: 1 / -1 !important; grid-row: auto !important; } .rb-theme .rb-fintro { font-size: 21px !important; } .rb-theme .rb-trusted { gap: 26px; } .rb-theme .rb-clients { justify-content: flex-start; gap: 26px; } .rb-theme .rb-ftop {gap: 50px;} } /* mobile: footer static (no reveal), 2-col company grid, prism top-centre */ @media (max-width: 767px) { .hanuman-ji-img__wrap.desktop { display: none; } .hanuman-ji-img__wrap.phone { display: block; } .blog-slider .swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal { position: absolute; bottom: -36px !important; max-width: 150px; height: 1.5px; top: inherit; } :root { --rb-gutter: 22px; } .rb-theme .rb-page { margin-bottom: 0 !important; box-shadow: none; } .rb-theme .rb-footer { position: static !important; min-height: 0 !important; top: auto !important; bottom: auto !important; transform: none !important; padding: 50px 0 30px; gap: 34px; } .rb-theme .rb-prism { top: 14vh; left: 50%; right: auto; width: 350px; height: 350px; margin-top: 0; margin-left: -175px; opacity: 1; } .rb-theme .rb-collage { grid-template-columns: 1fr 1fr !important; gap: 15px; } .rb-theme .rb-hero-in { padding-top: 300px; } .rb-theme .rb-hero-btns { margin-bottom: 48px; } .rb-theme .rb-awards { gap: 22px; margin-bottom: 48px; } .rb-theme .rb-collage { padding-bottom: 56px; } .rb-theme .rb-services-text { margin-bottom: 40px; } .rb-theme .rb-trusted { margin-top: 50px; padding-bottom: 40px; } .rb-theme .rb-ftop { flex-direction: row; align-items: flex-start; gap: 44px; flex-wrap: wrap !important; } .rb-theme .rb-fbottom { justify-content: flex-start; } .rb-theme .rb-floatcta { right: 12px; padding: 8px 10px; gap: 9px; } .rb-theme .rb-floatcta-btn { padding: 10px 16px; } .rb-theme .rb-fbottom { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; flex-direction: column-reverse; } } @media (max-width: 420px) { .rb-theme .rb-hero-title { font-size: 34px !important; } } @media (prefers-reduced-motion: reduce) { .rb-theme .rb-overlay, .rb-theme .rb-panel-sub, .rb-theme .rb-mega, .rb-theme .rb-drop { transition-duration: .01ms !important; } } /* visibility helpers (used by the floating Book-a-Call settings) */ @media (max-width: 767px) { .rb-wrap{padding-left:15px !important;padding-right:15px !important;} .rb-theme .rb-hide-mobile { display: none !important; } .rb-theme .rb-ov-top {padding: 16px 16px;} a.rb-ov-cta {display: none !important;} .rb-theme .rb-ov-close { width: 22px; height: 22px; border-radius: 50%; border: 0; background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; } .rb-theme .rb-logo-img { max-width: 130px; } .rb-theme .rb-burger { width: 36px; height: 25px; } } @media (min-width: 768px) { .rb-theme .rb-hide-desktop { display: none !important; } } /* ========================================================================== 16. YOUR CUSTOM CSS — add anything below this line. (Rules here load last, so they win over everything above.) ========================================================================== */ /* ========================================================================== CASE STUDY — SINGLE ========================================================================== */ .rb-theme .rb-cs-hero { position: relative; background: var(--rb-dark); color: #fff; overflow: hidden; } .rb-theme .rb-cs-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .rb-theme .rb-cs-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.78) 100%); } .rb-theme .rb-cs-hero-in { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 40px; height:550px;} .rb-theme .rb-cs-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .rb-theme .rb-cs-cat { padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff !important; font-family: var(--rb-font-mono) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .rb-theme .rb-cs-title { margin: 0 0 26px; max-width: 900px; color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 50px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: -.025em !important; } .rb-theme .rb-cs-clientrow { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; } .rb-theme .rb-cs-clientlogo { max-height: 42px; width: auto; display: block; } .rb-theme .rb-cs-clientname { color: rgba(255,255,255,.85) !important; font-family: var(--rb-font-mono) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .rb-theme .rb-cs-stats { display: none; flex-wrap: wrap; gap: 14px; } .rb-theme .rb-cs-stat { flex: 1 1 200px; max-width: 280px; padding: 22px 26px; border-radius: 4px; background: rgba(255,255,255,.9); backdrop-filter: blur(4px); } .rb-theme .rb-cs-stat-num { color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.02em !important; } .rb-theme .rb-cs-stat-label { margin-top: 8px; color: var(--rb-ink-2) !important; font-family: var(--rb-font-mono) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.3 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } /* narrow reading column */ .rb-theme .rb-cs-body { max-width: 820px; margin: 0 auto; } .rb-theme .rb-cs-intro { color: var(--rb-ink-2) !important; font-family: var(--rb-font-body) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.65 !important; } .rb-theme .rb-cs-intro p { margin: 0 0 16px; } /* WYSIWYG body */ .rb-theme .rb-richtext { color: var(--rb-ink); } .rb-theme .rb-richtext > *:first-child { margin-top: 0; } .rb-theme .rb-richtext h2 { margin: 46px 0 18px; color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -.02em !important; } .rb-theme .rb-richtext h3 { margin: 34px 0 14px; color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 22px !important; font-weight: 600 !important; line-height: 1.25 !important; } .rb-theme .rb-richtext p, .rb-theme .rb-richtext li { color: var(--rb-ink-2) !important; font-family: var(--rb-font-body) !important; font-size: 16.5px !important; font-weight: 400 !important; line-height: 1.7 !important; } .rb-theme .rb-richtext p { margin: 0 0 18px; } .rb-theme .rb-richtext ul, .rb-theme .rb-richtext ol { margin: 0 0 18px; padding-left: 22px; } .rb-theme .rb-richtext li { margin-bottom: 8px; } .rb-theme .rb-richtext a { color: var(--rb-accent) !important; text-decoration: underline; } .rb-theme .rb-richtext strong { color: var(--rb-ink) !important; font-weight: 600 !important; } .rb-theme .rb-richtext img { max-width: 100%; height: auto; border-radius: 12px; } /* results-at-a-glance cards */ .rb-theme .rb-cs-results { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 820px; margin: 0 auto; } .rb-theme .rb-cs-result { padding: 26px 30px; border: 1px solid var(--rb-line); border-radius: 14px; background: var(--rb-bg); } .rb-theme .rb-cs-result-num { color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 46px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.03em !important; } .rb-theme .rb-cs-result-label { margin-top: 10px; color: var(--rb-ink-2) !important; font-family: var(--rb-font-mono) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } /* results glossary (screenshots) */ .rb-theme .rb-cs-glossary { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 34px; } .rb-theme .rb-cs-shot { margin: 0; } .rb-theme .rb-cs-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rb-line); border-radius: 14px; } .rb-theme .rb-cs-shot figcaption { margin-top: 12px; color: var(--rb-ink-2) !important; font-family: var(--rb-font-mono) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: .04em !important; } /* testimonial */ .rb-theme .rb-cs-testi { background: var(--rb-dark); color: #fff; } .rb-theme .rb-cs-testi-in { max-width: 900px; margin: 0 auto; } .rb-theme .rb-cs-quote { margin: 0 0 30px; color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: -.015em !important; } .rb-theme .rb-cs-author { display: flex; align-items: center; gap: 16px; } .rb-theme .rb-cs-author-img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; } .rb-theme .rb-cs-author-name { color: #fff !important; font-family: var(--rb-font-mono) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } .rb-theme .rb-cs-author-role { color: rgba(255,255,255,.6) !important; font-family: var(--rb-font-mono) !important; font-size: 11.5px !important; font-weight: 400 !important; letter-spacing: .04em !important; text-transform: uppercase !important; } .rb-theme .rb-cs-author-logo { max-height: 34px; width: auto; margin-left: auto; } /* related / additional case studies */ .rb-theme .rb-cs-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .rb-theme .rb-cs-relcard { position: relative; min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; border-radius: 16px; overflow: hidden; background: var(--rb-dark); } .rb-theme .rb-cs-relcard-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .rb-theme .rb-cs-relcard-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.15), rgba(10,10,12,.8)); } .rb-theme .rb-cs-relcard-title { position: relative; z-index: 2; color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 20px !important; font-weight: 500 !important; line-height: 1.25 !important; letter-spacing: -.01em !important; } /* ========================================================================== SERVICE — SINGLE ========================================================================== */ .rb-theme .rb-service-hero { position: relative; background: var(--rb-bg); } .rb-theme .rb-service-hero-in { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 10px; } .rb-theme .rb-service-title { margin: 0 0 22px; max-width: 820px; color: var(--rb-ink) !important; font-family: var(--rb-font-heading) !important; font-size: 56px !important; font-weight: 500 !important; line-height: 1.08 !important; letter-spacing: -.025em !important; } .rb-theme .rb-service-intro { max-width: 620px; color: var(--rb-ink-2) !important; font-family: var(--rb-font-body) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.65 !important; } .rb-theme .rb-service-intro p { margin: 0 0 16px; } .rb-theme .rb-service-icon { width: 56px; height: 56px; object-fit: contain; margin-bottom: 22px; display: block; } /* ========================================================================== [case_studies] LISTING + TABS ========================================================================== */ .rb-theme .rb-csgrid { position: relative; } .rb-theme .rb-csgrid-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .rb-theme .rb-csgrid-tab { padding: 9px 16px; border: 0; border-radius: 100px; cursor: pointer; background: var(--rb-bg-gray) !important; color: var(--rb-ink) !important; font-family: var(--rb-font-mono) !important; font-size: 11.5px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: .06em !important; text-transform: uppercase !important; transition: background .25s ease, color .25s ease; } .rb-theme .rb-csgrid-tab:hover { background: var(--rb-accent-soft) !important; color: var(--rb-accent) !important; } .rb-theme .rb-csgrid-tab.is-active { background: var(--rb-accent) !important; color: #fff !important; } .rb-theme .rb-csgrid-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rb-theme .rb-csgrid-card { position: relative; display: block; min-height: 320px; overflow: hidden; background: var(--rb-dark); color: #fff; } .rb-theme .rb-csgrid-card.is-hidden { display: none; } .rb-theme .rb-csgrid-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s ease; } .rb-theme .rb-csgrid-card:hover .rb-csgrid-card-bg { transform: scale(1.04); } .rb-theme .rb-csgrid-card-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.25) 0%, rgba(10,10,12,.72) 100%); } .rb-theme .rb-csgrid-card-in { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 450px; padding: 34px 40px; } .rb-theme .rb-csgrid-card-title { max-width: 560px; color: #fff !important; font-family: var(--rb-font-heading) !important; font-size: 30px !important; font-weight: 500 !important; line-height: 1.12 !important; letter-spacing: -.02em !important; } .rb-theme .rb-csgrid-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .rb-theme .rb-csgrid-card-stats { display: flex; gap: 14px; flex-wrap: wrap; } .rb-theme .rb-csgrid-card-stat { min-width: 150px; padding: 16px 20px; border-radius: 4px; background: rgba(255,255,255,.9); display: flex; flex-direction: column; } .rb-theme .rb-csgrid-card-stat .rb-cs-stat-num { font-size: 24px !important; } .rb-theme .rb-csgrid-more { display: inline-flex; align-items: center; color: #fff !important; font-family: var(--rb-font-mono) !important; font-size: 11.5px !important; font-weight: 400 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .rb-theme .rb-csgrid-empty { padding: 40px 0; color: var(--rb-ink-2) !important; font-family: var(--rb-font-body) !important; font-size: 16px !important; } @media (max-width: 900px) { .rb-theme .rb-cs-title { font-size: 32px !important; } .rb-theme .rb-cs-quote { font-size: 23px !important; } .rb-theme .rb-service-title { font-size: 38px !important; } .rb-theme .rb-sec-head { font-size: 28px !important; } .rb-theme .rb-csgrid-card-title { font-size: 24px !important; } .rb-theme .rb-cs-result-num { font-size: 38px !important; } } @media (max-width: 767px) { .rb-theme .rb-csgrid-list { display: grid; grid-template-columns: 1fr; gap: 12px; } .rb-theme .rb-cs-hero-in, .rb-theme .rb-service-hero-in { padding-top: 44px; } .rb-theme .rb-sec { padding: 44px 0; } .rb-theme .rb-cs-stat { max-width: none; } .rb-theme .rb-csgrid-card-in { padding: 24px; } }