.violations-hero-section {
    background-color: #f2fbf8;
}

.violations-hero-section h1 {
    color: #62636c;
    font-size: 1.8rem;
}

.violations-hero-section p {
    color: #62636c;
    font-size: 1.2rem;
    max-width: 540px;
    margin-inline: auto;
}

.violations-content .description {
    color: #62636c;
    font-size: 1rem;
}

.violations-content .subtitle {
    color: #62636c;
    font-size: 1.2rem;
}

.contact-info .icon {
    font-size: 2rem;
    color: var(--mainColor);
}

.contact-info .card {
    border: 1px solid #f5f5f545;
    box-shadow: 1px 8px 40px rgba(0, 0, 0, 0.075);
    border-radius: 1rem;
    padding-block: 2rem !important;
}

.contact-info .card .lead {
    font-size: 1rem;
    color: #62636c;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

.contact-info .card:hover .lead {
    color: var(--mainColor);
}

.mail-img {
    position: absolute;
    bottom: -60%;
    inset-inline-end: 20%;
}

.mail-transparent-img {
    position: absolute;
    bottom: -60%;
    inset-inline-start: 20%;
}

@media screen and (max-width: 1400px) {
    .mail-img {
        position: absolute;
        bottom: -60%;
        inset-inline-end: 10%;
    }

    .mail-transparent-img {
        position: absolute;
        bottom: -60%;
        inset-inline-start: 10%;
    }
}

@media screen and (max-width: 1200px) {
    .mail-img {
        position: absolute;
        bottom: -60%;
        inset-inline-end: 5%;
    }

    .mail-transparent-img {
        position: absolute;
        bottom: -60%;
        inset-inline-start: 5%;
    }
}

@media screen and (max-width: 960px) {
    .mail-img {
        position: static;
        inset-inline-end: 5%;
    }

    .mail-transparent-img {
        position: static;
        inset-inline-start: 5%;
    }
}

@media screen and (max-width: 425px) {
    .mail-img {
        width: 30%
    }

    .mail-transparent-img {
        width: 30%
    }
}