@media (max-width: 600px){*{-webkit-tap-highlight-color: transparent;}
  
    .nav ul{
        display: none;
    }
    .nav .ham{
        margin-right:10%;
        display: block;
        font-size: 1.5rem;
        background-color: #121212;
    }
    .menu {
       
        display: none;
        flex-direction: column;
        position: absolute;
        top: 8vh;
        right: 0;
        width: 100%;
        background-color:black ;
     
        
      }  
      
      .menu li{ font-size: 1.6rem;font-weight: 600; 
        border-bottom: 1px solid grey;
         color:white;
         line-height: 97%;
         background-color: black;
      }
      .menu li a{
        font-size: 1.6rem;
      }
    .menu a:hover{
        border-bottom: 2px white solid;
    }
   
    .nav-links.open {
        transform: translateX(0);
      }
    .hero{
        height: auto;
        font-size: medium;
        flex-wrap: wrap;
        flex-direction: row;
    }
   .hero .left{
        height: auto;
        padding: 2%;
        flex: 1 1 100%;
    }
    .hero .right{
        flex: 1 1 100%;
    }
    .mid{
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    
    .box1 .details {
       
        flex-direction: column;
      }
    .box1{
        margin-top: 2%;
        width: 58vw;
        height: 60vh;

    }
    .box1 .photo{
        
        width: 53vw;
    }
    .photo img{
       
        width: 53vw;
        border-radius: 10px;
      }
      
    .box2{
        width:45vw ;
    }
    .box3{
        width: 45vw;
    }
      .box1 .details h3 {
        margin-left: -60%;
        margin-bottom: 22%; 
      }
    
      .box1 button {
        font-size: 0.6rem;
        width: 100%; 
        max-width: 100%; 
        margin-top: 45%;
        margin-right: -55%;
       
      }

    .design{
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       height: auto;
    }
    .leftd{
        padding: 0;
        height: auto;
        flex: 1 1 100%;
    }
    
    .leftd .coto h1{
        font-size: 1.7rem;
    }
    .leftd .coto p{
        font-size: 0.9rem;
    }
    .leftd button{
        margin-top: 12%;
        height: 6vh;
        width: 30vw;
    }
    .coto{
        width: 60vw;
    }
    
    .rightd{
        flex: 1 1 100%
    }
    .rightd img{ 
        width: 60vw;
    }

    .design2{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
    }
    .leftd2{
    
        height: auto;
        flex: 1 1 100%;
    }
    .leftd2 img{
        width: 80vw;
    }
    .rightd2 button{
        margin-top: 12%;
        height: 6vh;
        width: 40vw;
    }
    .rightd2{
        flex: 1 1 100%;
    }

    .design3{
        margin-top: -12vh;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        height: auto;
    }
    .leftd3 h1{
        
    }
    .leftd3 p{
        text-decoration: none;
        font-size: 1rem;
    }
    .leftd3{
    
        height: auto;
        flex: 1 1 100%;
    }
    .leftd3 button{
        margin-top: 12%;
        height: 6vh;
        width: 40vw;
    }
    .rightd3{
        flex: 1 1 100%;
    }
    .rightd3 img{
        width: 80vw;
    }

    .gem{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .gem .up .mid h1{
        font-size: 2.3rem;
    }
    .gem .up .mid p{
    
        font-size: 0.9rem;
    }
    .gem button{
        margin-left: 15%;
        margin-top: 15%;
        font-size: small;
        width: 25vw;
    }
    .down{
       gap: 7%;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .art{height: 25vh;
        margin-left: 3%;
        margin-right: 3%;
        margin-top: 5%;
        flex: 2 2 30%;}
        .art img{
            height: 21vh;
            width: 100%;
        }
    .lastd{
        margin-top: 15%;
        height: auto;
    }
    .lastd .up1 h1{ font-size: 2rem;
    }
    
    .down1{
        
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 20%;
    }
    .do1{
        margin-top: 10%;
        height: 30vh;
        flex: 1 1 80%;

    }.do1 img{
        width: 100%;
        height: 30vh;
        flex: 1 1 80%;
}
    .lab{
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10%;
    
    }
    .llab{
        height: 25vh;
        font-size: small;
        flex: 1 1 70%;
    }
    .rlab{
        height: 25vh;
        font-size: small;
        margin-top: 5%;
        flex: 1 1 70%;
    }
    .lab button{
        margin-top: 8%;
        width: 20vw;
    }

    .footer{ height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .f1{display: flex;
        height: auto;
      flex: 1 1 100%;
      width: 100vw;
     
    }
    .f2{
       
        display: flex;
        font-size: small;
        flex-direction: column;
       
       flex:2 2 50%;
       width:50vw;
      
    }
    .f3{display: flex;
        font-size: small;
        flex: 2 2 50%;
        width:50vw;
        margin-left: 0;
    }
    .f1,
  .f2,
  .f3 {
    padding: 5%; 
  }

  .f2,
  .f3 {
    flex-direction: column; 
  }

/*code/*/
  h1{
    line-height: none;
       }
        p br {
            display: none; 
          }
        p{
            font-size: medium;
        }
        p{
            line-height: 140%;
        }
        .hero .left h1{
            font-size: 4.5rem;
            margin-top: 7%;
            margin-bottom: 4%;
        }
        .hero .left p{
           
            font-size: 1.2rem;
            line-height: 140%;
        }
        .leftd .coto h1 br{
            display: none;
            
        }
        .leftd .coto h1 {
           line-height: 145%;
            
        }
        .leftd3 h1 br{ display: none;}   .leftd3  h1{font-size: 2rem;
            line-height: 145%;
             
         }
}