#container {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    position: relative;
}

#content {
    display: flex;
    align-items: center;
    flex-direction: column;

    height: calc(100vh - 7.75rem);

    overflow: auto;
}

section {
    display: flex;
    align-items: center;

    width: calc(80% + 1rem);
    max-width: 112.5rem;
}

#earn-money {
    justify-content: center;
    gap: 9.375rem;

    min-height: calc(100vh - 7.75rem);
}

#earn-money .register-content {
    display: flex;
    flex-direction: column;
    gap: 2.625rem;
}

#earn-money .register-content #titles {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

#earn-money .register-content #titles h1 {
    font-size: 2.25rem;
    line-height: 2.75rem;
}

#earn-money .register-content #titles h2 {
    color: #636e8f;
    font-size: 1.25rem;
    line-height: 1.875rem;
    font-weight: 400;
}

#earn-money .register-content form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

#earn-money .register-content form label {
    font-size: 1.125rem;
    color: #444b62;

    margin-bottom: 0.125rem;
}

#earn-money .register-content form #inputs-submit-wrapper #form-inputs-wrapper  #input-email-container {
    display: flex;
    flex-direction: column;

    position: relative;
}

#earn-money .register-content form #inputs-submit-wrapper #form-inputs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    width: 100%;
}

#earn-money .register-content form #inputs-submit-wrapper {
    display: flex;
    gap: 0.625rem;

    width: 100%;
}

#earn-money .register-content form label strong {
    font-weight: 600;
}

#submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 3rem;
    height: 3rem;

    border-radius: 50%;

    padding: 0.5rem;

    background: linear-gradient(180deg, #fbfdff 0%, #ddedfd 100%);

    box-shadow: 0px 2.32px 3.86px 0px rgba(39, 85, 220, 0.29);

    transition: opacity 0.3s ease;

    margin-top: -2.5px;
}

#submit-btn:not(:disabled):focus {
    outline: none;

    box-shadow:
            0 0 0 4px #ffffff,
            0 0 0 6px #4a73f3;
}

#submit-btn div {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    position: relative;
    z-index: 1;

    background-image: linear-gradient(90deg, #4d77f4 0%, #2c59df 100%);
}

#submit-btn div::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;

    background: #7595f6;

    opacity: 0;
    transition: opacity 0.3s ease;

    border-radius: 1.687rem;
}

#submit-btn:not(:disabled):hover div::before {
    opacity: 1;
}

#submit-btn:disabled div {
    background: #b1bcc7;
}

.store-links {
    display: flex;
    align-items: center;
    gap: 0.9375rem;
}

.store-links a {
    display: flex;

    border-radius: 0.375rem;

    transition: box-shadow 0.3s ease;
}

.store-links a:focus {
    outline: none;

    box-shadow:
            0 0 0 4px #ffffff,
            0 0 0 6px #4a73f3;
}

.store-links a svg rect {
    fill: #000000;
    transition: fill 0.3s ease;
}

.store-links a svg:hover rect {
    fill: #444b62;
}

#login-buttons-mobile {
    display: none;
    flex-direction: column;
    gap: 1rem;

    width: 100%;
}

#login-buttons-mobile #login-button-mobile {
    height: 3rem;
}

#login-buttons-mobile #login-button-mobile:hover {
    text-decoration: none;
}

.login-register-with-google-content .login-register-with-google-button {
    height: 3rem;

    border-radius: 6.25rem;
}

#survey-rewards-section {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    padding-right: 9.375rem;
}

#survey-rewards-section img {
    max-height: 500px;

    object-fit: contain;

    filter: drop-shadow(0px 4.71px 7.85px rgba(77, 55, 1, 0.29));
}

#bg-circle {
    width: 25rem;
    height: 25rem;

    background-color: #4d77f3;

    border-radius: 50%;

    position: absolute;
    z-index: -1;
}

#info-panel {
    display: flex;
    align-items: center;
    gap: 1.5rem;

    position: absolute;
    bottom: 0;

    background-color: white;

    border-radius: 6.25rem;

    padding: 1.3125rem 2rem;

    box-shadow: 0px 8px 15px 0px rgba(0, 57, 98, 0.11);
}

#info-panel .item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#info-panel .item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 2.5rem;
    height: 2.5rem;

    border-radius: 50%;

    background-color: #eff7ff;
}

#info-panel .item .label {
    color: #444b62;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
}

#how-it-works {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;

    min-height: calc(100vh - 7.75rem);
}

#how-it-works h2 {
    font-size: 1.5rem;
    line-height: 2rem;
}

#how-it-works h2 span {
    font-weight: 400;
}

#how-it-works .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;

    width: 100%;
}

#how-it-works .cards .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    padding: 2rem;

    border-radius: 1.25rem;

    background-color: white;

    box-shadow: 0px 8px 15px 0px rgba(0, 57, 98, 0.11);
}

.card .icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 7.31rem;
    height: 7.31rem;

    border-radius: 0.972rem;

    box-shadow: 7.13px 9.16px 14.25px 0px rgba(19, 53, 152, 0.2);
}

.card .icon.answer-survey {
    background: linear-gradient(180deg, #4d77f4 0%, #2755dc 100%);
}

.card .card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.card .indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 1.875rem;
    height: 1.875rem;

    background-color: #eff7ff;

    border: 2px solid #4d77f3;
    border-radius: 50%;

    color: #4d77f3;
    font-size: 1.125rem;
    line-height: 1.593rem;
    font-weight: 700;
}

.card h3 {
    color: #4d77f3;
    font-size: 1.25rem;
    line-height: 1.875rem;

    text-align: center;
}

.card p {
    line-height: 1.5rem;
    text-align: center;
}

