{% require_css %}
<style id="cm_">
{% scope_css %}
  
  .card-right-icon {
    {% if module.style.background.type == "color" %}
      background-color: ;
    {% elif module.style.background.type == "gradient" %}
      background:  !important;
    {% elif module.style.background.type == "image" %}
      
    {% endif %}

    {% set shadow_color = macros.color(module.style.shadow.color) %}

    {% if module.style.shadow.type == "outer" %}
    -webkit-box-shadow: 0 2px px 0 ;
    box-shadow: 0 2px px 0 ;
    {% elif module.style.shadow.type == "inner" %}
    -webkit-box-shadow: inset 0 2px px 0 ;
    box-shadow: inset 0 2px px 0 ;
    {% endif %}
  }

  /* Adds 20px padding to the left and right of the entire module */
.card-right-icon-mainwrapper-section {
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box; 
}
  .card-right-icon-groups .card-right-icon__content.with-link {
      padding-bottom: px;
  }
  
  .card-right-icon-groups .link-wrapper {
      bottom: px;
  }
  
  {% if module.style.link_styling.link_type == "text" %}
    {% if module.style.link_styling.text_link_styling.link_color.color %}
    .card-right-icon .link-small {
      color: ;
    }
    {% endif %}

    {% if module.style.link_styling.text_link_styling.link_color_hover.color %}
    .card-right-icon .link-small:hover,
    .card-right-icon.with-hover:hover .link-small {
      color: ;
    }
    {% endif %}

    {% if module.style.link_styling.text_link_styling.icon_color.color %}
    .card-right-icon .link-small svg {
      fill: ;
    }
    {% endif %}

    {% if module.style.link_styling.text_link_styling.icon_color_hover.color %}
    .card-right-icon.with-hover:hover .link-small svg,
    .card-right-icon .link-small:hover svg {
      fill: ;
    }
    {% endif %}
  {% endif %}

  {# HOVER STYLING #}
  {% if module.style.enable_hover %}
    .card-right-icon:hover {
      {% if module.style.background_hover.type == "color" %}
        background-color: ;
      {% elif module.style.background_hover.type == "gradient" %}
        background:  !important;
      {% elif module.style.background.type == "image" %}
        
      {% endif %}
      border-color: transparent;
    }

    {% if module.style.content_styling.text_color_hover.color %}
    .card-right-icon:hover .card-right-icon__content,
    .card-right-icon:hover .card-right-icon__content * {
      color: ;
    }
    {% endif %}
  
    {% if module.style.right_icon_styling.icon_color_hover.color %}
    .card-right-icon:hover .card-right-icon--right-icon svg {
      fill: ;
    }
    {% endif %}
  {% endif %}
  
{% end_scope_css %}
</style>
{% end_require_css %}

.card-right-icon-groups.dgrid-groups {
   grid-gap: 30px;
}
 
/* The main card styling */
.card-right-icon-groups .card-right-icon .card-right-icon--right-icon-content-and-bottom-text {
  border-radius: 16px;
  padding: 40px;
  position: relative;
  z-index: 3;
  border: none !important;
  box-shadow: 0 4px 20px rgba(23, 21, 62, 0.04);
  overflow: hidden; 
}

/* The Colored Bottom Accent Bar */
.card-right-icon-groups .card-right-icon .card-right-icon--right-icon-content-and-bottom-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background-color: var(--accent-color);
}

/* The Impact Rings & Icon Styling (Forced Centering) */
.card-right-icon-groups .card-right-icon .card-right-icon--right-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background-color: var(--accent-color) !important;
  
  /* Forces perfect flexbox centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  flex-shrink: 0;
  margin: 12px 12px 0 0 !important; /* Overrides conflicting media query margins */
  padding: 0 !important; /* Removes the old 7px padding causing off-center issues */
  
  box-shadow: 
    0 0 0 12px color-mix(in srgb, var(--accent-color) 20%, transparent), 
    0 0 0 24px rgba(23, 21, 62, 0.04) !important;
}

/* Forces the SVG inside the circle to be perfectly centered and colored */
.card-right-icon-groups .card-right-icon .card-right-icon--right-icon svg,
.card-right-icon-groups .card-right-icon .card-right-icon--right-icon .svg-icon {
  width: 28px !important;
  height: 28px !important;
  fill: var(--icon-color) !important;
  color: var(--icon-color) !important;
  display: block !important;
  margin: 0 !important;
}

/* The Squiggly Line under the Title */
/* The Squiggly Line under the Title (Inherits global h4 styling) */
.card-right-icon-groups .card-right-icon .card-right-icon--right-icon-content h4 {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--accent-color);
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
  margin-bottom: 16px; /* Kept just to ensure it spaces nicely above the paragraph */
}


.card-right-icon-groups .card-right-icon .card-right-icon--right-icon-content p:last-child {
   margin-bottom: 0;
   color: #666;
   line-height: 1.6;
}

.card-right-icon-left-title h2 {
    margin-bottom: 40px;
}

.card-right-icon-left-title .button {
    margin-top: 40px;
}

/* The "You Get" Bottom Text Area */
.card-right-icon .card-right-icon__content-bottom-text {
    border-top: 1px solid rgba(23, 21, 62, 0.1); 
    width: 100%;
    padding-top: 24px;
    margin-top: 24px;
    color: #555;
    font-size: 15px;
}

.card-right-icon .card-right-icon__content-bottom-text > h5 {
    color: #FF631F; 
    font-weight: 700;
    margin: 0 0 10px 0;
}

.card-right-icon .card-right-icon__content-bottom-text .hs_cos_wrapper_type_inline_rich_text p:last-child {
   margin-bottom: 0;
}

@media(min-width: 768px) {
  .card-right-icon .card-right-icon__content-bottom-text {
    display: flex;
    gap: 20px;
  }
  
  .card-right-icon .card-right-icon__content-bottom-text > h5 {
    flex: 0 0 auto;
    margin-bottom: 0;
  }
  
  .card-right-icon-groups .card-right-icon .card-right-icon--right-icon-content {
    display: flex;
    gap: 30px; 
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  
  .card-right-icon-groups .card-right-icon .card-right-icon__content {
    width: calc(100% - 100px); 
  }
  
  .card-right-icon-mainwrapper-section > .row-fluid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .card-right-icon-left-title {
    position: sticky;
    top: 132px;
  }
}