*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
.mt{
margin-top: 57px;

}
body{
    background-color: #383838;
    color: white;
}

header{
    width: 100%;
   background-color: #565656;
    height: 68px;
}

.traypanel{
    width: 1440px;
    height: 68px;
    margin: 0 auto;
   
 
   
    justify-content: ;
    
}

.logo{
    width: 217px;
    height: 119px;
    background-color: white;
    border-radius: 0 0 10px 10px ;
    margin-right: 138px;
    float: left;
    

}
.logo img{
    display: block;
    margin: 19px auto;
   
}
.logo p{
    font-size: 20px;
    text-align: center;
    color: #030850;
}

.hamburger{
    display: none;
}
nav{
    
    float: left;
}

nav ul{
    display: flex;
    list-style: none;
    margin-top: 23px;
   
}
nav ul li{
    margin-right: 80px;
    font-size: 18px;
    cursor: pointer;
}
.first{
    float: right;
    width: 99px;
    height: 35px;
    background-color: red;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    margin-right: 138px;
    margin-top: 16px;
}
.intro{
   padding-left: 98px;
   position: relative;
}

.intro h1::first-line{
    font-size: 96px;
    color: #FF5722;
    font-weight: 800;
   
}
.intro h1{
    margin: 0;
}
.intro p{
  font-size: 24px;
  margin-top: 41px;
}

.intro span{
    font-size: 32px;
    color: #FFE249;
}


.intro img{
    position: absolute;
    z-index: -1;
    opacity: 0.2;

}
.qtrimmer img{
    display: block;
    margin: 0 auto;

}
.second{
    width: 279px;
    height: 82px;
    border: 3px solid white;
    border-radius: 20px;
   color: white;
   background-color: transparent;
   font-size: 36px;
   margin: 50px 0;
   transition: 0.5s ease;
}
.second:hover{
    background-color: #E20E0E;
    border: none;
    transition: 0.5s ease;
}


.underline h1{
    position: relative;
}
.underline h1::before{
    content: '';
    position: absolute;
    border-bottom: 2px solid red;
    width: 445px;
    bottom: -12px;
    left: 0;
   



}




footer{
    background-image:url(img/men\ 1.png);
    width:1440px;
    height: 447px;
    margin: 0 auto;
    position: relative;
}

footer::before{
    content: "";
    background-image: url(img/alpha\ 1.png);
    z-index: 0;
    position: absolute;
    width:1440px;
    height: 447px;
    left: 0;
    top: 0;
}



.second{
    background-color: ;
    border: 2px solid white;
    color: white;
}

.imgsize img{
    width: 690px;
    height: 430px;
    
   
}
.inter{
    position: relative;
}
.blade img{
    height: 176px;
    width: 177px;
    position: absolute;
    bottom: -68px;
    right: -81px;
}
.max{
    max-width: 1440px;
    margin-bottom: 184px;
}

.mycard{
    width: 453px;
    height: 398px;
    background-color: #181717;
    border: 1px solid #DFDFDF;
    border-radius: 10px;
    margin: 120px 0px;
}

.mycard img{
    position: relative;
    top: -131px;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    display: block;
    
}
h1{
    margin-bottom: 184px;
    font-size: 48px;
}
.info{
    text-align: center;
    position: relative;
    top: -110px;
    left: 0;
    color: white;
}

.info p {
    margin: 5px 0;
    padding: 0;
    font-size: 20px;
    color:white
}
.box{
    width: 217px;
    height: 217px;
    background-color: #292929;
    border-radius: 10px;
    margin: 32px 0;
}
.top{
    
    
    
}
.top h1{
    margin: 5px 0;
    text-align: center;
}
.top p{
    text-align: center;
    font-size: 24px;
    position: relative;
}

.top p::before{
    content: '';
    position: absolute;
    border-bottom: 2px solid red;
    width: 445px;
    bottom: -12px;
    left: 118px;

}
.top ul{
    padding-left: 118px;
    font-size: 24px;
   
}
.top ul li{
    list-style: none;
    margin: 55px 0;
}
.main{
   
}

.box img{
    margin-top: 44px;
    
}
div.main .box:nth-child(2){
    margin-left: 217px;
}

div.main .box:nth-child(2) img {
    margin-top: -45px;

    
}

.water{
    height:420px;
    width: 733px;
    background-color: rgb(40, 39, 40);
  
    margin: 0 auto;
    padding-top: 57px;
    border-radius: 100px 100px 0 100px;
    border: 3px solid #a60606;
    position: relative;
    background-image: url(img/Trimmer-submerged-Black.png);
    
    background-position: center;
    background-repeat: no-repeat;
   
    
}

.water h1{
    font-size: 36px;
    text-align: center;
    margin: 0;

}
.water p{
    padding: 0 135px;
    font-size: 24px;
    color: white;
    margin: 23px 0;
}
.water img{
    position: absolute;
    right: -125px;
    top: 14px;
}

