@media screen and (min-width: 2560px) {

    .about-inside {
        padding-left: 5rem;
        
    }

    #wrapper-inside {
        zoom: 150%;
    }

    #profile {
        zoom: 170%;
        padding-bottom: 40rem;
    }

    #desktop-nav {
        zoom: 150%;
    }
    #desktop-nav li {
        font-size: larger;
    }

    #experience {
        padding-bottom: 0rem;
        zoom: 110%;
    }
        
    

}

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

@media screen and (1920px <= width <= 2000px) {

    .logo{
         margin-right: 40rem;
    }
    
    .wave,
    .wave2 {
        visibility: visible;
        position: relative;
    }
}

@media screen and (width < 1500px) {
    .wave,
    .wave2 {
        visibility: hidden;
        position: absolute;
    }
}

@media screen and (height < 700px) 
{
    .wave,
    .wave2 {
        visibility: hidden;
        position: absolute;
    }

}


@media screen and (1800px <= width <= 1920px) {

    .logo{
         margin-right: 30rem;
    }

    .clouds-img{
        width: auto;

    }

}


@media screen and (1680px <= width <= 1800px) {
    

    .logo{
         margin-right: 20rem;
    }

    .clouds-img{
        width: auto;

    }
}

@media screen and (height >= 1200px) 
{
    .clouds-img{
        width: auto;

    }

}

@media screen and (1111px <= width <= 1680px) 
{
    .clouds-img{
        width: auto;

    }

}

@media screen and (max-width: 1500px) 
{
    .logo
    {
        margin-right: 8rem;

    }

    .my-logo
    {
        visibility: hidden;

    }
}

@media screen and (max-width: 1400px) {
    #profile {
        height: 83vh;
        margin-bottom: 6rem;
    }

    .about-containers {
        flex-wrap: wrap;
    }

    #back-button, 
    #next-button,
    #back-button2,
    #next-button2 {
    width: 50px;
    margin: 0rem;
    cursor: pointer;
    visibility: hidden;
    }

    .arrow {
        margin-right: 0.8rem;
    }

}

@media screen and (max-width: 1340px) {
    .logo
    {
        margin-right: 6rem;

    }

}
@media screen and (max-width: 1297px) {
    .logo
    {
        margin-right: 5rem;

    }
}
    



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

   
    @media screen and (max-height: 800px) {
        
    }
    

    .logo
    {
        margin-right: 4rem;

    }
}

@media screen and (max-width: 1260px) {
    .logo
    {
        font-size: 1.7rem;

    }
}


@media screen and (max-width: 1200px) {
    #desktop-nav {
        display: none;
    }
    #hamburger-nav {
        display: flex;
    }

    #experience, .experience-details-container {
        margin-top: 2rem;
    }

    #profile, .section-container {
        display: block;
    }

    .arrow {
        display: none;
    }

    section, .section-container {
        height: fit-content;

    }

    section {
        margin: 0 5%;
    }

    .section__pic-container {
        width: 275px;
        height: 275px;
        margin: 0 auto 2rem;
    }

    .about-containers {
        margin-top: 0;
    }

    .project-wrap {
        display: grid;
        align-items: center;
        justify-content: center;
        margin-left: 0rem;
        margin-right: 0rem;
        overflow: hidden;
    }

    #back-button, 
    #next-button,
    #back-button2,
    #next-button2 {
    width: 50px;
    margin: 0rem;
    cursor: pointer;
    visibility: hidden;
    }

    .scroll-container,
    .scroll-container2 {
        overflow: hidden;
        padding: 1rem;
        margin-left: 0rem;
        margin-right: 0rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        
    }

    .article-container {
        margin-left: 0.05rem;
        margin-right: 0.05rem;
    }

    #myvideo {
        width: 450px;
    }

    #myVideo {
        width: 450px;
        
    }

    .video-container {
        margin: 1rem;
    }

    #projects {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-bottom: 0;
    }

    #contact {
        height: fit-content;
    }
    
    .clouds-img {
        transform: translateZ(-2px) scale(1.3);
    }

    .contact-info-upper-cotainer {
        flex-wrap: wrap;
    }

    .contact-info-container {
        margin: 0;
    }

    .contact-info-container p, .nav-links li a {
        font-size: 2rem;
    }

    .instagram-icon {
        padding-left: 3rem;
    }

    .logo {
        font-size: 2rem;
        margin-left: 1rem;
        margin-right: 0rem;
        color: white;
        text-wrap: nowrap;
    }

}

