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

body{
    background-color: #000000;
    overflow-x: hidden;
}

nav{
    display:flex;
    justify-content: center;
    align-items:center;
    padding:10px;
    background-color: #000000;
}
a{
    color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0.8;
}
.logo{
margin-right: 40px;
 max-width:100%;   
}

.logo img{
    width:15px;
    margin-left:5px;
}

.buy-a{
    color:#007FFF;
}

/* div */

#gap{
background-color:#171414;
width:100vw;
height:60px;
color: white;

}

#gap p{
    text-align: center;
    position: relative;
    top: 15px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* button buy */

.btn{
padding:10px 20px;
border-radius:50px;
border: none;
color: aliceblue;
background-color:rgb(0, 113, 227);
font-size:large;
position: absolute;
top: 250px;
}

/* from text */
#from{
 font-size:large;
 font-weight:500;
 font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 position:relative;
 top:300px;
 transform: translate(10%);
}

/* top menu */

ul{
    display:flex;
    list-style:none;
    gap:30px;
    font-size: small;
    
}

#home{
    background-color: #000000;
}

a{
    text-decoration:none;
}

section{
    min-height:100vh;
}

footer{
    text-align:center;
    padding:20px;
}
#home{
    position:relative;
    height:100vh;
    overflow:hidden;
}

#home video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius: 25px;
}

.hero-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:white;
}
html{
    scroll-behavior:smooth;
}


.buy-w{
color: #007FFF;
position:relative;
bottom: 25px;
left:700px;
}

#about{

    padding-top: 130px;
    padding-left: 100px;
    background-color:#171414;
    display:flex;
    padding-bottom: 50px;

}
#about h2{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight:600;
    color: white;
    font-size:50px;
    
   
}
#about a{

    padding-top: 80px;
    padding-right: 100px;
    font-size: large;
}
.intro{
    padding:80px 50px;
    text-align:center;
}


#slider-card{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:20px;
    scroll-behavior: smooth;
    background-color: #171414;
    scrollbar-width: none;
    
}
#slider-card::-webkit-scrollbar{
    display: none;
}

.card{
    min-width:80%;
    height:90%;
    scroll-snap-align:center;
  
}

.card img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:25px;
     margin-left: 60px; 
}
   
.card{
    position:relative;
}
.min{
    display: none;
}
.text1{
    position:absolute;
    top: 50px;
    left:35%;
    font-size: x-large;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    color:white;
      
}
.text2{
position:absolute;
    bottom: 50px;
    left: 425px;
    font-size: x-large;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    color:white;
}
.text3{
position:absolute;
    top: 50px;
    left: 100px;
    font-size: x-large;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight:800;
    text-align: center;
    color:#000000;
}
.text4{
position:absolute;
    top: 50px;
    left:400px;
    font-size: x-large;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    color:white;
}
.text5{
position:absolute;
    top: 50px;
    left:400px;
    font-size: xX-large;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    color:white;
}
.apple-text{
    display: inline-block;
  background: linear-gradient(
    90deg,
    #2b65c7,
    #762cbc,
    #d52747,
    #b96619
  );
position: absolute;
top:250px;
left: 100px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight:lighter;
  -webkit-background-clip: text;
  color: transparent;
}
.text6{
    position: absolute;
    top:300px;
    left: 100px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    font-size: x-large;
}
#min-h6{
    position: absolute;
    top:400px;
    font-weight: 100;
    left: 100px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: large;
    color: white;
}
#design{
text-align: center;
color:#f77e2d;
height:1100px;
}
#design h2{
    padding-top: 90px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}
#design h1{
    color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 15px;
    font-size:80px;
    letter-spacing:-3px;
    line-height:80px;
    font-weight:500;
}
#design p{
    padding-top: 50px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:larger;
    padding-right: 300px;
    padding-left: 280px;
    font-weight: 700;
    color: white;
    opacity: 0.5;
    text-align: lef;
}
#design img{
    display:block;
    width:100%;
    padding:0 250px;
}



