@media screen and (max-width:834px) {
    body {
        overflow-x: hidden;
    }
    .nav-links {
        z-index: 99;
        transform: translateX(-100%);
        margin: 0px;
        position: absolute;
        right: 0px;
        height: 93vh;
        top: 7vh;
        background-color: rgb(0, 0, 0, 0.7);
        text-shadow: 0 0 20px #fff;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transition: 0.7s all ease-in-out;
    }
    .nav-link {
        color: white;
        padding: 25px 768px 25px 768px;
    }
    .nav-link:hover {
        background: #141e30;
        color: #fff;
    }
    .nav-links li {
        opacity: 0;
    }
    .logo-container {
        position: absolute;
        right: 200px;
    }
    .search {
        display: none;
    }
    .burger {
        cursor: pointer;
        position: absolute;
        left: 50px;
        display: block;
    }
    nav {
        z-index: 5;
        flex-direction: row-reverse;
    }

    .backg{
        width: 100%;
        margin: 100px auto;
       
        flex-direction: column-reverse;
    }
    .circles{
        display: none;
    }

}

.nav-active {
    z-index: 5;
    width: 100%;
    transform: translateX(0%);
}

@media screen and (max-width:375px) {

}

@media screen and (max-width:1325px) {

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}