* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: var(--verdana);
}

:root {
    --lucida: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    --verdana: Verdana, Geneva, Tahoma, sans-serif;
    --arial: Arial, Helvetica, sans-serif;
    /* colors */
    --light-gray: #f2f0f0;
    --gray: #e3e3e3;
    --dark-gray: #919191;
    --darker-gray: #545454;
    --logo-blue: #1D4ED8;
    --darker-blue: #1E40AF;
    --light-blue: #60A5FA;
    --even-lighter-blue: #BFDBFE;
    --lightest-blue: #DBEAFE;
    --red: #FF0000;
    --dark-orange: #ED0707;
    --light-orange: #f9c56c;
    --even-lighter-orange: #fcdbb8;
    --strange-yellow: #dbae2e;
    --green: #34D399;
    --light-green: #E6F8DD;
    --medium-green: #A0C99C;
    --dark-green: #059669;
}

body {
    background: #e3e3e3;
}

.container {
    width: 100%;
    max-width: 810px;
    margin: auto;
    box-shadow: 0 0 10px 0 #cccccc;
    background: #fff;
    /* display: none; */
}

img.icon {
    width: 14.39px;
    display: block;
}

.bold {
    font-weight: bold;
}

.link {
    color: var(--darker-blue);
}

.link:hover {
    color: var(--dark-orange);
    text-decoration: underline;
}
.red {
    color: var(--dark-orange);
}

/************************* START OF SUPPORT BOX *************************/
main .support-box {
    outline: 1px solid #003399;
    border: 8px solid var(--even-lighter-blue);
    padding: 5px 5px 15px 5px;
}
main .support-box p {
    font-family: var(--verdana);
    font-size: 12px;
    padding: 8px 0 0;
    font-weight: bold;
    text-align: center;
}
main .support-box a {
    font-family: var(--verdana);
    font-size: 10.8px;
    display: block;
    width: fit-content;
    margin: auto;
    margin-top: 10px;
}
main .support-box a:hover {
    color: var(--dark-orange);
    text-decoration: underline;
}
main .support-box img {
    width: 135px;
}
/************************* END OF SUPPORT BOX *************************/

main {
    padding: 6px 0;
}
main .left,
main .right {
    padding: 10px;
}

/************************* START OF NEW PEOPLE *************************/
.new-people {
    border: 1px solid var(--light-orange);
}
.new-people .top {
    background: var(--light-orange);
    padding: 4px 8px;
}
.new-people .top h4 {
    font-size: 11.52px;
}
.new-people .inner {
    display: flex;
    flex-wrap: wrap;
    /* overflow: auto; */
    padding: 4px 8px;
}
.new-people .inner .person {
    width: 80px;
    height: fit-content;
    margin: 5px 10px;
    margin-top: auto;
}
.new-people .inner .person p {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}
.new-people .inner .person .image {
    width: 80px;
    min-width: 80px;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center center;
    margin-top: 5px;
}
/************************* END OF NEW PEOPLE *************************/

/************************* START OF SPECIALS *************************/
.specials .heading {
    padding: 4px 8px;
    background: var(--even-lighter-blue);
    margin: 10px 0;
}
.specials .heading h4 {
    font-size: 11.52px;
}
.specials .inner {
    padding: 6px 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.specials .inner .item {
    display: flex;
    gap: 20px;
}
.specials .inner .item h4 {
    margin: 0 0 5px;   
}
.specials .inner .item p {
    font-size: 12px;
    margin: 5px 0 10px;
}
.specials .inner .image {
    width: 110px;
    min-width: 110px;
    height: 110px;
    min-height: 110px;
    background-size: cover;
    background-position: center center;
}
/************************* END OF SPECIALS *************************/

/************************* START OF LOGO WELCOME *************************/
.welcome {
    background: var(--green);
    padding: 5px;
    margin-bottom: 10px;
}
.welcome img {
    width: 137.5px;
    display: block;
    margin: 5px auto;
}
/************************* END OF LOGO WELCOME *************************/

/************************* START OF ACCOUNT LOGIN/SIGNUP *************************/
main .home .right .box {
    padding: 5px 5px 15px;
    border: 1px solid #003399;
    position: relative;
    margin-bottom: 10px;
}
main .home .right .box h4 {
    color: #003399;
    font-size: 12.8px;
    text-align: center;
}
.the-form {
}
main .home .right .box label,
main .home .right .box button {
    font-size: 12.8px;
}
main .home .right .box table {
    margin: 0 auto;
    width: 100%;
    margin-bottom: 5px;
}
main .home .right .box td.label {
    text-align: right;
}
main .home .right .box tr.email td.label,
main .home .right .box tr.email td.input {
    padding: 8px 1px 1px;
}
main .home .right .box tr.email td.input input,
main .home .right .box tr.password td.input input {
    width: 100%;
}
main .home .right .box tr.password td.label,
main .home .right .box tr.password td.input {
    padding: 1px 1px 8px;
}
main .home .right .box tr.remember td:last-child,
main .home .right .box tr.buttons td:last-child {
    padding: 1px 1px 8px;
}
main .home .right .box tr.remember td,
main .home .right .box tr.buttons td {   
}
main .home .right .box .login-btn {
    background: #fff;
    border: 1px solid;
    border-color: #b1b1b1 #1f1f1f #1f1f1f #b1b1b1;
    color: #4368b4;
    padding: 2px 5px;
    cursor: pointer;
}
main .home .right .box .signup-btn {
    background: var(--dark-orange);
    border: 1px solid;
    border-color: #ff8282 #960303 #960303 #ff8282;
    color: #fff;
    font-weight: bold;
    padding: 2px 5px;
    cursor: pointer;
}
main .home .right .box .forgot {
    font-size: 12.8px;
    font-weight: bold;
    position: absolute;
    right: 5px;
    bottom: 5px;
}
/************************* END OF ACCOUNT LOGIN/SIGNUP *************************/

/************************* START OF VALUE INFO *************************/
.value-info {
    width: 100%;
    margin-bottom: 10px;
}
.value-info p {
    width: fit-content;
    margin-lefT: auto;
    font-size: 12px;
}
.value-info p i {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.value-info p i span {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-bottom: 5px;
}
.value-info p i span:first-child {
    /* margin-left: 0; */
}
.value-info p img {
    display: block;
}
/************************* END OF VALUE INFO *************************/

/************************* START OF FOOTER *************************/
footer {
    width: 100%;
    max-width: 810px;
    margin: 10px auto;
    padding: 10px 5px;
}

footer p {
    font-size: 10.08px;
    text-align: center;
    padding: 10px 0 5px;
}

footer a {
    color: var(--darker-blue);
    font-size: 10.08px;
}

footer a:hover {
    color: var(--dark-orange);
    text-decoration: underline;
}
/************************* END OF FOOTER *************************/

@media (min-width: 480px) {
    main .home {
        display: flex;
    }
    main .home .left {
        width: 60%;
    }
    main .home .right {
        width: 40%;
    }
}