@font-face {
    font-family:font1 ;
    src: url();
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: FontRegular;
}

html , body{
height: 100%;
width: 100%;
}

#main{
    width: 100%;
    min-height: 100vh;
}

nav{
display: flex;
align-items: center;
justify-content: center;
gap:2vw ;
width: 100%;
height: 5vh;
background-color: black;
}

nav a{
    text-decoration: none;
    color: aliceblue;
}

nav i{
    font-size: 1.1vw;
}
.part-1{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70vh;
    background-image: url(images/iphone14pro.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

}


.text-part-1 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
gap: 1vh;
top: 10%;
color: #fff;
}



.text-part-4 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    gap: 1vh;
    top: 10%;
    color: black;
    }
    

.text-part-1 h1{
    font-size: 2.4vw;
}

.text-part-1 p{
    font-size: 1.2vw;
}

.link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;
}

.link a{
    text-decoration: none;
    color: rgb(26,141 ,242);
    font-size: 1.2vw;
}

.link a:hover{
    border-bottom: 1px solid rgb(26,141 ,242);
}

.part-2{
    
background-image: url(images/Iphone14.png);
   
background-size: cover;
background-repeat: no-repeat;
   
}

.text-part-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    gap: 1vh;
    top: 5%;
    
color:#333 ;}


.part-3{
    background-image: url(images/applewatch.png);
}
.text-part-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    gap: 1vh;
    top: 8%;
    color: #fff;
}

.part4{
    display: flex;
   
}

.part-4-1, .part-4-2{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;  
   
}

.part-4-1{
    background-image: url(images/ipad.png);  
    background-size: cover;
    background-repeat: no-repeat; 
    
    }

    .part-4-2{
        background-image: url(images/macbook.png);   
        background-size: cover;
        background-repeat: no-repeat;
        }
       



        .part5{
            display: flex;
           
        }
        
        .part-5-1, .part-5-2{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;  
            text-decoration: #333;
        }
        
        .part-5-1{
            background-image: url(images/pod.png);  
            background-size: cover;
            background-repeat: no-repeat; 
            
            }
        
            .part-5-2{
                background-image: url(images/airpod.png);   
                background-size: cover;
                background-repeat: no-repeat;
                }
               


                .part6{
                    display: flex;
                   
                }
                
                .part-6-1, .part-6-2{
                    width: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 20px;  
                    font-family: #333;
                }
                .année {
                    letter-spacing: .01em;
                    line-height: 0.3;
                }
                
                .part-6-1{
                    background-image: url(images/fitness+.png);  
                    background-size: cover;
                    background-repeat: no-repeat;
                     
                    }
                
                    .part-6-2{
                        background-image: url(images/creativite.png);   
                        background-size: cover;
                        background-repeat: no-repeat;
                        
                        }
                        .creation {
                            letter-spacing: 0.1em;
                            text-align: center;
                        }


                        .part7{
                            display: flex;
                            justify-content: space-between; 
                           
                        }
                        
                        .part-7-1, .part-7-2 .part-7-3{
                            
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 200px;  
                            font-family: #333;
                        }
                        .année {
                            letter-spacing: .01em;
                            line-height: 0.3;
                        }
                        
                        .part-7-1{
                            background-image: url(images/tv+.png);  
                            background-size: cover;
                            background-repeat: no-repeat;
                            width: 17%; 
                            }
                        
                            .part-7-2{
                                background-image: url(images/liaison.png);   
                                background-size: cover;
                                background-repeat: no-repeat;
                                width: 60%;
                                
                                }


                                .part-7-3{
                                    background-image: url(images/sha.png);   
                                    background-size: cover;
                                    background-repeat: no-repeat;
                                    width: 17%;
                                    }