.tab{
    height: 98px;
    width: 98px;
    background-color: #E20E0E;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    border-radius: 10px;
    cursor: pointer;
}
.holder{
    display:flex;
    width: 238px;
    position: relative;
    top:-35px;
  right: 0;
  float: right;
}

.box2{
    
    display: flex;
}

.box2 ul{
    
    display: flex;
    margin: 0 0;
}
.box2 ul li{
    list-style: none;
    margin: 0 -13px;
}
.box2 ul li:nth-child(2){
    margin-top: 142px;
    z-index: -1;

}
.icontray{
    background-color: #060606;
  z-index: 1;
    width: 454px;
    height: 56px;
    bottom: 11px;
    left: 473px;
    
    position: absolute;
    border-radius: 10px;
    
}
.icontray ul{
    display: flex;
    cursor: pointer;
    margin: 7px 32px ;
   
}

.icontray ul li{
    list-style: none;
    margin-right: 40px;
    color: rgb(255, 255, 255);
    
    
}





/* rsponsive for mobile */


@media only screen and (max-width: 576px){
    


    nav{
    
        display: none;
    }

    .traypanel{
        width: 100%;}



        .first{
            display: none;
        }
   

        .intro h1{
            margin: 0;
            font-size: 24px;
        }
        .intro p{
          font-size: 18px;
          margin-top: 41px;
        }
        
        .intro span{
            font-size: 24px;
            color: #FFE249;
        }

        .intro h1::first-line{
            font-size: 56px;}

            .intro img{
                opacity: 0.1;
                left: 11px;
                height: 430px;
            }


            .imgsize img{
                width:445px;
                height: 279px;
                display: block;
                margin: 0 auto;
                
               
            }

            .imgsize{
                width: 496px;
            }
            .blade img{
                height: 136px;
                width: 136px;
                position: absolute;
                bottom: -68px;
                right: 153px;
            }
          

            .box{
                width: 130px;
                height: 130px;
                margin-left: 20px;
            
            }
             .box img{
                width: 120px;
                height: 120px;
                margin-top: 6px;
             }

             div.main .box:nth-child(2){
                margin-left: 20px;
            }
            div.main .box:nth-child(2) img{
                margin-top: 0;;
            }


            .main{
                display: flex;
            }
  
            .top h1{
                margin: 5px 0;
                text-align: center;
            }
            .top p{
                text-align: center;
                font-size: 18px;
                position: relative;
            }
            
            .top p::before{
                content: '';
                position: absolute;
                border-bottom: 2px solid red;
                width: 300px;
                bottom: -12px;
                left: 118px;
            
            }
            .top ul{
                padding-left: 118px;
                font-size: 18px;
               
               
            }
            .top ul li{
                list-style: none;
                margin: 55px 0;
            }

            footer{
                background-image:url(img2/Rectangle\ 60.png);
                width:100%;
                height: 282px;
                margin: 0 auto;
                position: relative;
                
            }
            
            footer::before{
                content: "";
                background-image: url(img2/alpha\ 2.png);
                z-index: 0;
                position: absolute;
                width:100%;
                height: 282px;
                left: 0;
                top: 0;
               
            }


            .icontray{
                background-color: #060606;
              z-index: 1;
                width: 390px;
                height: 56px;
               bottom: 11px;
               left: 46px;
                position: absolute;
                border-radius: 10px;}

                .icontray img{
                   height:35px ;
                   width: 35px;
                }

                .tab{
                    height: 70px;
                    width: 70px;
                }
                .holder{
                    display:flex;
                    width: 238px;
                    position: relative;
                    top:-35px;
                  right: -60px;
                  float: right;
                }
                .box2{
                    width: 536px;
                    margin: 0 auto;
                }
      
                .box2 ul li{
                    list-style: none;
                   margin-right: 20px;
                }
                .box2 ul li img{
                    width: 134px;
                    height: 165px;
                }
                .box2 ul li:nth-child(2){
                    margin-top: 0;
                    
                
                }
                .pic{
                    display: none;
                }
                

                .water{
                    height:311px;
                    width: 447px;
                    background-color: rgb(40, 39, 40);
                    
                  
                    margin: 0 auto;
                    padding: 0 71px;
                   
                    border-radius: 100px 100px 0 100px;
                    border: 3px solid #a60606;
                    position: relative;
                    background-image: url(img/Trimmer-submerged-Black.png);
                    
                    background-position: center;
                    background-repeat: no-repeat;
                   
                    
                }
                
                .water h1{
                    font-size: 24px;
                    text-align: center;
                    margin: 0;
                
                }
                .water p{
                    
                    font-size: 16px;
                    color: white;
                    margin: 23px 0;
                    background-color: #a60606;
                    padding: 0 
                }
                .water img{
                    width: 208px;
                    height: 330px;
                    right: -71px;
                      top: 14px;

                }

                .hamburger{
                    float: right;
                    display: block;
                    width: 50px;
                    margin-top: 15px;
                    cursor: pointer;
                }

               



    
}