/* HOMEPAGE */

/* Who Can Vote */

.who-can-vote {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 40px;
}

.wcv-img {
    order: 1;
}

.wcv-img img {
    max-width: 600px;
    width: 100%;
    border-radius: 4px;
}

.wcv-texts {
    order: 2;
    margin-left: 40px;
    max-width: 600px;
    width: 100%;
}

.wcvt h2 {
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    margin-bottom: 12px;
}

.wcvt p {
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 152.4%;
}

.wcvt a {
    color: #FF7A00;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

@media (max-width: 1200px) {
    .wcv-texts {
        margin-left: 32px;
        max-width: 500px;
        width: 100%;
    }
}

@media (max-width: 1080px) {
    .who-can-vote {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 54px 40px;
    }

    .wcv-img {
        order: 2;
    }    
    
    .wcv-img img {
        max-width: 600px;
    }
    
    .wcv-texts {
        order: 1;
        margin-left: 0px;
        max-width: 800px;
        width: 100%;
        margin-bottom: 40px;
    }
}

@media (max-width: 780px) {
    .who-can-vote {
        padding: 44px 24px;
    }

    .wcvt h2 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 6px;
    }

    .wcvt p {
        font-size: 14px;
    }

    .wcv-texts {
        margin-bottom: 24px;
    }
}



/* The Process */

.voting-process {
    background-color: #171619;
    color: #FFFFFF;
    padding: 48px 26px;
}

