{"id":9,"date":"2026-02-11T06:11:14","date_gmt":"2026-02-11T06:11:14","guid":{"rendered":"https:\/\/divi5modules.redletterjournals.com\/?page_id=9"},"modified":"2026-02-12T10:32:01","modified_gmt":"2026-02-12T10:32:01","slug":"masonry-gallery","status":"publish","type":"page","link":"https:\/\/divi5modules.redletterjournals.com\/index.php\/masonry-gallery\/","title":{"rendered":"Masonry Gallery"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_flex_section\">\n<div class=\"et_pb_row_0 et_pb_row et_flex_row\">\n<div class=\"et_pb_column_0 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><!-- ========================================\n     TESTIMONIAL SLIDER - MAIN STRUCTURE\n     ========================================\n     \n     This is an interactive testimonial slider for digi Global.\n     \n     FUNCTIONALITY:\n     - Displays 8 client testimonials with images\n     - Shows 4 slides at once on desktop (25% width each)\n     - Expands to 50% when hovered, revealing full text\n     - Mobile shows 1 slide at a time (100% width)\n     - Includes pagination dots for navigation\n     \n     INTERACTION FLOW:\n     1. User hovers over a slide\n     2. Hovered slide expands from 25% to 50% width\n     3. Text content fades in (was hidden)\n     4. Other visible slides shrink to 16.67% to make room\n     5. Image position adjusts for visual effect\n     ======================================== -->\n\n<div class=\"digi-slider-container\">\n  <!-- Wrapper div - provides positioning context for absolute elements -->\n  <div class=\"digi-slider-wrapper\">\n    \n    <!-- Viewport - acts as a \"window\" through which we see the slides\n         Think of this like a camera viewfinder that only shows part of the track -->\n    <div class=\"digi-slider-viewport\">\n      \n      <!-- Track - the horizontal container that holds ALL slides\n           This moves left\/right (via JavaScript transform) to show different slides\n           Like a film strip that slides through the viewfinder -->\n      <div class=\"digi-slider-track\" id=\"digiSlider\">\n        \n        <!-- ========================================\n             SLIDE 1\n             ======================================== -->\n        <!-- data-digi-index: Used by JavaScript to identify which slide this is (0-based indexing) -->\n        <div class=\"digi-slide\" data-digi-index=\"0\">\n          \n          <!-- LEFT SECTION: Contains all text content (review + reviewer info)\n               Initially hidden (opacity: 0), appears on hover\n               Takes 70% of slide width when visible -->\n          <div class=\"digi-slide-left\">\n            <div class=\"digi-slide-content\">\n              \n              <!-- The testimonial quote itself -->\n              <p class=\"digi-review-text\">\"digi helped me clarify my vision and position my expertise with confidence. Claudia\u2019s strategic insight and network accelerated my growth in ways I didn\u2019t expect.\"<\/p>\n              \n              <!-- Wrapper for reviewer attribution\n                   Using <span> instead of <div> for semantic reasons\n                   Contains name and title\/location -->\n              <span class=\"reviewer-wrapper\">\n                <p class=\"reviewer-name\">Dr. Olivia Hartman<\/p>\n                <p class=\"reviewer-info\"><i>Founder & CEO, Global Health Strategy Lab, Boston, USA<\/i><\/p>\n              <\/span>\n            <\/div>\n          <\/div>\n          \n          <!-- RIGHT SECTION: Contains the reviewer's photo\n               Positioned absolutely at bottom-right of slide\n               Partially extends beyond slide bottom for stylistic effect -->\n          <div class=\"digi-slide-right\">\n            <img decoding=\"async\" src=\"https:\/\/stellr.global\/wp-content\/uploads\/2026\/02\/image-from-rawpixel-id-12377037-png.png\" alt=\"Item 1\">\n          <\/div>\n        <\/div>\n\n        <!-- ========================================\n             SLIDE 2\n             ======================================== -->\n        <div class=\"digi-slide\" data-digi-index=\"1\">\n          <div class=\"digi-slide-left\">\n            <div class=\"digi-slide-content\">\n              <!-- add content here -->\n              <p class=\"digi-review-text\">\"Working with digi transformed how I communicate my leadership message. Their guidance opened doors to high-level opportunities I wouldn\u2019t have accessed otherwise.\"<\/p>\n              <span class=\"reviewer-wrapper\">\n                <p class=\"reviewer-name\">Ahmed El Mansouri<\/p>\n                <p class=\"reviewer-info\"><i>Chairman, El Mansouri Group, Casablanca, Morocco<\/i><\/p>\n              <\/span>\n            <\/div>\n          <\/div>\n          <div class=\"digi-slide-right\">\n            <!-- add img here -->\n            <img decoding=\"async\" src=\"https:\/\/stellr.global\/wp-content\/uploads\/2026\/02\/image-from-rawpixel-id-12967325-png.png\" alt=\"Item 2\">\n          <\/div>\n        <\/div>\n\n        <!-- ========================================\n             SLIDE 3\n             ======================================== -->\n        <div class=\"digi-slide\" data-digi-index=\"2\">\n          <div class=\"digi-slide-left\">\n            <div class=\"digi-slide-content\">\n              <!-- add content here -->\n              <p class=\"digi-review-text\">\"digi elevated my visibility on a global scale. Claudia\u2019s ability to shape reputation with clarity and authenticity is truly exceptional.\"<\/p>\n              <span class=\"reviewer-wrapper\">\n                <p class=\"reviewer-name\">Layl Al-Farsi<\/p>\n                <p class=\"reviewer-info\"><i>Director of Innovation, Red Sea Developments, Riyadh, Saudi Arabia<\/i><\/p>\n              <\/span>\n            <\/div>\n          <\/div>\n          <div class=\"digi-slide-right\">\n            <!-- add img here -->\n            <img decoding=\"async\" src=\"https:\/\/stellr.global\/wp-content\/uploads\/2026\/02\/image-from-rawpixel-id-16877279-png.png\" alt=\"Item 3\">\n          <\/div>\n        <\/div>\n\n        <!-- ========================================\n             SLIDE 4\n             ======================================== -->\n        <div class=\"digi-slide\" data-digi-index=\"3\">\n          <div class=\"digi-slide-left\">\n            <div class=\"digi-slide-content\">\n              <!-- add content here -->\n              <p class=\"digi-review-text\">\"Before digi, my ideas lacked focus. Their process helped me define a clear, compelling narrative that now guides everything I do.\"<\/p>\n              <span class=\"reviewer-wrapper\">\n                <p class=\"reviewer-name\">Jason Whitmore<\/p>\n                <p class=\"reviewer-info\"><i>VP of Agent Growth, Compass, New York, USA<\/i><\/p>\n              <\/span>\n            <\/div>\n          <\/div>\n          <div class=\"digi-slide-right\">\n            <!-- add img here -->\n            <img decoding=\"async\" src=\"https:\/\/stellr.global\/wp-content\/uploads\/2026\/02\/image-from-rawpixel-id-13138894-png.png\" alt=\"Item 4\">\n          <\/div>\n        <\/div>\n\n        <!-- ========================================\n             SLIDE 5\n             ======================================== -->\n        <div class=\"digi-slide\" data-digi-index=\"4\">\n          <div class=\"digi-slide-left\">\n            <div class=\"digi-slide-content\">\n              <!-- add content here -->\n              <p class=\"digi-review-text\">\"Claudia combines insight, empathy, and sharp intellect to create brands that feel authentic and durable. The foundation we built together continues to serve me daily.\"<\/p>\n              <span class=\"reviewer-wrapper\">\n                <p class=\"reviewer-name\">Michael Rossman<\/p>\n                <p class=\"reviewer-info\"><i>Executive Coach & Leadership Advisor, San Francisco, CA<\/i><\/p>\n              <\/span>\n            <\/div>\n          <\/div>\n          <div class=\"digi-slide-right\">\n            <!-- add img here -->\n            <img decoding=\"async\" src=\"https:\/\/stellr.global\/wp-content\/uploads\/2026\/02\/image-from-rawpixel-id-13020159-png.png\" alt=\"Item 5\">\n          <\/div>\n        <\/div>\n      <\/div>\n      <!-- End of digi-slider-track -->\n    <\/div>\n    <!-- End of digi-slider-viewport -->\n  <\/div>\n  <!-- End of digi-slider-wrapper -->\n\n  <!-- ========================================\n       PAGINATION DOTS CONTAINER\n       ========================================\n       \n       This empty div will be populated by JavaScript with clickable dots.\n       Each dot represents one slide.\n       \n       JavaScript will:\n       1. Create 5 button elements\n       2. Add 'digi-dot' class to each\n       3. Add 'digi-dot-active' class to current slide's dot\n       4. Attach click handlers to navigate to specific slides\n       ======================================== -->\n  <div class=\"digi-pagination\" id=\"digiPagination\"><\/div>\n<\/div>\n<!-- End of digi-slider-container -->\n\n<style>\n  \/* ========================================\n     SECTION 1: OUTER CONTAINER STYLES\n     ========================================\n     \n     These styles control the outermost container and prevent\n     content from spilling outside the designated area.\n     ======================================== *\/\n  \n  \/* Main container - prevents horizontal scrolling\n     overflow: hidden ensures slides don't create scrollbars when moving *\/\n  .digi-slider-container {\n    overflow: hidden; \/* Clips any content that extends beyond boundaries *\/\n  }\n\n  \/* Wrapper - provides positioning context\n     Relative positioning allows absolutely positioned children (like pagination)\n     to position themselves relative to this container *\/\n  .digi-slider-wrapper {\n    position: relative;\n  }\n\n  \/* Viewport - the \"viewing window\" for slides\n     Like looking through a camera viewfinder - you only see part of the track\n     overflow: hidden prevents showing slides outside the viewport *\/\n  .digi-slider-viewport {\n    overflow: hidden; \/* Only shows slides within this area *\/\n  }\n\n  \/* ========================================\n     SECTION 2: SLIDER TRACK (MAIN RAIL)\n     ========================================\n     \n     The track is the horizontal container holding all 8 slides.\n     It moves left\/right to show different slides (controlled by JavaScript).\n     \n     MATH EXPLANATION:\n     - Total width: 8 slides \u00d7 (25% + gap) = ~200% of viewport\n     - When JavaScript applies transform: translateX(-25%), \n       it shifts left by one slide width\n     ======================================== *\/\n  \n  .digi-slider-track {\n    display: flex; \/* Arranges all slides in a horizontal row *\/\n    height: 450px; \/* Fixed height for consistent slide dimensions *\/\n    \n    \/* Smooth sliding animation when transform changes\n       0.6s duration with cubic-bezier easing for natural movement\n       cubic-bezier(0.4, 0, 0.2, 1) = \"ease-out\" curve\n       Starts fast, ends slow (feels more natural to human eye) *\/\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    \n    gap: 20px; \/* Horizontal spacing between adjacent slides *\/\n  }\n\n  \/* ========================================\n     SECTION 3: INDIVIDUAL SLIDE BASE STYLES\n     ========================================\n     \n     Each slide starts at 25% width (showing 4 slides at once).\n     Hover interaction triggers width expansion to 50%.\n     ======================================== *\/\n  \n  .digi-slide {\n    \/* ---- INTERACTION ---- *\/\n    cursor: pointer; \/* Shows hand cursor on hover to indicate clickability *\/\n    \n    \/* ---- POSITIONING ---- *\/\n    position: relative; \/* Creates positioning context for absolute children (image) *\/\n    overflow: hidden; \/* Clips image that extends beyond slide boundaries *\/\n    \n    \/* ---- SIZING ---- *\/\n    \/* flex: 0 0 calc(25% - 15px) breaks down as:\n       - flex-grow: 0     \u2192 Don't grow larger than specified\n       - flex-shrink: 0   \u2192 Don't shrink smaller than specified\n       - flex-basis: calc(25% - 15px) \u2192 Base width before hover\n       \n       Why subtract 15px?\n       - gap: 20px creates space between slides\n       - Each slide needs to account for its portion of the gap\n       - 4 slides \u00d7 20px gap = 60px total gap space\n       - 60px \u00f7 4 slides = 15px per slide\n       - So 25% - 15px ensures slides + gaps = 100% *\/\n    flex: 0 0 calc(25% - 15px);\n    width: calc(25% - 15px); \/* Explicit width matches flex-basis for consistency *\/\n    \n    \/* ---- APPEARANCE ---- *\/\n    background: #cadedd; \/* Light teal background (digi brand color) *\/\n    border-radius: 10px; \/* Rounded corners for modern look *\/\n    \n    \/* ---- ANIMATIONS ---- *\/\n    \/* Smooth transitions when slide expands\/shrinks\n       Animates both flex and width properties\n       0.6s matches track transition for synchronized movement *\/\n    transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), \n                width 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  \/* ========================================\n     SECTION 4: HOVER STATE STYLES\n     ========================================\n     \n     When a slide is hovered, two things happen:\n     1. Hovered slide expands to 50% width (.digi-hovered)\n     2. Other visible slides shrink to 16.67% (.digi-shrink)\n     \n     MATH CHECK:\n     - 1 hovered slide: 50%\n     - 3 shrunk slides: 3 \u00d7 16.67% = 50%\n     - Total: 50% + 50% = 100% \u2713\n     - Plus gaps: 3 \u00d7 20px = 60px additional space needed\n     ======================================== *\/\n  \n  \/* Applied by JavaScript when user hovers over this slide\n     Doubles the width from 25% to 50% *\/\n  .digi-slide.digi-hovered {\n    flex: 0 0 calc(50% - 15px); \/* Expands to half viewport width *\/\n    width: calc(50% - 15px);\n  }\n\n  \/* Applied by JavaScript to non-hovered slides when ANY slide is hovered\n     Shrinks from 25% to 16.67% to make room for expanded slide *\/\n  .digi-slide.digi-shrink {\n    flex: 0 0 calc(16.67% - 15px); \/* Reduces to one-sixth viewport width *\/\n    width: calc(16.67% - 15px);\n  }\n\n  \/* ========================================\n     SECTION 5: DECORATIVE BACKGROUND OVERLAY\n     ========================================\n     \n     Uses CSS ::before pseudo-element to add a decorative pattern\n     behind all slide content without adding extra HTML elements.\n     \n     LAYERING (z-index):\n     - ::before background: z-index: 0 (bottom layer)\n     - Slide children: z-index: 1 (above background)\n     - Text content: z-index: 2 (above everything)\n     ======================================== *\/\n  \n  \/* ::before pseudo-element creates an extra layer behind content\n     Every .digi-slide automatically gets this decorative background *\/\n  .digi-slide::before {\n    content: \"\"; \/* Required for pseudo-element to render (empty content) *\/\n    \n    \/* ---- POSITIONING ---- *\/\n    position: absolute; \/* Positioned relative to .digi-slide parent *\/\n    inset: 0; \/* Shorthand for: top: 0; right: 0; bottom: 0; left: 0;\n                 Makes pseudo-element fill entire parent *\/\n    \n    \/* ---- BACKGROUND IMAGE ---- *\/\n    background-image: url(\"https:\/\/stellr.global\/wp-content\/uploads\/2025\/12\/Frame-15421-1.png\");\n    background-repeat: no-repeat; \/* Show image once, don't tile *\/\n    background-position: left center; \/* Align to left, centered vertically *\/\n    background-size: cover; \/* Scale image to fill entire area *\/\n    \n    \/* ---- APPEARANCE ---- *\/\n    opacity: 0.35; \/* 35% opacity - subtle, not overwhelming *\/\n    \n    \/* ---- LAYERING ---- *\/\n    z-index: 0; \/* Behind all content (text, images will appear above) *\/\n    pointer-events: none; \/* Allows clicks to pass through to content below *\/\n  }\n\n  \/* Ensures all direct children of slide appear above ::before background\n     This includes .digi-slide-left and .digi-slide-right *\/\n  .digi-slide > * {\n    position: relative; \/* Required for z-index to work *\/\n    z-index: 1; \/* Stacks above z-index: 0 background *\/\n  }\n\n  \/* ========================================\n     SECTION 6: TEXT CONTENT SECTION (LEFT)\n     ========================================\n     \n     Contains the testimonial text and reviewer information.\n     \n     VISIBILITY LOGIC:\n     - Default: Hidden (opacity: 0, visibility: hidden)\n     - On hover: Visible (opacity: 1, visibility: visible)\n     \n     Why use both opacity AND visibility?\n     - opacity: 0 makes element invisible but still takes up space\n     - visibility: hidden removes from accessibility tree and prevents interaction\n     - Combined: Proper fade-in effect with no click-through issues\n     ======================================== *\/\n  \n  .digi-slide-left {\n    \/* ---- VISIBILITY ---- *\/\n    \/* Initially invisible - revealed on hover *\/\n    opacity: 0; \/* Fully transparent (invisible) *\/\n    visibility: hidden; \/* Removes from layout and accessibility tree *\/\n    \n    \/* ---- SPACING ---- *\/\n    padding: 2rem; \/* 32px spacing on all sides (1rem = 16px) *\/\n    \n    \/* ---- SIZING ---- *\/\n    width: 70%; \/* Takes 70% of slide width, leaving 30% for image *\/\n    \n    \/* ---- LAYERING ---- *\/\n    z-index: 2; \/* Appears above background (z-index: 0) and siblings (z-index: 1) *\/\n    \n    \/* ---- ANIMATIONS ---- *\/\n    \/* Fade in\/out smoothly when visibility changes\n       opacity transition: 0.5s for smooth fade\n       visibility transition: 0.5s prevents element from being clickable while fading out *\/\n    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), \n                visibility 0.5s;\n  }\n\n  \/* When slide has .digi-hovered class (applied by JavaScript on hover),\n     make text content visible *\/\n  .digi-slide.digi-hovered .digi-slide-left {\n    opacity: 1; \/* Fully opaque (visible) *\/\n    visibility: visible; \/* Included in layout and accessible *\/\n  }\n\n  \/* ========================================\n     SECTION 7: IMAGE SECTION (RIGHT)\n     ========================================\n     \n     Contains the reviewer's photograph.\n     Positioned absolutely to allow creative placement.\n     \n     POSITIONING STRATEGY:\n     - Default: Bottom-right corner, slightly extended below slide\n     - Hovered: Shifts further right for dynamic effect\n     ======================================== *\/\n  \n  .digi-slide-right {\n    \/* ---- POSITIONING ---- *\/\n    position: absolute; \/* Removed from normal flow, positioned relative to .digi-slide *\/\n    bottom: -15px; \/* Extends 15px below slide bottom edge (creates overlap effect) *\/\n    right: 0; \/* Aligned to right edge of slide *\/\n    \n    \/* ---- SIZING ---- *\/\n    height: auto; \/* Height determined by image aspect ratio *\/\n    \n    \/* ---- ANIMATIONS ---- *\/\n    \/* Smooth movement when position changes on hover\n       'all' animates any property change (bottom, right, transform, etc.) *\/\n    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  \/* When slide is hovered, shift image further right for visual interest *\/\n  .digi-slide.digi-hovered .digi-slide-right {\n    bottom: -15px; \/* Keep same bottom position *\/\n    right: -40px; \/* Shift 40px beyond right edge (extends outside slide) *\/\n    left: auto; \/* Ensure left property doesn't interfere *\/\n    transform: none; \/* Reset any transforms (important for mobile override) *\/\n    text-align: end; \/* Align content to right (affects inline content) *\/\n  }\n\n  \/* ========================================\n     SECTION 8: IMAGE STYLING\n     ========================================\n     \n     Controls how reviewer photos appear and fit within their container.\n     ======================================== *\/\n  \n  .digi-slide-right img {\n    \/* ---- SIZING ---- *\/\n    height: 400px; \/* Fixed height ensures consistent image size *\/\n    width: auto; \/* Width scales proportionally to maintain aspect ratio *\/\n    \n    \/* ---- FITTING ---- *\/\n    object-fit: cover; \/* Scales image to fill container while maintaining aspect ratio\n                          Crops excess if aspect ratio doesn't match\n                          Prevents image distortion *\/\n    \n    \/* ---- APPEARANCE ---- *\/\n    border-radius: 8px; \/* Slightly rounded corners for softer look *\/\n  }\n\n  \/* ========================================\n     SECTION 9: TEXT CONTENT STYLING\n     ========================================\n     \n     Styles for the actual testimonial text and reviewer attribution.\n     ======================================== *\/\n  \n  \/* Container for review quote and reviewer info *\/\n  .digi-slide-content {\n    \/* ---- LAYOUT ---- *\/\n    text-align: left; \/* Align text to left edge *\/\n    display: flex; \/* Enables flexbox layout for children *\/\n    flex-direction: column; \/* Stack children vertically (text above reviewer info) *\/\n    gap: 20px; \/* Vertical spacing between review text and reviewer info *\/\n    \n    \/* ---- APPEARANCE ---- *\/\n    color: #1a1a2e; \/* Dark blue-gray text color (high contrast with teal background) *\/\n    \n    \/* ---- LAYERING ---- *\/\n    z-index: 999999; \/* Extremely high z-index ensures text appears above everything\n                        Probably overkill but guarantees visibility *\/\n  }\n\n  \/* The testimonial quote itself *\/\n  .digi-review-text {\n    \/* ---- TYPOGRAPHY ---- *\/\n    font-size: 0.9rem; \/* Slightly smaller than default (14.4px if base is 16px) *\/\n    line-height: 1.6; \/* 60% more space than font size\n                         Good for readability of paragraph text\n                         1.5-1.7 is ideal for body copy *\/\n    \n    \/* ---- APPEARANCE ---- *\/\n    opacity: 0.9; \/* Slightly transparent (90% opaque)\n                     Softens text appearance against background *\/\n  }\n\n  \/* Container wrapping reviewer name and title\/location *\/\n  .reviewer-wrapper {\n    \/* ---- LAYOUT ---- *\/\n    display: flex; \/* Enables flexbox *\/\n    flex-direction: column; \/* Stack name and title vertically *\/\n    gap: 10px; \/* Space between name and title *\/\n  }\n\n  \/* Reviewer's name - emphasized *\/\n  .reviewer-name {\n    \/* ---- TYPOGRAPHY ---- *\/\n    font-weight: 600; \/* Semi-bold (between normal 400 and bold 700)\n                         Makes name stand out without being too heavy *\/\n    font-size: 1rem; \/* Default size (16px typically) *\/\n  }\n\n  \/* Reviewer's title, company, and location - de-emphasized *\/\n  .reviewer-info {\n    \/* ---- TYPOGRAPHY ---- *\/\n    font-size: 14px; \/* Smaller than name (14px absolute, not rem) *\/\n    line-height: 20px; \/* Absolute line-height (not ratio like 1.6)\n                          20px \/ 14px = 1.43 ratio (tighter than review text) *\/\n    \n    \/* ---- APPEARANCE ---- *\/\n    opacity: 0.8; \/* More transparent than review text (80% opaque)\n                     Creates visual hierarchy: name > review > title *\/\n  }\n\n  \/* ========================================\n     SECTION 10: PAGINATION DOTS\n     ========================================\n     \n     Navigation dots below the slider.\n     JavaScript will create 8 dots (one per slide).\n     \n     INTERACTION:\n     - Clicking a dot navigates to that slide\n     - Active dot expands to pill shape\n     - Hover effect provides visual feedback\n     ======================================== *\/\n  \n  \/* Container holding all pagination dots *\/\n  .digi-pagination {\n    \/* ---- LAYOUT ---- *\/\n    display: flex; \/* Arranges dots horizontally *\/\n    justify-content: center; \/* Centers dots horizontally *\/\n    gap: 0.5rem; \/* Space between dots (8px) *\/\n    \n    \/* ---- SPACING ---- *\/\n    margin-top: 2rem; \/* Space above dots (32px separation from slider) *\/\n  }\n\n  \/* Individual pagination dot (will be created by JavaScript as <button> elements) *\/\n  .digi-dot {\n    \/* ---- SIZING ---- *\/\n    width: 12px; \/* Circular dot size *\/\n    height: 12px;\n    \n    \/* ---- SHAPE ---- *\/\n    border-radius: 50%; \/* Makes square into perfect circle (50% of width\/height) *\/\n    \n    \/* ---- APPEARANCE ---- *\/\n    background: #CADEDD; \/* Light teal (matches slide background color) *\/\n    border: none; \/* Remove default button border *\/\n    \n    \/* ---- INTERACTION ---- *\/\n    cursor: pointer; \/* Hand cursor indicates clickability *\/\n    \n    \/* ---- ANIMATIONS ---- *\/\n    \/* Smoothly animates any property change (width, background color, border-radius)\n       Used when dot becomes active (expands to pill shape) *\/\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  \/* Hover state for non-active dots *\/\n  .digi-dot:hover {\n    background: #26464c; \/* Darker teal on hover\n                            Provides visual feedback before clicking *\/\n  }\n\n  \/* Active dot (represents current slide being viewed)\n     JavaScript adds this class to the dot matching the current slide *\/\n  .digi-dot.digi-dot-active {\n    \/* ---- APPEARANCE ---- *\/\n    background: #26464c; \/* Dark teal (matches hover color) *\/\n    \n    \/* ---- SHAPE CHANGE ---- *\/\n    width: 32px; \/* Expands from 12px to 32px wide *\/\n    border-radius: 6px; \/* Changes from circle (50%) to pill shape (6px)\n                           6px on 12px height = slightly rounded rectangle *\/\n    \n    \/* Note: height stays 12px, only width changes\n       This creates an elongated \"pill\" shape to indicate active state *\/\n  }\n\n  \/* ========================================\n     SECTION 11: OVERRIDE STYLES\n     ========================================\n     \n     Specific overrides for element spacing.\n     Using !important suggests this fights against other CSS rules\n     (possibly from a WordPress theme or global styles).\n     ======================================== *\/\n  \n  \/* Remove bottom padding from paragraphs inside reviewer wrapper\n     Prevents excessive spacing between name and title *\/\n  .reviewer-wrapper p {\n    padding-bottom: 0px !important; \/* !important overrides any conflicting rules\n                                       Likely needed to fight theme defaults *\/\n  }\n\n  \/* ========================================\n     SECTION 12: MOBILE RESPONSIVE STYLES\n     ========================================\n     \n     Completely different layout for screens 768px and smaller.\n     \n     DESKTOP LAYOUT:\n     - Shows 4 slides at once (25% each)\n     - Hover to expand and reveal text\n     - Horizontal scrolling via JavaScript\n     \n     MOBILE LAYOUT:\n     - Shows 1 slide at a time (100% width)\n     - Text always visible (no hover needed)\n     - Swipe\/scroll to navigate\n     - Image centered and smaller\n     \n     WHY DIFFERENT?\n     - Mobile has no hover interaction\n     - Smaller screens can't fit multiple slides legibly\n     - Touch interfaces need always-visible content\n     ======================================== *\/\n  \n  \/* Apply these styles when viewport is 768px wide or less\n     768px is a common breakpoint for tablets in portrait mode *\/\n  @media (max-width: 768px) {\n    \n    \/* ---- SLIDER TRACK ADJUSTMENTS ---- *\/\n    .digi-slider-track {\n      height: 600px !important; \/* Taller than desktop (450px)\n                                   Needed because image is below text instead of beside\n                                   !important overrides inline styles if JavaScript sets them *\/\n      gap: 0; \/* Remove gaps between slides\n                 On mobile we show one slide at a time, gaps aren't visible *\/\n    }\n\n    \/* ---- SLIDE SIZING ---- *\/\n    \/* Every slide takes full width on mobile\n       No more 25% or 50% - one slide = one screen *\/\n    .digi-slide {\n      flex: 0 0 100%; \/* 100% of viewport width *\/\n      width: 100%;\n      \/* Note: No hover effects on mobile - these classes still apply but don't change layout *\/\n    }\n\n    \/* ---- TEXT CONTENT ALWAYS VISIBLE ---- *\/\n    .digi-slide-left {\n      opacity: 1; \/* Always visible (was hidden on desktop) *\/\n      visibility: visible; \/* Always in layout *\/\n      width: 100%; \/* Full width instead of 70%\n                      More reading space on small screens *\/\n      padding: 1.5rem; \/* Slightly less padding than desktop (2rem)\n                         Maximizes usable space on small screens *\/\n    }\n\n    \/* ---- IMAGE POSITIONING ---- *\/\n    .digi-slide-right {\n      \/* Complete repositioning for mobile layout *\/\n      bottom: -10px; \/* Less extension below slide than desktop (-15px) *\/\n      right: auto !important; \/* Disable right positioning\n                                 !important overrides hover state styles *\/\n      left: 50%; \/* Position from center instead of right edge *\/\n      \n      \/* Center horizontally using transform\n         translate(-50%, 0) moves element left by half its own width\n         Combined with left: 50%, this perfectly centers the element *\/\n      transform: translate(-50%, 0px);\n      \n      width: 100%; \/* Full width container *\/\n      display: flex; \/* Enable flexbox for centering image *\/\n      justify-content: center; \/* Center image horizontally within container *\/\n    }\n\n    \/* Override hover state for mobile (prevents unwanted shifts) *\/\n    .digi-slide.digi-hovered .digi-slide-right {\n      right: -20px; \/* Different right offset on mobile hover\n                       Less dramatic than desktop (-40px) *\/\n    }\n\n    \/* ---- IMAGE SIZING ---- *\/\n    .digi-slide-right img {\n      height: 300px; \/* Shorter than desktop (400px)\n                       Leaves more room for text on small screens *\/\n      \/* width: auto still maintains aspect ratio *\/\n    }\n\n    \/* ---- DISABLE HOVER EXPANSION ---- *\/\n    \/* On mobile, hovered and shrunk slides stay full width\n       These selectors have higher specificity to override desktop rules *\/\n    .digi-slide.digi-hovered,\n    .digi-slide.digi-shrink {\n      flex: 0 0 100%; \/* Both stay at 100% width *\/\n      width: 100%;\n      \/* This prevents the desktop expand\/shrink behavior on mobile\n         Since there's no room to show multiple slides anyway *\/\n    }\n  }\n  \/* End of mobile responsive styles *\/\n<\/style><\/div><\/div>\n\n<div class=\"et_pb_menu_0 et_pb_menu et_pb_menu--without-logo et_pb_menu--style-left_aligned et_dropdown_animation_fade et_pb_bg_layout_light et_pb_text_align_right-tablet et_pb_text_align_right-phone et-interaction-target-8woot1abiv et_pb_module et_flex_module\" data-interaction-target=\"8woot1abiv\"><div class=\"et_pb_menu_inner_container et_flex_module\"><div class=\"et_pb_menu__wrap\"><div class=\"et_pb_menu__menu\"><nav class=\"et-menu-nav\"><ul id=\"menu-main-menu\" class=\"et-menu nav downwards\"><li id=\"menu-item-42\" class=\"mega-menu et_pb_menu_page_id-42 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-42\"><a href=\"#\">test<\/a>\n<ul class=\"sub-menu\">\n\t<li id=\"menu-item-43\" class=\"et_pb_menu_page_id-43 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-43\"><a href=\"#\">CATEGORY<\/a>\n\t<ul class=\"sub-menu\">\n\t\t<li id=\"menu-item-44\" class=\"et_pb_menu_page_id-44 menu-item menu-item-type-custom menu-item-object-custom menu-item-44\"><a href=\"#\">test<\/a><\/li>\n\t\t<li id=\"menu-item-50\" class=\"et_pb_menu_page_id-50 menu-item menu-item-type-custom menu-item-object-custom menu-item-50\"><a href=\"#\">TEST<\/a><\/li>\n\t<\/ul>\n<\/li>\n\t<li id=\"menu-item-45\" class=\"et_pb_menu_page_id-45 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-45\"><a href=\"#\">test<\/a>\n\t<ul class=\"sub-menu\">\n\t\t<li id=\"menu-item-46\" class=\"et_pb_menu_page_id-46 menu-item menu-item-type-custom menu-item-object-custom menu-item-46\"><a href=\"#\">test<\/a><\/li>\n\t<\/ul>\n<\/li>\n\t<li id=\"menu-item-47\" class=\"et_pb_menu_page_id-47 menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-47\"><a href=\"#\">test<\/a>\n\t<ul class=\"sub-menu\">\n\t\t<li id=\"menu-item-48\" class=\"et_pb_menu_page_id-48 menu-item menu-item-type-custom menu-item-object-custom menu-item-48\"><a href=\"#\">test<\/a><\/li>\n\t<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li id=\"menu-item-49\" class=\"et_pb_menu_page_id-49 menu-item menu-item-type-custom menu-item-object-custom menu-item-49\"><a href=\"#\">test<\/a><\/li>\n<\/ul><\/nav><\/div><div class=\"et_mobile_nav_menu\"><div class=\"mobile_nav closed\"><span class=\"mobile_menu_bar\"><\/span><\/div><\/div><\/div><\/div><\/div>\n\n<div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\" data-interaction-trigger=\"moe2uo2o18\"><div class=\"et_pb_text_inner\"><p>open test<\/p>\n<\/div><\/div>\n\n<div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>lorem lorem lorem<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"et_pb_section_1 et_pb_section et_section_regular et_flex_section et-interaction-target-lqd0mvquu2\" data-interaction-target=\"lqd0mvquu2\"><div class=\"et_pb_row_1 et_pb_row et_flex_row\"><div class=\"et_pb_column_1 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\"><div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_dark et_pb_module et_flex_module\"><div class=\"et_pb_text_inner\"><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><div class=\"et_pb_icon_0 et_pb_icon et_pb_module et_flex_module\" data-interaction-trigger=\"o3idphyb3g\"><span class=\"et_pb_icon_wrap\"><span class=\"et-pb-icon\">\uf00d<\/span><\/span><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings. \uf00d<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/divi5modules.redletterjournals.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divi5modules.redletterjournals.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/divi5modules.redletterjournals.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/divi5modules.redletterjournals.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divi5modules.redletterjournals.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":13,"href":"https:\/\/divi5modules.redletterjournals.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/divi5modules.redletterjournals.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/divi5modules.redletterjournals.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}