/* Style with Animate BG */
*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;  
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 10px;
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    color: white;
    border-radius: 5px;
}
td, th {
    border: none;
    padding: 20px;
}

h1 {
    text-align: center;
    font-size: 500%; /* Set the font size to 100% */
    animation: moveText 3s infinite; /* Apply the animation to the h1 element */
}


/* particleground demo */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ==================================================== */

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
    background-color: #343541;
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Lexend Deca', sans-serif;
    color: #fff;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
.container {
    position: relative;
}

.centered-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

.download-label {
    position: absolute;
    top: 30%;
    left: 2%;
    transform: translate(0, -50%);
    width: 22%; /* Set the width to 15% */
    padding: 50px;
    background-color: #343541;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.download-label label {
    display: block;
    text-align: top;
    font-weight: bold;
    font-size: 20px;
    color: white;
    vertical-align: left; /* Move text to the top */
    top: 1%;
}
.highlight {
    background-color: yellow;
    padding: 2px 4px;
    border-radius: 3px;
}
.blue-highlight {
    background-color: rgba(0, 0, 255, 0.4);
    padding: 5px 10px;
    border-radius: 10px;
}

.download-label {
    font-family: Arial, sans-serif;
}
.download-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.download-item label {
    font-size: 15px; /* Increase the font size here */
    margin-right: 10px;
}
.download-item a {
    font-size: 10px;
    text-decoration: none;
    color: inherit;
    position: relative;
    top: -30%; /* Move the link up by 5% */
}
.download-item a .highlight {
    font-weight: bold;
}
.ai-box-flow-pack {
    color: #00CFBD;
}
.ai-box-flow-custom {
    color: #3057E1;
}
.ai-software-tool {
    color: #FEC513;
}

.prepare-label {
    position: absolute;
    top: 62%;
    left: 2%;
    transform: translate(0, -50%);
    width: 22%; /* Set the width to 15% */
    height: 30%;
    padding: 50px;
    background-color: #343541;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.prepare-label label {
    display: block;
    font-size: 20px;
    color: white;
    position: relative; /* Use relative positioning */
    top: -20%; /* Adjust the value to move text further to the top */
    left: -20%; /* Adjust the value to move text further to the left */
}

.prepare-hardware {
    position: absolute;
    top: 94%;
    left: 2%;
    transform: translate(0, -50%);
    width: 22%; /* Set the width to 15% */
    height: 30%;
    padding: 50px;
    background-color: #343541;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.prepare-hardware label {
    display: block;
    font-size: 20px;
    color: rgb(255, 108, 4);
    position: relative; /* Use relative positioning */
    top: -20%; /* Adjust the value to move text further to the top */
    left: -20%; /* Adjust the value to move text further to the left */
}

.contact-us {
    position: absolute;
    top: 100%;
    left: 68%;
    transform: translate(0, -50%);
    width: 25%; /* Set the width to 15% */
    height: 15%;
    padding: 50px;
    background-color: #343541;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.contact-us label {
    display: block;
    font-size: 20px;
    color: rgb(255, 108, 4);
    position: relative; /* Use relative positioning */
    top: -150%; /* Adjust the value to move text further to the top */
    left: 0%; /* Adjust the value to move text further to the left */
    text-align: left;
}

iframe {
    width: 95%;
    height: 100%;
    margin: 1% 1%; /* 2% gap from top and left */
    position: relative; /* Use relative positioning */
    top: -20%; /* Adjust the value to move text further to the top */
}

.line {
    position: absolute;
    left: 1%;
    right: 1%;
    border-bottom: 1px solid white;
    width: 98%; /* 100% - (2% + 2%) */
    /* margin: 0 2%; 2% gap from left and right */
}
.license-label {
    position: absolute;
    top: 55%;
    left: 120%;
    transform: translate(0, -50%);
    width: 130%; /* Set the width to 15% */
    height: 70%;
    padding: 50px;
    background-color: #343541;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.license-label label {
    display: block;
    /* text-align: top; */
    /* font-weight: bold; */
    font-size: 20px;
    color: white;
    vertical-align: left; /* Move text to the top */
}

.input-with-arrow {
    position: relative;
    display: flex;
    align-items: center;
}

.arrow {
    position: absolute;
    top: 94%;
    left: 101%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid pink; /* Pink arrow */
    margin-right: 10px;
}
.horizontal-line {
    position: absolute;
    top: 95%;
    left: 103%;
    border-bottom: 6px solid pink;
    width: 82%; /* 100% - (2% + 2%) */
    /* margin: 0 2%; 2% gap from left and right */
}
.line_ver_pink {
    position: absolute;
    top: 87%; /* Adjust this value to align the vertical line */
    left: 183.6%; /* Set the left position */
    border-left: 6px solid pink; /* Pink vertical line */
    height: 8%; /* Fill the height of the container */
}

#particles {
    top: 20%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#mainpage {
    position: absolute;
    left: 0;
    top: 0%;
    padding: 0 10px;
    width: 100%;
    text-align: center;
}

/* ==================================================== */


@keyframes moveText {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

form {
    text-align: center;
}

#login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

label {
    margin-bottom: 10px;
}

input[type="text"] {
    background-color: #40414F;
    width: 100%;
    height: 40px;
    padding: 5px;
    margin-bottom: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 35px;
    color: pink;
    text-align: center;
    margin-top: 140%;
    position: relative;
    animation: cursorBlink 1s infinite; /* Add blinking cursor animation */
}
@keyframes cursorBlink {
    0%, 100% {
        border-color: pink;
    }
    50% {
        border-color: transparent;
    }
}

button {
    background-color: #00CFBD;
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 200%;
    font-weight: bold;
}
button:hover {
    background-color: #008F7A; /* Change background color on hover */
}

.prepare-label img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}

.license-label img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}

.prepare-hardware img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}

.image-container {
    position: relative;
    display: inline-block;
    text-align: right;
    top: -25%;
}

.overlay-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Add your existing CSS rules here */
/* Add hover styles */

.download-label:hover,
.prepare-label:hover,
.prepare-hardware:hover {
    border: 2px solid #02fee9; /* Change border width to 2px when hovered */
}

/* ================================================= */