/* General Styles */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; } /* Navigation Bar */ #primary-nav { position: fixed; top: 0; height: 0px; width: 100%; background-color: rgba(51, 51, 51, 0); /* Start with transparent background */ color: white; padding: 1rem; z-index: 10; display: flex; justify-content: flex-start; /* Align to the left */ transition: background-color 0.3s ease; /* Smooth transition for background color */ } #sitenav { display: none; /* Ensure the navigation is hidden on page load */ list-style: none; margin: 0; padding: 0; display: flex; /* Ensure items are displayed horizontally when shown */ gap: 2rem; } #sitenav li { display: inline-block; } #sitenav li a { color: white; text-decoration: none; font-weight: bold; } /* Header Section */ .header-section { width: 100%; height: 40vh; padding: 0; margin: 0; background-image: url('images/manufacturing-execution-systems-lp.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; justify-content: center; align-items: center; text-align: center; color: white; flex-direction: column; } .header-section img { max-width: 100%; height: auto; margin-bottom: 20px; } .header-section h3, .header-section h1 { text-transform: uppercase; font-family: 'Oswald', sans-serif; text-shadow: 3px 1px 8px rgba(50, 50, 50, 1); margin: 0; } .header-section h3 { font-size: 2rem; margin-bottom: 10px; } .header-section h1 { font-size: 3rem; margin-bottom: 10px; } .header-section h3:last-of-type { font-size: 1.7rem; font-weight: 600; text-shadow: 5px 2px 10px rgba(0, 0, 0, 0.8); } /* Floating Form */ #modal-form { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; background-color: #E0F2F1; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); z-index: 1000; display: flex; flex-direction: column; opacity: 1; transition: opacity 0.5s ease, top 0.5s ease, left 0.5s ease; } #modal-form.minimized { top: 10px; right: 10px; left: auto; transform: none; display: none; }

#minimized-form { display: none; position: fixed; top: 10px; right: 10px; background-color: #333; color: white; padding: 5px 10px; cursor: pointer; z-index: 100; } .modal-header { background-color: #333; color: white; padding: 0.5rem; display: flex; justify-content: space-between; align-items: center; cursor: move; } .modal-header .modal-title { margin: 0; flex-grow: 1; } .modal-header .control-button { cursor: pointer; font-size: 1.2rem; border: 1px solid white; padding: 5px 10px; margin-left: 10px; position: relative; /* Position relative to hold the tooltip */ } /* Style for the tooltip */ .tooltip { position: absolute; background-color: black; color: #fff; text-align: center; border-radius: 4px; padding: 5px 10px; white-space: nowrap; visibility: hidden; opacity: 0; transition: opacity 0.3s; z-index: 1000; } /* Show the tooltip when hovering */ .control-button:hover .tooltip { visibility: visible; opacity: 1; } #modal-content { padding: 1rem; text-align: center; } #modal-content h2 { margin-top: 0; } #modal-content p { font-size: 0.9rem; color: #555; } .form-container { display: flex; flex-direction: column; align-items: center; margin-top: 20px; } .form-field { width: 80%; max-width: 500px; margin-bottom: 15px; } input[type="text"], input[type="email"] { width: 100%; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; } button[type="submit"] { width: 100%; max-width: 150px; padding: 10px; box-sizing: border-box; border: none; border-radius: 4px; background-color: #4CAF50; color: white; font-size: 16px; cursor: pointer; } button[type="submit"]:hover { background-color: #45a049; } /* Main Content */ #content { margin-top: 80px; padding: 1rem; display: flex; flex-direction: column; align-items: center; } .video-container { display: flex; justify-content: center; width: 100%; margin: 20px 0; } .pricing-table { background-color: #fff; font-family: 'Montserrat', sans-serif; } .pricing-table .block-heading { padding-top: 50px; margin-bottom: 40px; text-align: center; } .pricing-table .block-heading h2 { color: #3b99e0; } .pricing-table .block-heading p { text-align: center; max-width: 420px; margin: auto; opacity: 0.7; } .pricing-table .heading { text-align: center; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .pricing-table .item { background-color: #ffffff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075); border-top: 2px solid #5ea4f3; padding: 30px; overflow: hidden; position: relative; } .pricing-table .itemc { background-color: #f2f2f2; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075); border-top: 2px solid #DEDEDE; padding: 30px; overflow: hidden; position: relative; } .pricing-table .col-md-5:not(:last-child) .item { margin-bottom: 30px; } .pricing-table .item button { font-weight: 600; } .pricing-table .ribbon { width: 160px; height: 32px; font-size: 12px; text-align: center; color: #fff; font-weight: bold; box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25); background: #4dbe3b; transform: rotate(45deg); position: absolute; right: -42px; top: 20px; padding-top: 7px; } .pricing-table .item p { text-align: center; margin-top: 20px; opacity: 0.7; } .pricing-table .features .feature { font-weight: 600; } .pricing-table .features h4 { text-align: center; font-size: 18px; padding: 5px; } .pricing-table .features h4.competitor { text-align: center; font-size: 18px; padding: 5px; color: #ACACAC; } .pricing-table .price h4 { margin: 15px 0; font-size: 45px; text-align: center; color: #2288f9; } .pricing-table .pricec h4 { margin: 15px 0; font-size: 45px; text-align: center; color: #C0C0C0; } .pricing-table .buy-now button { text-align: center; margin: auto; font-weight: 600; padding: 9px 0; }

