* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-image: url("../images/background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
}


/* NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;

    position: relative;
}

/* LOGO */
.logo img {
    height: 45px;
}


/* EXTRA SMALL DEVICES */
@media(max-width:500px) {
    .navbar {
        padding: 15px 20px;
    }

    .logo img {
        height: 40px;
    }
}

/* end navbar */







/* =========================
   WELCOME SECTION
========================= */
.welcome-section {
    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;
}

.welcome-container {
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* welcome image */
.welcome-text {
    width: 220px;
    max-width: 70%;
    margin-bottom: 50px; /* more space like image */
}

/* GROUP LOGIN + SIGNUP */
.auth-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* THIS controls spacing like your design */
    margin-bottom: 40px;
}

/* login image */
.login-img {
    width: 120px;
    cursor: pointer;
}

/* signup image */
.signup-img {
    width: 240px;
    cursor: pointer;
    transition: 0.3s ease;
}

.signup-img:hover {
    transform: scale(1.05);
}

/* fingerprint */
.fingerprint img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}


@media (max-width: 500px) {

    .welcome-text {
        width: 180px;
        margin-bottom: 40px;
    }

    .login-img {
        width: 100px;
    }

    .signup-img {
        width: 200px;
    }

    .fingerprint img {
        width: 75px;
        height: 75px;
    }
}