@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    box-sizing: border-box;
}


.img-product{
    width: 33%;
    height:auto;
    position: relative;
    left: 13%;
}
.feature{
    position: relative;
    top: -250px;
    width: 25%;
    font-size: 30px;
    height: auto;
    left: 65%;
}
.list{
    position: relative;
    left:50%;
    top:-448px;
    width: 50%;
    height: 100%;
    border-style: solid;
    border-width: 1px;
    z-index: -85;
}
.list-item{
    
    position: relative;
    top: 150px;
    left: 1%;
    width: 40%;
    display: block;
    border-width: 1px;
    border-style: solid;

}
#tecnic-drawing{
    position: relative;
    top: 35rem;
}
.tecnic-drawing{
    width: 50%;
    height: auto;
    margin-left:25%;
    margin-right: 25%;
}

.footer{
    position: relative;
    top: 23rem;
    border-width: 1px;
    border-style: solid;
}

.img-tab{
    position: relative;
    top: 170px;
    width: 30%;
    height: auto;
    left: 12.5%;
}
.performance-graphic{
    width: 50%;
    height: auto;
    margin-left:27%;
    margin-right: 27%;
}
.hr{
    position: relative;
    top: -75px;
    width: 85%;
    left: 7.5%;
}
.performance-head{
    position: relative;
    width: 20%;
    top: 75px;
    left: 7.5%;
    border-left: 10px solid #086c94;
}
.drawing-tecnic{
    position: relative;
    top: 350px;
    width: 85%;
    left: 7.5%;
}
.task{
    position: relative;
    width: 20%;
    top: 420px;
    left: 7.5%;
    border-left: 10px solid #086c94;
}

.graphic-head{
    position: relative;
    width: 20%;
    top: 720px;
    left: 7.5%;
    border-left: 10px solid #086c94;
}
.graphic-img{
    position: relative;
    top: 130px;
    left: 23%;
    width: 40%;
    height: auto;
}
.task-img{
    position: relative;
    top:480px;
    left: 12.5%;
    width: 75%;
    height: auto;
}
@media all and (max-width: 969px){
    .img-tab{
        position: relative;
        top: 230px;
        width: 33%;
        height: auto;
        left: 12.5%;
    }
    .product-img{
        position: relative;
        top: 82px;
       
    }
    .feature{
        position: relative;
        top: -220px;
        width: 25%;
        font-size: 18px;
        height: auto;
        left: 65%;
    }
    .list{
        position: relative;
        left:50%;
        top:-316px;
        border-style: solid;
        border-width: 1px;
        z-index: 85;
    }
    .list-item{
        position: relative;
        top: 30%;
        left: 150px;
        font-size: 2.5vh;
        z-index: 15;
    }
    .img-tab{
        position: relative;
        top: 130px;
        height: auto;
    }
    .list-item li{
        font-size: 2.5vh;
    }
    .performance-head{
        position: relative;
        top: 50px;
        left: 7.5%;
        font-size: 22px;
    }
    .hr{
        position: relative;
        top: -85px;
        width: 85%;
        left: 7.5%;
    }
    .drawing-tecnic{
        position: relative;
        top: 350px;
        width: 85%;
        left: 7.5%;
    }
    .task{
        position: relative;
        top: 420px;
        left: 7.5%;
        font-size: 22px;
    }
    .task-img{
        position: relative;
        top:480px;
        height: auto;
    }
    
    
    .graphic-head{
        position: relative;
        top: 600px;
        left: 7.5%;
        border-left: 10px solid #086c94;
    }
    .graphic-img{
        position: relative;
        top: 90px;
        left: 20%;
        width: 33%;
        height: auto;
    }
    .footer{
        position: relative;
        top: 15rem;
    }
}
@media all and (max-width: 705px){
    .img-product{
        width: 60%;
        position: relative;
        left:18%;
    }
   .img-tab{
    position: relative;
    top: 240px;
   }
   .img-tab2{
        display: none;
   }
    
    .performance-head{
        position: relative;
        top: 185px;
        left: 7.5%;
        font-size: 18px;
    }
    .hr{
        position: relative;
        top: 100px;
        width: 85%;
        left: 7.5%;
    }
  
    .task{
        position: relative;
        top: 410px;
        left: 7.5%;
        font-size: 22px;
    }
    .feature{
       display: none;
    }
    .task-img{
        position: relative;
        top:460px;
        height: auto;
    }
    .drawing-tecnic{
        position: relative;
        top: 350px;
        width: 85%;
        left: 7.5%;
    }
    .graphic{
        position: relative;
        top: 570px;
        width: 85%;
        left: 7.5%;
    }
    .graphic-head{
        position: relative;
        top: 620px;
        left: 7.5%;
        border-left: 10px solid #086c94;
    }
    .graphic-img{
        position: relative;
        top: 210px;
        left: 20%;
        width: 35%;
        height: auto;
    }
    .footer{
        position: relative;
        top: 20rem;
    }
    
    
}
@media all and (max-width: 460px){
   
    .img-product{
        width: 60%;
        position: relative;
        left: 18%;
    }
    .performance-head{
        left: 7.5%;
        font-size: 13px;
    }
    .task{
        font-size: 13px;
    }
    .graphic-head{
        font-size: 13px;
    }
    .footer{
        position: relative;
        top: 20rem;
    }
    .graphic-img{
        position: relative;
        top: 230px;
    }
}