@media screen and (max-width: 600px) {
    #contact, footer {
        height:  40vh;
    }
    #profile {
        height: 83vh;
        margin-bottom: 0;
    }

    article {
        font-size: 1rem;
    }

    footer nav {
        height: fit-content;
        margin-bottom: 2rem;
    }

    .about-containers, .contact-info-upper-cotainer, .btn-container {
        flex-wrap: wrap;
    }

    .contact-info-container {
        margin: 0;
    }

    .contact-info-container p, .nav-links li a {
        font-size: 1rem;
    }

    .experience-sub-title {
        font-size: 1.25rem;
    }

    .logo {
        font-size: 1.5rem;
        margin-left: 1rem;
        color: white;
        text-wrap: nowrap;
    }

    .hamburger-icon {
        margin-right: 1.2rem;
    }

    .nav-links {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .section__pic-container {
        width: auto;
        height: 46vw;
        justify-content: center;
        padding-top: 1rem;
    }
    .section__text__p2 {
        font-size: 1.25rem;
    }
    .title {
        font-size: 2rem;
    }

    .text-container {
        text-align: justify;
        
        padding-top: 0.01rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        
    }

    .whatsapp-icon {
        margin-right: 0rem;
    }

    .instagram-icon {
        margin-left: 0rem;
    }

    .title-project {
        margin-bottom: 1rem;
    }

    #about {
        padding: 0;
        padding-left: 1vh;
        padding-right: 1vh;
        padding-top: 4vh;
        margin: 0;
        margin-left: 5%;
        margin-right: 5%;
        border-radius: 2rem;
    }

    #experience {
        padding: 0;
        padding-left: 1vh;
        padding-right: 1vh;
        padding-top: 4vh;
        margin: 0;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 2rem;
        border-radius: 2rem;
    }

    .xp-title {
        padding-bottom: 1rem;
    }

    #projects {
        padding: 0;
        padding-left: 1vh;
        padding-right: 1vh;
        padding-top: 4vh;
        margin: 0;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 2rem;
        border-radius: 2rem;
        margin-bottom: 2rem;
    }

    .section__text {
        margin-right: 3rem;
        margin-left: 3rem;
    }

    .clouds-img {
        transform: translateZ(-2px) scale(1.3);
    }

    .project-wrap {
        align-items: center;
        justify-content: center;
        margin-left: 0rem;
        margin-right: 0rem;
        overflow: scroll;
    }

    .project-img {
        width: 230px;
    }
    

    #back-button, 
    #next-button,
    #back-button2,
    #next-button2 {
    position: absolute;
    width: 100px;
    margin: 0rem;
    cursor: pointer;
    visibility: visible;
    opacity: 1;
    }

    #next-button {
        right: 0rem;
    }
    #next-button,
    #back-button {
        bottom: 60rem;
    }

    #next-button2 {
        right: 0rem;
    }
    #next-button2,
    #back-button2 {
        bottom: 3rem;
    }

    .scroll-container,
    .scroll-container2 {
        overflow: scroll;
        padding: 1rem;
        margin-left: 0rem;
        margin-right: 0rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        flex-wrap: nowrap;
        margin-bottom: 10rem;
    }

    .article-container {
        margin-left: 0.1rem;
        margin-right: 0.1rem;
    }

    #myvideo {
        width: 230px;
    }

    #myVideo {
        width: 230px;
        
    }

    .video-container {
        margin: 0rem;
    }

    .title-project {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    

    .experience-inside {
        padding: 0rem;
    }

    .about-inside {
        padding: 0rem;
    }

    .nav-links {
        margin-right: 0;
    }
}

@media screen and (max-width: 500px) {
    .logo {
        font-size: 2rem;
        margin-left: 1rem;
        color: white;
        text-wrap: wrap;
    }

}

