How can I make 2 logo images fully responsive? pls give me some guides in web dev im a newbie

Hi Please help I am new to developing websites and doesn’t know how to fix the problem
I cant seem to make the 2 logo images fully responsive and stop them from going behind each other and other content when trying in different screen resolution or size
the class is logo and logoo

I dont know what to do and i want the 2 logos to be fully responsive and align with content
this is what the site looks like when i try on different device but its fine on my pc
[this is what it looks like on other laptop][1]

HTML

Login

            <form action="#">
                <div class="input-field">
                    <input type="text" placeholder="Enter your email" required>
                    <i class="uil uil-envelope icon"></i>
                </div>
                <div class="input-field">
                    <input type="password" class="password" placeholder="Enter your password" required>
                    <i class="uil uil-lock icon"></i>
                    <i class="uil uil-eye-slash showHidePw"></i>
                </div>

                <div class="checkbox-text">
                    <div class="checkbox-content">
                        <input type="checkbox" id="logCheck">
                        <label for="logCheck" class="text">Remember me</label>
                    </div>
                    
                    <a href="#" class="text">Forgot password?</a>
                </div>
                <a href="Main.html">
                <div class="input-field button">
                    <input type="button" value="Login">
                </a>
                    
                </div>
            </form>

            <div class="login-signup">
                <span class="text">Don't have account yet?
                    <a href="#" class="text signup-link">Signup Now</a>
                </span>
            </div>
        </div>

        <!-- Registration Form -->
        <div class="form signup">
            <span class="title">Registration</span>

            <form action="#">
                <div class="input-field">
                    <input type="text" placeholder="Enter your username" required>
                    <i class="uil uil-user"></i>
                </div>
                <div class="input-field">
                    <input type="text" placeholder="Enter your email" required>
                    <i class="uil uil-envelope icon"></i>
                </div>
                <div class="input-field">
                    <input type="password" class="password" placeholder="Create a password" required>
                    <i class="uil uil-lock icon"></i>
                </div>
                <div class="input-field">
                    <input type="password" class="password" placeholder="Confirm a password" required>
                    <i class="uil uil-lock icon"></i>
                    <i class="uil uil-eye-slash showHidePw"></i>
                </div>

                <div class="checkbox-text">
                    <div class="checkbox-content">
                        <input type="checkbox" id="termCon">
                        <label for="termCon" class="text">I accepted all terms and conditions</label>
                    </div>
                </div>

                <div class="input-field button">
                    <input type="button" value="Signup">
                </div>
            </form>

            <div class="login-signup">
                <span class="text">Already have an account?
                    <a href="#" class="text login-link">Login Now</a>
                </span>
            </div>
        </div>
    </div>
</div>

<script src="script.js"></script>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif; }

body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #4070f4;
background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),url(brgy.png);
background-size: cover;
background-position: center;

} .logo{
max-width: auto;
max-height: 160px;
transform: translateY(-330px);
margin-left: -37%;
position: absolute;
} .logoo{ max-width: auto;
max-height: 200px;
transform: translateY(-330px);
margin-left: 34%;
position: absolute;

} @media screen and (max-width: 900px) {
.logo {
max-height: 120px; /* Adjust max-height as needed for smaller screens /
transform: translateY(-300px); / Adjust translateY as needed for smaller screens /
margin-left: -30%; / Adjust margin-left as needed for smaller screens */
margin-top: 5%;
}

.logoo {
    max-height: 120px; /* Adjust max-height as needed for smaller screens */
    transform: translateY(-300px); /* Adjust translateY as needed for smaller screens */
    margin-left: 25%; /* Adjust margin-left as needed for smaller screens */
    margin-top: 5%;
} }