:root {
      --primus-red: #c02222;
      --dark: #333333;
      --text: #5f5f5f;
      --light-gray: #f5f6f7;
      --border: #e4e4e4;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--dark);
      line-height: 1.7;
      background: #fff;
    }

    h1,
    h2,
    h3 {
      color: #222;
      font-weight: 700;
      line-height: 1.25;
    }

    .container {
      max-width: 1240px;
    }

  
    /* =====================================
       HERO
    ====================================== */

    .hero {
      padding: 85px 0;
      background: var(--light-gray);
      overflow: hidden;
    }

    .hero-content {
      padding-right: 40px;
    }

    .hero h1 {
      max-width: 680px;
      margin-bottom: 28px;
      font-size: clamp(24px, 4.5vw, 40px);
    }

    .hero p {
      max-width: 680px;
      margin-bottom: 28px;
      color: var(--text);
      font-size: 14px;
      line-height: 22px;
    }

    .btn-primus {
      display: inline-block;
      padding: 13px 27px;
      background: var(--primus-red);
      border: 1px solid var(--primus-red);
      border-radius: 3px;
      color: #fff;
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      transition: .25s ease;
    }

    .btn-primus:hover {
      background: #a91d1d;
      border-color: #a91d1d;
      color: #fff;
    }

    /* =====================================
       HERO VISUAL
    ====================================== */

    .hero-visual {
      position: relative;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-image-box {
      position: relative;
      width: 82%;
      height: 430px;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 20px 55px rgba(0, 0, 0, .12);
      z-index: 2;
    }

    .hero-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-image-shape {
      position: absolute;
      width: 105px;
      height: 105px;
      right: 5px;
      bottom: 5px;
      background: var(--primus-red);
      border-radius: 4px;
      z-index: 1;
    }

    /* Supporting icons */

    .hero-icon {
      position: absolute;
      width: 62px;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--primus-red);
      box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
      z-index: 3;
    }

    .hero-icon svg {
      width: 29px;
      height: 29px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.7;
    }

    .hero-icon-1 {
      top: 40px;
      left: 2%;
    }

    .hero-icon-2 {
      top: 125px;
      right: 0;
    }

    .hero-icon-3 {
      bottom: 45px;
      left: 5%;
    }

    /* =====================================
       COMMON SECTION
    ====================================== */

    .section {
      padding: 80px 0;
    }

    .section-light {
      background: var(--light-gray);
    }

    .section-title {

      font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
    }

    .section-text {
      color: var(--text);
      font-size: 14px;
      line-height: 22px;
    }

    /* =====================================
       WHAT IS
    ====================================== */

.what-is {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

    /* =====================================
       SERVICES
    ====================================== */

    /* .services-heading {
      max-width: 760px;
      margin-bottom: 50px;
    } */

    .service-card {
      height: 100%;
      padding: 32px 30px;
      background: #fff;
      border: 1px solid var(--border);
      transition: .25s ease;
    }

    .service-card:hover {
      border-color: #cfcfcf;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .07);
      transform: translateY(-3px);
    }

    .service-number {
      margin-bottom: 22px;
      color: var(--primus-red);
      font-size: 14px;
      font-weight: 700;
      display: none;
    }

    .service-card h3 {
      min-height: 55px;
      font-size: 20px;
    }

    .service-card p {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      line-height: 22px;
    }

    /* =====================================
       JOURNEY
    ====================================== */

    .journey-intro {
margin-bottom: 25px;
    text-align: center;
    }

        .journey-intro h2{
          margin-bottom: 10px;
        }

    .journey-step {
    position: relative;
    height: 100%;
    padding: 20px;
    border: 1px solid #ddd;
    background: #fff;
    border-bottom: 3px solid var(--primus-red);
    }

    .journey-number {
      margin-bottom: 10px;
      color: var(--primus-red);
      font-size: 13px;
      font-weight: 700;
    }

    .journey-step h3 {
      margin-bottom: 12px;
      font-size: 21px;
    }

    .journey-step p {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      line-height: 22px;
    }

    /* =====================================
       WHY PARTNER
    ====================================== */

    .why-section {
      background: #333;
      color: #fff;
    }

    .why-section h2 {
      color: #fff;
      font-size: 30px;
    }

    .why-content {
      padding-left: 50px;
      border-left: 2px solid var(--primus-red);
    }

    .why-content p {
      margin: 0;
      color: #ddd;
      font-size: 14px;
      line-height: 22px;
    }

    /* =====================================
       CTA
    ====================================== */

    .cta {
    padding: 70px 0 30px;
    text-align: center;
    }

    .cta h2 {
      margin-bottom: 20px;
      font-size: 30px;
    }

    .cta p {
      max-width: 850px;
      margin: 0 auto 28px;
      color: var(--text);
      font-size: 14px;
      line-height: 22px;
    }



    /* =====================================
       RESPONSIVE
    ====================================== */

    @media (max-width: 991px) {

      .hero {
        padding: 30px 0;
      }

      .hero-content {
        padding-right: 0;
      }

      .hero-visual {
        min-height: 430px;
        margin-top: 35px;
      }

      .hero-image-box {
        width: 85%;
        height: 390px;
      }

      .section {
        padding: 30px;
      }

      .why-content {
        padding-left: 30px;
      }
    }

    @media (max-width: 767px) {

      .hero h1 {
        font-size: 24px;
      }

      .hero p {
        font-size: 15px;
      }

      .hero-visual {
        min-height: 340px;
      }

      .hero-image-box {
        width: 88%;
        height: 300px;
      }

      .hero-icon {
        width: 52px;
        height: 52px;
      }

      .hero-icon svg {
        width: 24px;
        height: 24px;
      }

      .section-title,
      .why-section h2,
      .cta h2 {
        font-size: 20px;
      }

      .service-card h3 {
        min-height: auto;
      }

      .why-content {
        padding-left: 20px;
      }
    }