.hint--:after { color: white; padding: 18px 20px; font-size: 14px; font-family: "Arial", Helvetica, Arial, sans-serif; line-height: 16px; background-color: black; border: 1px solid #0078B7; }
.dotcontent { text-align: center; /* Center the content horizontally */ position: relative; margin-top: 10px; /* Adjust as needed */ }
.text { position: absolute; top: -30px; /* Adjust as needed */ margin-top: 20px; left: 50%; transform: translateX(-50%); color: black; background-color: #2E2E2E; /* Background color of the text */ padding: 0px 3px; /* Padding around the text */ border-radius: 5px; /* Adjust as needed */ }
.dot-line { position: relative; height: 1px; /* Height of the line */ width: 100%; /* Width of the line */ margin: 0 auto; /* Center the line horizontally */ background-image: linear-gradient(to right, white 50%, transparent 50%); /* Creates the dot */ background-size: 10px 1px; /* Size of the dot */ } .adot-line::before, .adot-line::after { content: ""; position: absolute; top: 0; width: 1px; /* Width of the vertical lines */ height: 100%; background-color: white; /* Color of the vertical lines */ left: 0; right: 0; } .dot-line::before { left: calc(50% - 1px); } .dot-line::after { right: calc(50% - 1px); } .tooltip-element { cursor: zoom-in; /* This changes the cursor to a tooltip-appropriate cursor */ } .btn-container { width: 290px; /* Set the width of the container */ margin: 0 auto 20px auto; /* Center the container and add space below */ text-align: center; /* Center the content within the container */ } /* Popup Styles */ .popup-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; padding: 20px; background-color: #193581; border: 1px solid #ccc; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 10000; } .popup-content { text-align: center; } .popup-content p { font-size: 16px; line-height: 1.5; color: #fff; margin-bottom: 20px; text-align: left; } .button-container { display: flex; justify-content: center; } .btn { width: auto; text-align: center; } .crs-announcement { background-color: #fff; font-family: 'Montserrat', sans-serif; } .crs-announcement .block-heading { padding-top: 10px; margin-bottom: 40px; text-align: left; } .crs-announcement .block-heading h1 { color: #777777; } .crs-announcement .block-heading h2 { color: #000000; } .crs-announcement .block-heading p { text-align: left; margin: auto; } .crs-announcement .heading { text-align: left; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .crs-announcement .item { background-color: #ffffff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075); border-top: 2px solid #5ea4f3; padding: 30px; overflow: hidden; position: relative; } .crs-announcement .itemc { background-color: #f2f2f2; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075); border-top: 2px solid #DEDEDE; padding: 30px; overflow: hidden; position: relative; } .crs-announcement .col-md-5:not(:last-child) .item { margin-bottom: 30px; } .crs-announcement .item button { font-weight: 600; } .crs-announcement .ribbon { width: 160px; height: 32px; font-size: 12px; text-align: left; color: #fff; font-weight: bold; box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25); background: #4dbe3b; transform: rotate(45deg); position: absolute; right: -42px; top: 20px; padding-top: 7px; } .crs-announcement .item p { text-align: left; margin-top: 20px; opacity: 0.7; } .crs-announcement .features .feature { font-weight: 600; } .crs-announcement .features h4 { text-align: left; font-size: 18px; padding: 5px; } .crs-announcement .features h4.competitor { text-align: left; font-size: 18px; padding: 5px; color: #ACACAC; } .crs-announcement .price h4 { margin: 15px 0; font-size: 45px; text-align: left; color: #2288f9; } .crs-announcement .pricec h4 { margin: 15px 0; font-size: 45px; text-align: left; color: #C0C0C0; } .crs-announcement .buy-now button { text-align: left; margin: auto; font-weight: 600; padding: 9px 0; } .crs-announcement p { padding-top: 20px; } /* ToolTrack Styles */ .crs-tooltrack { background-color: #fff; font-family: 'Montserrat', sans-serif; } .crs-tooltrack .block-heading { padding-top: 10px; margin-bottom: 40px; text-align: left; } .crs-tooltrack .block-heading h1 { color: #777777; } .crs-tooltrack .block-heading h2 { color: #000000; } .crs-tooltrack .block-heading p { text-align: left; margin: auto; } .crs-tooltrack .heading { text-align: left; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .crs-tooltrack .item { background-color: #ffffff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075); border-top: 2px solid #5ea4f3; padding: 30px; overflow: hidden; position: relative; } .crs-tooltrack .itemc { background-color: #f2f2f2; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075); border-top: 2px solid #DEDEDE; padding: 30px; overflow: hidden; position: relative; } .crs-tooltrack .col-md-5:not(:last-child) .item { margin-bottom: 30px; } .crs-tooltrack .item button { font-weight: 600; } .crs-tooltrack .ribbon { width: 160px; height: 32px; font-size: 12px; text-align: left; color: #fff; font-weight: bold; box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25); background: #4dbe3b; transform: rotate(45deg); position: absolute; right: -42px; top: 20px; padding-top: 7px; } .crs-tooltrack .item p { text-align: left; margin-top: 20px; opacity: 0.7; } .crs-tooltrack .features .feature { font-weight: 600; } .crs-tooltrack .features h4 { text-align: left; font-size: 18px; padding: 5px; } .crs-tooltrack .features h4.competitor { text-align: left; font-size: 18px; padding: 5px; color: #ACACAC; } .crs-tooltrack .price h4 { margin: 15px 0; font-size: 45px; text-align: left; color: #2288f9; } .crs-tooltrack .pricec h4 { margin: 15px 0; font-size: 45px; text-align: left; color: #C0C0C0; } .crs-tooltrack .buy-now button { text-align: left; margin: auto; font-weight: 600; padding: 9px 0; } .crs-tooltrack p { padding-top: 20px; } .close { color: white; } .slightly-larger { font-size: 1.2em; /* Increase font size by 20% */ } ul { list-style-type: disc; margin: 0; padding: 0; line-height: 1.8; /* Increase line height for better readability */ } li { margin-bottom: 15px; /* Add space between list items */ font-family: Arial, sans-serif; font-size: 16px; } strong { color: #333; /* Darker color for emphasis */ } /* Media Queries */ @media (max-width: 768px) { .header-section h3 { font-size: 1.5rem; } .header-section h1 { font-size: 2.5rem; } #modal-form { width: 90%; top: 40%; left: 50%; transform: translate(-50%, -40%); } #modal-content p { font-size: 0.8rem; } .pricing-table .block-heading h2 { font-size: 1.5rem; } .pricing-table .block-heading p { font-size: 1rem; } .pricing-table .item, .pricing-table .itemc { padding: 15px; } .pricing-table .price h4, .pricing-table .pricec h4 { font-size: 2rem; } .pricing-table .features h4, .pricing-table .features h4.competitor { font-size: 1rem; } } @media (max-width: 480px) { .header-section { height: 30vh; } .header-section h3 { font-size: 1.2rem; } .header-section h1 { font-size: 2rem; } #modal-form { width: 100%; padding: 0; } .pricing-table .block-heading h2 { font-size: 1.2rem; } .pricing-table .block-heading p { font-size: 0.9rem; } .pricing-table .price h4, .pricing-table .pricec h4 { font-size: 1.5rem; } .pricing-table .features h4, .pricing-table .features h4.competitor { font-size: 0.9rem; } }
/* Hamburger icon style */
.hamburger-icon {
    display: none;
    font-size: 30px;
    cursor: pointer;
    position: absolute;
    right: 20px; /* Adjust as needed */
    top: 15px; /* Aligns with the minimized form button */
}

/* Responsive nav menu */
.sitenav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

@media (max-width: 768px) {
    /* Hide the sitenav links and show the hamburger icon */
    .sitenav {
        display: none;
        flex-direction: column;
        background-color: rgba(51, 51, 51, 0.9); /* Add a background color for the dropdown */
        position: absolute;
        right: 0;
        top: 55px;
        width: 100%; /* Full width for mobile screens */

        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .sitenav li {
        text-align: left; /* Align text to the left */
        margin: -15px 0; /* Reduce the space between items */
         padding-left: 20px

    }

    .sitenav li a {
        color: white;
        font-size: 1.2rem; /* Responsive font size */
        text-decoration: none;
        display: block;
        padding: 10px 0;
    }

    .hamburger-icon {
        display: block;
    }
}

@media (max-width: 480px) {
    .sitenav li a {
        font-size: 1rem; /* Smaller font size for very small screens */
        padding: 8px 0; /* Slightly reduce padding for smaller screens */
    }
}

#logo {
    width: 300px;
    height: 100px;
    margin-top: -15px;
    margin-right: 45px;
    transition: width 0.3s ease, height 0.3s ease; /* Smooth transition for resizing */
}

@media (max-width: 1024px) {
    #logo {
        width: 200px;
        height: 67px; /* Maintain the aspect ratio */
    }
}

@media (max-width: 768px) {
    #logo {
        width: 150px;
        height: 50px; /* Maintain the aspect ratio */
    }
}

@media (max-width: 480px) {
    #logo {
        width: 120px;
        height: 40px; /* Maintain the aspect ratio */
    }
}


.tooltrack-logo {
    awidth: 100%; /* Let the image take up 100% of its container's width */
    max-width: 300px; /* Prevent the image from exceeding its original size */
    height: auto; /* Maintain aspect ratio */
}

@media screen and (max-width: 768px) {
    .tooltrack-logo {
        max-width: 100px; /* Smaller max-width for tablet devices */
        height: auto;
    }
}

@media screen and (max-width: 480px) {
    .tooltrack-logo {
        max-width: 50px; /* Smaller max-width for mobile devices */
        height: auto;
        padding-top:65px;
    }
}

.six-in-one{
max-width: 602px;
height: auto; /* Maintain aspect ratio */
}

@media screen and (max-width: 768px) {
.six-in-one{
max-width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 480px) {
.six-in-one{
        max-width: 100%; /* Smaller max-width for mobile devices */
        height: auto;
    }
}