.candidate-section {
    display: inline-block;
    position: absolute;
    padding: 70px 42px;
}

.candidate-section h1 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 35px;
    width: 38%;
    color: #000;
}

.candidate-section p {
    width: 40%;
    color: #000;
}

.d-button {
    width: 40%;
    margin-top: 40px;
}

@media only screen and (max-width: 344px) {
    .candidate-section {
        display: inline-block;
        position: absolute;
        padding: 5px 17px;
    }

    .candidate-section h1 {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 7px;
        width: 38%;
        color: #000;
    }

    .candidate-section p {
        width: 39%;
        color: #000;
        font-size: 5px;
        margin-top: 5px !important;
    }

    .candidate-section button {
        width: 10px !important;
        padding: 1px;
        min-width: 70px;
        font-size: 9px;
        line-height: 12px;
        margin-top: 1px !important;
    }

    .d-button {
        width: 40%;
        margin-top: 0px !important;
    }

    .head-title-hero {
        padding: 40px 0 !important;
    }

    .sub-head-hero {
        text-align: center !important;
        height: 4px !important;
        background-color: #c4c4c4 !important;
    }

    .sub-head-hero h1 {
        position: relative !important;
        display: inline-block !important;
        margin: -22px !important;
        background-color: #fff !important;
        padding: 0 35px !important;
    }
}

@media only screen and (min-width: 344px) and (max-width: 375px) {
    .candidate-section {
        display: inline-block;
        position: absolute;
        padding: 5px 17px;
    }

    .candidate-section h1 {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 7px;
        width: 38%;
        color: #000;
    }

    .candidate-section p {
        width: 39%;
        color: #000;
        font-size: 5px;
        margin-top: 5px !important;
    }

    .candidate-section button {
        width: 10px !important;
        padding: 1px;
        min-width: 70px;
        font-size: 9px;
        line-height: 12px;
        margin-top: 1px !important;
    }

    .d-button {
        width: 40%;
        margin-top: 0px !important;
    }

    .head-title-hero {
        padding: 40px 0 !important;
    }

    .sub-head-hero {
        text-align: center !important;
        height: 4px !important;
        background-color: #c4c4c4 !important;
    }

    .sub-head-hero h1 {
        position: relative !important;
        display: inline-block !important;
        margin: -22px !important;
        background-color: #fff !important;
        padding: 0 15px !important;
    }

    .sub-head-hero h5 {
        font-size: 15px;
    }
}

@media only screen and (min-width: 375px) and (max-width: 414px) {
    .candidate-section {
        display: inline-block;
        position: absolute;
        padding: 5px 5px;
    }

    .candidate-section h1 {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 7px;
        width: 38%;
        color: #000;
    }

    .candidate-section p {
        width: 38%;
        color: #000;
        font-size: 5px;
        margin-top: 5px !important;
    }

    .candidate-section button {
        width: 10px !important;
        padding: 1px;
        min-width: 70px;
        font-size: 9px;
        line-height: 12px;
        margin-top: 1px !important;
    }

    .d-button {
        width: 40%;
        margin-top: 0px !important;
    }

    .sub-head-hero h5 {
        font-size: 15px;
    }
}

@media only screen and (min-width: 414px) and (max-width: 430px) {
    .candidate-section {
        display: inline-block;
        position: absolute;
        padding: 5px 6px;
    }

    .candidate-section h1 {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 7px;
        width: 38%;
        color: #000;
    }

    .candidate-section p {
        width: 39%;
        color: #000;
        font-size: 5px;
        margin-top: 5px !important;
    }

    .candidate-section button {
        width: 10px !important;
        padding: 1px;
        min-width: 70px;
        font-size: 9px;
        line-height: 12px;
        margin-top: 1px !important;
    }

    .d-button {
        width: 40%;
        margin-top: 0px !important;
    }

    .sub-head-hero h5 {
        font-size: 15px;
    }
}

@media only screen and (min-width: 430px) and (max-width: 540px) {
    .candidate-section {
        display: inline-block;
        position: absolute;
        padding: 5px 6px;
    }

    .candidate-section h1 {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 8px;
        width: 38%;
        color: #000;
    }

    .candidate-section p {
        width: 38%;
        color: #000;
        font-size: 6px;
        margin-top: 5px !important;
    }

    .candidate-section button {
        width: 10px !important;
        padding: 1px;
        min-width: 70px;
        font-size: 9px;
        line-height: 12px;
        margin-top: 1px !important;
    }

    .d-button {
        width: 40%;
        margin-top: 0px !important;
    }

    .sub-head-hero h5 {
        font-size: 15px;
    }
}

@media only screen and (min-width: 540px) and (max-width: 768px) {
    .candidate-section {
        display: inline-block;
        position: absolute;
        padding: 5px 17px;
    }

    .candidate-section h1 {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 15px;
        width: 38%;
        color: #000;
    }

    .candidate-section p {
        width: 39%;
        color: #000;
        font-size: 10px;
        margin-top: 10px !important;
    }

    .candidate-section button {
        width: 10px !important;
        padding: 1px;
        min-width: 70px;
        font-size: 9px;
        line-height: 12px;
        margin-top: 1px !important;
    }

    .d-button {
        width: 40%;
        margin-top: 10px !important;
    }

    .sub-head-hero h5 {
        font-size: 15px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 820px) {
    .candidate-section {
        display: inline-block;
        position: absolute;
        padding: 5px 17px;
    }

    .candidate-section h1 {
        text-transform: uppercase;
        font-weight: 600;
        font-size: 14px;
        width: 38%;
        color: #000;
    }

    .candidate-section p {
        width: 38%;
        color: #000;
        font-size: 11px;
        margin-top: 10px !important;
    }

    .candidate-section button {
        width: 10px !important;
        padding: 1px;
        min-width: 70px;
        font-size: 9px;
        line-height: 12px;
        margin-top: 1px !important;
    }

    .d-button {
        width: 40%;
        margin-top: 10px !important;
    }

    .sub-head-hero h5 {
        font-size: 15px;
    }
}

.head-title-hero {
    padding: 60px 0;
}

.sub-head-hero {
    text-align: center;
    height: 4px;
    background-color: #c4c4c4;
}

.sub-head-hero h1 {
    position: relative;
    display: inline-block;
    margin: -22px;
    background-color: #fff;
    padding: 0 35px;
}