/*
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
*/

.cta-button:hover {
    background-color: #9ACD32; 
    transform: scale(1.05);
}

#h2_login {
    margin-top: -10px;
    color: #333; 

 }


form {
    background-color: #FFFFFF; 
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


.form-group {
    margin-bottom: 1em;
    text-align: left;
}


label {
    display: block;
    margin-bottom: 0.5em;
    color: #333; 
}


input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}


button.cta-button {
    width: 100%;
    padding: 0.5em;
    background-color: #B0E57C; 
    color: #333; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}


button.cta-button:hover {
    background-color: #9ACD32; 
    transform: scale(1.05);
}


p {
    text-align: center;
    margin-top: 1em;
}

/*added changed//////////*/
#forgot-password-link {
    text-align: left;
}
/*added changed//////////*/

#login-message {
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 5px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
#login-message,
#error {
    display: none; /* Fully hides the element initially */
    opacity: 0; /* Set initial opacity to 0 */
    transition: opacity 0.150s ease-in-out; /* Smooth transition for opacity */
}

#login-message.show,
#error.show {
    display: block; /* Show the element */
    opacity: 1; /* Fade in the element */
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 5px;
}


#login-message {
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 5px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error {
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 5px;
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb; /* Red border */
}
main {
    box-shadow: 0 8px 24px rgba(78, 164, 218, 0.99) !important; /* Subtle but deep shadow for elevation */
}

button.cta-button {
    font-size: 15px;
    font-weight: 600; /* Slightly bolder text */
}

/*11111111111111111*/
.is-computer #logo-container-wrapper {
    display: none;
}

.is-computer #logo2-smartphone {
    display: none;
}

.is-computer #logo-container-a {
    display: none;
}

.is-smartphone #logo-container-a {
    display: inline-block; /* or block */
    text-decoration: none;
}

.is-smartphone #logo2-smartphone {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto; /* Centers the image inside its container */
}
/*11111111111111111*/

/*///////////////////////////////////////////// Media  queries starting /////////////////////////////////////////////*/


/*points for future*/
/*actual :  used for media queries (chrome and checked from whatismyip.com)     */


/*           Smartphone    device # = (1)    tested on = 319px    (max-width:	320	px) { }    starting              */

