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

}
html{
    font-size: 16px;
}
    body{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

       header{
        gap: 5px;
        width: 100%;
       }
        .nav1{
            display: flex;
            flex-direction: row;
            width: 100%;
        }
        .nav_img {
          width: 30%;
        height: auto;
        position: absolute;
         top: 2.5em; /* 2.5em ≈ 12% of viewport height */
         left: 5%;
}
         .nav2_img {
        width: 7.7%;
        height: auto;
        position: absolute;
         top: 1.875em;
         left: 84.3%;
}
        
      #first_line {
     width: 100%;
     position: absolute;
     top: 5.75em;
     border: none;
     border-top: 0.25em solid #E4E4E4;
}

        
        .Add{
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .king{
            width:83.8%;
            height: auto;
            position: absolute;
            top:7.75rem;
            left: 5.3%;
            font-size: 2rem;
            font-weight: 700;
            line-height:1.2em;

        }
        .main_image{
            width: 92.2%;
            height: auto;
            position: relative;
            top: 12.375em;
            left: 5%;
        }
        .add_to{
            display: flex;
            justify-content: center;
            width:80%;
            height:auto;
            padding: 9px;
            position: absolute;
            top: 18.22em;
            left: 1.57em;
            background-color: #000;
            color: #fff;
            font-weight: 500;
            font-size: 1.4375em;
            letter-spacing:7%;
            text-align: center;
            line-height: 100%;
            text-decoration: none;
        }
        .about{
            display: flex;
            flex-direction: column;
        }
        .word{
            display: flex;
            flex-direction: column;
            gap: 0.1rem;

        }
        
        .word   h3{
                width:22.625em;
                height:auto;
                position: relative;
                top:15.875em;
                left:2.125em;
            }
            .word p{
              width:22.625em;
                height:auto;
                position: relative;
                top:20.875em;
                left: 2.125em;
                padding: 3px;
                
            }
        
        .images{
            display: flex;
            flex-direction: column;
        }
         .images  h3{
                width:20.5em;
                height: auto;
                position: absolute;
                top: 47.9em;
            
        }
      .images .set{
            display: flex;
            flex-direction: row;
            width: 21.681125em;
            height:7.66125em;
            position: absolute;
            top: 58em;
            gap: 0.5rem;
            

        }
    
    .details{
        display: flex;
        flex-direction: column;
    }
    .details h3{
        width:10.84em;
        height:auto;
        position: absolute;
        top:57.875em;
        left: 0.0075em;
     }
   .details .one{
        width:30.75em; 
        height: 1.43375em;
        position: absolute;
        top: 69.9375em;
        left: 1.7375px;
     }
    .details .two{
       width:30.75em; 
        height: 1.43375em;
        position: absolute;
        top: 72em;
        left: 2.4375px;
     }
     
     #second_line{
        width: 100%;
        height: 0em;
        position: absolute;
         top: 75.75em;
         border: none;
         border-top: 0.25em solid #E4E4E4;
        
     }
     footer{
        display: flex;
        flex-direction: column;
        align-items: center;
     }
     .photo{
        display: flex;
        flex-direction: row;
        width: 20.375em;
        height: 2.3125em;
        position: absolute;
        top: 77.875em;
        left: 1.8753em;
     }
     .photos{
        display: flex;
        flex-direction: column;
       justify-content: center;
       align-items: center;
      gap: 0.6rem;
   

     }
     #first_photo{
        width:57.6%;
        height:40.3em;
        position: absolute;
        top: 81.5em;
        /* left: 1.375em; */
     }
     #second_photo{
         width:57.6%;
        height:40.3em;
        position: absolute;
        top: 125.5em;
        /* left: 1.375em; */
     }
     #third_photo{
         width:57.6%;
        height:40.3em;
        position: absolute;
        top: 167.5em;
        /* left:1.375em; */
        
     }
    .check{
            display: flex;
            flex-direction: column;
            height:auto;
            position: absolute;
        top: 216em;
        left: 1.8em;
        gap: 1rem;
        
     }
    
    .form{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .third_line{
        width: 50%;
    }
    .price{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .sort_by{
        display: none;
    }
    @media screen and (max-width: 414px) {
  html { font-size: 14px; }
  .set { flex-direction: column; }
}
@media screen and (min-width:780px) and (max-width: 1280px){
    html { font-size: 16px;}
    .set { flex-direction: row; gap: 1rem}

    body{
        display: flex;
        flex-direction: column;
    }
    header{
        display: flex;
        flex-direction: column;

    }
    .nav_img{
        width: 30%;
        height: auto;
        position: absolute;
        top: 1.9625em;
        left:3.75em ;
        font-size: 15px;
    }
    .nav2_img{
        width: 5.75%;
        height: auto;
        position: absolute;
        top: 1em;
    }
    .first_line{
        width: 100%;
        height: 0em;
        position: absolute;
        top: 7.75em;
    }
    .Add{
        display: flex;
        flex-direction: row !important;
    }
    .king{
        width: 60%;
        font-size: 20px;
    }
    .add_to{
        position: absolute;
         top:7.75rem;
         width:25%;
         margin-left: 70%;
         font-size: 15px;
    }
    .about{
        display: flex;
        flex-direction:row !important;
        margin-top: 1rem;
    }
    .word{
        width: 60%;
    }
    
    .details h3, .details p{
        margin-left: 60%;
    }
    .category{
        display: flex;
        flex-direction: row !important;
    }
    .photos{
        display: flex;
        flex-direction: column;

    }
    .photos img{
        width: 20% !important;
        margin-left: 70%;
        margin-top: 5px;
        gap: 5px !important;
        height: 30%;
    }
   .form, h4{
        display: flex;
        flex-direction: column;
        margin-top: 0; /* Change this value to move it up */
        position: relative;
        bottom: 2150px;    /* Add this line to move it up further */
    }
    .price, .category h3, hr{
        position: relative;
        bottom: 2100px;
        
    }
    
}
@media  screen and (max-width: 1029px)  {
        .word{
        width: 20%;
    }
    .images{
        display: flex;
    flex-direction: column;
    margin-left: 20%;
    }
    .details{
        display: flex;
        flex-direction: column;
        margin-left: 30%;
    }
}