@media(max-width:1200px){
    nav{
        width: 200px;
        height: 100vh;
    }
    .new{
        width: 180px;
    }

    .final{
        z-index: 1;
        position: relative;
        display: inline;
        top: 21.8rem;
  
    }

    .final li{
        cursor: pointer;
    }

    .right{border: 2px solid #303139;
        position: relative;
        width:calc(100vw - 220px);
        height: 100vh;
        left: 12.5rem;
        justify-content: center;
        align-items: center;
    }

    .right h1{
        position: relative;
        bottom: 8rem;
    }

    .op{
        position: relative;
        bottom: 7.5rem;
    }

    .inp{
        position: relative;
        bottom: 22rem;  
    }

    .inp input{
        width: 760px;
        transform: translateX(1rem);      
    }

    .inp img{
        position: relative;
        transform: translateX(0.5rem);

    }

    .p-final{
        transform: translateY(-22.5rem);
    }


    
}

@media(max-width:560px){
    nav{
        width: 170px;
        height: 100vh;
    }

    .new{
        width: 150px;
    }

    .final{
        z-index: 1;
        position: relative;
        display: inline;
        top: 26rem;
  
    }

    .final li{
        cursor: pointer;
    }

    .right{border: 2px solid #303139;
        position: relative;
        width:calc(100vw - 180px);
        height: 100vh;
        left: 10.5rem;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        padding-top: 2rem;
        padding-left: 2rem;
        top:5rem;
    }

    .right h1{
        position: relative;
        bottom: 8rem;
    }

    .op{
        position: relative;
        bottom: 7.5rem;
        display: inline;
        text-align: center;
    }

    .example1, .example2, .example3, .cap1, .cap2, .cap3, .limi1, .limi2, .limi3{
        width: 200px;
        font-size: 10px;
        height: 40px;
        text-align: center;
        padding-bottom: 2rem;
        position: relative;
        bottom:1.5rem;
    }

    .cap{
        transform: translateY(-6em);
    }
    
    .limi{
        transform: translateY(-10rem);
    }


    .inp input{
        width: 227px;
        transform: translate(-0.3rem, 18rem);      
    }

    .inp img{
        position: relative;
        transform: translate(0.5rem,18rem);
        width: 15px;
    }

    .p-final{
        transform: translate(-0.5rem,-5rem);
    }
    
}