.bwn{
    width:auto;
    background-color:#171414;
    height: 150px;
}
#cameras{
    position: relative;
    top:-80px;
    text-align: center;
    background-color: #000000;
    height: 1500px;
}
#cameras h2{
padding-top: 90px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    color:#f77e2d;
    
}
#cameras h1{
     color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 15px;
    font-size:80px;
    letter-spacing:-3px;
    line-height:80px;
    font-weight:500;

}
#cameras img{
     width:1250px;
     position:relative;
     top: 70px;
     right:30%;
    height:auto;
}
.part-first{
position:absolute;
top:35%;
right:300px;
text-align: left;
line-height: 1.1;
}
.part-first p{
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:20px;
    font-weight:bolder;
    opacity: 0.5;
}
.part-first span{
    color:#f77e2d;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:50px;
    font-weight: 600;
}
.part-sec{
    position:absolute;
    top:48%;
    right:350px;
    text-align: left;
    line-height: 1.1;
}
.part-sec p{
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:20px;
    font-weight:500;
    opacity: 0.5;
}
.part-sec span{
    color:#f77e2d;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size:50px;
    font-weight: 600;
}
.long{
    text-align: center;
    color: white;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    top: 200px;
    left: 300px;
}
.camera-text{
    max-width: 775px;
    margin: 0 auto;
    text-align: center;
    padding: 200px 20px;
    letter-spacing:-1px;
    line-height:25px;
}

.camera-text p{
    margin-top: -100px;
    color:#8a8a8a;
    font-weight:700;
    font-size: larger;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.camera-text span{
  color: white;
}
#performance{
    
   position: relative;
    top:-80px;
    text-align: center;
    background-color: #000000;
    height: 1500px;
}
#performance h2{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    color:#f77e2d;
    
}
#performance h1{
     color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding-top: 15px;
    font-size:80px;
    letter-spacing:-3px;
    line-height:80px;
    font-weight:500;

}
.camera-text2{
    max-width: 775px;
    margin: 0 auto;
    text-align: center;
    padding: 200px 20px;
    letter-spacing:-1px;
    line-height:25px;
}

.camera-text2 p{
    color:#8a8a8a;
 position: relative;
 top: -150px;
    font-weight:700;
    font-size: larger;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.camera-text2 span{
  color: white;
}
#performance img{
    max-width: 1500px;
    position: relative;
    top: -350px;
    align-items: center;
}
.features-card{
    display: grid;
    grid-template-columns:repeat(3,1fr);
    color:#888;
    position: relative;
    top: -450px;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.grid-card{
    padding: 0 80px;
    margin: 0 5px;
   
}
.grid-card p{
    margin-top: 20px;
    font-weight: 500;
    
}
.grid-card hr{
    margin-top: 20px;
    max-width:auto;
    opacity: 0.3;
}
.grid-card h1{
    font-size: larger;
    font-weight: 600;
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.grid-card span{
    color:white;
}
#battery{
    position: relative;
top: -150px;
max-height: 1200px;
}
#battery img{
position: relative;
top: -300px;
    width: 1800px;
    z-index: 0;

}
#battery h1{
    color: white;
    position:relative;
    top: -100px;
    left: 100px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 50px;
    z-index: 2;
    font-weight: 650;
}
#battery p{
    color:#888;
    position: relative;
    top: -70px;
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
    max-width:500px;
    margin-left: 100px;
    margin-top: 0px;
    z-index: 1;
}
#battery span{
   color: white;
}
.end{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    color: #888;
    text-align: left;
    max-width: 1200px;
    margin: auto;
    gap: 10px;
}
.card2{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:10px;
    position: relative;
    top: -300px;
    font-weight: 100;
    padding:0 40px;
    margin-right:-0%;
}
.card2 span{
    color: #f77e2d;
    font-size: xx-large;
    font-weight: 500;
}
footer{
    background: linear-gradient(
        to bottom,
        transparent,
        #111111 30%,
        #1a1a1a 100%
    );
    
}
footer{
   
    text-align:center;
    color:white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size:small;
    
}
footer a{
    font-size: x-small;
}


