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

    .heading-info,
    .story-item,
    .gallery-item,
    .countdown-item,
    .video-item,
    .team-item,
    .awards,
    .cta-item,
    footer {
        padding: 50px 100px;
    }
}

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

    .heading-info,
    .story-item,
    .gallery-item,
    .countdown-item,
    .video-item,
    .team-item,
    .awards,
    .cta-item,
    footer {
        padding: 50px 80px;
    }

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

    .gallery-item .inner .gallery-image {
        height: 100%;
    }

    .video-item .inner .video {
        width: 100%;
        height: 100%;
    }

    .team-item .inner .info {
        width: 80%;
    }

    .awards .award-inner .award-info {
        width: 80%;
    }

    .awards .award-inner .award-image {
        justify-content: space-between;
    }
}

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

    .heading-info,
    .story-item,
    .gallery-item,
    .countdown-item,
    .video-item,
    .team-item,
    .awards,
    .cta-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;
        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;
    }

    .story-item .inner {
        flex-direction: column;
    }

    .team-item .inner .team-image {
        gap: 20px;
    }

    .team-item .inner .team-image .wrapper-img {
        width: calc(50% - 20px);
        margin-top: 40px;
        overflow: hidden;
    }

    .team-item .inner .team-image .wrapper-img .info-image {
        height: 300px;
    }

    .team-item .inner .team-image .wrapper-img .info-name {
        margin-top: 0;
    }

    .awards .award-inner .award-image {
        gap: 40px;
    }

    .awards .award-inner .award-image .image-wrapper {
        width: calc(50% - 20px);
        height: 300px;
    }

    .awards .award-inner .award-image img {
        width: 50%;
        height: auto;
        object-fit: cover;
        transition: transform 0.3s;
    }

    .awards .award-inner .award-image img {
        width: 50%;
    }

    .cta-item .wrapper-info {
        width: 80%;
    }
}

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

    .heading-info,
    .story-item,
    .gallery-item,
    .countdown-item,
    .video-item,
    .team-item,
    .awards,
    .cta-item,
    footer {
        padding: 40px;
    }

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

    .heading-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 40px;
        margin: 40px auto;
    }

    .heading-info .heading {
        width: 100%;
    }

    .heading-info .heading h1 {
        font-size: 4.2rem;
        width: 100%;
    }

    .heading-info .image {
        width: 80%;
        height: 360px;
        margin: 40px auto;
    }

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

    .countdown-item .wrapper {
        flex-direction: column;
        height: auto;
        padding: 40px 0;
    }

    .team-item .inner .info {
        width: 100%;
    }

    .team-item .inner .team-image .wrapper-img {
        width: calc(50% - 20px);
    }

    .team-item .inner .team-image .wrapper-img .info-image img {
        object-position: 50% 20%;
        height: 260px;
    }

    .team-item .inner {
        flex-wrap: wrap;
    }

    .awards .award-inner .award-info {
        width: 100%;
        height: 100%;
    }

    .awards .award-inner .award-image img:hover {
        transform: scale(110%);
    }

    .awards .award-inner .award-image .image-wrapper {
        width: calc(50% - 20px);
    }

    .awards .award-inner .award-image .image-wrapper img {
        width: 150px;
    }

    .cta-item .wrapper-info {
        width: 100%;
    }

    footer .contact {
        flex-wrap: wrap;
    }

    footer .contact .map {
        height: auto;
    }

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

    .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,
    .story-item,
    .gallery-item,
    .countdown-item,
    .video-item,
    .team-item,
    .awards,
    .cta-item,
    footer {
        padding: 20px;
    }

    .team-item .inner .team-image .wrapper-img,
    .awards .award-inner .award-image .image-wrapper {
        width: 100%;
    }
}