.elementor-12 .elementor-element.elementor-element-0af5b49{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-ca82d88{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-b88ee93{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-4cb7172{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-89dab9d{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-d050cd2{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-df16f04{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-964f655{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12 .elementor-element.elementor-element-bbf3022{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-89dab9d */<section class="hh-difference">

  <!-- TOP WAVE -->
  <svg class="hh-difference-wave hh-difference-wave-top"
       viewBox="0 0 1440 90"
       preserveAspectRatio="none"
       aria-hidden="true">
    <path
      d="M0,20
         C220,55 420,62 650,38
         C890,12 1110,4 1440,30
         L1440,0
         L0,0
         Z">
    </path>
  </svg>


  <!-- DECORATIVE LEAVES -->
  <div class="hh-diff-leaves hh-diff-leaves-left">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <div class="hh-diff-leaves hh-diff-leaves-right">
    <span></span>
    <span></span>
    <span></span>
  </div>


  <div class="hh-difference-inner">

    <!-- LEFT COPY -->
    <div class="hh-difference-copy">

      <div class="hh-difference-eyebrow">
        THE HEART HAVEN DIFFERENCE
      </div>

      <h2>
        Why families
        <span>choose us</span>
      </h2>

      <p>
        We go beyond care, creating meaningful relationships
        and brighter everyday moments.
      </p>

    </div>


    <!-- FEATURE CARDS -->
    <div class="hh-difference-grid">

      <div class="hh-difference-card">

        <div class="hh-difference-icon">
          ♡
        </div>

        <h3>Truly person-centred</h3>

        <p>
          Care that respects individual choices,
          routines and lifestyles.
        </p>

      </div>


      <div class="hh-difference-card">

        <div class="hh-difference-icon">
          ☆
        </div>

        <h3>High standards</h3>

        <p>
          Carefully recruited, trained and supported
          carers.
        </p>

      </div>


      <div class="hh-difference-card">

        <div class="hh-difference-icon">
          ♧
        </div>

        <h3>A more independent life</h3>

        <p>
          Support to live safely, confidently and
          happily at home.
        </p>

      </div>


      <div class="hh-difference-card">

        <div class="hh-difference-icon">
          ⌂
        </div>

        <h3>A team that cares</h3>

        <p>
          A local, reliable team that genuinely
          puts people first.
        </p>

      </div>

    </div>

  </div>


  <!-- BOTTOM WAVE -->
  <svg class="hh-difference-wave hh-difference-wave-bottom"
       viewBox="0 0 1440 90"
       preserveAspectRatio="none"
       aria-hidden="true">
    <path
      d="M0,55
         C250,20 470,16 700,45
         C960,77 1180,76 1440,42
         L1440,90
         L0,90
         Z">
    </path>
  </svg>

</section>


<style>

/* =====================================================
   MAIN NAVY SECTION
===================================================== */

.hh-difference{
    position:relative;

    width:100%;

    overflow:hidden;

    padding:
        72px 0 78px;

    box-sizing:border-box;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(118,185,230,.17),
            transparent 30%
        ),
        linear-gradient(
            110deg,
            #0B2F57 0%,
            #123F6E 52%,
            #0A3159 100%
        );

    color:#FFFFFF;
}


/* =====================================================
   REAL SVG WAVES
===================================================== */

.hh-difference-wave{
    position:absolute;

    left:0;

    width:100%;

    height:62px;

    display:block;

    z-index:2;

    pointer-events:none;
}


.hh-difference-wave path{
    fill:#FFFDF9;
}


/* TOP */

.hh-difference-wave-top{
    top:0;
}


/* BOTTOM */

.hh-difference-wave-bottom{
    bottom:0;
}


.hh-difference-wave-bottom path{
    fill:#FFFFFF;
}


/* =====================================================
   CONTENT AREA
===================================================== */

.hh-difference-inner{
    width:100%;
    max-width:1320px;

    margin:0 auto;

    padding:
        0 34px;

    box-sizing:border-box;

    display:grid;

    grid-template-columns:
        24% 76%;

    gap:28px;

    align-items:center;

    position:relative;

    z-index:5;
}


/* =====================================================
   LEFT COPY
===================================================== */

.hh-difference-copy{
    max-width:280px;
}


.hh-difference-eyebrow{
    margin-bottom:7px;

    font-family:"Manrope",sans-serif;

    font-size:8px;

    font-weight:700;

    letter-spacing:2.7px;

    text-transform:uppercase;

    color:
        rgba(255,255,255,.72);
}


.hh-difference-copy h2{
    margin:0;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:38px;

    line-height:.94;

    font-weight:700;

    letter-spacing:-.5px;

    color:#FFFFFF;
}


.hh-difference-copy h2 span{
    display:block;

    font-style:italic;

    font-weight:500;

    color:#8BC8F0;
}


.hh-difference-copy p{
    max-width:255px;

    margin:
        11px 0 0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:9.5px;

    line-height:1.5;

    color:
        rgba(255,255,255,.82);
}


/* =====================================================
   FEATURE GRID
===================================================== */

.hh-difference-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;
}


/* =====================================================
   FEATURE CARD
===================================================== */

.hh-difference-card{
    min-height:120px;

    padding:
        14px 14px 13px;

    box-sizing:border-box;

    background:
        rgba(255,255,255,.98);

    border-radius:13px;

    box-shadow:
        0 10px 24px rgba(0,0,0,.12);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.hh-difference-card:hover{
    transform:
        translateY(-4px);

    box-shadow:
        0 15px 30px rgba(0,0,0,.17);
}


/* =====================================================
   ICON
===================================================== */

.hh-difference-icon{
    width:35px;
    height:35px;

    margin-bottom:9px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            #F8DD91 0%,
            #D4A64A 72%
        );

    color:#0C2F57;

    font-size:16px;

    box-shadow:
        0 5px 14px rgba(212,166,74,.24);
}


/* =====================================================
   CARD COPY
===================================================== */

.hh-difference-card h3{
    margin:
        0 0 5px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:16px;

    line-height:1.05;

    font-weight:700;

    color:#0C2F57;
}


.hh-difference-card p{
    margin:0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:8.4px;

    line-height:1.43;

    color:#657684;
}


/* =====================================================
   DECORATIVE LEAVES
===================================================== */

.hh-diff-leaves{
    position:absolute;

    pointer-events:none;

    z-index:3;
}


.hh-diff-leaves-left{
    left:-18px;
    bottom:34px;
}


.hh-diff-leaves-right{
    right:-12px;
    top:40px;

    transform:
        scaleX(-1);
}


.hh-diff-leaves span{
    position:absolute;

    width:44px;
    height:95px;

    border-radius:
        90% 10% 90% 10%;

    background:
        linear-gradient(
            160deg,
            rgba(118,185,230,.20),
            rgba(118,185,230,.02)
        );

    transform-origin:
        bottom center;
}


.hh-diff-leaves span:nth-child(1){
    transform:
        rotate(-25deg);
}


.hh-diff-leaves span:nth-child(2){
    transform:
        rotate(6deg)
        translate(31px,-9px);

    opacity:.68;
}


.hh-diff-leaves span:nth-child(3){
    transform:
        rotate(34deg)
        translate(52px,-4px);

    opacity:.45;
}


/* =====================================================
   LARGE TABLET
===================================================== */

@media(max-width:1100px){

    .hh-difference{
        padding:
            68px 0 74px;
    }


    .hh-difference-inner{
        padding:
            0 24px;

        grid-template-columns:
            26% 74%;

        gap:20px;
    }


    .hh-difference-copy h2{
        font-size:34px;
    }


    .hh-difference-card{
        padding:
            13px 11px;
    }


    .hh-difference-card h3{
        font-size:15px;
    }


    .hh-difference-card p{
        font-size:8px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

    .hh-difference{
        padding:
            76px 0 82px;
    }


    .hh-difference-wave{
        height:54px;
    }


    .hh-difference-inner{
        display:block;

        padding:
            0 24px;
    }


    .hh-difference-copy{
        max-width:530px;

        margin-bottom:25px;
    }


    .hh-difference-copy h2{
        font-size:40px;
    }


    .hh-difference-copy p{
        max-width:430px;

        font-size:10px;
    }


    .hh-difference-grid{
        grid-template-columns:
            repeat(2,1fr);

        gap:12px;
    }


    .hh-difference-card{
        min-height:125px;

        padding:
            15px 14px;
    }


    .hh-difference-card h3{
        font-size:17px;
    }


    .hh-difference-card p{
        font-size:9px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:600px){

    .hh-difference{
        padding:
            70px 0 76px;
    }


    .hh-difference-wave{
        height:42px;
    }


    .hh-difference-inner{
        padding:
            0 18px;
    }


    .hh-difference-copy{
        margin-bottom:22px;
    }


    .hh-difference-eyebrow{
        font-size:7.8px;

        letter-spacing:2.2px;
    }


    .hh-difference-copy h2{
        font-size:37px;
    }


    .hh-difference-copy p{
        max-width:320px;

        font-size:10px;
    }


    .hh-difference-grid{
        grid-template-columns:
            1fr 1fr;

        gap:10px;
    }


    .hh-difference-card{
        min-height:132px;

        padding:
            13px 11px;
    }


    .hh-difference-icon{
        width:34px;
        height:34px;

        margin-bottom:8px;
    }


    .hh-difference-card h3{
        font-size:16px;
    }


    .hh-difference-card p{
        font-size:8.5px;
    }


    .hh-diff-leaves-right{
        display:none;
    }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .hh-difference-inner{
        padding:
            0 15px;
    }


    .hh-difference-copy h2{
        font-size:34px;
    }


    .hh-difference-grid{
        grid-template-columns:1fr;
    }


    .hh-difference-card{
        min-height:0;
    }

}

<\/style>/* End custom CSS */