@media screen and (max-width: 400px) {
    #next-button,
    #back-button {
        bottom: 56rem;
    }

    .logo {
        font-size: 1.5rem;
        margin-left: 1rem;
        color: white;
        text-wrap: wrap;
    }

}

@media screen and (max-width: 350px) {
    #contact, footer {
        height:  40vh;
    }
    #profile {
        height: 83vh;
        margin-bottom: 0;
    }

    article {
        font-size: 1rem;
    }

    footer nav {
        height: fit-content;
        margin-bottom: 2rem;
    }

    .about-containers, .contact-info-upper-cotainer, .btn-container {
        flex-wrap: wrap;
    }

    .contact-info-container {
        margin: 0;
    }

    .contact-info-container p, .nav-links li a {
        font-size: 1rem;
    }

    .experience-sub-title {
        font-size: 1.25rem;
    }

    .logo {
        font-size: 1.5rem;
        margin-left: 1rem;
        color: white;
        text-wrap: wrap;

    }


    .hamburger-icon {
        margin-right: 1.2rem;
    }

    .nav-links {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .section__pic-container {
        width: auto;
        height: 46vw;
        justify-content: center;
        padding-top: 1rem;
    }
    .section__text__p2 {
        font-size: 1.25rem;
    }
    .title {
        font-size: 2rem;
    }

    .text-container {
        text-align: justify;
        
        padding-top: 0.01rem;
        padding-bottom: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        
    }

    .whatsapp-icon {
        margin-right: 0rem;
        margin-left: 0.7rem;
    }

    .instagram-icon {
        margin-left: 0rem;
        margin-right: 0.7rem;
        padding-left: 1rem;
    }

    .title-project {
        margin-bottom: 1rem;
    }

    #about {
        padding: 0;
        padding-left: 1vh;
        padding-right: 1vh;
        padding-top: 4vh;
        margin: 0;
        margin-left: 5%;
        margin-right: 5%;
        border-radius: 2rem;
    }

    #experience {
        padding: 0;
        padding-left: 1vh;
        padding-right: 1vh;
        padding-top: 4vh;
        margin: 0;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 2rem;
        border-radius: 2rem;
    }

    .xp-title {
        padding-bottom: 1rem;
    }

    #projects {
        padding: 0;
        padding-left: 1vh;
        padding-right: 1vh;
        padding-top: 4vh;
        margin: 0;
        margin-left: 5%;
        margin-right: 5%;
        margin-top: 2rem;
        border-radius: 2rem;
        margin-bottom: 2rem;
    }

    .section__text {
        margin-right: 3rem;
        margin-left: 3rem;
    }

    .clouds-img {
        transform: translateZ(-2px) scale(1.3);
    }

    .project-wrap {
        align-items: center;
        justify-content: center;
        margin-left: 0rem;
        margin-right: 0rem;
        overflow: scroll;
    }

    #back-button, 
    #next-button,
    #back-button2,
    #next-button2 {
    position: absolute;
    width: 100px;
    margin: 0rem;
    cursor: pointer;
    visibility: visible;
    opacity: 1;
    }

    #next-button,
    #next-button2 {
        right: 0.5rem;
    }
    #next-button,
    #back-button {
        bottom: 56.5rem;
    }

    #next-button2,
    #back-button2 {
        bottom: 3rem;
    }

    .scroll-container,
    .scroll-container2 {
        overflow: scroll;
        padding: 1rem;
        margin-left: 0rem;
        margin-right: 0rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        flex-wrap: nowrap;
        margin-bottom: 10rem;
    }

    .article-container {
        margin-left: 0.1rem;
        margin-right: 0.1rem;
    }

    #myvideo {
        width: 200px;
    }

    #myVideo {
        width: 200px;
        
    }

    .video-container {
        margin: 1rem;
    }

    .contact-info-container p {
        font-size: 0.8rem;
    }

    .contact-info-upper-cotainer {
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-right: 1rem;
        margin-left: 1rem;
        gap: 0.5rem;
    }



    .experience-container {
        padding: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .scroll-container,
    .scroll-container2 {
        background-color: rgba(0, 0, 0, 0.205);
        margin-top: 1rem;
    }
}