/*@media (min-width: 390px) and (max-width: 428px) {*/
/*    .hero-title-box h1 {*/
/*        border: solid 1px black !important;*/
/*        font-size: 2.5em !important;*/
/*        margin: 0 !important;*/
/*    }*/
/*}*/

/*!* Larger devices (anything bigger than 428px viewport) *!*/
/*@media (min-width: 429px) {*/
/*    .hero-title-box h1 {*/
/*        border: solid 2px blue !important;*/
/*    }*/
/*}*/


/*RESPONSIVE ******375*/
@media (max-width: 375px) {
    #hero {
        min-height: 70vh; /* Adjust based on your content */
    }

    .navbar-brand img { /*Logo Size*/
        width: 50px;
        height: auto;
    }

    .hero-title-box h1 { /*Hero Text*/
        border: solid 1px yellow;
        font-size: 2.1em;
        margin: 0;
    }

    .awesome-word { /*LEADENGINE Text*/
        /*border: solid 1px #20c997;*/
        font-size: 2.5em;
        position: absolute;
        bottom: -1.4em;
        right: 0.3em;
    }

    .period-frame h3 { /*AWESOME Text*/
        font-size: 1.2em;
    }

    .price-tab-style .nav-link {
        font-size: 0.8em;
    }

    #pulsingBall {
        /*border: solid 1px purple;*/
        padding: 0;
    }

    /*DESCRIPTION SECTION*/
    #description h1 {
        /*border: solid 1px purple;*/
        font-size: 1.5em;
        margin: 0 0 15px 0;
    }

    #description.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .btn {
        padding: 15px 20px;
        font-size: 16px;
    }

    .btn-wrapper-contact {
        /*border: solid 1px yellow;*/
        justify-content: center; /* Center the button horizontally */
    }

    /*MACHINE SECTION*/
    #machine.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .section-text-block h1 {
        /*border: solid 1px purple;*/
        font-size: 1.5em;
        margin: 0 0 15px 0;
    }

    .section-text-block h1 i {
        font-size: inherit; /* Inherit the font size from the parent <h1> */
    }

    .section-text-block ul li h5 {
        font-size: 1.2em;
    }

    .content-wrap {
        /*border: solid 1px purple;*/
        padding: 30px 15px 0 15px; /* Add padding */
    }

    .machine-box h5 {
        font-size: 0.7em;
        font-weight: 600;
    }

    /*GET SECTION*/
    #get.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .section-text-block-2 h1 {
        /*border: solid 1px purple;*/
        font-size: 1.5em;
        margin: 0 0 15px 0;
    }

    .get-box {
        width: 100%;
    }

    .check-out-landing h5 {
        font-size: 1.2em;
        font-weight: 300;
    }

    /*INDUSTRIES SECTION*/
    #industry.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /*UI SECTION*/
    #ui.section-padding-top {
        padding-top: 50px !important;
        /*padding-bottom: 50px !important;*/
    }

    .ui-art-box {
        /*border-bottom: 1px solid #20c997;*/
        width: 100%;
        height: 270px;
        margin-right: 0;
        margin-bottom: 40px;
    }

    /*CARUSEL BLUR*/
    /* Pseudo-elements for blur effect */
    .integrations-container::before,
    .integrations-container::after {
        width: 60px;
    }

    /*DIRECT MAIL SECTION*/
    #direct-mail.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .text-direct-mail {
        /*border: 1px solid yellowgreen;*/
        margin: 40px 0;
        padding: 0;
    }

    .text-direct-mail-2 {
        /*border: 1px solid yellowgreen;*/
        margin: 30px 15px 0 15px;
        padding: 0;
    }

    /*pricing section*/
    #pricing.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .price-tab-style {
        /*border: 1px solid red;*/
        font-size: 1.0rem; /* Adjust font size as needed */
        color: var(--c-brand-dark); /* Set text color */
        margin-bottom: 30px;
    }

    .pricing-table {
        flex-direction: column; /* Stack plans vertically */
        gap: 80px; /* Add vertical spacing between plans */
        padding: 6px;
        margin: 0;
        /*border: 1px solid red;*/
        width: 100%;
    }

    .plan {
        width: 100%; /* Each plan takes up about a third of the space */
    }

    .pricing-table-wrapper {
        /*border: 3px solid dodgerblue;*/
        padding: 0;
    }

    /*DISTRIBUTION SECTION*/
    #distribution.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    #distribution h2 {
        font-size: 1.3em;
        font-weight: 500;
    }

    /*CONTACT SECTION*/
    #contact.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .contact-wrapper {
        padding: 15px;
    }

    .contact-wrapper button {
        font-size: 0.6em;
    }

    .contact-wrapper label {
        font-size: 0.8em;
    }

    .contact-wrapper input {
        font-size: 0.8em;
    }

    .contact-wrapper textarea {
        font-size: 0.8em;
    }

    /*FAQ SECTION*/
    #faq.section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    #faq .accordion-header .accordion-button {
        font-size: 18px;
    }

    .footer-top .ft-logo {
        margin-bottom: 0;
        height: 70px;
        width: auto;
    }
}

