.elementor-483 .elementor-element.elementor-element-f153d55{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-b16f6f9 *//* General Reset and Body Styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    margin: 0;
 font-family: 'Poiret One', sans-serif; /* Apply Poiret One font */
    font-weight: 200; /* ExtraLight */
    color: white;
    height: 100vh; /* Ensure full viewport height */

background: linear-gradient(270deg, #f0eef0, #dbe5f0, #cdd8eb, #f0eef0);



background-size: cover; /* Ensure it covers the viewport */

    
    color: white;
    letter-spacing: 0.8px;
    overflow-x: hidden;
    transition: background 0.5s ease;
}

/* Container for the main box */
.container {
    background-color: #070707;
    padding: 12px;
    width: 250px;
    height: 510px;
    margin: 60px auto;
    border-radius: 37px;

}

/* Content area of the passcode screen */
.content {
    width: 100%;
    height: 100%;
    background-color: #0e0f1c;
    border-radius: 30px;
}

/* Title */
.title {
    text-align: center;
    font-size: 1rem;
    margin-top: 20px;
}

/* Header (the thin black bar at the top) */
.header {
    width: 120px;
    height: 16px;
    background-color: #000000;
    margin: auto;
    border-radius: 0 0 12px 12px;
}

/* Passcode Display area (text showing the entered digits) */
.passcode-display {
    font-size: 2rem;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    letter-spacing: 8px; /* Add spacing between digits */
}

/* Status Dots (indicators) */
.box-status {
    display: flex;
    width: 105px;
    margin: auto;
    justify-content: space-between;
    margin-top: 50px;
}

.status {
    background: #303147;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 1px solid #c5c5ff;
}

.status.set {
    background: #c5c5ff; /* This will show the filled dots */
}

/* Layout for buttons */
.box-button {
    width: 186px;
    margin: auto;
    margin-top: 50px;
}

.line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
}

.line:last-child {
    margin-bottom: 0;
}

/* Buttons (number buttons and special buttons like 'Clear' and 'Enter') */
.button {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
    transition: 0.1s;
    padding: 10px; /* Ensuring padding for button text */
}

.button svg {
    width: 18px;
    height: auto;
}

.button:active {
    background-color: #261748;
}

/* 'Clear' Button Styling */
.button.clear {
    font-size: 0.9rem; /* Adjust font size to fit text */
    padding: 10px; /* Ensure text fits */
}

/* 'Enter' Button Styling */
.button.submit {
    font-size: 0.9rem; /* Adjust font size to fit text */
    padding: 10px; /* Ensure text fits */
}

/* Button sizes */
.button {
    padding: 10px;
    font-size: 1.5rem; /* Adjust for proper fit */
}

/* Add a subtle shadow animation when a digit is entered */
.set {
    background: #c5c5ff;
    animation: set 1s;
}

/* Animation for when digits are entered */
@keyframes set {
    from {
        box-shadow: 0 0 0 5px #202133;
    }
    to {
        box-shadow: 0 0 0 8px transparent;
    }
}

/* Responsive styles for smaller screens */
@media only screen and (max-width: 900px) {
    .container {
        position: unset;
        margin: 100px auto;
    }
    body {
        height: inherit;
        overflow: auto;
    }
}

@media only screen and (max-height: 632px) {
    body {
      background-size: auto;
    }
}/* End custom CSS */