html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Lato', sans-serif;
    padding: 0; 
    margin: 0;

}

nav{
    background-color: black;
    color: white;
    padding: 20px 50px;
}

.navTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.search{
    display: flex;
    align-items: center;
    background-color: red;
    padding: 10px 20px;
    border-radius: 10px;
}

.searchInput{
 border: none;
 background-color: transparent;

}

.searchInput::placeholder{
color: white; 
}

.limitedOffer{
    font-size: 20px;
    border-bottom: 2px solid green;
    cursor: pointer; 
}
.navBotton{

    display: flex;
    align-items: center;
    justify-content: center; 
    

}

.menuItem{
    margin-right: 50px;
    cursor: pointer;
    color: blue;
    font-weight: 500;
}

.slider{
    background: url(./img/background.jpg);
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    overflow:  hidden;
}

.sliderWrapper{
    display: flex;/*dispay the item in the wrapper vertical */
    width: 500vw;
    height: 40vw;
    transition: all 1s ease-in-out;
}
.sliderImg{
    width: 450px;/*the picture is too big*/
    z-index: 1;
}
.sliderItem{
width: 100vw; /*  this keeps the item in the width of the screen  */
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.sliderBg{
width: 425px;
height: 425px;
border-radius: 50%;
position: absolute;
background-color: aqua;

}

.sliderTitle{
position: absolute;
top: 10%;
right: 10%;
font-size: 40px;
color: white;
font-weight: 900;
text-align: center;
z-index: 1;

}
.sliderPrice{
    position: absolute;
    top: 10%;
    left: 10%;
    font-size: 60px;
    color: white;
    font-weight: 300;
    text-align: center;
    border: 1px solid gray;
    z-index: 1;
    
    }

    .buyButton{
        position: absolute;
        top: 50%;
        right: 10%;
        font-size: 30px;
        color: white;
        font-weight: 900;
        border: 1px solid gray;
        z-index: 1;
        cursor: pointer;
        background-color: black;
        
        }
        .buyButton:hover{
            background-color: white;
            color: black;
        }

        .sliderItem:nth-child(1) .sliderBg{
            background-color: aquamarine;
        }
        .sliderItem:nth-child(2) .sliderBg{
            background-color: rebeccapurple;
        }
        .sliderItem:nth-child(3) .sliderBg{
            background-color: teal;
        }
        .sliderItem:nth-child(4) .sliderBg{
            background-color: brown;
        }
        .sliderItem:nth-child(5) .sliderBg{
            background-color: forestgreen;
        }

        .sliderItem:nth-child(1) .sliderPrice{
            color: aquamarine;
        }
        .sliderItem:nth-child(2) .sliderPrice{
            color: rebeccapurple;
        }
        .sliderItem:nth-child(3) .sliderPrice{
            color: teal;
        }
        .sliderItem:nth-child(4) .sliderPrice{
            color: brown;
        }
        .sliderItem:nth-child(5) .sliderPrice{
            color: forestgreen;
        }

        .features{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 50px;
            
            
        }

        .feature{
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

        }

        .featureImg{
            width: 50px;
            height: 50px;
        }

        .featureTitle{
            font-size: 20px;
            font-weight: 600;
            margin: 20px;
        }

        .featureDesc{
            color: gray;
            width: 50%;
            height: 100px;
        }

        .product{
            height: 100vh;
            background-color: whitesmoke;
            position: relative;
            clip-path: polygon(0 16%, 100% 0, 100% 100%, 0% 100%);
            
        }
        .payment{
            width: 500px;
            height: 500px;
            background-color: white;
            position: absolute;
            top: 5%;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            padding: 10px 50px;
            display: none;
            flex-direction: column;
            -webkit-box-shadow: 7px 9px 8px 3px rgba(0,0,0,0.51); 
box-shadow: 7px 9px 8px 3px rgba(0,0,0,0.51);

        }
        

        .payTitle{
            font-size: 20px;
            color: lightgray;
        }

        label{
            font-size: 14px;
            font-weight: 300;
        }
        .payInput{
            padding: 10px;
            margin: 10px 0px;
            /*border: none;
            border-bottom: 1px solid gray;*/ 
        }
        .payInput::placeholder{
            color: lightgray;
        }

        .cardIcons{
            display: flex;
        }
        .cardIcon{
            margin-right: 10px;
        }
        
        .cardInfo{
            display: flex;
            justify-content: space-between;
        }
        .sm{
            width: 30%;
        }
        .payButton{
            position: absolute;
            height: 40px;
            bottom: -40px;
            width: 100%;
            left: 0;
            -webkit-box-shadow: 7px 9px 8px 3px rgba(0,0,0,0.51); 
            box-shadow: 7px 9px 8px 3px rgba(0,0,0,0.51);
            background-color: green;
            color: white;
            border: none;
            cursor: pointer;

        }
        .close{
            width: 20px;
            height: 20px;
            position: absolute;
            background-color: green;
            color: white;
            top: 3%;
            right: 3%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 2px;


        }
        .productImg{
           /* width: 300px;*/
           /* height: 300px;*/
           width: 50%;
           margin-top: 7%;   
            
        }

        .productDetails{
            position: absolute;
            top: 9%;
            right: 0;
            width: 40%;
            padding: 50px;

        }    
        .productTitle{
            font-size: 50px;
            font-weight: 900;
        }
        .productPrice{}
        .productDesc{
            font-style: 24px;
            color: gray;
        }

        .colors, .sizes{
            display: flex;
            margin-bottom: 20px;
        }
        .color{
            width: 32px;
            height: 32px;
            border-radius: 5px;
            background-color: black;
            margin-right: 10px;
            cursor: pointer;
        }
        .color:last-child{
            background-color: darkgray;
        }
        
        .size{
            padding: 5px 10px;
            border: 1px solid black;
            margin-right: 10px;
            cursor: pointer;
            font-size: 20px;
        }

        .productButton{
            float: right;
            padding: 10px 20px;
            background-color: black;
            color: white;
            font-weight: 600;
            cursor: pointer; 
        }

        .productButton:hover{
            background-color: white;
            color: black;
        }

        .gallary{
            padding: 50px;
            display: flex;

        }
        .gallaryItem{
            flex: 1;
            padding: 30px;
        }
        .gallaryImg{
            width: 100%;
        }

        .newModels{
            display: flex;

        }

        .nmItem{
               flex: 1;
               background-color: black;
               color: white;
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               text-align: center; 
        }
        .nmImg{
            width: 100%;
            height: 500px;

        }
         .nmTitle{
             font-size: 40px;
         }
         .nmButton{
             padding: 15px;
             font-weight: 600;
             cursor: pointer;
         }

         footer{
             display: flex;
         }
         .footerLeft{
             flex:2;
             display: flex;
             justify-content: space-between;
             padding: 50px;
         }

         .fMenuTitle{
             font-size: 16px;
         }

         .fList{
             padding: 0;
             list-style: none;
         }
         .fListItem{
             margin-bottom: 10px;
             color: gray;
             cursor: pointer;

         }

         .footerRigth{
             flex: 1;
             padding: 50px;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
         }
         .fInput{
             padding: 5px;
    
         }
         .fButton{
             padding: 5px;
              background-color: black;
              color: white;  
         }
         .fIcon{
             width: 20px;
             height: 20px;
             margin-right: 10px;

         }

         .copyright{
               font-weight: 300;
               font-size: 14px; 
         }

         @media screen and (max-width:480px){
             nav{
              padding: 20px;
             }
             .search{
                 display: none;
             }
              .navBotton{
                  flex-wrap: wrap;
              }      

             .menuItem{
                 margin: 20px;
                 font-weight: 700;
                 font-size: 20px;
             }
             .slider{
                 clip-path: none;
                 
             }
             .sliderWrapper{
                 height: 60vw;
             }
             .sliderImg{
                 width: 70%;
                 height: 100%;
             }
             .sliderBg{
                 width: 100%;
                 height: 100%;
             }
             .sliderTitle{
                 display: none;
             }
             .sliderPrice{
                 top: unset;
                 bottom: -50;
                 left: 0;
                 background-color: lightgrey;

             }
             .buyButton{
                 bottom: 125;
                 right: 0;
                 top: unset;
             }
             .features{
                 flex-direction: column;
             }
             .featureImg{
                height: 70px;
            }
    

             .product{
                 clip-path: none;
                 display: flex;
                 align-items: center;
                flex-direction: column;
                text-align: center;
             }

             .featureImg{
                 width: 80%;
             }

             .productDetails{
                 width: 100%;
                 padding: 0;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 text-align: center;
                 position: relative;
             }

             .productTitle{
                 font-size: 50px;
                 margin: 0;
             }

             .gallary{
                 display: none;
             }

             .newModels{
                 flex-direction: column;
             }
             .nmItem:nth-child(2){
                 padding: 50px;
             }

             footer{
                 flex-direction: column;
                 align-items: center;
             }
             .footerLeft{
                 padding: 20px;
                 width: 90%;
             }
             .footerRight{
                padding: 20px;
                width: 90%;
                align-items: center;
                background-color: whitesmoke;
            }

            .payment{
                width: 70%;
            }


         }