.card .icon.accumulate-points {
    background: linear-gradient(150.54deg, #ffe558 3.2%, #ffc223 50.39%);
}

.card .card-title.accumulate-points .indicator {
    background-color: #fff8e9;

    border-color: #ffb618;

    color: #ffb618;
}

.card .card-title.accumulate-points h3 {
    color: #ffb618;
}

.card .icon.receive-money {
    background: linear-gradient(180deg, #f2729a 55.32%, #ec5d8a 100%);
}

.card .card-title.receive-money .indicator {
    background-color: #ffeef3;

    border-color: #ec5d8a;

    color: #ec5d8a;
}

.card .card-title.receive-money h3 {
    color: #ec5d8a;
}

#your-opinion {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 3.125rem;

    min-height: calc(100vh - 7.75rem);
}

#your-opinion .wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#your-opinion .wrapper h2 {
    color: #444b62;
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 700;
}

#your-opinion .wrapper p {
    line-height: 1.5rem;
}

#register-link {
    width: fit-content;
}

#register-link:hover {
    text-decoration: none;
}

#your-opinion #reviews-img {
    width: 100%;

    object-fit: contain;
}

#your-opinion #card-review {
    display: none;
}

#footer-mobile {
    display: none;
}

#app-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;

    width: 100%;
    height: 4rem;

    padding: 0 1.25rem;

    background-color: #f8f9fb;

    border-bottom: 0.5px solid #d2d5e0;

    position: fixed;
    top: 62px;
    left: 0;
    right: 0;

    z-index: 20;
}

#app-banner h2 {
    color: #444B62;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;

    text-transform: uppercase;
}

#app-banner h2 a {
    color: #252935;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 900;

    text-decoration: none;
}

#app-banner #close-app-banner {
    display: flex;

    padding: 0.3125rem;
}

.home-label {
    color: #444b62;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    width: fit-content;
}

@media (max-width: 75rem) {
    body {
        height: unset;
    }

    section {
        padding: 0 1.25rem;
        width: 100%;
    }

    #content {
        gap: 4rem;

        padding: 4rem 0;
    }

    #earn-money,
    #how-it-works,
    #your-opinion {
        min-height: unset;
    }

    #how-it-works .cards {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    #how-it-works .cards .card {
        max-width: 25rem;
    }
}

@media (max-width: 68.75rem) {
    #your-opinion {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    #your-opinion #reviews-img {
        display: none;
    }

    #your-opinion #card-review {
        display: flex;

        filter: drop-shadow(0px 7.65px 19.13px rgba(149, 180, 218, 0.24));
    }
}

@media (max-width: 62.5rem) {
    #earn-money {
        flex-direction: column;
        gap: 3rem;
    }

    #survey-rewards-section {
        padding: 0;
    }

    #survey-rewards-section #bg-circle,
    #survey-rewards-section #cellphone-img {
        display: none;
    }

    #survey-rewards-section #info-panel {
        position: unset;

        margin-top: 0.875rem;
    }

    #info-panel .item .icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    #info-panel .item .icon img {
        width: 1.25rem;
        height: 1.5rem;
    }

    #survey-rewards-section .item .label {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

@media (max-width: 56.25rem) {
    #container {
        position: relative;
    }

    #content {
        position: relative;

        height: unset;
        min-height: calc(100vh - 3.875rem);

        padding-top: 7.875rem;
        padding-bottom: 0;
    }

    #header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 9999;
    }

    #app-banner[data-state="open"] {
        display: flex;
    }

    #container:has(#app-banner[data-state="open"]) #content {
        padding-top: 11.875rem;
    }

    #footer-mobile {
        display: flex;

        width: 100%;
    }

    #footer {
        display: none;
    }
}

@media (max-width: 37.5rem) {
    #earn-money {
        padding: 0;
    }

    #earn-money .register-content {
        gap: 2rem;

        padding: 0 1.25rem;
    }

    #earn-money .register-content #titles h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    #earn-money .register-content #titles h2 {
        font-size: 1.25rem;
        line-height: 1.875rem;
    }

    #survey-rewards-section {
        display: none;
    }

    #earn-money .register-content #earn-money-store-links {
        display: none;
    }

    #login-buttons-mobile {
        display: flex;
    }

    #how-it-works h2 {
        display: flex;
        flex-direction: column;

        font-size: 2rem;
        line-height: 2.5rem;
        text-align: center;

        margin: 0 auto;
    }

    #how-it-works .cards .card .icon {
        width: 5.75rem;
        height: 5.75rem;
    }

    #how-it-works .cards .card .icon img {
        width: 2.625rem;
        height: 2.625rem;
    }

    #how-it-works .cards .card h3 {
        font-size: 1.25rem;
        line-height: 1.875rem;
    }

    #how-it-works .cards .card p {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    #your-opinion {
        gap: 2rem;
    }

    #your-opinion .store-links {
        justify-content: center;

        margin-bottom: 1rem;
    }

    #your-opinion .wrapper {
        gap: 1rem;
    }

    #your-opinion .wrapper h2 {
        font-size: 1.625rem;
        line-height: 2rem;
        font-weight: 600;
    }

    #your-opinion .wrapper #register-link {
        width: 100%;
        height: 3rem;

        margin-top: 1rem;
    }

    .primary-btn {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

@media (max-width: 31.25rem) {
    #earn-money .register-content form label {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 24.6875rem) {
    #terms-error {
        bottom: -1.85rem !important;
    }
}

@media (max-width: 23.43rem) {
    #your-opinion .store-links {
        flex-direction: column;

        margin-bottom: 1rem;
    }

    #your-opinion #card-review {
        width: 15.62rem;
    }
}