*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #F4F4F4;
    perspective: 600px;
}
h1{
   color: #2E2E2E;
    text-align: center;
    text-transform: capitalize;
    margin: 40px;
    font-weight: 700;
    font-size: 50px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
section{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 50px 10px;
}
 .alldiv,.front,.back{
    width:260px;
    height: 260px;
    border-radius: 10px;
 }
 .alldiv{
    position: relative;
    margin: auto;
    transform-style: preserve-3d;
    transition: 1s;
 }
 .back,.front{
    position: absolute;
    padding: 10px;
 }
 .front{
    z-index: 1;
    background-size: cover;
    backface-visibility: hidden;
 }
 .back{
    transform: rotateY(180deg);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 4px 20px rgba(0, 0, 0,0.3);
 }
 .alldiv:hover{
    transform: rotateY(180deg);
 }
 .f1{
    background-image: url(../image/IPhone-13.jpg);
 }
 .f2{
    background-image: url(../image/13pro-max.jpg);
 }
 .f3{
    background-image: url(../image/14.jpg);
 }
 .f4{
    background-image: url(../image/14promax.jpg);
 }
 .f5{
    background-image: url(../image/15.jpg);
 }
 .f6{
    background-image: url(../image/15pro-max.jpg);
 }
 .f7{
    background-image: url(../image/16.jpeg);
 }
 .f8{
    background-image: url(../image/16pro-max.jpg);
 }
.details{
   margin: 10px;
   color: #000;
   text-transform: capitalize;
}
.details h2{
   text-align: center;
   margin-bottom:10px ;
}
.details p {
   color: #F0A500;
   font-weight: 500;
   text-align: center;
   font-size: 20px;
   margin-bottom: 10px;
}
.details span{
   font-weight: 900;
   font-size: 16px;
}
.details button{
  width: 100px;
  height: 35px;
   border-radius: 10px;
   background-color:#F0A500;
   text-align: center;
   margin:20px 60px;
   font-weight: 600;
   color: #ffffff;
}
.details button:hover{
   background-color: rgb(255, 255, 255);
   color: #000000;
}