html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  *, *::before, *::after {
    box-sizing: inherit;
  }
  
  
  @media only screen and (max-width: 768px) {
    

    header {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
  
    .navbar-email {
      width: 100%;
      text-align: center;
      margin-bottom: 10px;
      font-size: 14px;
    }
  
    header nav {
      width: 100%;
    }
  
    header nav ul {
      flex-direction: column;
      align-items: center;
      padding: 0;
      margin: 0;
    }
  
    header nav ul li {
      width: 100%;
      text-align: center;
      padding: 5px 0;
    }
  
    header nav .btn-order {
      margin: 10px auto;
    }
  

    img {
      max-width: 100%;
      height: auto;
    }

    .intro-text {
        order: 2;
        width: 100%;
        margin-top: 10px;
    }

    .intro-container, .intro-image {
        max-width: 100%;
        overflow: hidden;
        flex-direction: column;
        align-items: center;
    }

    .intro-image {
        order: 1;
    }

    .intro-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    main, header, footer, section, div {
        max-width: 100%;
        overflow-x: hidden;
    }

    h1, h2, h3, p {
      text-align: center;
    }

    .steps {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .step {
      width: 90%;
      margin-bottom: 20px;
    }

    .temp {
    display: flex;
    flex-direction: column !important;
    padding: 0;
    margin: 0;
    overflow: visible;
    }

    .temp li {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    flex-direction: column !important;
    align-items: center !important;
    }

    .temp li img {
    order: 1 !important;
    margin-bottom: 10px;
    }

    .temp li div {
    width: 100%;
    margin-bottom: 15px;
    order: 2 !important;
    }

    .temp strong {
    font-size: 16px;
    text-align: center;
    display: block;
    margin-bottom: 8px;
    }

    .temp p {
    font-size: 14px;
    text-align: center;
    margin: 0;
    padding: 0 5px;
    }

    .temp img {
    display: block;
    margin: 10px auto;
    max-width: 100%;
    height: auto;
    }

    .header2 h2 {
    font-size: 18px;
    text-align: center;
    padding: 10px 0;
    }

    #kara {
    font-size: 14px;
    padding: 10px;
    text-align: center;
    }
  
    footer {
      width: 100%;
      text-align: center;
      padding: 10px;
      font-size: 14px;
    }

    .container {
    flex-direction: column !important;
    align-items: center;
    gap: 30px;
    padding: 10px !important;
    margin: 0 auto !important;
    width: 95% !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
    }

    .card {
    width: 90%;
    margin-bottom: 20px;
    }

    .card img {
    max-width: 100%;
    height: auto;
    }

    .card p {
    font-size: 16px;
    padding: 5px;
    }

    .card .button, .card .inquiry {
    font-size: 16px;
    padding: 8px 16px;
    }

    label, input, select, textarea, button {
        width: 90% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        overflow-x: hidden !important;
        margin-left: 5px !important;
    }

    .checkbox-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
        padding-left: 10px !important;
        box-sizing: border-box !important;
      }
    
      .checkbox-label {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 90% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
      }
    
      .checkbox-label input[type="checkbox"] {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        transform: scale(1.0);
        margin-left: 5px !important;
      }
    
      .checkbox-label span, .checkbox-label {
        font-size: 14px !important;
        text-align: left !important;
      }

    

    .form-group {
    flex-direction: column;
    gap: 10px;
    }

    .form-group div {
    width: 100%;
    }

    form, .form-group, .form-group div {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    }

    input:not([type="checkbox"]), select, textarea {
        padding: 8px !important;
        width: 90% !important;
        margin-left: 5px !important;
    }

    button {
        padding: 10px !important;
        margin-top: 10px !important;
        margin-left: 5% !important;
    }

    .consent {
      display: flex !important;
      align-items: flex-start !important;
      gap: 10px;
      width: 100%;
      padding: 10px;
    }
  
    .consent input[type="checkbox"] {
      flex-shrink: 0;
      margin-top: 4px;
      width: 20px;
      height: 20px;
    }
  
    .consent label {
      flex: 1;
      display: block;
      font-size: 13px;
      line-height: 1.4;
      word-break: break-word;
      text-align: left;
    }

    .checkbox-inline {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    
    .checkbox-inline input[type="checkbox"] {
      margin-top: 3px;
      flex-shrink: 0;
      width: 20px;
      height: 20px;
    }
    
    .checkbox-inline span {
      font-size: 14px;
      line-height: 1.4;
      word-break: break-word;
      text-align: left;
    }

    .file-upload {
    padding: 15px;
    }
  }
  
  @media only screen and (max-width: 480px) {
  
    .navbar-email, header nav ul li, header nav .btn-order {
      font-size: 13px;
    }
  
    .intro-text h1 {
      font-size: 20px;
    }
  
    .intro-text p {
      font-size: 14px;
    }
  
    .steps-section .step h3 {
      font-size: 16px;
    }
  
    .steps-section .step p {
      font-size: 13px;
    }

    .temp strong {
    font-size: 15px;
    }

    .temp p, #kara {
    font-size: 13px;
    }

    .header2 h2 {
    font-size: 16px;
    }

    .card p, .card .button, .card .inquiry {
    font-size: 14px;
    }

    label, input, select, textarea, button {
    font-size: 13px !important;
    }

    .header3 h2 {
    font-size: 18px !important;
    }

    .description p {
    font-size: 14px;
    padding: 5px;
    }

    .checkbox-label span, .checkbox-label {
        font-size: 13px !important;
      }
  }