/*RESPONSIVE ******375*/

@media (min-width: 321px) and (max-width: 375px) {
    .hero-title-box h1 {
        border: solid 1px red;
        font-size: 2.5em;
        margin: 0;
    }

    .awesome-word {
        /*border: solid 1px #20c997;*/
        font-size: 2.6em;
        position: absolute;
        bottom: -1.4em;
        right: 0.5em;
    }

    .period-frame h3 {
        font-size: 1.5em;
    }

    .footer-top .ft-logo {
        margin-bottom: 0;
        height: 70px;
        width: auto;
    }

}




/*RESPONSIVE ******414*/
@media (min-width: 376px) and (max-width: 425px) {
    #hero {
        min-height: 65vh;
    }

    .navbar-brand img {
        width: 55px;
        height: auto;
    }

    .hero-title-box h1 {
        border: solid 1px #6610f2;
        font-size: 2.5em;
        margin: 0;
    }

    .awesome-word { /*LEADENGINE*/
        /*border: solid 1px #20c997;*/
        font-size: 2.9em;
        position: absolute;
        bottom: -1.8em;
        right: 0.5em;
    }

    .period-frame h3 {
        font-size: 1.8em;
    }

    .hero-title {
        /*border: solid 1px black;*/
        padding: 0 20px 0 20px;

    }

    /*DESCRIPTION SECTION*/
    #description.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .container { /*All containers*/
        /*border: solid 1px black;*/
        padding: 0 20px 0 20px;

    }

    .btn-wrapper-contact {
        justify-content: center; /* Center the button horizontally */
    }

    .section-text-block-2 {
        /*border: solid 1px purple;*/
        width: 100%;
    }

    /*MACHINE SECTION*/
    #machine.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .section-text-block h1 {
        font-size: 1.6em;
        margin: 0 0 15px 0;
    }

    .section-text-block h1 i {
        font-size: inherit; /* Inherit the font size from the parent <h1> */
    }

    .machine-box h5 {
        font-size: 0.7em;
        font-weight: 600;
    }

    /*WHAT YOU GET SECTION*/
    #get.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .section-text-block-2 h1 {
        /*border: solid 1px purple;*/
        font-size: 1.6em;
        margin: 0 0 15px 0;
    }

    .check-out-landing h5 {
        font-size: 1.2em;
        font-weight: 300;
    }

    /*INDUSTRIES SECTION*/
    #industry.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    /*UI SECTION*/
    #ui.section-padding-top {
        padding-top: 55px !important;
    }

    .ui-art-box {
        /*border-bottom: 1px solid #20c997;*/
        width: 100%;
        height: 270px;
        margin-right: 0;
        margin-bottom: 40px;
    }

    /*    !*CARUSEL BLUR*!*/
    /* Pseudo-elements for blur effect */
    .integrations-container::before,
    .integrations-container::after {
        width: 60px;
    }

    /*DIRECT MAIL SECTION*/
    #direct-mail.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .text-direct-mail {
        /*border: 1px solid yellowgreen;*/
        margin: 40px 0;
        padding: 0;
    }

    .text-direct-mail-2 {
        /*border: 1px solid yellowgreen;*/
        margin: 30px 15px 0 15px;
        padding: 0;
    }

    /*PRICING SECTION*/
    #pricing.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .price-tab-style .nav-link {
        font-size: 0.9em;
    }

    .price-tab-style {
        /*border: 1px solid red;*/
        font-size: 1.1rem; /* Adjust font size as needed */
        color: var(--c-brand-dark); /* Set text color */
        margin-bottom: 30px;
    }

    .pricing-table {
        flex-direction: column; /* Stack plans vertically */
        gap: 80px; /* Add vertical spacing between plans */
        padding: 6px;
        margin: 0;
        /*border: 1px solid red;*/
        width: 100%;
    }

    .plan {
        width: 100%; /* Each plan takes up about a third of the space */
    }

    .pricing-table-wrapper {
        /*border: 3px solid dodgerblue;*/
        padding: 0;
    }

    /*DISTRIBUTION*/
    #distribution.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    #distribution h2 {
        font-size: 1.3em;
        font-weight: 600;
    }

    /*    !*CONTACT SECTION*!*/
    #contact.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .contact-wrapper {
        padding: 15px;
    }

    .contact-wrapper button {
        font-size: 0.7em;
        padding: 10px 30px;
    }

    .contact-wrapper label {
        font-size: 0.8em;
    }

    .contact-wrapper input {
        font-size: 0.8em;
    }

    .contact-wrapper textarea {
        font-size: 0.8em;
    }

    /*FAQ SECTION*/
    #faq.section-padding {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    #faq .accordion-header .accordion-button {
        font-size: 0.8em;
    }

    .footer-top .ft-logo {
        margin-bottom: 0;
        height: 70px;
        width: auto;
    }

}


