.cta-button{
    display: none !important;
}
.login-contents{
    background-color: var(--secondary);
    border-radius: 8px;
    align-items: stretch;
}
.login-contents button{
    font-size: 1rem;
}
.login-form{
    background-color: var(--secondary);
    padding: 2% 6%;
    color: var(--primary);
    border-radius: 8px;
}
.login-form input{
    border: 1px solid var(--primary);
    background-color: var(--tertiary);
    color: var(--primary);
    padding: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    outline: none;
}
.login-form .fields{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 2% 0%;
}
.login-form .fields label{
    font-size: 0.8rem;
    font-weight: bold;
}
.login-form .links{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: smaller;
    margin: 2% 0%;
}
.login-form .signin{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1;
}
.login-form .signin button{
    padding: 0.8rem;
    background-color: var(--primary);
    color: var(--secondary);
    font-weight: bold;
}
.login-form .buttons{
    margin: 1% 0%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1;
}
.login-form .buttons button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background-color: var(--tertiary);
    border: none;
    margin: 1% 0%;
}
.line-with-text {
    position: relative;
    border-top: 1px solid #000; /* Creates the top border line */
    text-align: center; /* Ensures the text is centered */
    margin: 5% 0% 0% 0%; /* Adds some spacing around the divider */
  }
  
  .line-with-text span {
    background: var(--secondary); /* Match the background color of the container */
    padding: 0 10px; /* Adds some space around the text */
    position: relative; /* Ensures the span is positioned correctly */
    top: -12px; /* Adjusts the vertical position to sit on the line */
  }
  /*
    .line-with-text::before {
        content: '';  This is necessary for the pseudo element to work *
        width: 100%; /* Sets the width to 100% *
        position: absolute; /* Allows us to position the line *
        top: 50%; /* Places the line at the middle of the container *
        left: 0; /* Moves the line to the left *
        border-top: 1px solid #000; /* Creates the line *
    }
    */
    .login-img{
        background-image: linear-gradient(
            rgb(0, 100, 50, 0.614),
            rgba(0, 100, 50, 0.614)),
            url(../media/pexels-elvis-mkera-14909652-compressed.jpg)
        ;
        object-fit:fill;
        background-size: cover;
        border-radius: 8px;
        border: 1px solid var(--primary);
        text-align: left;
        margin: 0% 2% 1% 2%;
        color: var(--tertiary);
        height: 75vh;
        
    }
  

@media screen and (max-width: 768px){
    .login-contents{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 2%;
        align-items: stretch;
    }
    .login-img{
        display: none;
    }
    .login-form{
        width: 90%;
    }
}

/* Large Tablets Laptops*/
@media screen and (min-width: 769px) and (max-width: 1199px){
    .login-contents{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 60vh;
    }
    .login-img{
        display: none
    }
    .login-form{
        width: 90%;
    }
}

/*Desktops*/
@media screen and (min-width:1200px){
    .login-contents{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        place-content: center;

    }
    .login-form{
        width: 45%;
    }
    .login-img{
        margin: 0%;
        width: 45%;
    }
}