@media (max-width: 992px) {
}

@media only screen and (max-width: 992px) {
    .footer-logo img {
        width: 30%;
        filter: none !important;
        margin-bottom: 4rem;
    }

    .overlay {
        background-image: url("/frontend/img/mside.jpg");
        background-position: right center;
        background-repeat: no-repeat;
    }

    .login-col-1 {
        height: 30vh;
        margin-bottom: 5rem;
    }
}

@media only screen and (max-width: 700px) {
    :root {
        --black-color: #000000;
        --primary-color: #1d1d1d;
        --secondary-color: #1a1a1a;
        --tertiary-color: #a2a2a2;
        --light-color: #f5f5f5;
        --pFont: 11px;
        --lnFont: 4rem;
        --nFont: 2.5rem;
        --lFont: 15rem;
    }
    
    .lg-p {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.5rem;
    color: var(--light-color);
    line-height: 2rem;
    font-weight: 300;
}

    .footer-logo img {
        width: 30%;
        filter: none !important;
        margin-bottom: 4rem;
    }

    .dj-container {
        padding-left: 2rem;
        padding-right: 2rem;
        width: 100%;
    }

    .content--half {
        width: 100%;
    }

    .mySwiper {
        padding: 0rem 2rem;
    }

    .m-space {
        height: 7rem;
    }

    .s-space {
        height: 3rem;
    }

    .dark-btn {
        margin-bottom: 3rem;
    }

    h6 {
        margin-bottom: 2rem;
    }

    .xl-text {
        font-size: 6rem;
        line-height: 1em;
    }

    .footer-top-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .footer-bottom-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        align-items: center;
    }

    .gallery-controls {
        padding: 30px 0px;
    }

    .grey-line {
        margin: 0px 0;
    }

    .event-item {
        flex-direction: column;
        gap: 1rem;
    }

    .event-item span {
        width: 100%;
    }

    .cover {
        position: relative;
        width: 17%;
        height: 50vh;
        overflow: hidden;
        margin-bottom: 2rem;
    }

    .cover-inner img {
        padding-right: 0rem;
    }

    .action {
        text-align: start;
    }

    .action h6 {
        margin: 0px !important;
    }

    .event-date span {
        width: 60px !important;
    }

    .event-item {
        padding: 30px 0 30px 0;
    }

    .video-container {
        height: 70vh;
    }

    .input-row {
        margin-bottom: 3rem;
    }

    .dj-logo {
        font-size: var(--nFont);
        margin-bottom: 3rem;
    }

    .footer-top-col a {
        margin-bottom: 0.2rem;
    }

    .footer-bottom-col-head {
        font-size: 1.3rem;
    }

    .social-hover {
        display: block;
        overflow: hidden;
        height: 1.3rem;
        position: relative;
        z-index: 5;
    }

    .footer-bottom-col a i {
        font-size: 2rem;
    }

    .bi-youtube {
        font-size: 2.5rem !important;
    }
}

@media only screen and (max-width: 500px) {
    .error-text {
        font-size: 35vw;
    }

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .hero-content img {
        bottom: 5rem;
        position: absolute;
        width: 120%;
        height: auto;
        z-index: 1;
        filter: none;
    }

    .gallery-slide {
        position: relative;
        overflow: hidden;
        height: 55vh;
        width: 100%;
    }

    .nav-logo img {
        width: 40%;
        filter: none !important;
    }
}