/* ============================================================ DG Vrtici — Design System Scoped na .dg-app da ne dira globalne WordPress stilove. KAKO KORISTITI: - Zalepiti u Elementor → Site Settings → Custom CSS - ILI dodati u WPCode / Insert Headers and Footers (u ) ============================================================ */ /* === RESET & BASE === */ .dg-app *, .dg-app *::before, .dg-app *::after { box-sizing: border-box; margin: 0; padding: 0; } .dg-app { --cyan: #9AE5EA; --yellow: #FFE573; --black: #000000; --white: #ffffff; --g50: #f9fafb; --g100: #f3f4f6; --g200: #e5e7eb; --g400: #9ca3af; --g600: #4b5563; --g700: #374151; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-2xl: 28px; background: var(--black); color: var(--white); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 1.5; border-radius: var(--r-2xl); } .dg-app a { text-decoration: none; color: inherit; } .dg-app button { font-family: inherit; } .dg-app img { max-width: 100%; } /* WP tema override fix — ciljani !important za sve bijele i tamne blokove */ .dg-step-title { color: #ffffff !important; font-size: 1.75rem; font-weight: 700; margin-bottom: 8px; line-height: 1.2; } /* Bijeli blokovi — tekst mora biti crn */ .dg-info-block h3 { color: #000000 !important; } .dg-info-block p, .dg-info-block li { color: #374151 !important; } .dg-card-white h3, .dg-card-white h4 { color: #000000 !important; } .dg-note-block h4 { color: #ffffff !important; } .dg-note-block p, .dg-note-block li { color: rgba(255,255,255,.85) !important; } .dg-criteria-left h4 { color: #000000 !important; } .dg-criteria-left p { color: #4b5563 !important; } .dg-deadline-date { color: #000000 !important; } .dg-deadline-desc { color: #374151 !important; } .dg-step-list-item h4 { color: #000000 !important; } .dg-step-list-item p { color: #4b5563 !important; } .dg-doc-name { color: #000000 !important; } .dg-doc-desc { color: #374151 !important; } .dg-doc-where { color: #4b5563 !important; } .dg-checklist-item label { color: #000000 !important; } .dg-card-vrtic-name { color: #000000 !important; } .dg-download-item-info h5 { color: #000000 !important; } .dg-download-item-info p { color: #4b5563 !important; } /* === SEKCIJE === */ .dg-section { background: var(--black); border-radius: var(--r-2xl); padding: 40px 32px; margin-bottom: 32px; } .dg-section:last-child { margin-bottom: 0; } .dg-section-head { margin-bottom: 28px; } .dg-section-head h2 { font-size: 1.75rem; font-weight: 700; color: var(--white) !important; margin-bottom: 6px; line-height: 1.2; } .dg-section-head p { color: rgba(255,255,255,.65) !important; font-size: .95rem; } .dg-section-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; } /* === HERO === */ .dg-hero { text-align: center; padding: 56px 16px 48px; } .dg-hero-tagline { font-size: 1.1rem; color: rgba(255,255,255,.65) !important; margin-bottom: 12px; } .dg-hero h1 { font-size: 2.75rem; font-weight: 700; color: var(--white) !important; line-height: 1.15; margin-bottom: 36px; } .dg-hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; max-width: 640px; margin: 0 auto; } /* === CTA CARD DUGMAD (Hero) === */ .dg-cta-card { flex: 1; min-width: 220px; padding: 24px 20px; border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; text-decoration: none; font-weight: 600; cursor: pointer; transition: all .2s; border: 2px solid transparent; } .dg-cta-card--cyan { background: var(--cyan); color: var(--black); } .dg-cta-card--cyan:hover { background: #82d9de; color: var(--black); } .dg-cta-card--dark { background: var(--black); color: var(--white) !important; border-color: var(--yellow); } .dg-cta-card--dark * { color: var(--white) !important; } .dg-cta-card--dark:hover { background: var(--yellow); color: var(--black) !important; } .dg-cta-card--dark:hover * { color: var(--black) !important; } .dg-cta-icon-box { width: 64px; height: 64px; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; } .dg-cta-icon-box--white { background: var(--white); } .dg-cta-icon-box--yellow { background: var(--yellow); } .dg-cta-card .cta-title { font-size: 1.15rem; font-weight: 700; display: block; margin-bottom: 4px; } .dg-cta-card .cta-desc { font-size: .82rem; opacity: .7; display: block; } /* === GRID === */ .dg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .dg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* === BIJELE KARTICE (Državni vs Privatni) === */ .dg-card-white { background: var(--white); border-radius: var(--r-xl); padding: 24px; color: var(--black); } .dg-card-white-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .dg-card-white-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--black); } .dg-card-white h3 { font-size: 1.1rem; font-weight: 700; color: var(--black); } /* === STEP LISTA (unutar bijelih kartica) === */ .dg-step-list { display: flex; flex-direction: column; gap: 16px; } .dg-step-list-item { display: flex; align-items: flex-start; gap: 12px; } .dg-step-num { flex-shrink: 0; width: 32px; height: 32px; background: var(--yellow); color: var(--black); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; } .dg-step-list-item h4 { font-weight: 600; color: var(--black); margin-bottom: 2px; font-size: .95rem; } .dg-step-list-item p { font-size: .82rem; color: var(--g600); } /* === VRTIĆ KARTICA === */ .dg-card-vrtic { background: var(--white); border-radius: var(--r-xl); overflow: hidden; border: 2px solid var(--g200); transition: border-color .2s, transform .2s; text-decoration: none; display: block; color: var(--black); } .dg-card-vrtic:hover { border-color: var(--cyan); transform: translateY(-2px); } .dg-card-vrtic-img { width: 100%; height: 180px; object-fit: cover; display: block; } .dg-card-vrtic-body { padding: 16px; } .dg-card-vrtic-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .dg-card-vrtic-name { font-size: .95rem; font-weight: 700; color: var(--black); } .dg-rating { display: flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--black); flex-shrink: 0; } .dg-star { color: var(--yellow); } .dg-card-vrtic-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: .78rem; color: var(--g600); } .dg-meta-item { display: flex; align-items: center; gap: 4px; } .dg-meta-item svg { width: 13px; height: 13px; flex-shrink: 0; } .dg-card-vrtic-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--g200); } /* === BADGE === */ .dg-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 600; } .dg-badge--cyan { background: var(--cyan); color: var(--black); } .dg-badge--yellow { background: var(--yellow); color: var(--black); } .dg-badge--gray { background: var(--g100); color: var(--g700); } .dg-badge--red { background: #fee2e2; color: #dc2626; } .dg-badge--green { background: #dcfce7; color: #16a34a; } .dg-badge--orange { background: #fff7ed; color: #ea580c; } /* === PROCESS STEP KARTICE === */ .dg-steps-list { display: flex; flex-direction: column; gap: 16px; } .dg-step-card { background: var(--white); border-radius: var(--r-xl); padding: 24px; border: 2px solid var(--white); transition: border-color .2s; display: flex; align-items: flex-start; gap: 24px; text-decoration: none; color: var(--black); cursor: pointer; } .dg-step-card:hover { border-color: var(--cyan); } .dg-step-card-icon { width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s; color: var(--black); } .dg-step-card:hover .dg-step-card-icon { transform: scale(1.1); } .dg-step-card-content { flex: 1; } .dg-step-card-content h3 { font-size: 1rem; font-weight: 700; color: var(--black); margin-bottom: 6px; transition: color .2s; } .dg-step-card:hover .dg-step-card-content h3 { color: var(--cyan); } .dg-step-card-content p { font-size: .85rem; color: var(--g600); margin-bottom: 14px; } .dg-step-link { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--cyan); transition: gap .2s; } .dg-step-card:hover .dg-step-link { gap: 10px; } .dg-step-card-num { font-size: 2.5rem; font-weight: 700; color: var(--g200); flex-shrink: 0; transition: color .2s; } .dg-step-card:hover .dg-step-card-num { color: var(--g400); } /* === TIMELINE === */ .dg-timeline { display: flex; flex-direction: column; } .dg-tl-item { display: flex; gap: 16px; align-items: flex-start; } .dg-tl-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; } .dg-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--g200); margin-top: 6px; flex-shrink: 0; } .dg-tl-dot--active { background: var(--yellow); width: 14px; height: 14px; } .dg-tl-dot--high { background: #f87171; width: 14px; height: 14px; } .dg-tl-connector { width: 2px; flex: 1; min-height: 20px; background: var(--g200); margin: 4px 0; } .dg-tl-content { flex: 1; padding-bottom: 24px; } .dg-tl-month { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.45); margin-bottom: 8px; } .dg-tl-phase { margin-bottom: 6px; } .dg-tl-phase-name { font-weight: 600; color: var(--white); font-size: .9rem; margin-bottom: 2px; } .dg-tl-phase-desc { font-size: .8rem; color: rgba(255,255,255,.55); } /* === LINKOVI === */ .dg-link { color: var(--cyan); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: color .2s; } .dg-link:hover { color: #82d9de; } /* === SEARCH INPUT === */ .dg-search-wrapper { position: relative; } .dg-search-wrapper .dg-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--g400); width: 20px; height: 20px; pointer-events: none; } .dg-search-input { width: 100%; padding: 16px 16px 16px 50px; border-radius: var(--r-xl); border: 2px solid var(--g200); background: var(--white); color: var(--black); font-size: 1rem; outline: none; transition: border-color .2s; } .dg-search-input:focus { border-color: var(--cyan); } .dg-search-input::placeholder { color: var(--g400); } /* === FILTER BAR === */ .dg-filter-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .dg-filter-toggle-btn { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--g200); background: var(--white); color: var(--black); font-weight: 500; cursor: pointer; transition: border-color .2s; font-size: .9rem; } .dg-filter-toggle-btn:hover { border-color: var(--cyan); } .dg-filter-toggle-btn svg { width: 16px; height: 16px; } .dg-filter-clear-btn { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border: none; background: transparent; color: var(--g600); cursor: pointer; font-size: .85rem; transition: color .2s; } .dg-filter-clear-btn:hover { color: var(--black); } .dg-filter-clear-btn svg { width: 14px; height: 14px; } .dg-filter-count { background: var(--yellow); color: var(--black); font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } /* === FILTER PANEL === */ .dg-filter-panel { background: var(--white); border-radius: var(--r-xl); padding: 24px; border: 2px solid var(--g200); display: none; } .dg-filter-panel.dg-open { display: block; } .dg-filter-group { margin-bottom: 24px; } .dg-filter-group:last-child { margin-bottom: 0; } .dg-filter-group > label { display: block; font-size: .85rem; font-weight: 600; color: var(--black); margin-bottom: 10px; } .dg-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; } .dg-filter-pill { padding: 6px 16px; border-radius: 999px; border: none; background: var(--g100); color: var(--black); font-size: .85rem; font-weight: 500; cursor: pointer; transition: background .2s; } .dg-filter-pill:hover { background: var(--g200); } .dg-filter-pill.dg-active { background: var(--cyan); color: var(--black); } /* === RESULTS COUNT === */ .dg-results-count { font-size: .85rem; color: var(--g400); } /* === NO RESULTS === */ .dg-no-results { text-align: center; padding: 56px 24px; background: var(--white); border-radius: var(--r-2xl); } .dg-no-results .no-res-icon { color: var(--g200); width: 64px; height: 64px; margin: 0 auto 16px; display: block; } .dg-no-results h3 { font-size: 1.1rem; font-weight: 600; color: var(--black); margin-bottom: 8px; } .dg-no-results p { color: var(--g600); margin-bottom: 24px; } /* === DUGMAD === */ .dg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none; transition: all .2s; border: 2px solid transparent; } .dg-btn--cyan { background: var(--cyan); color: var(--black); border-color: var(--cyan); } .dg-btn--cyan:hover { background: #82d9de; color: var(--black); } .dg-btn--outline { background: transparent; color: #ffffff !important; border-color: rgba(255,255,255,.5); } .dg-btn--outline:hover { background: rgba(255,255,255,.08); color: #ffffff !important; } .dg-btn svg { width: 18px; height: 18px; } /* === STACK SPACING === */ .dg-stack > * + * { margin-top: 16px; } .dg-stack-sm > * + * { margin-top: 8px; } .dg-stack-lg > * + * { margin-top: 32px; } .dg-stack-xl > * + * { margin-top: 48px; } /* === INFO BLOCK === */ .dg-info-block { background: var(--white); border-radius: var(--r-xl); padding: 24px; color: var(--black); } .dg-info-block h3 { font-size: 1rem; font-weight: 700; color: var(--black); margin-bottom: 12px; } .dg-info-block p, .dg-info-block li { color: var(--g700); font-size: .95rem; line-height: 1.65; } .dg-info-block ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .dg-info-block ul li { display: flex; align-items: flex-start; gap: 8px; } .dg-info-block ul li::before { content: '•'; color: var(--cyan); font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; } /* === NOTE BLOCK === */ .dg-note-block { border-radius: var(--r-xl); padding: 20px 24px; background: var(--white); } .dg-note-block--success { border-left: 4px solid var(--cyan); background: rgba(154,229,234,.12); } .dg-note-block--warning { border-left: 4px solid var(--yellow); background: rgba(255,229,115,.12); } .dg-note-block--info { border-left: 4px solid #60a5fa; background: rgba(96,165,250,.10); } .dg-note-block h4 { font-size: .9rem; font-weight: 700; color: var(--black); margin-bottom: 10px; } .dg-note-block p, .dg-note-block li { font-size: .9rem; color: var(--black); line-height: 1.65; } .dg-note-block ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .dg-note-block ul li { display: flex; align-items: flex-start; gap: 8px; } .dg-note-block--success ul li::before { content: '•'; color: var(--cyan); font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; } .dg-note-block--warning ul li::before { content: '•'; color: var(--yellow); font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; } .dg-note-block--info ul li::before { content: '•'; color: #60a5fa; font-size: 1.2rem; line-height: 1.3; flex-shrink: 0; } /* === TAB SWITCHER === */ .dg-tab-switcher { background: var(--g100); border-radius: var(--r-xl); padding: 8px; display: flex; gap: 8px; } .dg-tab-btn { flex: 1; padding: 14px 24px; border-radius: var(--r-lg); border: none; font-weight: 600; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .95rem; background: transparent; color: var(--g600); } .dg-tab-btn.dg-active { background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.1); } .dg-tab-btn--cyan.dg-active { color: #0ea5e9; } .dg-tab-btn--yellow.dg-active { color: #92400e; } .dg-tab-btn svg { width: 18px; height: 18px; } .dg-tab-content { display: none; } .dg-tab-content.dg-active { display: block; } /* === DOKUMENT ITEM === */ .dg-doc-item { display: flex; gap: 16px; padding: 20px; background: var(--g50); border-radius: var(--r-lg); align-items: flex-start; } .dg-doc-item + .dg-doc-item { margin-top: 8px; } .dg-doc-num { flex-shrink: 0; width: 40px; height: 40px; background: var(--yellow); color: var(--black); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; } .dg-doc-body { flex: 1; } .dg-doc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .dg-doc-name { font-weight: 600; color: var(--black); font-size: .95rem; } .dg-doc-desc { font-size: .85rem; color: var(--g700); margin-bottom: 4px; } .dg-doc-where { font-size: .8rem; color: var(--g600); } /* === CHECKLIST === */ .dg-checklist-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--g50); border-radius: var(--r-lg); cursor: pointer; transition: background .2s; } .dg-checklist-item + .dg-checklist-item { margin-top: 6px; } .dg-checklist-item:hover { background: var(--g100); } .dg-checklist-item input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; accent-color: var(--cyan); } .dg-checklist-item label { font-weight: 500; color: var(--black); cursor: pointer; font-size: .9rem; } /* === DOWNLOAD SEKCIJA === */ .dg-download-section { background: var(--g50); border-radius: var(--r-xl); padding: 20px; } .dg-download-section h4 { font-size: .9rem; font-weight: 700; color: var(--black); margin-bottom: 12px; } .dg-download-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--white); border-radius: var(--r-md); margin-bottom: 8px; text-decoration: none; color: var(--black); transition: background .2s; } .dg-download-item:last-child { margin-bottom: 0; } .dg-download-item:hover { background: var(--g50); } .dg-download-item-info h5 { font-size: .88rem; font-weight: 600; color: var(--black); margin-bottom: 2px; } .dg-download-item-info p { font-size: .78rem; color: var(--g600); } .dg-download-icon { color: var(--cyan); flex-shrink: 0; width: 20px; height: 20px; } /* === STEP PAGE HEADER === */ .dg-step-header { background: var(--black); border-radius: var(--r-2xl); padding: 32px; margin-bottom: 24px; } .dg-step-header-bc { font-size: .78rem; color: rgba(255,255,255,.65); margin-bottom: 16px; display: flex; align-items: center; gap: 6px; } .dg-step-header-bc a { color: rgba(255,255,255,.65) !important; text-decoration: none; } .dg-step-header-bc a:hover { color: var(--white) !important; } .dg-step-header-num { font-size: .85rem; font-weight: 600; color: var(--yellow); margin-bottom: 8px; } .dg-step-header h1 { font-size: 1.75rem; font-weight: 700; color: var(--white) !important; margin-bottom: 8px; } .dg-step-header p { color: rgba(255,255,255,.65) !important; font-size: .95rem; } /* === STEP NAVIGACIJA === */ .dg-step-nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 28px; margin-top: 16px; border-top: 2px solid rgba(255,255,255,.1); } .dg-step-nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-lg); font-weight: 600; font-size: .9rem; text-decoration: none; transition: all .2s; border: 2px solid rgba(255,255,255,.4); color: #ffffff !important; background: transparent; cursor: pointer; } .dg-step-nav-btn:hover { border-color: var(--cyan); color: var(--cyan); } .dg-step-nav-btn--next { background: var(--cyan); color: #000000 !important; border-color: var(--cyan); } .dg-step-nav-btn--next:hover { background: #82d9de; color: #000000 !important; border-color: #82d9de; } .dg-step-nav-btn svg { width: 16px; height: 16px; } .dg-step-nav-spacer { flex: 1; } /* === KRITERIJUMI === */ .dg-criteria-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--g50); border-radius: var(--r-lg); } .dg-criteria-item + .dg-criteria-item { margin-top: 8px; } .dg-criteria-left h4 { font-weight: 600; color: var(--black); margin-bottom: 4px; font-size: .95rem; } .dg-criteria-left p { font-size: .83rem; color: var(--g600); } .dg-criteria-pts { flex-shrink: 0; font-size: .78rem; font-weight: 600; color: var(--black); background: var(--cyan); padding: 4px 12px; border-radius: 999px; white-space: nowrap; } /* === ROKOVI === */ .dg-deadline-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--g50); border-radius: var(--r-md); } .dg-deadline-item + .dg-deadline-item { margin-top: 6px; } .dg-deadline-date { font-weight: 700; color: var(--black); min-width: 130px; font-size: .85rem; } .dg-deadline-desc { font-size: .9rem; color: var(--g700); } /* === NOTIFIKACIJA === */ .dg-notification { padding: 12px 16px; background: rgba(255,229,115,.15); border-left: 4px solid var(--yellow); border-radius: var(--r-sm); margin-bottom: 24px; display: flex; align-items: flex-start; gap: 10px; } .dg-notification svg { color: var(--yellow); flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; } .dg-notification p { color: var(--white); font-size: .88rem; } /* === CTA SEKCIJA (dno) === */ .dg-cta-section { border: 2px solid var(--yellow); border-radius: var(--r-2xl); padding: 56px 32px; text-align: center; } .dg-cta-section h2 { font-size: 1.75rem; font-weight: 700; color: #ffffff !important; margin-bottom: 12px; } .dg-cta-section p { color: rgba(255,255,255,.65) !important; margin-bottom: 36px; } .dg-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* === SUBVENCIJA CHIP === */ .dg-subvencija { display: flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; color: #16a34a; } /* === UTILITY === */ .dg-hidden { display: none !important; } .dg-text-muted { color: rgba(255,255,255,.55); } .dg-mt-4 { margin-top: 16px; } .dg-mt-6 { margin-top: 24px; } /* === RESPONSIVE === */ @media (max-width: 768px) { .dg-app { font-size: 15px; } .dg-section { padding: 24px 16px; } .dg-hero h1 { font-size: 1.85rem; } .dg-hero-cta { flex-direction: column; } .dg-cta-card { min-width: unset; } .dg-grid-2, .dg-grid-3 { grid-template-columns: 1fr; } .dg-step-card { flex-direction: column; gap: 16px; } .dg-step-card-num { display: none; } .dg-tab-btn { font-size: .85rem; padding: 12px 14px; } .dg-mobile-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; } .dg-mobile-scroll-inner { display: flex; gap: 16px; padding-bottom: 8px; width: max-content; } .dg-mobile-scroll-inner .dg-card-vrtic { width: 280px; } .dg-step-nav { flex-direction: column; gap: 8px; } .dg-step-nav-btn { justify-content: center; } .dg-step-nav-spacer { display: none; } .dg-cta-section { padding: 36px 20px; } .dg-hero { padding: 36px 8px 28px; } }