/* different device enable part */
@media(max-width:768px){

   /* menu */
    nav ul{
    display:none;
}
/* logo apple */
.logo img{
    width:20px;
}

nav{
    justify-content:flex-start;
    padding-left:10px;
}
#gap{
    padding-bottom:80px;
    
}
#gap p{
  min-width:auto;
  max-height:100%;
 margin: 8px;
}
/* phone video */
#home video{
    max-width:auto;
    max-height:500px;
    border-radius:0;
}
.btn{
    position: relative;
    top:-25px;
    
}
#from{
      position: relative;
    top: -15px;
    right:15px;
   
}
#home{
    max-height: min-content;
    border: 2px bold color(srgb red green blue);
}
#about{
     padding-left: 20px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
#about h2{
   
font-size:xx-large;
    margin: 0;
  
}
#about a{
font-size:small;
margin-top:auto;
padding-top:15px;
}


#slider-card{
    display:flex;
    overflow-x:auto;
    gap:20px;
    padding:0 16px;
    
    scroll-snap-type:x mandatory;
}

.card{
    flex:0 0 88%;
    height:520px;
    scroll-snap-align:center;
}

.card img{
    width:100%;
    height:100%;
    margin-left:0;
    object-fit:cover;
    border-radius:22px;
}
.min{
    position:absolute;
    inset:0;
}

.min img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.text1,
.text2,
.text3,
.text4,
.text5,
.apple-text,
.text6,
#min-h6{
    
    left:25px;
    right:25px;
    text-align:center;

}

.text1{
    top:35px;
    font-size:15px;
}

.text2{
    bottom:35px;
    top:auto;
    font-size:15px;
}

.text3{
    top:35px;
    font-size:15px;
}

.text4{
    top:35px;
    font-size:13px;
  
}

.text5{
    top:35px;
    font-size:30px;
}

.apple-text{
    top:10px;
    font-size:28px;
}

.text6{
    top:50px;
    font-size:13px;
}

#min-h6{
    top:100px;
    font-size:13px;
    
}


.main{
    display: none;
   
}
.min{
    display: block;
    margin-left:px;
}
/* design */
#design {
    max-width: 100%;
    height: 100vh;
}
#design h2{
    font-size: medium;
    justify-self:left;
    padding-left: 20px;
}
#design h1{
   letter-spacing:0px;
   font-size:35px;
   line-height: 33px;
   text-align: left;
   padding-left: 20px;

}
#design p{
    text-align: left;
    padding:20px 20px;
    font-size: 18px;
    font-weight: 100;

}
#design img{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 80px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}
/* camera area */
#cameras{
    margin-top: -100px;
}
#cameras h2{
font-size: medium;
    justify-self:left;
    padding-left: 20px;
}
#cameras h1{
    letter-spacing:0px;
   font-size:35px;
   line-height: 33px;
   text-align: left;
   padding-left: 20px;

}

#cameras img{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}
.part-first{
    margin-top: 200px;
    margin-left: 20px;
}

.part-sec{
    margin-top: -100px;
    margin-left: 250px;
}
#performance{
    margin-top: -350px;
}
#performance h2{
    font-size: medium;
    justify-self:left;
    padding-left: 20px;
}
#performance h1{
     letter-spacing:0px;
   font-size:35px;
   line-height: 33px;
   text-align: left;
   padding-left: 20px;
}
#performance img{
    width: 100%;
    max-width: 100%;
    height: auto;
    padding-top: 5cap;
    display: block;
}
.features-card{
    margin-top: -350px;
}
.grid-card{
    padding-bottom: 50px;
}
#battery{
    margin-left:-80px;
}

#battery h1{
font-size: xx-large;
font-weight: 500;
}
#battery img{
    padding-top: 300px;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}
.end{
    margin-top: -350px;
    margin-bottom: 100px;
}
.card2 h1 span{
    font-size: large;
    text-align: right;
}

#about{
    flex-direction:column;
    align-items:flex-start;
}

.buy-w{
    position:static;
    left:0;
    bottom:0;
    margin-top:20px;
}

.features-card{
grid-template-columns: 1fr;
}
.camera-box{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.part-first,
.part-sec{
    position:static;
    top: ;
}

.end{
    grid-template-columns:1fr;
    gap:40px;
}

.card2{
    position:static;
    top:0;
    padding:20px;
    text-align:center;
}

.card2 span{
    font-size:40px;
}

section{
   min-height: auto;
}

#battery h1{
    
    max-width:250px;
}

}