/*IPHONE 12 PRO MAX* */

@media (min-width: 426px) and (max-width: 768px) {
    #hero {
        min-height: 50vh;
    }
    /*TOP NAVIGATION LOGO*/
    .navbar-brand img {
        width: auto;
        height: 30px; /* Ensure height explicitly defined */
        max-width: 100%; /* Overwrite possible constraints */
        object-fit: contain; /* Maintain aspect ratio */
    }

    .hero-title-box h1 {
        /*border: solid 1px dodgerblue;*/
        font-size: 1.7em;
        margin: 0;
    }

    .awesome-word { /*LEADENGINE*/
        /*border: solid 1px #20c997;*/
        font-size: 2.9em;
        position: absolute;
        bottom: -1.8em;
        right: 0.5em;
    }

    .period-frame h3 { /*AWESOME*/
        font-size: 1.8em;
    }

    .hero-title {
        padding: 0 20px 0 20px;

    }
    /*BUTTONS*/
    .btn {
        padding: 10px 20px;
        font-size: 16px;
    }

    /*DESCRIPTION SECTION*/
    #description h1 {
        /*border: solid 1px purple;*/
        font-size: 1.5em;
        margin: 0 0 15px 0;
    }

    #description.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .btn-wrapper-contact {
        /*border: solid 1px yellow;*/
        justify-content: center; /* Center the button horizontally */
    }

    /*MACHINE SECTION*/
    #machine.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-text-block h1 {
        /*border: solid 1px purple;*/
        font-size: 1.5em;
        margin: 0 0 15px 0;
    }

    .section-text-block h1 i {
        font-size: inherit; /* Inherit the font size from the parent <h1> */
    }

    .section-text-block ul li h5 {
        font-size: 1.2em;
    }

    .content-wrap {
        /*border: solid 1px purple;*/
        padding: 30px 15px 0 15px; /* Add padding */
    }

    .machine-box h5 {
        font-size: 0.7em;
        font-weight: 600;
    }

    /*GET SECTION*/
    #get.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-text-block-2 h1 {
        /*border: solid 1px purple;*/
        font-size: 1.5em;
        margin: 0 0 15px 0;
    }

    .get-box {
        width: 100%;
    }

    .check-out-landing h5 {
        font-size: 1.2em;
        font-weight: 300;
    }

    /*INDUSTRIES SECTION*/
    #industry.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .industries-frame {
        display: flex;
        justify-content: center; /* Center the list horizontally */
    }

    .industry-list {
        display: grid; /* Turn the list into a grid layout */
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
        column-gap: 20px; /* Horizontal space between columns */
        row-gap: 30px; /* Vertical space between rows */
        list-style: none; /* Ensure list items don’t behave like default <ul>/<li> */
        padding: 0;
        margin: 0 auto; /* Ensure the grid is horizontally centered */
        max-width: 100%; /* Ensure it is responsive within its parent container */
    }

    .industry-list li {
        display: flex; /* Flexbox for centering individual list item content */
        flex-direction: column; /* To allow text and icon stacking */
        align-items: center; /* Center the content horizontally */
        justify-content: center; /* Center the content vertically */
        text-align: center; /* Center-align the text under icons */
    }

    .industry-list li h5 {
        margin: 10px 0 0; /* Add spacing between the icon and text */
    }

    /*UI SECTION*/
    #ui.section-padding-top {
        padding-top: 60px !important;
        /*padding-bottom: 50px !important;*/
    }

    .ui-art-box {
        /*border-bottom: 1px solid #20c997;*/
        width: 100%;
        height: 270px;
        margin-right: 0;
        margin-bottom: 40px;
    }


    /*CARUSEL BLUR*/
    /* Pseudo-elements for blur effect */
    .integrations-container::before,
    .integrations-container::after {
        width: 60px;
    }

    /*DIRECT MAIL SECTION*/
    #direct-mail.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .text-direct-mail {
        /*border: 1px solid yellowgreen;*/
        margin: 40px 0;
        padding: 0;
    }

    .text-direct-mail-2 {
        /*border: 1px solid yellowgreen;*/
        margin: 30px 15px 0 15px;
        padding: 0;
    }

    /*PRICING SECTION*/
    #pricing.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .price-tab-style .nav-link {
        font-size: 0.8em;
    }

    .price-tab-style {
        /*border: 1px solid red;*/
        font-size: 1.2rem; /* Adjust font size as needed */
        color: var(--c-brand-dark); /* Set text color */
        margin-bottom: 30px;
    }

    .pricing-table {
        flex-direction: column; /* Stack plans vertically */
        gap: 70px; /* Add vertical spacing between plans */
        padding: 6px;
        margin: 0;
        /*border: 1px solid red;*/
        width: 100%;
    }

    .plan {
        width: 100%; /* Each plan takes up about a third of the space */
    }

    .pricing-table-wrapper {
        /*border: 3px solid dodgerblue;*/
        padding: 0;
    }

    /*DISTRIBUTION SECTION*/
    #distribution.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    #distribution h2 {
        font-size: 1.2em;
        font-weight: 600;
    }

    /*    !*CONTACT SECTION*!*/
    #contact.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .contact-wrapper {
        /*border: 1px solid deepskyblue;*/
        padding: 15px;
    }

    .contact-wrapper button {
        font-size: 0.7em;
        padding: 10px 30px;
    }

    .contact-wrapper label {
        font-size: 0.8em;
    }

    .contact-wrapper input {
        font-size: 0.8em;
    }

    .contact-wrapper textarea {
        font-size: 0.8em;
    }

    .form-map-container {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch; /* Ensure children fit inside the container */
        position: relative; /* Ensure proper containment */
        overflow: hidden; /* Prevent overflow of children */
    }

    .form-container, .map {
        width: 100%; /* Make sure both elements use the full width of the parent container */
        flex: 0 0 auto; /* Prevent unexpected shrinking or growing */
    }

    .form-container {
        margin-bottom: 20px; /* Space between form and map */
    }

    .map iframe {
        width: 100%; /* Make the iframe adapt to the container properly */
        height: 400px; /* Allow height to adjust as needed */
    }

    /*FAQ SECTION*/
    #faq.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    #faq .accordion-header .accordion-button {
        font-size: 18px;
    }

    .footer-top .ft-logo {
        margin-bottom: 0;
        height: 30px;
        width: auto;
    }

    /* Full-width for `.ft-content-box` */
    .ft-content-box {
        display: flex; /* Enable flex layout */
        justify-content: space-between; /* Even spacing between the child blocks */
        align-items: flex-start; /* Align the blocks at the top edge */
        width: 100%; /* Ensure it spans the full available width */
        max-width: 100%; /* Prevent unnecessary restrictions from parents */
        padding: 0; /* Remove padding */
        margin: 30px 15px 15px 0; /* Margins */
        box-sizing: border-box; /* Include padding/borders in width calculations */
    }

    /* Ensure the child blocks (`ft-content-box-wrapper`) distribute evenly */
    .ft-content-box-wrapper {
        flex: 1; /* Let each wrapper take equal space */
        max-width: 30%; /* Allow each block 1/3 of the available space */
        box-sizing: border-box; /* Properly handle padding/margins */
    }

    /* Fix the container of the footer to remove Bootstrap constraints */
    .footer-top .container {
        width: 100%; /* Let the container take all available width */
        max-width: 100%; /* Remove Bootstrap-imposed max-width limits */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margins */
    }

    /* Avoid negative margins from `.row` */
    .footer-content-wrapper {
        width: 100%; /* Take full width */
        margin: 0 auto; /* Center the wrapper */
        padding: 0; /* Clear default padding from `.row` */
    }

    /* Ensure the `.footer-content-wrapper.row` does not apply negative margins */
    .footer-content-wrapper.row {
        margin-left: 0; /* Clear Bootstrap's grid margins */
        margin-right: 0; /* Clear Bootstrap's grid margins */
    }

}

























