/* Base styles (Mobile-first: applies to all devices initially) */
.form-control .email-input {
    width: 100% !important;
    /* Full width on mobile */
    padding: 8px !important;
    margin: 10px 0 !important;
    box-sizing: border-box;
    /* Includes padding and border */
}

/* Media queries for various devices */

.introducing-text {
    width: 30%;
}


.header-logo {
    width: 80%;

}

.form-div {
    width: 100%;
}




/* iPhone 5/SE */
@media (min-width: 320px) {
    /* Adjust styles as needed */
}

/* iPhone 6/6s/7/8 */
@media (min-width: 375px) {

    /* Adjust styles as needed */
    .introducing-text {
        width: 25%;
        margin-bottom: 20%;
    }


    .header-logo {
        width: 80%;

    }
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    /* Adjust styles as needed */
    .form-control .email-input {
        width: 20% !important;
    }

    .introducing-text {
        width: 25%;
    }


    .header-logo {
        width: 80%;

    }
}



/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .email-input {
        width: 50%;
        /* Makes the email box smaller on medium devices and larger */
    }

    .introducing-text {
        width: 15%;
    }


    .header-logo {
        width: 60%;

    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .introducing-text {
        width: 15%;
    }


    .header-logo {
        width: 60%;

    }

    .form-div {
        width: 50%;
        display: block;
        justify-content: center;
        margin: 0 auto; /* Automatically adjust margin on both sides */

    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    /* Adjust styles as needed */

}