/* Pc */
@media (max-width: 1399.98px) {
    .header {
        padding: 10px 100px;
    }

    .heading-info,
    .contact-item,
    footer {
        padding: 50px 100px;
    }
}

footer .contact .justice,
footer .contact .pages,
footer .contact .justice2 {
    display: none;
}

footer .contact .map {
    width: 100%;
    height: 600px;
}

footer .contact .map img {
    height: 100%;
}

/* Pc Low */
@media (max-width: 1199.98px) {
    .header {
        padding: 10px 80px;
    }

    .heading-info,
    .contact-item,
    footer {
        padding: 50px 80px;
    }

    .heading-info .heading h1 {
        font-size: 5rem;
    }
}

/* Tablet */
@media (max-width: 991.98px) {
    .header {
        padding: 10px 60px;
    }

    .heading-info,
    .contact-item,
    footer {
        padding: 60px;
    }

    .header-inner .logo {
        display: none;
    }

    .toggle-menu,
    .close-btn {
        display: inline-block;
    }

    .toggle-menu i {
        font-size: 2.6rem;
    }

    .close-btn {
        position: fixed;
        top: 10px;
        left: -10%;
        z-index: 999;
        color: #fff;
        transition: left 0.3s;
    }

    .close-btn:hover,
    .toggle-menu:hover {
        cursor: pointer;
        color: #fc4011;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 997;
        width: 100%;
        height: 100%;
        background: #00000081;
        opacity: 0;
        visibility: hidden;
        transition-property: opacity visibility;
        transition-duration: 0.3s;
    }

    .header-inner .menu {
        position: fixed;
        top: 0;
        left: -101%;
        z-index: 998;
        display: block;
        width: 250px;
        height: 100%;
        background: #0e1412;
        color: #fff;
        padding: 20px 10px;
        transition: left 0.3s;
    }

    #toggle-btn:checked ~ nav .menu {
        left: 0;
    }

    #toggle-btn:checked ~ .close-btn {
        left: 210px;
    }

    #toggle-btn:checked ~ .overlay {
        opacity: 1;
        visibility: visible;
    }

    .header-inner .menu li {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        border-bottom: 1px solid #fff;
    }

    .header-inner .menu li:last-child > ul {
        background: inherit;
        color: #fff;
        box-shadow: none;
        padding-left: 20px;
        width: 100%;
    }

    .header-inner .menu li:last-child > ul li:last-child {
        margin-top: 0;
    }

    .heading-info {
        gap: 40px;
        margin-top: 40px;
    }

    .heading-info .heading h1 {
        font-size: 4rem;
    }

    .heading-info .image .wrapper-img {
        top: -75px;
        left: -45px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .header {
        padding: 10px 40px;
    }

    .heading-info,
    .contact-item,
    footer {
        padding: 40px;
    }

    .contact .wrapper-info h2 {
        font-size: 2.1rem;
    }

    .contact .wrapper-info p {
        font-size: 1rem;
    }

    .form-register .form-input {
        font-size: 1rem;
    }

    .contact-item .form-register .form-input label {
        width: 100%;
    }

    .contact-item .form-register .btn {
        text-align: center;
    }

    footer {
        background: #0e1412;
        color: #fff;
    }

    footer .contact .justice,
    footer .contact .pages,
    footer .contact .justice2 {
        display: flex;
    }

    footer .contact .map {
        height: auto;
    }

    footer .contact {
        flex-wrap: wrap;
    }

    footer .contact .justice {
        width: 100%;
    }

    .about-justice .justice-icon .wrapper-logo .logo a img:first-of-type {
        display: block;
    }
    .about-justice .justice-icon .wrapper-logo .logo a img:last-of-type {
        display: none;
    }

    .about-justice {
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        gap: 20px;
    }
}

/* Mobile Low */
@media (max-width: 575.98px) {
    .body {
        min-width: 360px;
    }

    .header {
        padding: 10px 20px;
    }

    .heading-info,
    .contact-item,
    footer {
        padding: 20px;
    }

    .header-inner .logo,
    .header-inner .contact {
        font-size: 1.6rem;
    }
}