@media (min-width: 769px) and (max-width: 1024px) {
    #hero {
        min-height: 50vh;
    }

    .navbar-brand img {
        width: 60px;
        height: auto;
    }

    .hero-title-box h1 {
        border: solid 1px green;
        font-size: 2.4em;
        margin: 0;
    }

    .awesome-word { /*LEADENGINE*/
        /*border: solid 1px #20c997;*/
        font-size: 3.0em;
        position: absolute;
        bottom: -1.8em;
        right: 0.5em;
    }
    .period-frame h3 { /*MARKETING*/
        font-size: 1.8em;
    }

    /*PRICING SECTION*/
    #pricing.section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .price-tab-style .nav-link {
        font-size: 0.9em;
    }

    .price-tab-style {
        /*border: 1px solid red;*/
        font-size: 1.1rem; /* Adjust font size as needed */
        color: var(--c-brand-dark); /* Set text color */
        margin-bottom: 30px;
    }

    .pricing-table {
        flex-direction: column; /* Stack plans vertically */
        gap: 70px; /* Add vertical spacing between plans */
        padding: 6px;
        margin: 0;
        /*border: 1px solid red;*/
        width: 100%;
    }

    .plan {
        width: 100%; /* Each plan takes up about a third of the space */
    }

    .pricing-table-wrapper {
        /*border: 3px solid dodgerblue;*/
        padding: 0;
    }

    /*MAP*/
    .form-container, .map {
        flex: 0 0 100%;
        margin: 0;
    }

    .form-map-container {
        flex-wrap: wrap; /* Allow wrapping on small screens */
    }
}

