around your Elementor content. All styles below are scoped under .iva-page so they won't affect other pages. In Elementor: use the "Elementor Canvas" page template for full-width pages, or add class="iva-page" to a wrapping Section. The Envision theme sets html { font-size: 62.5% } which makes 1rem = 10px. All rem values from the original design have been converted to px so sizes render correctly. ================================================================ */ /* ---------------------------------------------------------------- .iva-page SCOPE — resets Envision defaults for template pages ---------------------------------------------------------------- */ .iva-page { font-family: 'Nunito', 'Open Sans', sans-serif; font-size: 17px; line-height: 1.7; color: #3A3A3A; background: #FEFCF7; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .iva-page *, .iva-page *::before, .iva-page *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Override Envision's global heading/paragraph/link/list defaults */ .iva-page h1, .iva-page h2, .iva-page h3, .iva-page h4, .iva-page h5, .iva-page h6 { font-family: 'Nunito', sans-serif; color: #2D2D2D; line-height: 1.3; clear: none; margin: 0; padding: 0; } .iva-page p { margin: 0; padding: 0; color: #3A3A3A; } .iva-page a, .iva-page a:visited, .iva-page a:hover, .iva-page a:focus, .iva-page a:active { color: inherit; text-decoration: none; outline: none; } .iva-page ul, .iva-page ol, .iva-page li { list-style: none; margin: 0; padding: 0; } .iva-page img { max-width: 100%; display: block; height: auto; } /* Override Envision body background on Canvas pages */ body.elementor-template-canvas.iva-page, body.iva-page { background: #FEFCF7; font-size: 17px; color: #3A3A3A; } /* .iva-page container override (Envision has its own .container) */ .iva-page .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; width: 100%; position: relative; } .iva-page .container::after { display: none; } /* ---------------------------------------------------------------- TEMPLATE STYLES (scoped under .iva-page) Original design from ergotherapy-page.html with: - All rem converted to px (for Envision 62.5% fix) - All selectors scoped under .iva-page ---------------------------------------------------------------- */ /* ============================================================ CSS VARIABLES — matches existing site brand ============================================================ */ :root { /* Brand colors extracted from screenshots */ --gold: #F5C542; --gold-light: #FDF3D1; --gold-bg: #FFF9E6; --green: #8CB63C; --green-light: #E8F3D6; --green-dark: #6A9A1F; --orange: #E8943A; --orange-light:#FFF0DE; /* Neutrals */ --text: #3A3A3A; --text-light: #6B6B6B; --text-heading:#2D2D2D; --white: #FFFFFF; --off-white: #FEFCF7; --border: #E2E2D8; /* Spacing */ --section-pad: 80px 0; --container: 1100px; /* Radius — matching rounded site style */ --radius-sm: 12px; --radius-md: 20px; --radius-lg: 30px; --radius-xl: 40px; /* Shadows */ --shadow-soft: 0 4px 24px rgba(140, 182, 60, 0.08); --shadow-card: 0 2px 16px rgba(0,0,0,0.05), 0 1px 4px rgba(140,182,60,0.1); --shadow-hover: 0 8px 32px rgba(140, 182, 60, 0.15); } /* ============================================================ .iva-page html { scroll-behavior: smooth; } /* body-level rules handled by .iva-page scope above */ /* ============================================================ SHARED TYPOGRAPHY ============================================================ */ .iva-page h1, .iva-page h2, .iva-page h3, .iva-page h4 { font-family: 'Nunito', sans-serif; color: var(--text-heading); line-height: 1.3; } .iva-page .script-font { font-family: 'Caveat', cursive; } .iva-page .section-label { font-family: 'Caveat', cursive; color: var(--green); font-size: 21.6px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 8px; display: block; } .iva-page .section-title { font-size: clamp(25.6px, 4vw, 35.2px); font-weight: 800; margin-bottom: 16px; } .iva-page .section-subtitle { font-size: 17.6px; color: var(--text-light); max-width: 640px; line-height: 1.8; } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes floatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .iva-page .animate-on-scroll { opacity: 0 !important; transform: translateY(30px) !important; transition: opacity 0.7s ease, transform 0.7s ease !important; } .elementor-edit-mode .iva-page .animate-on-scroll { opacity: 1 !important; } .iva-page .animate-on-scroll.visible { opacity: 1 !important; transform: translateY(0) !important; } /* Staggered children */ .iva-page .stagger-children .animate-on-scroll:nth-child(1) { transition-delay: 0.05s; } .iva-page .stagger-children .animate-on-scroll:nth-child(2) { transition-delay: 0.12s; } .iva-page .stagger-children .animate-on-scroll:nth-child(3) { transition-delay: 0.19s; } .iva-page .stagger-children .animate-on-scroll:nth-child(4) { transition-delay: 0.26s; } .iva-page .stagger-children .animate-on-scroll:nth-child(5) { transition-delay: 0.33s; } .iva-page .stagger-children .animate-on-scroll:nth-child(6) { transition-delay: 0.40s; } /* ============================================================ DECORATIVE ELEMENTS — Leaves & Shapes ============================================================ */ .iva-page .leaf { position: absolute; pointer-events: none; z-index: 0; } .iva-page .leaf svg { fill: var(--green); opacity: 0.12; } .iva-page .dot-accent { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); position: absolute; pointer-events: none; opacity: 0.3; } /* ============================================================ BUTTONS ============================================================ */ .iva-page .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 16px; text-decoration: none; border: none; cursor: pointer; transition: all 0.3s ease; } .iva-page .btn-primary { background: var(--green); color: var(--white); box-shadow: 0 4px 16px rgba(140, 182, 60, 0.3); } .iva-page .btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(140, 182, 60, 0.4); } .iva-page .btn-secondary { background: var(--white); color: var(--green); border: 2px solid var(--green); } .iva-page .btn-secondary:hover { background: var(--green-light); transform: translateY(-2px); } .iva-page .btn-gold { background: var(--gold); color: var(--text-heading); box-shadow: 0 4px 16px rgba(245, 197, 66, 0.3); } .iva-page .btn-gold:hover { background: #E8B830; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(245, 197, 66, 0.4); } /* ============================================================ .iva-page 1) HERO SECTION ============================================================ */ .iva-page .hero { padding: 100px 0 80px; position: relative; background: linear-gradient(170deg, var(--gold-bg) 0%, var(--off-white) 50%, var(--green-light) 100%); overflow: hidden; } .iva-page .hero::before { content: ''; position: absolute; top: -60px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(245,197,66,0.15) 0%, transparent 70%); border-radius: 50%; } .iva-page .hero::after { content: ''; position: absolute; bottom: -80px; left: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(140,182,60,0.1) 0%, transparent 70%); border-radius: 50%; } .iva-page .hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; } .iva-page .hero-content { animation: fadeInUp 0.8s ease forwards; } .iva-page .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--green-light); border-radius: 50px; padding: 8px 20px; font-size: 14.4px; font-weight: 600; color: var(--green); margin-bottom: 24px; } .iva-page .hero-badge .emoji { font-size: 19.2px; } .iva-page .hero h1 { font-size: clamp(28.8px, 4.5vw, 41.6px); font-weight: 800; line-height: 1.25; margin-bottom: 20px; color: var(--text-heading); } .iva-page .hero h1 .highlight { color: var(--green); position: relative; } .iva-page .hero h1 .highlight::after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 8px; background: var(--gold); opacity: 0.35; border-radius: 4px; z-index: -1; } .iva-page .hero-subtitle { font-size: 18.4px; color: var(--text-light); line-height: 1.8; margin-bottom: 32px; max-width: 500px; } .iva-page .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .iva-page .hero-visual { position: relative; animation: fadeIn 1s ease 0.3s forwards; opacity: 0; } .iva-page .hero-image-wrapper { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 3px solid var(--green-light); box-shadow: var(--shadow-card); } .iva-page .hero-image-wrapper img { width: 100%; height: 420px; object-fit: cover; } .iva-page .hero-image-float { position: absolute; bottom: -20px; left: -20px; background: var(--white); border: 2px solid var(--green-light); border-radius: var(--radius-md); padding: 16px 20px; box-shadow: var(--shadow-card); animation: floatSoft 4s ease-in-out infinite; } .iva-page .hero-image-float .float-emoji { font-size: 28.8px; } .iva-page .hero-image-float .float-text { font-weight: 700; font-size: 13.6px; color: var(--text-heading); } /* ============================================================ .iva-page 2) "ПОЗНАТО ЛИ ТИ Е?" — Pain Points ============================================================ */ .iva-page .pain-points { padding: var(--section-pad); background: var(--white); position: relative; } .iva-page .pain-points .section-header { text-align: center; margin-bottom: 48px; } .iva-page .pain-points .section-subtitle { margin: 0 auto; } .iva-page .pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 40px; } .iva-page .pain-card { display: flex; align-items: flex-start; gap: 16px; background: var(--off-white); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 24px; transition: all 0.35s ease; } .iva-page .pain-card:hover { border-color: var(--gold); background: var(--gold-bg); transform: translateY(-3px); box-shadow: var(--shadow-hover); } .iva-page .pain-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--gold-light); display: flex; align-items: center; justify-content: center; font-size: 22.4px; } .iva-page .pain-card:hover .pain-icon { background: var(--gold); } .iva-page .pain-text { font-size: 15.2px; line-height: 1.7; color: var(--text); } .iva-page .pain-reassurance { text-align: center; max-width: 600px; margin: 0 auto; padding: 32px; background: var(--green-light); border-radius: var(--radius-lg); border: 2px solid rgba(140, 182, 60, 0.2); } .iva-page .pain-reassurance p { font-size: 17.6px; font-weight: 600; color: var(--green-dark); line-height: 1.7; } .iva-page .pain-reassurance .emoji { font-size: 24px; margin-bottom: 8px; display: block; } /* ============================================================ .iva-page 3) "КОЯ СЪМ АЗ" — About ============================================================ */ .iva-page .about { padding: var(--section-pad); background: var(--off-white); position: relative; } .iva-page .about .container { display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: center; } .iva-page .about-photo-wrapper { position: relative; } .iva-page .about-photo { width: 100%; border-radius: var(--radius-xl); border: 3px solid var(--green-light); box-shadow: var(--shadow-card); object-fit: cover; height: 400px; } .iva-page .about-photo-badge { position: absolute; bottom: -16px; right: -16px; background: var(--gold); color: var(--text-heading); font-weight: 800; font-size: 13.6px; padding: 12px 20px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .iva-page .about-content h2 { font-size: clamp(24px, 3.5vw, 32px); margin-bottom: 20px; } .iva-page .about-content h2 .name { color: var(--green); font-family: 'Caveat', cursive; font-size: 1.3em; } .iva-page .about-content p { color: var(--text-light); margin-bottom: 16px; font-size: 16.8px; } .iva-page .about-values { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; } .iva-page .about-value { display: flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--green-light); border-radius: 50px; padding: 10px 20px; font-size: 14.4px; font-weight: 600; color: var(--text); } .iva-page .about-value .emoji { font-size: 19.2px; } /* ============================================================ .iva-page 4) "ЯСЕН ПЛАН В 3 СТЪПКИ" — Steps ============================================================ */ .iva-page .steps { padding: var(--section-pad); background: var(--white); position: relative; } .iva-page .steps .section-header { text-align: center; margin-bottom: 56px; } .iva-page .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; } /* Connector line */ .iva-page .steps-grid::before { content: ''; position: absolute; top: 56px; left: calc(16.666% + 16px); right: calc(16.666% + 16px); height: 3px; background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 8px, transparent 8px, transparent 16px); z-index: 0; } .iva-page .step-card { text-align: center; position: relative; z-index: 1; } .iva-page .step-number { width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28.8px; font-weight: 800; transition: all 0.3s ease; } .iva-page .step-card:nth-child(1) .step-number { background: var(--gold); color: var(--white); box-shadow: 0 4px 16px rgba(245,197,66,0.35); } .iva-page .step-card:nth-child(2) .step-number { background: var(--orange); color: var(--white); box-shadow: 0 4px 16px rgba(232,148,58,0.35); } .iva-page .step-card:nth-child(3) .step-number { background: var(--green); color: var(--white); box-shadow: 0 4px 16px rgba(140,182,60,0.35); } .iva-page .step-card:hover .step-number { transform: scale(1.1); } .iva-page .step-emoji { font-size: 32px; margin-bottom: 12px; } .iva-page .step-card h3 { font-size: 18.4px; font-weight: 700; margin-bottom: 12px; } .iva-page .step-card p { font-size: 15.2px; color: var(--text-light); line-height: 1.7; max-width: 300px; margin: 0 auto; } /* ============================================================ .iva-page 5) "КАКВО ПОЛУЧАВАШ" — Benefits ============================================================ */ .iva-page .benefits { padding: var(--section-pad); background: linear-gradient(180deg, var(--off-white) 0%, var(--green-light) 100%); position: relative; } .iva-page .benefits .section-header { text-align: center; margin-bottom: 48px; } .iva-page .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .iva-page .benefit-card { background: var(--white); border: 2px solid var(--green-light); border-radius: var(--radius-md); padding: 32px 28px; transition: all 0.35s ease; position: relative; overflow: hidden; } .iva-page .benefit-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--green); border-radius: 4px 4px 0 0; opacity: 0; transition: opacity 0.3s ease; } .iva-page .benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--green); } .iva-page .benefit-card:hover::before { opacity: 1; } .iva-page .benefit-icon { width: 56px; height: 56px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 25.6px; margin-bottom: 16px; } .iva-page .benefit-card:nth-child(1) .benefit-icon { background: var(--gold-light); } .iva-page .benefit-card:nth-child(2) .benefit-icon { background: var(--green-light); } .iva-page .benefit-card:nth-child(3) .benefit-icon { background: var(--orange-light); } .iva-page .benefit-card:nth-child(4) .benefit-icon { background: var(--gold-light); } .iva-page .benefit-card:nth-child(5) .benefit-icon { background: var(--green-light); } .iva-page .benefit-card:nth-child(6) .benefit-icon { background: var(--orange-light); } .iva-page .benefit-card h3 { font-size: 16.8px; font-weight: 700; margin-bottom: 10px; } .iva-page .benefit-card p { font-size: 14.9px; color: var(--text-light); line-height: 1.7; } /* ============================================================ .iva-page 6) "КАКВО СЕ ПРОМЕНЯ" — Outcomes ============================================================ */ .iva-page .outcomes { padding: var(--section-pad); background: var(--white); } .iva-page .outcomes .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .iva-page .outcomes-content .section-header { margin-bottom: 32px; } .iva-page .outcome-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; } .iva-page .outcome-check { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 17.6px; font-weight: 700; margin-top: 2px; } .iva-page .outcome-item p { font-size: 16.3px; line-height: 1.7; } .iva-page .outcome-item strong { color: var(--text-heading); } .iva-page .outcomes-visual { position: relative; } .iva-page .outcomes-image { border-radius: var(--radius-xl); border: 3px solid var(--gold-light); box-shadow: var(--shadow-card); width: 100%; height: 420px; object-fit: cover; } .iva-page .outcomes-float { position: absolute; top: -16px; right: -16px; background: var(--gold); border-radius: var(--radius-md); padding: 16px 24px; box-shadow: var(--shadow-card); text-align: center; animation: floatSoft 5s ease-in-out infinite; } .iva-page .outcomes-float .big-emoji { font-size: 32px; } .iva-page .outcomes-float .float-label { font-weight: 700; font-size: 12.8px; color: var(--text-heading); margin-top: 4px; } /* ============================================================ .iva-page 7) TESTIMONIALS ============================================================ */ .iva-page .testimonials { padding: var(--section-pad); background: var(--gold-bg); position: relative; } .iva-page .testimonials .section-header { text-align: center; margin-bottom: 48px; } .iva-page .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .iva-page .testimonial-card { background: var(--white); border-radius: var(--radius-md); padding: 32px; border: 2px solid rgba(245,197,66,0.25); box-shadow: var(--shadow-soft); transition: all 0.35s ease; position: relative; } .iva-page .testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .iva-page .testimonial-quote-mark { font-family: 'Caveat', cursive; font-size: 64px; color: var(--gold); line-height: 1; margin-bottom: -12px; } .iva-page .testimonial-text { font-size: 16px; font-style: italic; color: var(--text); line-height: 1.8; margin-bottom: 20px; } .iva-page .testimonial-author { display: flex; align-items: center; gap: 12px; } .iva-page .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--green-light); display: flex; align-items: center; justify-content: center; font-size: 17.6px; font-weight: 700; color: var(--green-dark); } .iva-page .testimonial-meta .name { font-weight: 700; font-size: 14.4px; color: var(--text-heading); } .iva-page .testimonial-meta .detail { font-size: 13.1px; color: var(--text-light); } .iva-page .testimonial-stars { position: absolute; top: 24px; right: 28px; color: var(--gold); font-size: 14.4px; letter-spacing: 2px; } /* ============================================================ .iva-page 8) FAQ ============================================================ */ .iva-page .faq { padding: var(--section-pad); background: var(--white); } .iva-page .faq .container { max-width: 800px; } .iva-page .faq .section-header { text-align: center; margin-bottom: 48px; } .iva-page .faq-item { border: 2px solid var(--border); border-radius: var(--radius-md); margin-bottom: 16px; overflow: hidden; transition: all 0.3s ease; } .iva-page .faq-item:hover { border-color: var(--green-light); } .iva-page .faq-item.active { border-color: var(--green); box-shadow: var(--shadow-soft); } .iva-page .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; cursor: pointer; background: var(--off-white); transition: background 0.3s ease; user-select: none; } .iva-page .faq-item.active .faq-question { background: var(--green-light); } .iva-page .faq-question h3 { font-size: 16.8px; font-weight: 700; display: flex; align-items: center; gap: 12px; } .iva-page .faq-question .emoji { font-size: 20.8px; } .iva-page .faq-toggle { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 19.2px; font-weight: 700; transition: transform 0.3s ease; } .iva-page .faq-item.active .faq-toggle { transform: rotate(45deg); } .iva-page .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } .iva-page .faq-item.active .faq-answer { max-height: 300px; } .iva-page .faq-answer-inner { padding: 0 28px 24px; color: var(--text-light); line-height: 1.8; font-size: 15.5px; } /* ============================================================ .iva-page 9) CTA — Booking ============================================================ */ .iva-page .cta { padding: 100px 0; background: linear-gradient(160deg, var(--green-light) 0%, var(--gold-bg) 50%, var(--off-white) 100%); position: relative; overflow: hidden; } .iva-page .cta::before { content: ''; position: absolute; top: -100px; right: -100px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(140,182,60,0.12) 0%, transparent 70%); border-radius: 50%; } .iva-page .cta .container { position: relative; z-index: 1; } .iva-page .cta-card { max-width: 720px; margin: 0 auto; background: var(--white); border: 3px solid var(--green-light); border-radius: var(--radius-xl); padding: 56px 48px; text-align: center; box-shadow: var(--shadow-card); } .iva-page .cta-emoji { font-size: 48px; margin-bottom: 16px; } .iva-page .cta-card h2 { font-size: clamp(22.4px, 3.5vw, 30.4px); font-weight: 800; margin-bottom: 16px; } .iva-page .cta-card .cta-desc { color: var(--text-light); font-size: 16.3px; line-height: 1.8; margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; } .iva-page .cta-details { display: flex; justify-content: center; gap: 32px; margin-bottom: 32px; flex-wrap: wrap; } .iva-page .cta-detail { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.2px; color: var(--text); } .iva-page .cta-detail .emoji { font-size: 20.8px; } .iva-page .cta-price { display: inline-flex; align-items: baseline; gap: 6px; background: var(--gold); border-radius: var(--radius-md); padding: 12px 28px; margin-bottom: 28px; } .iva-page .cta-price .amount { font-size: 32px; font-weight: 800; color: var(--text-heading); } .iva-page .cta-price .label { font-size: 14.4px; font-weight: 600; color: var(--text); } .iva-page .cta-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .iva-page .cta-note { margin-top: 20px; font-size: 13.6px; color: var(--text-light); } /* ============================================================ .iva-page 10) ETHICS / BOUNDARIES ============================================================ */ .iva-page .ethics { padding: 60px 0 80px; background: var(--off-white); } .iva-page .ethics .container { max-width: 800px; } .iva-page .ethics-card { background: var(--white); border-radius: var(--radius-lg); border: 2px solid var(--green-light); padding: 40px; box-shadow: var(--shadow-soft); } .iva-page .ethics-card .section-header { text-align: center; margin-bottom: 32px; } .iva-page .ethics-items { display: flex; flex-direction: column; gap: 20px; } .iva-page .ethics-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; background: var(--off-white); border-radius: var(--radius-sm); transition: background 0.3s ease; } .iva-page .ethics-item:hover { background: var(--green-light); } .iva-page .ethics-icon { flex-shrink: 0; font-size: 24px; margin-top: 2px; } .iva-page .ethics-item p { font-size: 15.5px; line-height: 1.7; color: var(--text); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .iva-page .hero .container { grid-template-columns: 1fr; text-align: center; } .iva-page .hero-subtitle { margin: 0 auto 32px; } .iva-page .hero-buttons { justify-content: center; } .iva-page .hero-visual { max-width: 450px; margin: 0 auto; } .iva-page .hero-image-float { left: 10px; bottom: -16px; } .iva-page .about .container { grid-template-columns: 1fr; text-align: center; } .iva-page .about-photo-wrapper { max-width: 300px; margin: 0 auto; } .iva-page .about-photo { height: 320px; } .iva-page .about-photo-badge { right: 0; } .iva-page .about-values { justify-content: center; } .iva-page .steps-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } .iva-page .steps-grid::before { display: none; } .iva-page .outcomes .container { grid-template-columns: 1fr; } .iva-page .outcomes-visual { max-width: 450px; margin: 0 auto; order: -1; } .iva-page .outcomes-image { height: 300px; } .iva-page .cta-card { padding: 40px 28px; } } @media (max-width: 600px) { :root { --section-pad: 56px 0; } .iva-page .pain-grid { grid-template-columns: 1fr; } .iva-page .benefits-grid { grid-template-columns: 1fr; } .iva-page .testimonials-grid { grid-template-columns: 1fr; } .iva-page .cta-details { flex-direction: column; align-items: center; gap: 12px; } .iva-page .hero h1 { font-size: 25.6px; } .iva-page .hero-image-wrapper img { height: 280px; } }