@font-face {
     font-family: head;
     src: url(../fonts/Yeager-Regular.otf);
   }
   
   @font-face {
     font-family: para;
     src: url(../fonts/paragraph.woff2);
   }
   

.machinediv{
     width: 100vw;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-top: 10vw;
}

.machinedivtop{
     display: flex;
     text-align: justify;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 60vw;
     text-align: center;
     text-transform: uppercase;
}

.machinedivtop h1{
     font-family: head;
     font-weight: 800;
}

.machinedivtop p{
     padding-top: 20px;
     font-size: 30px;
     color: red;
     font-weight: 900;
     font-family: head;
}

.machinedivbottom{
     width: 80vw;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 40px;
}

.machinedivbottom div{
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 50%;
     height: 70%;
}

.machinedivbottom>.imageproductdiv>img{
     width: 100%;
     height: 80%;
     border-radius: 10px;
}


.divdeals{
     width: 100vw;
     display: flex;
}

.divdealsinner{
     margin: auto;
     width: 80%;
     display: flex;
     flex-direction: row;
     gap: 50px;
     justify-content: space-between;
}

.dealsboxes{
     border: 2px solid black;
     border-radius: 30px;
     width: 50%;
     height: 400px;
     display: flex;
     flex-direction: column;
     background-color: white;
     justify-content: space-between;
     align-items: center;
}

.imgdiv{
     width: 80%;
     height: 250px;
     background: white;
}

.imgdiv img{
     width: 100%;
     height: 100%;
}

.textdiv{
     width: 100%;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
}

.textdiv p{
     text-align: center;
     font-family: para;
     font-size: 20px;
}



@media screen and (min-width: 300px) and (max-width:500px){
     .machinedivtop{
          width: 90vw;
          margin-top: 40vh;
     }
     .machinedivtop h1{
          font-size: 25px !important;
     }
     .machinedivtop p{
          font-size: 20px !important;
     }
     .machinedivbottom{
          width: 80vw !important;
          display: flex;
          flex-direction: column;
     }
     .imageproductdiv{
          width: 100% !important;
     }
     .imageproductdiv img{
          width: 80% !important;
     }
     .dealsindex{
          margin-top: 50vh;
          font-size: 40px;
     }
     .manfacrepindex{
          font-size: 40px;
     }
     .divdeals{
          width:80vw;
          margin: auto;
          display: flex;
          justify-content: center;
          align-items: center;
     }
     .divdealsinner{
          width: 100%;
          margin: auto;
          display: flex;
          flex-direction: column;
     }
     .dealsboxes{
          width: 100%;
     }
     .dealsboxes .imgdiv img{
          width: 100%;
     }
}