@media screen and (min-width: 1281px) and (max-width: 1920px) {
    .hero-title {
        font-size: 32px;
        white-space: nowrap; /* This prevents the text from wrapping */
    }

    .hero-subtitle {
        font-size: 20px;
    }

    .header-image {
        height: 42px;
    }

    .header-nav-items {
        font-size: 14px;
    }

    .hero-banner-content {
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .hero-banner-button {
        padding: 10px 16px;
        font-size: 18px;
        margin-top: 18px;
        background-color: #f4f4f4; /* Button background color */
        color: #131313; /* Button text color */
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    #custom-popup-container {
        bottom: 64px;
        width: 228px;
        padding: 8px;
    }

    .custom-popup-text {
        font-size: 16px;
    }

    .counter-container {
        margin-top: 32px;
        margin-bottom: 16px;
    }

    .counter {
        margin-left: 32px;
        margin-right: 32px;
    }

    .counter-value {
        font-size: 24px; /* Large size for the counter number */
    }

    .counter-plus-sign {
        font-size: 16px;
    }

    .counter-text {
        font-size: 10px; /* Smaller size for the description */
        font-weight: 500;
    }

    #review-animation-block {
        font-size: 16px;
        margin-bottom: 24px;
        margin-top: 32px;
    }

    .title {
        font-size: 24px;
        margin-top: 32px;
    }

    .title-and-animation {
        margin-top: 52px;
        margin-bottom: 48px;

    }

    .steps-block {
        width: 80%;
        margin-top: 0px;
        margin-bottom: 64px;
    }

    .steps-item {
        padding-bottom: 24px; /* Adjust this value as needed */
        max-width: 250px; /* Maximum width for each item */
        margin-top: 24px;
        margin-left: 32px;
        margin-right: 32px;
    }

    .steps-title {
        font-size: 24px;
        max-width: 300px;
    }

    .steps-body {
        max-width: 300px;
    }

    .step-image {
        width: 52px;
        padding: 8px;
        margin: 8px;
    }

    .origin-section {
        display: flex;
        width: 90%;
        margin-top: 32px;
        margin-bottom: 88px;
    }

    .origin-image {
        max-width: 296px;
        margin-right: 16px; /* Space between image and text */
    }

    .origin-content {
        font-size: 24px;
    }

    .quote-block {
        font-size: 16px;
        width: 80%;
        margin-top: 96px;
        margin-bottom: 54px;

    }

    .quote-body {
        padding: 12px;
        margin-top: 48px;
    }

    .quote-name {

    }

    .quote-name-subtext {

    }

    .quote-image {
        width: 312px;
        margin-left: 12px;
        margin-right: 12px;
        border-radius: 8px;
    }

    blockquote {
    }

    .vision-section {
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .vision-image {
        max-width: 224px;
    }

    .vision-content {
        padding: 10px;
        font-size: 32px;
    }

    .contact-form {
        font-size: 24px;
        width: 70%;
        margin-top: 16px;
        margin-bottom: 72px;
        padding: 50px;
    }

    .contact-form p {
        margin: 10px 0;
    }

    .form-group {
        margin-right: 10px; /* Spacing between groups */
    }

    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
        font-size: 24px;
        line-height: 1.5; /* Adjust line height as needed */
        min-width: 100px; /* Set a minimum width */
        max-width: 70%; /* Ensure it doesn't overflow the container */
    }
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
    .hero-title {
        font-size: 28px;
        white-space: nowrap; /* This prevents the text from wrapping */
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .header-image {
        height: 42px;
    }

    .header-nav-items {
        font-size: 14px;
    }

    .hero-banner-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .hero-banner-button {
        padding: 8px 16px;
        font-size: 16px;
        margin-top: 20px;
        background-color: #f4f4f4; /* Button background color */
        color: #131313; /* Button text color */
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    #custom-popup-container {
        bottom: 54px;
        width: 196px;
        padding: 6px;
    }

    .custom-popup-text {
        font-size: 14px;
        margin-left: 6px;

    }

    .progress-bar-item {
        width: 144px;
        height: 6px;
        border-radius: 6px;
        margin-right: 8px;
        margin-left: 8px;
    }

    .counter-container {
        margin-top: 32px;
        margin-bottom: 16px;
    }

    .counter {
        margin-left: 32px;
        margin-right: 32px;
    }

    .counter-value {
        font-size: 24px; /* Large size for the counter number */
    }

    .counter-text {
        font-size: 10px; /* Smaller size for the description */
        font-weight: 500;
    }

    #review-animation-block {
        font-size: 16px;
        margin-bottom: 24px;
        margin-top: 32px;
    }

    .title {
        font-size: 24px;
        margin-top: 32px;
    }

    .title-and-animation {
        margin-top: 52px;
        margin-bottom: 48px;
    }

    .steps-block {
        width: 90%;
        margin-top: 0px;
        margin-bottom: 64px;
    }

    .steps-item {
        padding-bottom: 24px; /* Adjust this value as needed */
        max-width: 250px; /* Maximum width for each item */
        margin-top: 24px;
        margin-left: 32px;
        margin-right: 32px;
    }

    .steps-title {
        font-size: 24px;
        max-width: 300px;
    }

    .steps-body {
        max-width: 300px;
    }

    .step-image {
        width: 52px;
        padding: 8px;
        margin: 8px;
    }

    .origin-section {
        display: flex;
        width: 90%;
        margin-top: 32px;
        margin-bottom: 88px;
    }

    .origin-image {
        max-width: 224px;
        margin-right: 16px; /* Space between image and text */
    }

    .origin-content {
        font-size: 24px;
    }

    .quote-block {
        font-size: 16px;
        width: 80%;
        margin-top: 96px;
        margin-bottom: 54px;
    }

    .quote-body {
        padding: 12px;
        margin-top: 48px;
    }

    /* .quote-name { */

    /* } */

    /* .quote-name-subtext { */

    /* } */

    .quote-image {
        width: 256px;
        margin-left: 12px;
        margin-right: 12px;
        border-radius: 8px;
    }

    /* blockquote { */
    /* } */

    .vision-section {
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .vision-image {
        max-width: 224px;
    }

    .vision-content {
        padding: 10px;
        font-size: 32px;
    }

    .contact-form {
        font-size: 24px;
        width: 70%;
        margin-top: 16px;
        margin-bottom: 72px;
        padding: 50px;
    }

    .contact-form p {
        margin: 10px 0;
    }

    .form-group {
        margin-right: 10px; /* Spacing between groups */
    }

    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
        font-size: 24px;
        line-height: 1.5; /* Adjust line height as needed */
        min-width: 100px; /* Set a minimum width */
        max-width: 70%; /* Ensure it doesn't overflow the container */
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .hero-title {
        font-size: 28px;
        white-space: nowrap; /* This prevents the text from wrapping */
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .header-image {
        height: 42px;
    }

    .header-nav-items {
        font-size: 14px;
    }

    .hero-banner-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .hero-banner-button {
        padding: 8px 16px;
        font-size: 16px;
        margin-top: 20px;
        background-color: #f4f4f4; /* Button background color */
        color: #131313; /* Button text color */
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    #custom-popup-container {
        bottom: 52px;
        width: 176px;
        padding: 6px;
    }

    .custom-popup-text {
        font-size: 12px;
        margin-left: 6px;
    }

    .progress-bar-item {
        width: 104px;
        height: 6px;
        border-radius: 6px;
        margin-right: 12px;
        margin-left: 12px;
    }

    .counter-container {
        margin-top: 32px;
        margin-bottom: 16px;
    }

    .counter {
        margin-left: 32px;
        margin-right: 32px;
    }

    .counter-value {
        font-size: 24px; /* Large size for the counter number */
    }

    .counter-text {
        font-size: 10px; /* Smaller size for the description */
        font-weight: 500;
    }

    #review-animation-block {
        font-size: 16px;
        margin-bottom: 24px;
        margin-top: 32px;
    }

    .title {
        font-size: 24px;
        margin-top: 32px;
    }

    .title-and-animation {
        margin-top: 52px;
        margin-bottom: 48px;

    }

    .steps-block {
        width: 80%;
        margin-top: 0px;
        margin-bottom: 64px;
    }

    .steps-item {
        padding-bottom: 24px; /* Adjust this value as needed */
        max-width: 250px; /* Maximum width for each item */
        margin-top: 24px;
        margin-left: 32px;
        margin-right: 32px;
    }

    .steps-title {
        font-size: 24px;
        max-width: 300px;
    }

    .steps-body {
        max-width: 300px;
    }

    .step-image {
        width: 52px;
        padding: 8px;
        margin: 8px;
    }

    .origin-section {
        display: flex;
        width: 90%;
        margin-top: 32px;
        margin-bottom: 88px;
    }

    .origin-image {
        max-width: 224px;
        margin-right: 16px; /* Space between image and text */
    }

    .origin-content {
        font-size: 24px;
    }

    .quote-block {
        font-size: 16px;
        width: 80%;
        margin-top: 96px;
        margin-bottom: 54px;
    }

    .quote-body {
        padding: 12px;
        margin-top: 48px;
    }

    .quote-name {

    }

    .quote-name-subtext {

    }

    .quote-image {
        width: 184px;
        margin-left: 12px;
        margin-right: 12px;
        border-radius: 8px;
    }

    blockquote {
    }

    .vision-section {
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .vision-image {
        max-width: 224px;
    }

    .vision-content {
        padding: 10px;
        font-size: 32px;
    }

    .contact-form {
        font-size: 24px;
        width: 70%;
        margin-top: 16px;
        margin-bottom: 72px;
        padding: 50px;
    }

    .contact-form p {
        margin: 10px 0;
    }

    .form-group {
        margin-right: 10px; /* Spacing between groups */
    }

    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
        font-size: 24px;
        line-height: 1.5; /* Adjust line height as needed */
        min-width: 100px; /* Set a minimum width */
        max-width: 70%; /* Ensure it doesn't overflow the container */
    }
}

@media screen and (min-width: 376px) and (max-width: 575px) {
    .hero-title {
        font-size: 22px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .header-image {
        height: 36px;
    }

    .header-container {
        padding: 6px;
        width: 90%;
    }

    .hamburger-menu {
        font-size: 24px;
        display: block;
        cursor: pointer;
    }

    .nav-links {
        display: none;
    }

    .header-nav-items {
        font-size: 10px;
        display: none;
        flex-direction: column;
    }

    .hero-banner-container {
    }

    .hero-banner-image {
        position: absolute;
        background-size: cover;
    }

    .hero-banner-content {
        top: 48%;

    }

    .hero-banner-button {
        padding: 6px 14px;
        font-size: 14px;
        margin-top: 44px;
        background-color: #f4f4f4; /* Button background color */
        color: #131313; /* Button text color */
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    #custom-popup-container {
        bottom: 48px;
        width: 185px;
        padding: 6px;

    }

    .custom-popup-text {
        font-size: 12px;
    }

    .progress-bar-item {
        width: 64px;
        height: 4px;
        border-radius: 6px;
        margin-right: 8px;
        margin-left: 8px;

    }

    .counter-container {
        margin-top: 32px;
        margin-bottom: 16px;
        width: 90%;
    }

    .counter {
        margin-left: 0px;
        margin-right: 0px;
    }

    .counter-value {
        font-size: 18px; /* Large size for the counter number */
    }

    .counter-plus-sign {
        font-size: 14px;
    }

    .counter-text {
        font-size: 10px; /* Smaller size for the description */
        font-weight: 500;
        margin-left: 8px;
        margin-right: 8px;
    }

    #review-animation-block {
        font-size: 14px;
        margin-bottom: 24px;
        margin-top: 32px;
    }

    .title {
        font-size: 18px;
        margin-top: 32px;
    }

    .title-and-animation {
        margin-top: 52px;
        margin-bottom: 48px;
    }

    #text-animation-container p {
        font-size: 16px;
    }

    .steps-block {
        width: 80%;
        margin-top: 0px;
        margin-bottom: 64px;
    }

    .steps-item {
        padding-bottom: 24px; /* Adjust this value as needed */
        max-width: 250px; /* Maximum width for each item */
        margin-top: 24px;
        margin-left: 32px;
        margin-right: 32px;
    }

    .steps-title {
        font-size: 18px;
        max-width: 300px;
    }

    .steps-body {
        max-width: 300px;
        font-size: 14px;
    }

    .step-image {
        width: 44px;
        padding: 8px;
        margin: 8px;
    }

    .origin-section {
        display: block;
        text-align: center;
        width: 90%;
        margin-top: 64px;
        margin-bottom: 48px;
    }

    .origin-image {
        max-width: 184px;
        margin-top: 32px;
        margin-right: auto; /* Space between image and text */
        margin-left: auto;
        margin-bottom: 0px;
    }

    .origin-content {
        flex: 1; /* Takes up remaining space */
        padding: 25px;
        font-size: 16px;
        text-align: left;
        margin-top: 0px;
    }

    .quote-block {
        font-size: 16px;
        width: 80%;
        margin-top: 96px;
        margin-bottom: 64px;
    }

    .quote-body {
        padding: 12px;
        margin-top: 16px;
    }

    .quote-name {
        font-size: 14px;
    }

    .quote-name-subtext {
        font-size: 10px;
    }

    .quote-image {
        width: 184px;
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 12px;
        margin-bottom: 0px;
        border-radius: 8px;
    }

    blockquote {
        font-size: 14px;
    }

    .vision-section {
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .vision-image {
        max-width: 184px;
    }

    .vision-content {
        padding: 10px;
        font-size: 22px;
    }

    .contact-form {
        font-size: 18px;
        width: 70%;
        margin-top: 16px;
        margin-bottom: 72px;
        padding: 25px;
    }

    .contact-form p {
        margin: 10px 0;
    }

    .form-group {
        margin-right: 10px; /* Spacing between groups */
    }

    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
        font-size: 18px;
        line-height: 1.5; /* Adjust line height as needed */
        min-width: 100px; /* Set a minimum width */
        max-width: 70%; /* Ensure it doesn't overflow the container */
    }

    .contact-form button {
        padding: 8px 14px;
        border: solid, 1px;
        border-radius: 6px;
        font-size: 14px;
        margin-top: 24px;
        margin-bottom: 12px;

    }
}

