.elementor-145854 .elementor-element.elementor-element-49faf53:not(.elementor-motion-effects-element-type-background), .elementor-145854 .elementor-element.elementor-element-49faf53 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-145854 .elementor-element.elementor-element-49faf53, .elementor-145854 .elementor-element.elementor-element-49faf53 > .elementor-background-overlay{border-radius:32px 32px 32px 32px;}.elementor-145854 .elementor-element.elementor-element-49faf53{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:24px;padding:24px 24px 24px 24px;}.elementor-145854 .elementor-element.elementor-element-49faf53 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), \'Montserrat\', sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-145854 .elementor-element.elementor-element-c15e833 img{border-radius:24px 24px 24px 24px;}@media(min-width:768px){.elementor-145854 .elementor-element.elementor-element-f961dc1{width:50%;}.elementor-145854 .elementor-element.elementor-element-362421a{width:50%;}}/* Start custom CSS for section, class: .elementor-element-49faf53 */.cta-bf-blog-banner h4{
    font-family: IBM Plex Sans, sans-serif !important;
    font-weight: 500 !important;
    font-size: 56px !important;
    line-height: 130% !important;
    letter-spacing: 0 !important;
    color:#fff !important;
}


/*labels*/

.cta-bf-blog-banner
.labels {
  display: flex;
  flex-wrap: wrap;          /* allow badges to flow to next line */
  gap: 8px;                 /* space between badges */
  align-items: flex-start;  /* keeps heights tidy when one wraps */
}


.cta-bf-blog-banner .bg-warning-yellow{
    
    background-color: #ffd000;
}

.cta-bf-blog-banner .rounded-small {
    border-radius: 10px;
}


.cta-bf-blog-banner .uppercase {
    text-transform: uppercase;
}


.cta-bf-blog-banner .cta-badge {
  display: inline-flex;  
  align-items: center;  
  gap: 6px;               
  padding: 4px 12px;      
  width: fit-content;     
    max-width: 100%;          /* allow shrinking on small screens */
  flex: 0 1 auto;           /* size to content, wrap if needed */
  box-sizing: border-box;
}

/* Icon */
.cta-bf-blog-banner .cta-badge svg {
  display: block;                
  width: 20px;
  height: 20px;
  flex: 0 0 auto;   
  display: block;
}

/* Label */
.cta-bf-blog-banner .cta-badge p {
  margin: 0;    
  line-height: 150%;    
  text-transform: uppercase;  
  letter-spacing: 0.06em; 
  color: #111;        
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
   white-space: normal;
}



/*button*/
.cta-bf-blog-banner .darkButton{
background: #FF3242;
    width: 100%;
}

.cta-bf-blog-banner .darkButton .button_text{
font-family: IBM Plex Sans;
font-weight: 500;
font-style: Medium;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0px;
text-align: center;
vertical-align: middle;
}


/* 1) Make both columns equal height */
.cta-bf-blog-banner .elementor-container {
  display: flex;
  align-items: stretch;   /* columns match tallest */
}
.cta-bf-blog-banner .elementor-column {
  display: flex;
}
.cta-bf-blog-banner .elementor-widget-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;         /* fill column height */
}

/* 2) Force the image area to be a perfect square */
.cta-bf-blog-banner .elementor-widget-image .elementor-widget-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;    /* always square by column width */
}

/* 3) Make the image fill and crop nicely inside the square */
.cta-bf-blog-banner .elementor-widget-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* “stretched accordingly” (cover the square) */
  display: block;
}

/* Optional: tidy spacing in the right column */
.cta-bf-blog-banner .elementor-element-362421a .elementor-widget-wrap > * + * {
  margin-top: 12px;
}

/* Mobile: stack columns (Elementor usually does this already).
   The image stays square because of aspect-ratio. */
@media (max-width: 767px) {
  .cta-bf-blog-banner .elementor-container {
    flex-direction: column;
  }
}



/* Mobile: stack badges to full width for clean wrapping */
@media (max-width: 480px) {
  .cta-bf-blog-banner .cta-badge {
    flex-basis: 100%;       /* each badge on its own line */
  }
}/* End custom CSS */