@media only screen and (max-width: 320px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
        height: 116%; /* Ensure full height usage */
        /*background-color: red;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 145.5px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (1)    tested on = 319px    (max-width:	320	px) { }    ending              */


/*           Smartphone    device # = (2)    tested on = 335px    (min-width: 321px) and (max-width: 350px) { }   starting        */

@media only screen and (min-width: 321px) and (max-width: 350px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
        height: 116%; /* Ensure full height usage */
        /*background-color: blue;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 145.5px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (2)    tested on = 335px    (min-width: 321px) and (max-width: 350px) { }   ending        */


/*           Smartphone    device # = (3)    tested on = 375px    (min-width: 351px) and (max-width: 400px) { }   starting        */

@media only screen and (min-width: 351px) and (max-width: 400px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
        height: 116%; /* Ensure full height usage */
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 155px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (3)    tested on = 375px    (min-width: 351px) and (max-width: 400px) { }   ending        */


/*           Smartphone    device # = (4)    tested on = 425px    (min-width: 401px) and (max-width: 480px) { }   starting        */

@media only screen and (min-width: 401px) and (max-width: 450px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
        height: 116%; /* Ensure full height usage */
        /*background-color: #f8d7da;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 155px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (4)    tested on = 425px    (min-width: 401px) and (max-width: 480px) { }   ending        */


/*           Smartphone    device # = (5)    tested on = 475px    (min-width: 451px) and (max-width: 500px) { }   starting        */

@media only screen and (min-width: 451px) and (max-width: 500px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
       height: 116%; /* Ensure full height usage */
        /*background-color: orange;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 155px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (5)    tested on = 475px    (min-width: 451px) and (max-width: 500px) { }   ending        */


/*           Smartphone    device # = (6)    tested on = 525px    (min-width: 501px) and (max-width: 550px) { }   starting        */

@media only screen and (min-width: 501px) and (max-width: 550px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
        height: 116%; /* Ensure full height usage */
        /*background-color: aqua;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 155px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (6)    tested on = 525px    (min-width: 501px) and (max-width: 550px) { }   ending        */


/*           Smartphone    device # = (7)    tested on = 575px    (min-width: 551px) and (max-width: 600px) { }   starting        */

@media only screen and (min-width: 551px) and (max-width: 600px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
        height: 116%; /* Ensure full height usage */
        /*background-color: pink;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 155px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (7)    tested on = 575px    (min-width: 551px) and (max-width: 600px) { }   ending        */


/*           Smartphone    device # = (8)    tested on = 625px    (min-width: 601px) and (max-width: 650px) { }   starting        */

@media only screen and (min-width: 601px) and (max-width: 650px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
        height: 116%; /* Ensure full height usage */
        /*background-color: purple;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 155px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (8)    tested on = 625px    (min-width: 601px) and (max-width: 650px) { }   ending        */


/*           Smartphone    device # = (9)    tested on = 675px    (min-width: 651px) and (max-width: 700px) { }   starting        */

@media only screen and (min-width: 651px) and (max-width: 700px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* today Ensure full height usage */
        height: 116%; /* Ensure full height usage */
        /*background-color: green;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 155px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (9)    tested on = 675px    (min-width: 651px) and (max-width: 700px) { }   ending        */


/*           Smartphone    device # = (10)    tested on = 725px    (min-width: 701px) and (max-width: 750px) { }   starting        */

@media only screen and (min-width: 701px) and (max-width: 750px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: magenta;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (10)    tested on = 725px    (min-width: 701px) and (max-width: 750px) { }   ending        */


/*           Smartphone    device # = (11)    tested on = 775px    (min-width: 751px) and (max-width: 800px) { }   starting        */

@media only screen and (min-width: 751px) and (max-width: 800px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: orangered;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (11)    tested on = 775px    (min-width: 751px) and (max-width: 800px) { }   ending        */


/*           Smartphone    device # = (12)    tested on = 825px    (min-width: 801px) and (max-width: 850px) { }   starting        */

@media only screen and (min-width: 801px) and (max-width: 850px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: purple;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (12)    tested on = 825px    (min-width: 801px) and (max-width: 850px) { }   ending        */


/*           Smartphone    device # = (13)    tested on = 875px    (min-width: 851px) and (max-width: 900px) { }   starting        */

@media only screen and (min-width: 851px) and (max-width: 900px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: bisque;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (13)    tested on = 875px    (min-width: 851px) and (max-width: 900px) { }   ending        */


/*           Smartphone    device # = (14)    tested on = 925px    (min-width: 901px) and (max-width: 950px) { }   starting        */

@media only screen and (min-width: 901px) and (max-width: 950px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: blue;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (14)    tested on = 925px    (min-width: 901px) and (max-width: 950px) { }   ending        */


/*           Smartphone    device # = (15)    tested on = 975px    (min-width: 951px) and (max-width: 1000px) { }   starting        */

@media only screen and (min-width: 951px) and (max-width: 1000px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: orange;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (15)    tested on = 975px    (min-width: 951px) and (max-width: 1000px) { }   ending        */


/*           Smartphone    device # = (16)    tested on = 1025px    (min-width: 1001px) and (max-width: 1050px) { }   starting        */

@media only screen and (min-width: 1001px) and (max-width: 1050px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
/*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: aquamarine;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (16)    tested on = 1025px    (min-width: 1001px) and (max-width: 1050px) { }   ending        */


/*           Smartphone    device # = (17)    tested on = 1075px    (min-width: 1051px) and (max-width: 1100px) { }   starting        */

@media only screen and (min-width: 1051px) and (max-width: 1100px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: brown;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (17)    tested on = 1075px    (min-width: 1051px) and (max-width: 1100px) { }   ending        */


/*           Smartphone    device # = (18)    tested on = 1125px    (min-width: 1101px) and (max-width: 1150px) { }   starting        */

@media only screen and (min-width: 1101px) and (max-width: 1150px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: paleturquoise;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (18)    tested on = 1125px    (min-width: 1101px) and (max-width: 1150px) { }   ending        */


/*           Smartphone    device # = (19)    tested on = 1175px    (min-width: 1151px) and (max-width: 1200px) { }   starting        */

@media only screen and (min-width: 1151px) and (max-width: 1200px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: yellowgreen;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (19)    tested on = 1175px    (min-width: 1151px) and (max-width: 1200px) { }   ending        */


/*           Smartphone    device # = (20)    tested on = 1225px    (min-width: 1201px) and (max-width: 1250px) { }   starting        */

@media only screen and (min-width: 1201px) and (max-width: 1250px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: rgb(162, 74, 74);*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (20)    tested on = 1225px    (min-width: 1201px) and (max-width: 1250px) { }   ending        */


/*           Smartphone    device # = (21)    tested on = 1275px    (min-width: 1251px) and (max-width: 1300px) { }   starting        */

@media only screen and (min-width: 1251px) and (max-width: 1300px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: azure;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (21)    tested on = 1275px    (min-width: 1251px) and (max-width: 1300px) { }   ending        */


/*           Smartphone    device # = (22)    tested on = 1325px    (min-width: 1301px) and (max-width: 1350px) { }   starting        */

@media only screen and (min-width: 1301px) and (max-width: 1350px) {

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: peru;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }
    
}

/*           Smartphone    device # = (22)    tested on = 1325px    (min-width: 1301px) and (max-width: 1350px) { }   ending        */

/*           Smartphone    device # = (23)    (min-width: 1351px) { }   starting        */

@media only screen and (min-width: 1351px) {
    /* Your styles for screens wider than 1350px go here */

    html, body.is-smartphone {
        overflow-x: hidden; /* Prevent horizontal overflow */
        /*height: 110%;*/ /* Ensure full height usage */
/*height: 112%;*/ /* today Ensure full height usage */
height: 118%; /* Ensure full height usage */
        /*background-color: peru;*/
    }
    
    .is-smartphone main {
        padding: 1.5em; /* Adjust padding for better spacing */
       /*   background-color: #f9f9f9;*/
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 5000px; /* Set a maximum width */
        width: 90%; /* Use 90% of the available space */
        text-align: center;
        margin: auto 5%; /* Increased margin-top by 5px to move it down */
        margin-top: 170px;
        box-sizing: border-box; /* Ensure padding is included in the total width */
    }
    
    .is-smartphone h2#h2_login {
        font-size: 1.5em; /* Make headings slightly larger for better visibility */
    }
    
    .is-smartphone .form-group {
        margin-bottom: 1.5em; /* Increase space between form elements */
    }
    
    .is-smartphone button.cta-button, .is-smartphone .social-button {
        width: 100%; /* Ensure buttons take full width */
        padding: 0.7em; /* Increase button padding for easier tapping */
        
    }
    
    .is-smartphone input[type="email"],
    .is-smartphone input[type="password"] {
        padding: 0.8em; /* Increase padding for better usability */
    }

}

/*           Smartphone    device # = (23)    (min-width: 1351px) { }   ending        */

/* ///////////////////////////////////////////////////////
   Computer Media Queries for Laptop Resolutions (Final Ranges without Height)
//////////////////////////////////////////////////////// */

/*1) (800 * 600 --->  acutal = 800 * 465) */
@media only screen and (min-width: 1px) and (max-width: 800px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*2) (1024 * 768 --->  acutal = 1024 * 633) or also (1280 * 1024 --->  acutal = 1024 * 686) */
@media only screen and (min-width: 801px) and (max-width: 1024px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }
    
}


/*3) (1400 * 1050 --->  acutal = 1120 * 705) */
@media only screen and (min-width: 1025px) and (max-width: 1120px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*4) (1280 * 720 --->  acutal = 1280 * 585) and 
     (1280 * 768 --->  acutal = 1280 * 633) and
     (1280 * 800 --->  acutal = 1280 * 665) and
     (1280 * 1024 --->  acutal = 1024 * 686) */
@media only screen and (min-width: 1121px) and (max-width: 1280px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*5) (1680 * 1050 --->  acutal = 1344 * 705) */
@media only screen and (min-width: 1281px) and (max-width: 1344px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*6) (1360 * 768 --->  acutal = 1360 * 633) */
@media only screen and (min-width: 1345px) and (max-width: 1360px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*7) (1366 * 768 --->  acutal = 1366 * 633) */
@media only screen and (min-width: 1361px) and (max-width: 1366px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*8) (1440 * 900 --->  acutal = 1440 * 765) */
@media only screen and (min-width: 1367px) and (max-width: 1440px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*9) (1920 * 1080 --->  acutal = 1536 * 730) */
@media only screen and (min-width: 1441px) and (max-width: 1536px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*10) (1600 * 900 --->  acutal = 1600 * 765) */
@media only screen and (min-width: 1537px) and (max-width: 1600px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}


/*11) (extra 1601 --->  acutal = 1601) */
@media only screen and (min-width: 1601px) {

    .is-computer main {
        padding: 2em;
        background-color: #f9f9f9;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 500px; /* Increased by 100px from 400px */
        width: 100%;
        text-align: center;
        margin: 0 auto 18em auto; /* Center horizontally */
        margin-top: 2%; /* Changed from 10% to 8% to move it up */
    }

}