.help-me-choose-block {
        max-width: 820px;
        margin: 0 auto;
      }

      /* --- Roadside Assistance Grid --- */
      .help-me-choose-services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
        margin: 30px 0;
      }

      .help-me-choose-service-box {
        background: #f7f8fa;
        border: 1px solid #ddd;
        border-radius: 12px;
        padding: 15px;
        text-align: center;
        transition: transform 0.2s;
      }

      .help-me-choose-service-box:hover {
        transform: translateY(-4px);
      }

      .help-me-choose-service-box img {
        width: 60px;
        height: 60px;
        object-fit: contain;
        margin-bottom: 10px;
      }

      /* --- Buttons --- */
      .help-me-choose-right {
        text-align: right;
        margin-top: 20px;
      }

      .help-me-choose-btn {
        background: #2b4a83;
        color: #fff;
        padding: 10px 20px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 16px;
        display: inline-flex; /* keeps img + text on one line */
        align-items: center; /* vertically center both */
        gap: 8px; /* space between img and text */
      }

      .help-choose-btn img {
        display: block; /* prevents image baseline shifting */
      }


      .help-me-choose-btn:hover {
        background: #1c3a70;
      }

      .help-me-choose-center {
        text-align: center;
        margin-top: 20px;
      }

      .help-me-choose-continue-btn {
        background: #e43232;
        color: #fff;
        padding: 10px 20px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 16px;       
      }

      .help-me-choose-continue-btn:hover {
        background: #b72828;
      }
#help-me-choose-continue.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
      .help-me-choose-btn-secondary {
        background: #ccc;
        color: #333;
        padding: 10px 20px;
        border-radius: 6px;
        border: none;
        margin-left: 10px;
        cursor: pointer;
      }

      /* --- Help Me Choose Questionnaire --- */
      .help-me-choose-questionnaire {
        background: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 12px;
        padding: 20px;
        margin-top: 20px;
      }

      .help-me-choose-benefits {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        text-align: left;
        margin: 20px 0;
      }


      .help-me-choose-benefits h3 {
        color: black;
        font-weight: 800; 
        font-size: 16px;
        margin-bottom: 5px;
      }

      
      .help-me-choose-benefits label {
        display: block;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 13px; 
      font-weight: 400; 
      }

      .help-me-choose-value {
color: #e43232;
}
.help-me-choose-basic {
color:#1953be;
}
.help-me-choose-plus {
color:#c5a542;
}

.help-me-choose-premier {
color:#8d28d6;
}

.hmc-red {
        border-color: #e43232;
      }
      .hmc-blue {
        border-color: #2b4a83;
      }
      .hmc-gold {
        border-color: #c5a542;
      }

      /* --- Result --- */

            /* 3 columns container */
      .three-columns-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
      }

      /* 3 columns */
      .three-columns-grid > * {
        padding: 1rem;
      }

      .help-me-choose-result {
        display: none;
        background: #f9f9f9;
        border-radius: 12px;
        padding: 20px;
        margin-top: 30px;
        text-align: center;
      }

      .help-me-choose-result h3 {
        color: #2b4a83;
        margin-bottom: 10px;
      }

      .help-me-choose-result p {
        font-size: 16px;
        color: #333;
      }

      .hmc-result-title {
        text-align: left;
      }

      /* it was flex */
      .hmc-result-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
        align-items: center;
        justify-items: center;
        max-width: 820px;
        margin: 0 auto 30px;
        border: 2px dashed #ddd;
        border-radius: 12px;
        padding: 25px 20px;
        gap: 20px;
        background: #fff;
      }

      /* container */
      .three-columns-grid {
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr;
      }

      /* columns */
      .three-columns-grid > * {
        padding: 1rem;
      }

      .hmc-plan-info {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .hmc-card-img {
        width: 300px;
        border-radius: 6px;
      }

      .hmc-price-info {
        text-align: center;       
        color: #333; 
        margin: 0px;
     
      }

        .hmc-price-info p {
        text-align: center;       
        color: #333; 
        font-size: 1.3rem;
         font-weight: 800;  
         line-height: 1.4;
         
      }
     
       .hmc-h3-txt {
         font-size: 1.5rem;
         font-weight: 800;
      }

      .hmc-red {
        border-color: #e43232;
      }
      .hmc-blue {
        border-color: #2b4a83;
      }
      .hmc-gold {
        border-color: #c5a542;
      }
      .hmc-black {
        border-color: #333;
      }
  

      .hmc-gold h3,
      .hmc-gold p {
        color: #c5a542;  
         margin: 0px;       
      }
      .hmc-red h3,
      .hmc-red p {
        color: #e43232;
       margin: 0px; 
      }
      .hmc-blue h3,
      .hmc-blue p {
        color: #2b4a83;
      margin: 0px; 
      }
      .hmc-black h3,
      .hmc-black p {
        color: #000;
        margin: 0px; 
      }

    
      /* Responsive for mobile: stack vertically */
@media (max-width: 768px) {
  .three-columns-grid {
    grid-template-columns: 1fr;
  }

  .hmc-result-box {
    text-align: center;
  }

  .hmc-card-img {
    margin: 0 auto;
  }

  .hmc-plan-info,
  .hmc-price-info {
    margin-bottom: 1rem;
  }

   .help-me-choose-right {
        text-align: center;
        margin-top: 20px;
      }
}

@media (min-width: 230px) and (max-width: 320px){
    .help-me-choose-benefits {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    }
  }