/* ========================================================= RICKER PHARMACY - HEADER FINAL CSS Designed for the provided Divi 5 HTML structure ========================================================= */ /* ========================================================= 1. RESET ONLY HEADER ELEMENTS ========================================================= */ .et_pb_section_0, .et_pb_section_1, .et_pb_section_0 .et_pb_row_0, .et_pb_section_1 .et_pb_row_1, .et_pb_section_0 .et_pb_column, .et_pb_section_1 .et_pb_column { box-sizing: border-box !important; } /* Remove Divi default spacing */ .et_pb_section_0, .et_pb_section_1 { margin: 0 !important; padding: 0 !important; } .et_pb_section_0 .et_pb_row_0, .et_pb_section_1 .et_pb_row_1 { margin-top: 0 !important; margin-bottom: 0 !important; } /* ========================================================= 2. TOP BLUE BAR ========================================================= */ .et_pb_section_0 { width: 100% !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; margin: 0 !important; background: #0878c9 !important; display: flex !important; align-items: center !important; position: relative !important; z-index: 999 !important; } /* Top bar inner container */ .et_pb_section_0 .et_pb_row_0 { width: 1180px !important; max-width: 1180px !important; height: 34px !important; min-height: 34px !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 0 !important; } /* IMPORTANT: Force exactly 50/50 columns */ .et_pb_section_0 .et_pb_column_0 { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; } .et_pb_section_0 .et_pb_column_1 { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; text-align: right !important; } /* Top bar text */ .et_pb_section_0 .et_pb_text, .et_pb_section_0 .et_pb_text_inner { margin: 0 !important; padding: 0 !important; } .et_pb_section_0 p { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 34px !important; white-space: nowrap !important; text-align: inherit !important; } /* ========================================================= 3. MAIN HEADER ========================================================= */ .et_pb_section_1 { width: 100% !important; height: 82px !important; min-height: 82px !important; padding: 0 !important; margin: 0 !important; background: #ffffff !important; display: flex !important; align-items: center !important; position: relative !important; z-index: 998 !important; box-shadow: 0 1px 4px rgba(0,0,0,.05) !important; } /* Main header container */ .et_pb_section_1 .et_pb_row_1 { width: 1180px !important; max-width: 1180px !important; height: 82px !important; min-height: 82px !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 0 !important; } /* ========================================================= 4. LOGO COLUMN ========================================================= */ .et_pb_section_1 .et_pb_column_2 { width: 23% !important; max-width: 23% !important; flex: 0 0 23% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; } /* Logo module */ .et_pb_section_1 .et_pb_image_0 { width: 155px !important; max-width: 155px !important; height: 70px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } /* Image wrapper */ .et_pb_section_1 .et_pb_image_0 .et_pb_image_wrap { width: 155px !important; max-width: 155px !important; height: 70px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } /* Actual logo */ .et_pb_section_1 .et_pb_image_0 img { display: block !important; width: 155px !important; max-width: 155px !important; height: 70px !important; max-height: 70px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: left center !important; } /* ========================================================= 5. NAVIGATION COLUMN ========================================================= */ .et_pb_section_1 .et_pb_column_3 { width: 52% !important; max-width: 52% !important; flex: 0 0 52% !important; height: 82px !important; min-height: 82px !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 29px !important; text-align: center !important; } /* ========================================================= 6. NAVIGATION LINKS ========================================================= */ .et_pb_section_1 .et_pb_column_3 .et_pb_link { width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; position: relative !important; } /* Link inner */ .et_pb_section_1 .et_pb_column_3 .et_pb_link_inner { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } /* Link text */ .et_pb_section_1 .et_pb_column_3 .et_pb_link_text { margin: 0 !important; padding: 0 !important; } .et_pb_section_1 .et_pb_column_3 .et_pb_link_text p { margin: 0 !important; padding: 0 !important; color: #071a3b !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; transition: color .2s ease !important; } /* Hover */ .et_pb_section_1 .et_pb_column_3 .et_pb_link:hover p { color: #198c32 !important; } /* ========================================================= 7. ACTIVE HOME UNDERLINE ========================================================= */ .et_pb_section_1 .et_pb_link_0::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: -17px !important; width: 30px !important; height: 3px !important; background: #27952d !important; border-radius: 3px !important; transform: translateX(-50%) !important; display: block !important; } /* ========================================================= 8. BUTTON COLUMN ========================================================= */ .et_pb_section_1 .et_pb_column_4 { width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; text-align: right !important; } /* Button wrapper */ .et_pb_section_1 .et_pb_button_0_wrapper { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } /* ========================================================= 9. REFILL PRESCRIPTION BUTTON ========================================================= */ .et_pb_section_1 .et_pb_button_0 { width: 158px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #0878cf !important; background-image: none !important; border: 0 !important; border-radius: 6px !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 44px !important; text-decoration: none !important; box-shadow: none !important; transition: all .2s ease !important; } /* Remove Divi arrow */ .et_pb_section_1 .et_pb_button_0::after, .et_pb_section_1 .et_pb_button_0::before { display: none !important; } /* Button hover */ .et_pb_section_1 .et_pb_button_0:hover { background: #0568b6 !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* ========================================================= 10. REMOVE DIVI FLEX GROW / SHRINK PROBLEMS ========================================================= */ .et_pb_section_1 .et_pb_column_2, .et_pb_section_1 .et_pb_column_3, .et_pb_section_1 .et_pb_column_4 { flex-grow: 0 !important; flex-shrink: 0 !important; } /* ========================================================= 11. LARGE DESKTOP ========================================================= */ @media (min-width: 1280px) { .et_pb_image_1, .et_pb_image_2, .et_pb_image_3, .et_pb_image_4{ width: 240px!important; } body #page-container .et_pb_section .et_pb_button_0{ font-size: 12px !important; } } @media (min-width: 1400px) { .et_pb_section_0 .et_pb_row_0, .et_pb_section_1 .et_pb_row_1 { width: 1180px !important; max-width: 1180px !important; } .et_pb_section_1 .et_pb_column_3 { gap: 31px !important; } } /* ========================================================= 12. LAPTOP ========================================================= */ @media (min-width: 981px) and (max-width: 1399px) { .et_pb_section_0 .et_pb_row_0, .et_pb_section_1 .et_pb_row_1 { width: calc(100% - 60px) !important; max-width: 1180px !important; } .et_pb_section_1 .et_pb_image_0, .et_pb_section_1 .et_pb_image_0 .et_pb_image_wrap, .et_pb_section_1 .et_pb_image_0 img { width: 145px !important; max-width: 145px !important; } .et_pb_section_1 .et_pb_column_3 { gap: 20px !important; } .et_pb_section_1 .et_pb_column_3 .et_pb_link_text p { font-size: 12px !important; } .et_pb_section_1 .et_pb_button_0 { width: 150px !important; } } /* ========================================================= 13. TABLET ========================================================= */ @media (max-width: 980px) { .et_pb_section_0 { height: 38px !important; min-height: 38px !important; } .et_pb_section_0 .et_pb_row_0 { width: calc(100% - 30px) !important; max-width: none !important; height: 38px !important; min-height: 38px !important; } .et_pb_section_0 .et_pb_column_0, .et_pb_section_0 .et_pb_column_1 { height: 38px !important; min-height: 38px !important; } .et_pb_section_1 { height: auto !important; min-height: 80px !important; } .et_pb_section_1 .et_pb_row_1 { width: calc(100% - 30px) !important; max-width: none !important; height: auto !important; min-height: 80px !important; } .et_pb_section_1 .et_pb_column_2 { width: 25% !important; max-width: 25% !important; flex-basis: 25% !important; } .et_pb_section_1 .et_pb_column_3 { width: 50% !important; max-width: 50% !important; flex-basis: 50% !important; gap: 14px !important; } .et_pb_section_1 .et_pb_column_4 { width: 25% !important; max-width: 25% !important; flex-basis: 25% !important; } .et_pb_section_1 .et_pb_image_0, .et_pb_section_1 .et_pb_image_0 .et_pb_image_wrap, .et_pb_section_1 .et_pb_image_0 img { width: 130px !important; max-width: 130px !important; } .et_pb_section_1 .et_pb_column_3 .et_pb_link_text p { font-size: 10px !important; } .et_pb_section_1 .et_pb_button_0 { width: 135px !important; height: 40px !important; min-height: 40px !important; font-size: 10px !important; line-height: 40px !important; } } /* ========================================================= 14. MOBILE ========================================================= */ @media (max-width: 767px) { .et_pb_section_0 { height: auto !important; min-height: 40px !important; } .et_pb_section_0 .et_pb_row_0 { width: calc(100% - 30px) !important; height: auto !important; min-height: 40px !important; flex-direction: column !important; padding: 7px 0 !important; gap: 4px !important; } .et_pb_section_0 .et_pb_column_0, .et_pb_section_0 .et_pb_column_1 { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; height: auto !important; min-height: 0 !important; justify-content: center !important; text-align: center !important; } .et_pb_section_0 p { font-size: 9px !important; line-height: 1.2 !important; } .et_pb_section_1 { height: auto !important; min-height: 0 !important; padding: 12px 0 !important; } .et_pb_section_1 .et_pb_row_1 { width: calc(100% - 30px) !important; height: auto !important; min-height: 0 !important; flex-direction: column !important; gap: 14px !important; } .et_pb_section_1 .et_pb_column_2, .et_pb_section_1 .et_pb_column_3, .et_pb_section_1 .et_pb_column_4 { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; height: auto !important; min-height: 0 !important; justify-content: center !important; } .et_pb_section_1 .et_pb_image_0, .et_pb_section_1 .et_pb_image_0 .et_pb_image_wrap, .et_pb_section_1 .et_pb_image_0 img { width: 155px !important; max-width: 155px !important; height: 65px !important; } .et_pb_section_1 .et_pb_column_3 { flex-wrap: wrap !important; gap: 14px 20px !important; } .et_pb_section_1 .et_pb_column_3 .et_pb_link_text p { font-size: 11px !important; } .et_pb_section_1 .et_pb_link_0::after { bottom: -7px !important; } .et_pb_section_1 .et_pb_column_4 { justify-content: center !important; } } /* ========================================================= RICKER PHARMACY - PREMIUM HOME HERO For the accompanying Divi 5 JSON ========================================================= */ #ricker-hero-banner.ricker-hero-premium { position: relative !important; overflow: hidden !important; min-height: 570px !important; height: 570px !important; padding: 0 !important; background: radial-gradient(circle at 78% 45%, rgba(8,120,201,.08) 0, rgba(8,120,201,0) 28%), linear-gradient(105deg, #ffffff 0%, #ffffff 52%, #f3fbf4 100%) !important; } #ricker-hero-banner.ricker-hero-premium::before { content: ""; position: absolute; width: 520px; height: 520px; right: -170px; top: 25px; border-radius: 50%; background: rgba(50,148,47,.08); z-index: 0; } #ricker-hero-banner.ricker-hero-premium::after { content: ""; position: absolute; width: 340px; height: 340px; right: 220px; bottom: -230px; border-radius: 50%; background: rgba(8,120,201,.06); z-index: 0; } #ricker-hero-banner.ricker-hero-premium .et_pb_row_2 { width: 1280px !important; max-width: 1280px !important; height: 100% !important; min-height: 570px !important; margin: 0 auto !important; padding: 0 !important; position: relative !important; z-index: 2 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_5 { width: 54.166667% !important; max-width: 54.166667% !important; flex: 0 0 54.166667% !important; min-height: 570px !important; padding: 0 20px 0 0 !important; justify-content: center !important; position: relative !important; z-index: 5 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 { width: 45.833333% !important; max-width: 45.833333% !important; flex: 0 0 45.833333% !important; min-height: 570px !important; padding: 0 !important; position: relative !important; z-index: 3 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_6::before { content: ""; position: absolute; width: 470px; height: 470px; right: -65px; top: 48px; border-radius: 50%; border: 1px solid rgba(50,148,47,.14); background: rgba(255,255,255,.32); box-shadow: 0 30px 80px rgba(16,42,67,.08); z-index: -1; } #ricker-hero-banner.ricker-hero-premium .et_pb_heading_0, #ricker-hero-banner.ricker-hero-premium .et_pb_text_2, #ricker-hero-banner.ricker-hero-premium .et_pb_group_0, #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 { position: relative !important; z-index: 6 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_text_0 { margin: 0 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_text_0 p { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 7px 13px !important; border-radius: 999px !important; background: #eaf7e9 !important; color: #32942f !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1.1px !important; line-height: 1 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_text_0 span { color: #0878c9 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_heading_0 { margin: 0 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_heading_0 + .et_pb_heading { margin-top: 0 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_module_header { margin: 0 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_text_2 { margin-top: 20px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_text_2 p { max-width: 570px !important; margin: 0 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_0 { margin-top: 22px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_button { min-height: 50px !important; border-radius: 8px !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_button:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 25px rgba(16,42,67,.12) !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 { margin-top: 27px !important; padding-top: 0 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 > .et_pb_group { min-height: 52px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 .et_pb_icon { flex: 0 0 24px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 .et-pb-icon { line-height: 1 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 p { margin: 0 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 .et_pb_image { width: 100% !important; max-width: 650px !important; margin: 0 0 0 auto !important; transform: translate(12px, 2px) !important; filter: drop-shadow(0 22px 35px rgba(16,42,67,.10)) !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 .et_pb_image_wrap, #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 img { width: 100% !important; display: block !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 img { height: auto !important; object-fit: contain !important; } @media (min-width: 981px) and (max-width: 1399px) { #ricker-hero-banner.ricker-hero-premium, #ricker-hero-banner.ricker-hero-premium .et_pb_row_2, #ricker-hero-banner.ricker-hero-premium .et_pb_column_5, #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 { min-height: 540px !important; height: 540px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_row_2 { width: calc(100% - 70px) !important; max-width: 1180px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_module_header { font-size: 52px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 .et_pb_image { max-width: 590px !important; transform: translate(5px, 0) !important; } } @media (max-width: 980px) { #ricker-hero-banner.ricker-hero-premium { height: auto !important; min-height: 0 !important; padding: 45px 0 35px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_row_2 { width: calc(100% - 50px) !important; max-width: none !important; min-height: 0 !important; height: auto !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_5, #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; min-height: 0 !important; padding: 0 !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 { margin-top: 25px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_column_6 .et_pb_image { max-width: 680px !important; margin: 0 auto !important; transform: none !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_module_header { font-size: 48px !important; } } @media (max-width: 767px) { #ricker-hero-banner.ricker-hero-premium { padding: 35px 0 25px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_row_2 { width: calc(100% - 34px) !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_module_header { font-size: 40px !important; letter-spacing: -1px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_text_2 p { font-size: 14px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_0 { flex-wrap: wrap !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 { flex-wrap: wrap !important; gap: 16px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 > .et_pb_group { width: calc(50% - 8px) !important; } } @media (max-width: 480px) { #ricker-hero-banner.ricker-hero-premium .et_pb_module_header { font-size: 35px !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_button { width: 100% !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_0 { width: 100% !important; } #ricker-hero-banner.ricker-hero-premium .et_pb_group_1 > .et_pb_group { width: 100% !important; } } /* ========================================================= RICKER PHARMACY - TRUST SECTION ========================================================= */ #pharmacy-trust-section { width: 100% !important; margin: 0 !important; overflow: hidden !important; } /* Main container */ #pharmacy-trust-section > .et_pb_row_5 { width: min(1180px, 80%) !important; max-width: 1180px !important; margin: 0 auto !important; padding: 0 !important; display: grid !important; grid-template-columns: 48% 52% !important; gap: 25px !important; align-items: center !important; } /* Remove Divi default spacing */ #pharmacy-trust-section .et_pb_column { margin: 0 !important; padding: 0 !important; } /* ========================================================= LEFT SIDE ========================================================= */ #pharmacy-trust-section .et_pb_column_12 { width: 100% !important; max-width: none !important; } /* Nested left row */ #pharmacy-trust-section .et_pb_row_6 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 58% 42% !important; gap: 5px !important; align-items: center !important; } /* Text column */ #pharmacy-trust-section .et_pb_column_13 { width: 100% !important; max-width: none !important; } /* Main heading */ /* Paragraph */ #pharmacy-trust-section .et_pb_text_12 p { margin: 0 0 16px 0 !important; padding: 0 !important; line-height: 1.55 !important; color: #223858 !important; } /* Green heading */ #pharmacy-trust-section .et_pb_text_11 h1 span { color: #2f8b3b !important; } /* ========================================================= CHECK LIST ========================================================= */ #pharmacy-trust-section .et_pb_icon_list_0 { margin: 12px 0 0 0 !important; padding: 0 !important; list-style: none !important; } #pharmacy-trust-section .et_pb_icon_list_item { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 9px 0 !important; padding: 0 !important; } #pharmacy-trust-section .et_pb_icon_list_item .et-pb-icon { flex: 0 0 auto !important; font-size: 13px !important; line-height: 1 !important; color: #2f9b3c !important; } #pharmacy-trust-section .et_pb_icon_list_text { font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; line-height: 1.3 !important; color: #526276 !important; } /* ========================================================= BASKET IMAGE ========================================================= */ #pharmacy-trust-section .et_pb_column_14 { width: 100% !important; max-width: none !important; display: flex !important; justify-content: center !important; align-items: center !important; } #pharmacy-trust-section .et_pb_image_5 { width: 100% !important; margin: 0 !important; padding: 0 !important; } #pharmacy-trust-section .et_pb_image_5 .et_pb_image_wrap { display: flex !important; justify-content: center !important; align-items: center !important; } #pharmacy-trust-section .et_pb_image_5 img { width: 100% !important; max-width: 235px !important; height: auto !important; display: block !important; object-fit: contain !important; } /* ========================================================= RIGHT SIDE - 4 FEATURE CARDS ========================================================= */ #pharmacy-trust-section .et_pb_column_15 { width: 100% !important; max-width: none !important; display: block !important; } /* Feature grid */ #pharmacy-trust-section .et_pb_column_16 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, 1fr) !important; gap: 12px !important; } /* Each card */ #pharmacy-trust-section .et_pb_group_13, #pharmacy-trust-section .et_pb_group_14, #pharmacy-trust-section .et_pb_group_15, #pharmacy-trust-section .et_pb_group_16 { width: 100% !important; min-width: 0 !important; min-height: 135px !important; margin: 0 !important; padding: 20px 22px !important; background: #ffffff !important; border: 1px solid #e3eaf0 !important; border-radius: 12px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 48px 1fr !important; grid-template-rows: auto 1fr !important; column-gap: 13px !important; row-gap: 5px !important; align-items: start !important; box-shadow: 0 3px 12px rgba(11, 33, 68, 0.06) !important; transition: all 0.25s ease !important; } /* Hover */ #pharmacy-trust-section .et_pb_group_13:hover, #pharmacy-trust-section .et_pb_group_14:hover, #pharmacy-trust-section .et_pb_group_15:hover, #pharmacy-trust-section .et_pb_group_16:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(11, 33, 68, 0.10) !important; } /* ========================================================= CARD ICON ========================================================= */ #pharmacy-trust-section .et_pb_svg { width: 42px !important; height: 42px !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; } #pharmacy-trust-section .et_pb_svg_inner { width: 42px !important; height: 42px !important; } #pharmacy-trust-section .et_pb_svg svg { width: 42px !important; height: 42px !important; display: block !important; } /* ========================================================= CARD HEADINGS ========================================================= */ #pharmacy-trust-section .et_pb_heading { width: 100% !important; margin: 0 !important; padding: 0 !important; grid-column: 2 !important; grid-row: 1 !important; } #pharmacy-trust-section .et_pb_heading_container { margin: 0 !important; padding: 0 !important; } #pharmacy-trust-section .et_pb_heading h4 { margin-bottom: 15px; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 700 !important; color: #0b2144 !important; } /* ========================================================= CARD DESCRIPTION ========================================================= */ #pharmacy-trust-section .et_pb_text { width: 100% !important; margin: 0 !important; padding: 0 !important; grid-column: 2 !important; grid-row: 2 !important; } #pharmacy-trust-section .et_pb_text p { margin: 0 !important; padding: 0 !important; font-weight: 400 !important; color: #526276 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 980px) { #pharmacy-trust-section { padding: 25px 0 !important; } #pharmacy-trust-section > .et_pb_row_5 { width: 92% !important; grid-template-columns: 1fr !important; gap: 25px !important; } #pharmacy-trust-section .et_pb_row_6 { grid-template-columns: 58% 42% !important; } #pharmacy-trust-section .et_pb_column_16 { grid-template-columns: repeat(2, 1fr) !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { #pharmacy-trust-section { padding: 25px 15px !important; } #pharmacy-trust-section > .et_pb_row_5 { width: 100% !important; grid-template-columns: 1fr !important; } #pharmacy-trust-section .et_pb_row_6 { grid-template-columns: 1fr !important; gap: 15px !important; } #pharmacy-trust-section .et_pb_image_5 img { max-width: 220px !important; } #pharmacy-trust-section .et_pb_column_16 { grid-template-columns: 1fr !important; gap: 12px !important; } #pharmacy-trust-section .et_pb_group_13, #pharmacy-trust-section .et_pb_group_14, #pharmacy-trust-section .et_pb_group_15, #pharmacy-trust-section .et_pb_group_16 { min-height: 120px !important; } } /* ========================================================= RICKER PHARMACY - STATS / COUNTER STRIP Target: 5 equal horizontal items ========================================================= */ .et_pb_section_5 { width: 100% !important; margin: 0 !important; \ background: #f7f9fb !important; border: 1px solid #e5ebf0 !important; box-sizing: border-box !important; } /* ========================================================= MAIN ROW ========================================================= */ /* ========================================================= REMOVE DIVI COLUMN DEFAULTS ========================================================= */ /* ========================================================= VERTICAL DIVIDERS ========================================================= */ /* ========================================================= STAT ITEM ========================================================= */ .et_pb_section_5 .et_pb_group_17, .et_pb_section_5 .et_pb_group_19, .et_pb_section_5 .et_pb_group_21, .et_pb_section_5 .et_pb_group_23, .et_pb_section_5 .et_pb_group_25 { width: 100% !important; max-width: 190px !important; min-height: 86px !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 20px !important; box-sizing: border-box !important; } /* ========================================================= ICON ========================================================= */ .et_pb_section_5 .et_pb_svg_4, .et_pb_section_5 .et_pb_svg_5, .et_pb_section_5 .et_pb_svg_6, .et_pb_section_5 .et_pb_svg_7, .et_pb_section_5 .et_pb_svg_8 { width: 58px !important; min-width: 58px !important; max-width: 58px !important; height: 64px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 58px !important; } /* SVG wrapper */ .et_pb_section_5 .et_pb_svg_inner { width: 58px !important; height: 64px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Actual SVG */ .et_pb_section_5 .et_pb_svg_inner svg { width: 58px !important; height: 58px !important; display: block !important; } /* ========================================================= TEXT GROUP ========================================================= */ .et_pb_section_5 .et_pb_group_18, .et_pb_section_5 .et_pb_group_20, .et_pb_section_5 .et_pb_group_22, .et_pb_section_5 .et_pb_group_24, .et_pb_section_5 .et_pb_group_26 { width: auto !important; max-width: 115px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 5px !important; flex: 1 1 auto !important; } /* ========================================================= NUMBERS ========================================================= */ .et_pb_section_5 .et_pb_heading_10, .et_pb_section_5 .et_pb_heading_11, .et_pb_section_5 .et_pb_heading_12, .et_pb_section_5 .et_pb_heading_13, .et_pb_section_5 .et_pb_heading_14 { width: 100% !important; margin: 0 !important; padding: 0 !important; } .et_pb_section_5 .et_pb_heading_container { margin: 0 !important; padding: 0 !important; } /* Number */ .et_pb_section_5 .et_pb_module_header { margin: 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; letter-spacing: -0.5px !important; color: #0c2141 !important; text-align: left !important; } /* ========================================================= DESCRIPTION ========================================================= */ .et_pb_section_5 .et_pb_text_17, .et_pb_section_5 .et_pb_text_18, .et_pb_section_5 .et_pb_text_19, .et_pb_section_5 .et_pb_text_20, .et_pb_section_5 .et_pb_text_21 { width: 100% !important; margin: 0 !important; padding: 0 !important; } .et_pb_section_5 .et_pb_text_inner { margin: 0 !important; padding: 0 !important; } /* ========================================================= GREEN ICONS ========================================================= */ .et_pb_section_5 .et_pb_svg_4, .et_pb_section_5 .et_pb_svg_6, .et_pb_section_5 .et_pb_svg_8 { color: #4a9d35 !important; } /* ========================================================= BLUE ICONS ========================================================= */ .et_pb_section_5 .et_pb_svg_5, .et_pb_section_5 .et_pb_svg_7 { color: #0754b9 !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .et_pb_section_5 .et_pb_row_7 { width: 96% !important; } .et_pb_section_5 .et_pb_column_17, .et_pb_section_5 .et_pb_column_18, .et_pb_section_5 .et_pb_column_19, .et_pb_section_5 .et_pb_column_20, .et_pb_section_5 .et_pb_column_21 { padding: 0 15px !important; } .et_pb_section_5 .et_pb_group_17, .et_pb_section_5 .et_pb_group_19, .et_pb_section_5 .et_pb_group_21, .et_pb_section_5 .et_pb_group_23, .et_pb_section_5 .et_pb_group_25 { gap: 12px !important; } .et_pb_section_5 .et_pb_svg_4, .et_pb_section_5 .et_pb_svg_5, .et_pb_section_5 .et_pb_svg_6, .et_pb_section_5 .et_pb_svg_7, .et_pb_section_5 .et_pb_svg_8 { width: 48px !important; min-width: 48px !important; flex-basis: 48px !important; } .et_pb_section_5 .et_pb_svg_inner svg { width: 48px !important; height: 48px !important; } .et_pb_section_5 .et_pb_module_header { font-size: 26px !important; } .et_pb_section_5 .et_pb_text p { font-size: 12px !important; } } /* ========================================================= TABLET / SMALL ========================================================= */ @media (max-width: 767px) { .et_pb_section_5 { padding: 20px 0 !important; } .et_pb_section_5 .et_pb_row_7 { width: 92% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 20px !important; } .et_pb_section_5 .et_pb_column_17, .et_pb_section_5 .et_pb_column_18, .et_pb_section_5 .et_pb_column_19, .et_pb_section_5 .et_pb_column_20, .et_pb_section_5 .et_pb_column_21 { border-right: none !important; padding: 0 10px !important; } .et_pb_section_5 .et_pb_column_17:nth-child(odd), .et_pb_section_5 .et_pb_column_19:nth-child(odd) { border-right: 1px solid #dfe6ec !important; } .et_pb_section_5 .et_pb_group_17, .et_pb_section_5 .et_pb_group_19, .et_pb_section_5 .et_pb_group_21, .et_pb_section_5 .et_pb_group_23, .et_pb_section_5 .et_pb_group_25 { justify-content: flex-start !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 480px) { .et_pb_section_5 .et_pb_row_7 { grid-template-columns: 1fr !important; row-gap: 18px !important; } .et_pb_section_5 .et_pb_column_17, .et_pb_section_5 .et_pb_column_18, .et_pb_section_5 .et_pb_column_19, .et_pb_section_5 .et_pb_column_20, .et_pb_section_5 .et_pb_column_21 { border-right: none !important; border-bottom: 1px solid #dfe6ec !important; padding: 0 5px 16px 5px !important; } .et_pb_section_5 .et_pb_column_21 { border-bottom: none !important; } .et_pb_section_5 .et_pb_group_17, .et_pb_section_5 .et_pb_group_19, .et_pb_section_5 .et_pb_group_21, .et_pb_section_5 .et_pb_group_23, .et_pb_section_5 .et_pb_group_25 { max-width: 230px !important; margin: 0 auto !important; } .et_pb_section_5 .et_pb_module_header { font-size: 28px !important; } .et_pb_section_5 .et_pb_text p { font-size: 13px !important; } } /* ========================================================= RICKER PHARMACY - ABOUT / WHY CHOOSE US DIVI 5 ========================================================= */ /* --------------------------------------------------------- MAIN SECTION --------------------------------------------------------- */ .et_pb_section_6 { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 35px 0 !important; background: #ffffff !important; box-sizing: border-box !important; } /* ========================================= 3 CARD - COMMON CREATIVE DESIGN ========================================= */ /* ========================================= DESCRIPTION ========================================= */ .et_pb_blurb_0 .et_pb_blurb_description, .et_pb_blurb_1 .et_pb_blurb_description, .et_pb_blurb_2 .et_pb_blurb_description { color: #68756e; font-size: 16px; line-height: 1.7; } .et_pb_blurb_0 .et_pb_blurb_description p, .et_pb_blurb_1 .et_pb_blurb_description p, .et_pb_blurb_2 .et_pb_blurb_description p { margin: 0; } /* ========================================= ARROW ========================================= */ /* ========================================= MAKE ALL 3 CARDS SAME HEIGHT ========================================= */ .et_pb_row_11 { align-items: stretch; } .et_pb_row_11 .et_pb_column { display: flex; } .et_pb_row_11 .et_pb_blurb { width: 100%; } /* ========================================= TABLET ========================================= */ @media (max-width: 980px) { .et_pb_blurb_0 .et_pb_main_blurb_image, .et_pb_blurb_1 .et_pb_main_blurb_image, .et_pb_blurb_2 .et_pb_main_blurb_image { width: calc(100% - 28px); margin: 14px 14px 0; } .et_pb_blurb_0 .et_pb_main_blurb_image img, .et_pb_blurb_1 .et_pb_main_blurb_image img, .et_pb_blurb_2 .et_pb_main_blurb_image img { height: 210px; } .et_pb_blurb_0 .et_pb_blurb_container, .et_pb_blurb_1 .et_pb_blurb_container, .et_pb_blurb_2 .et_pb_blurb_container { padding: 20px; } .et_pb_blurb_0 .et_pb_module_header, .et_pb_blurb_1 .et_pb_module_header, .et_pb_blurb_2 .et_pb_module_header { font-size: 21px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 767px) { .et_pb_row_11 .et_pb_column { display: block; margin-bottom: 25px; } .et_pb_blurb_0, .et_pb_blurb_1, .et_pb_blurb_2 { border-radius: 20px; } .et_pb_blurb_0 .et_pb_main_blurb_image, .et_pb_blurb_1 .et_pb_main_blurb_image, .et_pb_blurb_2 .et_pb_main_blurb_image { width: calc(100% - 24px); margin: 12px 12px 0; border-radius: 15px; } .et_pb_blurb_0 .et_pb_main_blurb_image img, .et_pb_blurb_1 .et_pb_main_blurb_image img, .et_pb_blurb_2 .et_pb_main_blurb_image img { height: 210px; } .et_pb_blurb_0 .et_pb_blurb_container, .et_pb_blurb_1 .et_pb_blurb_container, .et_pb_blurb_2 .et_pb_blurb_container { padding: 20px; } } :root { --ricker-green: #24764F; --ricker-green-dark: #14583A; --ricker-green-light: #EAF6EF; --ricker-blue: #0099C8; --ricker-blue-dark: #0878A5; --ricker-blue-light: #EAF8FC; --ricker-red: #E53935; --ricker-text: #173D31; --ricker-muted: #68776F; --ricker-border: #DCE9E1; --ricker-gradient: linear-gradient( 135deg, #24764F 0%, #0878A5 100% ); --ricker-shadow: 0 20px 45px rgba(36, 118, 79, 0.14); } /* ========================================= MAIN SECTION ========================================= */ .mc-why { position: relative !important; padding: 90px 0 !important; background: #ffffff !important; overflow: hidden !important; font-family: 'DM Sans', sans-serif !important; } /* ========================================= MAIN GRID ========================================= */ .mc-why-row { max-width: 1220px !important; width: 100% !important; display: grid !important; grid-template-columns: 0.85fr 1.15fr !important; gap: 65px !important; align-items: center !important; } .mc-why-row > .et_pb_column { float: none !important; width: 100% !important; margin: 0 !important; } /* ========================================= LEFT CONTENT ========================================= */ .mc-heading { margin-bottom: 25px !important; } .mc-heading p { margin: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--ricker-green) !important; } /* heading green / blue */ .mc-heading span:nth-child(1) { color: var(--ricker-green) !important; } .mc-heading span:nth-child(2) { color: var(--ricker-text) !important; } .mc-heading span:nth-child(3) { color: var(--ricker-blue) !important; } /* Description */ .mc-desc { max-width: 500px !important; } .mc-desc p { margin: 0 !important; color: var(--ricker-muted) !important; font-size: 16px !important; line-height: 1.8 !important; } /* ========================================= CARD GRID ========================================= */ .mc-why-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; } .mc-why-grid > .et_pb_column { float: none !important; width: 100% !important; margin: 0 !important; } /* ========================================= BASE CARD ========================================= */ .mc-why-card { position: relative !important; min-height: 176px !important; padding: 28px !important; background: #ffffff !important; border: 1px solid var(--ricker-border) !important; border-radius: 24px !important; box-shadow: 0 15px 35px rgba(23, 61, 49, 0.07) !important; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important; overflow: hidden !important; } /* Hover */ .mc-why-card:hover { transform: translateY(-7px) !important; border-color: rgba(36, 118, 79, 0.25) !important; box-shadow: var(--ricker-shadow) !important; } /* ========================================= CARD DECORATIVE CIRCLE ========================================= */ .mc-why-card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -55px; bottom: -65px; border-radius: 50%; background: rgba(36, 118, 79, 0.045); transition: all 0.4s ease; pointer-events: none; } .mc-why-card:hover::after { transform: scale(1.35); } /* ========================================= GREEN / BLUE FEATURE CARDS ========================================= */ .mc-why-card.highlight { background: var(--ricker-gradient) !important; border-color: transparent !important; color: #ffffff !important; box-shadow: 0 18px 38px rgba(36, 118, 79, 0.20) !important; } /* ========================================= ICON ========================================= */ .mc-why-card .ico { width: 48px !important; height: 48px !important; display: grid !important; place-items: center !important; margin-bottom: 17px !important; border-radius: 14px !important; background: var(--ricker-green-light) !important; color: var(--ricker-green) !important; font-size: 21px !important; line-height: 1 !important; transition: all 0.3s ease !important; } /* Blue icon */ .mc-why-card:nth-child(2) .ico { background: var(--ricker-blue-light) !important; color: var(--ricker-blue) !important; } /* Highlight icon */ .mc-why-card.highlight .ico { background: rgba(255, 255, 255, 0.17) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.12); } /* Icon hover */ .mc-why-card:hover .ico { transform: scale(1.08) rotate(-3deg); } /* ========================================= CARD TITLE ========================================= */ .mc-why-card h3 { position: relative !important; z-index: 2; margin: 0 0 9px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; color: var(--ricker-text) !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 800 !important; } /* Highlight title */ .mc-why-card.highlight h3 { color: #ffffff !important; }