.home-vp {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.vp-process {
    display: flex;
    align-items: flex-start;
    margin: 0 14px;
}

.vp-process img {
    height: 48px;
    width: auto;
    margin-right: 14px;
}

.vpp h2 {
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    margin-bottom: 8px;
}

.vpp p {
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 152.4%;
}

.vp-cta {
    display: flex;
    justify-content: center;
}

.vp-cta a {
    cursor: pointer;
}

.vp-cta p {
    width: max-content;
    padding: 14px 32px;
    border-radius: 8px;
    border: 2px solid #FFFFFF;
    font-size: 15px;
    font-weight: 600;
}

.vp-cta p:hover {
    border: 2px solid #FFFFFF;
    color: #171619;
    background-color: #FFFFFF;
    transition: 1s;
}

@media (max-width: 1160px) {
    .home-vp {
        gap: 24px;
    }

    .vp-process {
        display: block;
        margin: 0 14px;
    }
    
    .vp-process img {
        margin-right: 0px;
    }
}

@media (max-width: 880px) {
    .home-vp {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .home-vp {
        gap: 28px;
    }
    
    .vp-process {
        display: flex;
        align-items: flex-start;
        margin: 0 14px;
    }

    .vp-process img {
        margin-right: 12px;
    }
}

@media (max-width: 780px) {
    .voting-process {
        padding: 44px 24px;
    }

    .vpp h2 {
        font-size: 20px;
        margin-bottom: 4px;
    }
    
    .vpp p {
        font-size: 13px;
        line-height: 140%;
    }

    .vp-process img {
        height: 32px;
        width: auto;
        margin-right: 8px;
    }

    .home-vp {
        gap: 16px;
    }

    .vp-process {
        display: flex;
        align-items: flex-start;
        margin: 0px;
    }

    .vp-cta p {
        width: max-content;
        padding: 11px 28px;
        border-radius: 8px;
        border: 2px solid #FFFFFF;
        font-size: 13.5px;
        font-weight: 600;
    }
}



/* Report A Problem */

.report-a-problem {
    padding: 40px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.rap-form {
    max-width: 800px;
}

.rapf-head {
    margin-bottom: 16px;
}

.rapf-head h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.rapf-head p {
    font-family: "Noto Sans";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 152.4%;
}

.rapf-inputs {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 0 14px;
}

.rapf-inputs input {
    height: 40px;
    border: 1px solid #000000;
    border-radius: 4px;
    margin-bottom: 12px;
}

.rapf-inputs input::placeholder {
    font-size: 14px;
    font-weight: 500;
    padding-left: 6px;
}

.rap-form textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #000000;
    border-radius: 4px;
    margin-bottom: 14px;
}

.rap-form textarea::placeholder {
    font-size: 14px;
    font-weight: 500;
    padding-left: 6px;
    padding-top: 4px;
}

.rapf-cta button {
    font-family: 'Syne', sans-serif;
    max-width: 800px;
    width: 100%;
    border: 1px solid #171619;
    border-radius: 4px;
    padding: 12px 20px;
    background-color: #171619;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
}

.rapf-cta button:hover {
    border: 1px solid #FF9900;
    background-color: #FF9900;
    color: #171619;
    transition: 1s;
}

@media (max-width: 780px) {
    .report-a-problem {
        padding: 40px 24px;
    }
    
    .rapf-head {
        margin-bottom: 12px;
    }
    
    .rapf-head h2 {
        font-size: 18px;
        margin-bottom: 4px;
    }
    
    .rapf-head p {
        font-size: 14px;
    }
    
    .rapf-inputs {
        grid-gap: 0 12px;
    }

    .rapf-inputs input {
        height: 40px;
        margin-bottom: 10px;
    }
    
    .rapf-inputs input::placeholder {
        font-size: 13px;
    }
    
    .rap-form textarea {
        height: 90px;
        margin-bottom: 10px;
    }
    
    .rap-form textarea::placeholder {
        font-size: 13px;
    }
    
    .rapf-cta button {
        padding: 12px 20px;
        font-size: 13.5px;
    }
}

@media (max-width: 580px) {
    .rapf-inputs {
        display: block;
    }

    .rapf-inputs input {
        display: block;
        width: 100%;
    }
}



/* Footer */

.main-footer {
    background-color: #171619;
    color: #FFFFFF;
}

.mfoot-top {
    padding: 40px;
    display: flex;
    justify-content: center;
}

.mft {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.company-details {
    max-width: 440px;
    margin-right: 88px;
}

.company-details img {
    max-height: 54px;
    height: 100%;
    margin-bottom: 8px;
}

.company-details p {
    font-size: 16px;
    font-weight: 400;
    width: 100%;
}

.company-contact {
    max-width: 440px;
    margin-right: 88px;
}

.company-contact h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.cc-type {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cc-type img {
    width: 24px;
    margin-right: 8px;
}

.cc-type p {
    font-size: 16px;
}

.company-links {
    max-width: 440px;
}

.company-links h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.clinks {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 8px 48px;
}

.clinks p {
    font-size: 16px;
}

.mfoot-bottom {
    padding: 24px 40px;
    display: flex;
    justify-content: center;
}

.mfb {
    max-width: 1360px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 1320px) {
    .company-details {
        margin-right: 40px;
    }

    .company-contact {
        margin-right: 40px;
    }
}

@media (max-width: 1188px) {
    .mft {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
    }

    .company-details {
        max-width: 440px;
        min-width: 440px;
        margin-right: 0px;
    }
    
    .company-contact {
        max-width: 440px;
        min-width: 333px;
        margin-right: 0px;
    }
    
    .company-links {
        margin-top: 28px;
        max-width: 440px;
        min-width: 296px;
    }
}

@media (max-width: 900px) {
    .mft {
        display: block;
    }

    .company-details {
        max-width: 440px;
        min-width: 0px;
    }
    
    .company-contact {
        margin-top: 28px;
        max-width: 440px;
        min-width: 0px;
    }
    
    .company-links {
        margin-top: 28px;
        max-width: 440px;
        min-width: 0px;
    }
}

@media (max-width: 780px) {
    .mfoot-top {
        padding: 36px 24px;
    }
    
    .company-details img {
        height: 32px;
        margin-bottom: 6px;
    }
    
    .company-details p {
        font-size: 14px;
    }
    
    .company-contact h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .cc-type {
        margin-bottom: 6px;
    }
    
    .cc-type img {
        width: 20px;
        margin-right: 6px;
    }
    
    .cc-type p {
        font-size: 14px;
    }
    
    .company-links h2 {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .clinks {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-gap: 6px 28px;
    }
    
    .clinks p {
        font-size: 14px;
    }

    .mfoot-bottom {
        padding: 16px 24px;
    }
}

@media (max-width: 640px) {
    .mfb {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}