*{ box-sizing: border-box; }
body{ margin:0; font-family: Arial, sans-serif; }


.apple-nav{
  background:#1d1d1f;       
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  
  color: #ffffff;
}


.nav-inner{
  display:flex;
  align-items:center;
  gap: 25px;                
  font-size:14px;
  font-weight:400;
}


.apple-nav a{
  color: #ffffff;
  text-decoration:none;
  padding: 6px 4px;
  
}

.apple-nav a:hover{ color:#06c; }


.brand{
  display:inline-flex;      
  align-items:center;
  justify-content:center;
  font-size:18px;
  padding: 0 6px;
}


.brand .fa-apple{
  font-size: 18px;
   line-height: 1;
}


.hero-section {
    
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 580px;
   background-color: black;
   text-align: center;
    
}
 
.hero-section img{
    height: 400px;
    width: 400px;
    

}

.para {
  justify-content: center;
  align-items: center;
  font-size: larger;
  color: #f5f5f7;
  
}


button {
  padding: 1.5rem 0.8rem;
  border-radius: 50px;
  color: #f5f5f7;
  background-color: #000000;
  font-size: larger;
  border: 2px solid #ffffff;
  
}
button:hover {
  background-color: #f5f5f7;
  color: #000000;

}

body {
  background-color: #000000;
}



.sec-img {
  margin-top: 200px;
  width: 359px;
  height: 102px;
  justify-content: center;
  align-items: center;
  margin-left: 500px;

  
}


.para2 {
  color: #f5f5f7;
  margin-top: 80px;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
  text-align: center;
  font-size: larger;
}




button {
  margin-left: 10px
}



.three-img {
  
  text-align: center;
  width: 710px;
  height: 322px;
  margin-left: 200px;
  margin-top: 64px;
  
  

  
}



.white-container{
  background-color: white;
height: 1600x;
margin-top: 12rem;

}

.four-img {
  text-align: center;
  padding-top: 8rem;
  font-size: larger;
  color: #1d1d1f;
  

  


}

.para3 {
  color: #6e6e73;
  font-size: larger;
}
.para4 {
  color: #6e6e73;
}


.button2 {
  padding: 1.5rem 0.8rem;
  border-radius: 50px;
  color: #000000;
  background-color: #f5f5f7;
  font-size: larger;
  border: 2px solid #ffffff;

}
.button2:hover {
  background-color: #000000;
  color: #f5f5f7;
}



.button3 {
  padding: 1.5rem 0.8rem;
  border-radius: 50px;
  color: #000000;
  background-color: #f5f5f7;
  font-size: larger;
  border: 2px solid #ffffff;

}
.button3:hover {
  background-color: #000000;
  color: #f5f5f7;
}



.img5 {
  text-align: center;
  margin-top: 12rem;
}


.container2 {
   background: linear-gradient(to bottom, #f5f5f7, #ffffff);
   height: 2000px;
}

.head1 {
  color: #a977c8;
  font-size: larger;
  width: 237px;
  height: 60px;
text-align: center;
margin-left: 43%;


}
.head1 h2{
  padding-top: 5rem;
  margin-bottom: 5rem;
  font-size: 40px;
}

.i-para {
  margin-top: 5rem;
  font-size: larger;
   color:#6e6e73; ;

}

.button4 {
  padding: 1.5rem 0.8rem;
  border-radius: 50px;
  color: #000000;
  background-color: #f5f5f7;
  font-size: larger;
  border: 2px solid #000000;

}
.button4:hover {
  background-color: #000000;
  color: #f5f5f7;
}



.button5 {
  padding: 1.5rem 0.8rem;
  border-radius: 50px;
  color: #000000;
  background-color: #f5f5f7;
  font-size: larger;
  border: 2px solid #000000;

}
.button5:hover {
  background-color: #000000;
  color: #f5f5f7;
}




.img6 {
  margin-top: 12rem;
}
.img7{
   background-color: white;
}