body, html {
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
}


.logo img {
    width: 100%;
    height: auto;
}

/* Logo Mobile */
@media screen and (max-width: 600px) {
    .logo img {
        width: 85%;
        height: auto;
    }
}


/* Banner Mobile */
@media screen and (max-width: 600px) {
    .hfcontainer {
        width: 100%;
        height: 125px; /* Set the height to 200px */
        background-image: url('../images/header.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        font-size: 150%;
        color: #FFFFFF;
        font-family: Roboto, sans-serif;
        font-weight: bolder;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* Banner Tablet */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .hfcontainer {
        width: 100%;
        height: 125px; /* Set the height to 200px */
        background-image: url('../images/header.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        font-size: 150%;
        color: #FFFFFF;
        font-family: Roboto, sans-serif;
        font-weight: bolder;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Banner Desktop */
@media screen and (min-width: 1025px) {
    .hfcontainer {
        width: 100%;
        height: 125px; /* Set the height to 200px */
        background-image: url('../images/header.jpg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-align: center;
        font-size: 225%;
        color: #FFFFFF;
        font-family: Roboto, sans-serif;
        font-weight: regular;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


.wcontainer {
    font-size: 160%;
    text-align: center;
    width: 100%;
    color: #333333;
    background-color: #EEEEEE;
    padding: 1%;
}


/* Welcome Mobile */
@media screen and (max-width: 600px) {
    .wcontainer {
        font-size: 130%;
        text-align: center;
        width: 100%;
        color: #333333;
        background-color: #EEEEEE;
        padding: 1%;
    }
}



.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px; /* You can adjust this value to control the header padding */
}



/* Progress Bar Mobile */
@media screen and (max-width: 600px) {
    .pb img {
        width: 85%;
        height: auto;
    }
}



/* Progress Bar Tablet */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .pb img {
        width: 44%;
        height: auto;
    }
}


/* Progress Bar Desktop */
@media screen and (min-width: 1025px) {
    .pb img {
        width: 33%;
        height: auto;
    }
}


.contact-number a {
    text-align: center;
    width: 100%;
    color: #333333;
    font-family: Roboto, sans-serif;
    font-weight: bolder;
    font-size: 130%;
}


.signup-instructions {
    font-size: 215%;
    text-align: center;
}

/* signup instructions Mobile */
@media screen and (max-width: 600px) {

    .signup-instructions {
        font-size: 120%;
        text-align: center;
    }
}




.centered-row {
    text-align: center;
}

.spacer-row {
    height: 35px;
}

.disclaimer {
    font-size: small;
    color: #333333;
    font-family: Roboto, sans-serif;
    background-color: #FFFFFF;
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
}

.subhead {
    font-size: 135%;
}

.ppalign {
    padding-left: 40px;
}

.ccalign {
    padding-left: 25px;
}



.footer {
    background-color: #333333;
    height: auto;
    text-align: center;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

    .footer .help {
        font-size: 20pt;
    }

    .footer .customer-service {
        font-size: 14pt;
    }

.footer-contact img {
    width: 160px;
    height: 45px;
}

/* Footer Tel Button */

.btn {
    background-color: #666666;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 110%;
    font-family: Roboto, sans-serif;
    font-weight: bolder;
}

    .btn:hover {
        background-color: #4e4e4e;
    }

    .btn i {
        margin-right: 5px;
    }

    .btn a {
        color: white;
    }

/* Firefox specific style for select elements */
@-moz-document url-prefix() {
    select {
        background-color: white;
        -moz-appearance: none !important;
        appearance: none !important;
    }
        /* Add padding and background image for the dropdown arrow */
        select::-ms-expand {
            display: none;
        }

    select {
        padding: 10px 30px 10px 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23C5CCD6' d='M2 3.5L4 0H0z'/%3E %3C/svg%3E"); background-repeat: no-repeat;
        background-position: right 0.6em top 50%;
        background-size: 0.65em auto;
    }
}