/* image to be tall as quter of the screen viewport */
img {
    /* quter is too small: ; */
    /* height: 25vh; */
    /* half is too better: */
    height: 70vh;
    width: 100%;
}

/* 🌟 Style the product container to ensure everything stays in place */
.item {
     /* Makes sure all absolute-positioned children stay inside */
    position: relative;
    /* Adjust width based on the image */
    width: 300px; 
    height: 70vh;
    border: 1px solid black;

    /*
    crop the image to fit the container
    */
    overflow: hidden;
    
    /*reduce the picture size by half of the current without changing it top left position */
    /* transform: scale(0.5); */

    /* Ensures the image scales from the top-left corner */
    transform-origin: top left; 
    position: flex;
    /* Allows multiple items to be side by side */
    /* display: inline-block;  */
    
    
}

/*position the discount label (-25%)at the top right corner of the image */
.discount-label {

    position: absolute;

    /* move the label top right corner */
    top: 0.2cm;

    /* move the label  to top left corner */
    left: 0.2cm;

    /* color the label */
    color: rgb(14, 1, 11);
    background-color: rgb(224, 224, 217);
    font: 1em sans-serif;
    font-size: 0.7cm;
   

}

/* i want the  title to be  at the center top of the image */
.title {
    /* position the title at the center top of the image */
    position: absolute;
   

   /* Make the title stand out */
   font-size: 0.8cm;
   font-weight: bold;
   color: rgb(255, 255, 255); /* White text for better visibility */
   text-transform: uppercase;
   text-shadow: 0.1cm 0.1cm 0.2cm rgba(0, 0, 0, 0.5);
   left: 3cm; 
   top: 0.5cm;
   
}

/* i want the pruduct type to be below the title */
.product_type {
    position: absolute;
    top: 5cm;
    left: 4.8cm;

    /* Text styling */
    font-size: 0.4cm;
    color: rgb(250, 244, 244);
    font-weight: bold;
    background-color: rgb(164, 180, 250);
    transform: rotate(90deg);
    text-transform: uppercase;
   text-shadow: 0.1cm 0.1cm 0.2cm rgba(0, 0, 0, 0.5);
   font-weight: bold;
    
}

/* i want the features to be below the product type */
.features {
    position: absolute;
    top: 9cm;
    right:1cm;

    /* Text styling */
    font-size: 0.6cm;
    color: white;
    font-weight: bold;
    background-color: rgb(164, 180, 250);
   text-shadow: 0.1cm 0.1cm 0.2cm rgba(0, 0, 0, 0.5);
   
    
}

/* price placed at the bottom left corner of the image */
.offer_price {
    position: absolute;
    top: 9.8cm;
    left: 0.2cm;
    background-color: rgb(231, 233, 238);
     /* Add a strikethrough effect */
     text-decoration: line-through;
     color: #130101;
}

/* place the discount price below the offer price */
.new_price {
    position: absolute;
    top: 9.8cm;
    left: 2cm;
    color: rgb(31, 29, 29);
    background-color: rgb(231, 233, 238);
}

/* place item left at the rigth bottom corner of the image */
.items_left {
    position: absolute;
    top: 9.8cm;
    left: 5cm;
    color: rgb(26, 1, 1);
    background-color: rgb(231, 233, 238);
}

/* place the navbar on the left side of the screen */
.navbar {
    position: absolute;
    top: 0cm;
    left: 10cm;
    font-size: x-large;
}

/*make all the padding and margin to be zero */
* {
    margin: 0;
    padding: 0;
}