:root {
    --syamBlue: #15acffc4;
    --titleBlue: #006dda;
    --textWhite: #ffffff;
    --sizeTextH1: 2rem;
    --sizeTextH2: 1.8rem;
    --sizeTextH3: 1.4rem;
    --sizeTextH4: 1.2rem;
    --sizeTextH5: 1rem;
    --sizeTextH6: .8rem;
}

.containerContact {
    width: 100%;
}

.contentContact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding: 1rem;
}

.titleContact {
    font-size: var(--sizeTextH2);
    width: 100%;
    position: relative;
}

.titleContact::after {
    content: '';
    position: absolute;
    height: .1rem;
    width: 100%;
    background: var(--syamBlue);
    bottom: 0;
    left: .3rem;
}

.contentBodyContact {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem;
}

.headBodyContact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titleBodyContact {
    font-size: var(--sizeTextH3);
}

.subTitleContact {
    font-size: var(--sizeTextH5);
    font-weight: 600;
}

.bodyContact {
    display: grid;
    gap: 1rem;

}

.cardBodyContact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    border: .5px solid #dfd7d7;
    border-radius: 1rem;
}

.cardBodyContact {
    cursor: pointer;
}

.textCardContact {
    text-align: center;
    font-weight: 300;
}

.accountCardContact {
    font-weight: 600;
}

/* Question */
.questionBodyContact {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1.5rem 1rem;
    gap: 1rem;
}

.leftQuestionContact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.titleQuestionContact {
    font-size: var(--sizeTextH5);
    font-weight: 600;
}

.subTitleQuestionContact {
    font-size: var(--sizeTextH3);
    font-weight: 900;
}

.textQuestionContact {
    text-align: center;
}

.rightQuestionContact {}

.formQuestionContact {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.questionContact {
    display: flex;
    flex-direction: column;
}

.inputQuestion {
    padding: 0.2rem 0.8rem;
    font-size: var(--sizeTextH6);
}

.btnQuestionContact {
    width: 100%;
    margin-top: 1rem;
    border: 1px solid #000;
    padding: .2rem;
    border-radius: .4rem;
    color: #000;
}

.btnQuestionContact:hover {
    background: var(--syamBlue);
    border: 1px solid #fff;
    color: #fff;
}

@media screen and (min-width: 600px) {
    .questionBodyContact {
        flex-direction: row;
        justify-content: space-between;
    }

    .leftQuestionContact {
        gap: 1rem;
        flex: 1;
    }

    .rightQuestionContact {
        flex: 1;
    }
}

@media screen and (min-width: 768px) {
    .bodyContact {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    body {
        zoom: 1.1;
    }

    .titleContact {
        padding: 0 2rem;
    }

    .titleContact::after {
        left: 2rem;
        width: 95%;
    }

    .bodyContact {
        grid-template-columns: repeat(4, 1fr);
    }
}