@media screen and (max-width: 375px) {
    .hero-title {
        font-size: 18px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .header-image {
        height: 32px;
    }

    .header-container {
        padding: 0px;
        width: 90%;
    }

    .hamburger-menu {
        font-size: 22px;
        display: block;
        cursor: pointer;
    }

    .nav-links {
        display: none;
    }

    .header-nav-items {
        font-size: 10px;
        display: none;
        flex-direction: column;
    }

    /* .hero-banner-container { */
/* } */

    .hero-banner-image {
        position: absolute;
        background-size: cover;
    }

    .hero-banner-content {
        top: 48%;
    }

    .hero-banner-button {
        padding: 6px 14px;
        font-size: 14px;
        margin-top: 44px;
        background-color: #f4f4f4; /* Button background color */
        color: #131313; /* Button text color */
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    #custom-popup-container {
        bottom: 48px;
        width: 150px;
        padding: 6px;
    }

    .custom-popup-text {
        font-size: 10px;
        margin-left: 4px;
    }

    .progress-bar-item {
        width: 48px;
        height: 4px;
        border-radius: 6px;
        margin-right: 8px;
        margin-left: 8px;
    }

    .counter-container {
        margin-top: 32px;
        margin-bottom: 16px;
        width: 90%;
    }

    .counter {
        margin-left: 0px;
        margin-right: 0px;
    }

    .counter-value {
        font-size: 16px; /* Large size for the counter number */
    }

    .counter-plus-sign {
        font-size: 12px;
    }

    .counter-text {
        font-size: 8px; /* Smaller size for the description */
        font-weight: 500;
    }

    #review-animation-block {
        font-size: 14px;
        margin-bottom: 24px;
        margin-top: 32px;
    }

    .title {
        font-size: 18px;
        margin-top: 32px;
    }

    .title-and-animation {
        margin-top: 52px;
        margin-bottom: 48px;
    }

    #text-animation-container p {
        font-size: 16px;
    }

    .steps-block {
        width: 80%;
        margin-top: 0px;
        margin-bottom: 64px;
    }

    .steps-item {
        padding-bottom: 24px; /* Adjust this value as needed */
        max-width: 250px; /* Maximum width for each item */
        margin-top: 24px;
        margin-left: 32px;
        margin-right: 32px;
    }

    .steps-title {
        font-size: 18px;
        max-width: 300px;
    }

    .steps-body {
        max-width: 300px;
        font-size: 14px;
    }

    .step-image {
        width: 44px;
        padding: 8px;
        margin: 8px;
    }

    .origin-section {
        display: block;
        text-align: center;
        width: 90%;
        margin-top: 64px;
        margin-bottom: 48px;
    }

    .origin-image {
        max-width: 184px;
        margin-top: 32px;
        margin-right: auto; /* Space between image and text */
        margin-left: auto;
        margin-bottom: 0px;
    }

    .origin-content {
        flex: 1; /* Takes up remaining space */
        padding: 25px;
        font-size: 16px;
        text-align: left;
        margin-top: 0px;
    }

    .quote-block {
        font-size: 16px;
        width: 80%;
        margin-top: 96px;
        margin-bottom: 64px;
    }

    .quote-body {
        padding: 12px;
        margin-top: 16px;
    }

    .quote-name {
        font-size: 14px;
    }

    .quote-name-subtext {
        font-size: 10px;
    }

    .quote-image {
        width: 184px;
        margin-left: 12px;
        margin-right: 12px;
        margin-top: 12px;
        margin-bottom: 0px;
        border-radius: 8px;
    }

    blockquote {
        font-size: 14px;
    }

    .vision-section {
        margin-top: 48px;
        margin-bottom: 48px;
    }

    .vision-image {
        max-width: 184px;
    }

    .vision-content {
        padding: 10px;
        font-size: 22px;
    }

    .contact-form {
        font-size: 18px;
        width: 70%;
        margin-top: 16px;
        margin-bottom: 72px;
        padding: 25px;
    }

    .contact-form p {
        margin: 10px 0;
    }

    .form-group {
        margin-right: 10px; /* Spacing between groups */
    }

    .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"] {
        font-size: 18px;
        line-height: 1.5; /* Adjust line height as needed */
        min-width: 100px; /* Set a minimum width */
        max-width: 75%; /* Ensure it doesn't overflow the container */
    }

    .contact-form button {
        padding: 8px 14px;
        border: solid, 1px;
        border-radius: 6px;
        font-size: 14px;
        margin-top: 24px;
        margin-bottom: 12px;
    }

    .google-required-notification {
        font-size: 8px;
        font-weight: 300;
        margin-top: 8px;
        color: gray;
    }
}