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

}

/* @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;
    }
} */

@media screen and (max-width: 1200px) {
    
* {
    margin: 0;
    padding: 0;
}


    header {
        width: 150%;
        margin-left: 15%;
        /* gap: 3rem; */
    }
    #desktop-nav {
        display: none;
    }
    #profile img{
        height: 350px;
        width: 350px;
        margin-left: 17%;
    }
    #hamburger-nav {
        position: relative;
        left: 10%;
        display: flex;
        gap: 2rem;
        z-index: 1;

        i {
            font-size: 30px;
        }
       
    }
    .section__text {
        position: relative;
        left: 10%;
        top: 17%;
    }
    #profile, .section-container {
        display: block;
        width: 100%;
        margin-left: 10%;
    }
    header {
        width: 100%;
    }
    

    #about {
        position: relative;
        left: 14%;
        font-size: 30px;
        height: fit-content;
        width: 100%;
        margin-left: 7%;
    }

    #experience {
        position: relative;
        top: 25%;
    }

    #exp-head {
        margin-left: 25%;
    }

    #experience-container {
        display: grid;
        justify-content: center;
        margin-left: 30%;
        margin-top: 10%;
    }

    #exp-1, #exp-2 {
        /* padding: 10%; */
        /* margin-right: 10%; */
        position: relative;
        right: 25%;
        width: 135%;
        height: 450px;

        li {
            padding: 3%;
        }

        h5 {
            color: aquamarine;
            margin-top: 4%;
            font-size: 15px;
        }
    }
    #skills {
        margin: 0%;
        width: 100%;
    }

    .skills-container {
        margin-right: -5%;
        width: 100%;
    overflow: hidden;
    padding: 10px 0;
    position: relative;
    left: 14%;

    }

    #skills-head {
        margin-left: 3%;
    }

    .skill-box {
        width: 100%;
        height: 100%;
    }
    /* PROJECTS */
    #projects {
        position: relative;
        bottom: 25%;
        width: 100%;
        margin-bottom: 0%;
        height: 119%;

        h6 {
            margin-left: 40%;
        }
    }

    #project-container {
        width: 120%;
        margin-left: 9%;
    }
   #box-1 {
    width: 100%;
    min-height: fit-content;
   }
   #box-2, #box-3, #box-4  {
        top: 7%;
        margin-top: -12%;
       width: 100%;
       min-height: fit-content;
   }
   #box-3 {
    top: 12%;
    
   }
   #box-4 {
    top: 25%;
   }

   

   /* CONTACT DETAILS */
    #contact-me {
        width: 140%;
        margin-right: 0%;
        background-image: radial-gradient(rgb(21, 59, 21), black);
        display: grid;


    }
    .contact-right {
        position: relative;
        right: 4%;
        width: fit-content;
        font-size: 1px;
    }
    button {
        width: fit-content;
    }

    .social-icon h3{
        color: rgb(85, 80, 80);
        padding-top: 6%;
        font-size: small;


    }
    footer {
        text-align: center;
        margin-top: 5%;
        position: relative;
        bottom: 9%;

    }

    footer p{
        position: relative;
        bottom: 49%;
        left: 18%;
    }
}