@media (min-width: 835px) and (max-width: 1024px) {
    #hero {
        min-height: 40vh;
    }

    .navbar-brand img {
        width: 60px;
        height: auto;
    }

    .hero-title-box h1 {
        /*border: solid 1px #6610f2;*/
        font-size: 3.5em;
        margin: 0;
    }

    .awesome-word { /*LEADENGINE*/
        /*border: solid 1px #20c997;*/
        font-size: 4.0em;
        position: absolute;
        bottom: -1.8em;
        right: 0.5em;
    }

    .period-frame h3 { /*Marketing Text*/
        font-size: 2.2em;
    }

    #pricing #open-popup-button-2 {
        font-size: 0.8em;
        padding: 10px 30px;
    }
}


/*MACHINE -- RESPONSIVE (Next from LIne 511)*/
/* Optional: Media query for responsive design */
@media (max-width: 768px) {
    .content-wrap {
        flex-direction: column; /* Stacks items on smaller screens */
        align-items: flex-start; /* Start alignment for stacked items */
        justify-content: flex-start;
        height: auto; /* Allow content to determine height */
    }

    .section-text-block,
    .machine-box {
        max-width: 100%; /* Full width for stacked items */
        margin-right: 0; /* Remove margin if stacked */
        margin-bottom: 20px; /* Space between stacked items */
    }
}

/*NDUSTRY LIST (FROM AFTER LINE 1650*/
@media (max-width: 600px) {
    .industry-list {
        flex-direction: column;
    }

    .industry-list li {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

/*USER INTERFACE -  (FROM AFTER LINE 1680*/
@media (max-width: 600px) {
    .ui-container-art {
        flex-direction: column; /* Change to vertical stacking */
    }

    .ui-container-art > div {
        width: 100%; /* Ensure full width when stacked */
    }
}

@media (max-width: 600px) {
    .ui-container {
        flex-direction: column; /* Change to vertical stacking */
    }

    .ui-container > div {
        width: 100%; /* Ensure full width when stacked */
    }
}