/* General styles */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

.items-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
 justify-content: space-between;
  overflow-horizontal:auto;
  margin-top:80px;
}

.item {
  width: calc(30% - 20px); /* 25% width for each item with gap */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.itemb{
width: 550px; /* 25% width for each item with gap */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.itema {
      width: 550px; /* 25% width for each item with gap */
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      margin-top:100px;
    }
.mc{
    justify-content:center; 
   display:flex;
}
.item-insert{
    width:100%;
    background-color:#fff;
    border-radius:8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.item img {
  width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.item-details {
  padding: 20px;
}
.item-detailsa {
  padding: 20px;
  margin-top:100px;
}
.item-cont{
    padding:50px;
    width:90%; 
}
.complogo{ 
    float:right;
    top:5; 
    margin-right:30px;
}
.item-list-d{
    float:left;
    width:46%;
    border-radius:8px;
    margin:5px;
    height:400px;
    overflow:hidden;
    box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
}
input[type="text"], input[type="password"], input[type="email"], textarea, input[type="number"], inptu[type="date"], inptu[type="file"], select, button{
    padding:10px;
    width:90%;
    border-radius:5px;
    border-width:thin;
}
.item-details h2 {
  margin-top: 0;
}

.discount {
  color: #e74c3c;
}
.item-insert.txt{
    display:block;
    width:100%;
    padding:8px;
    margin-bottom:5px;
    border-radius:5px;
}
.buy-button {
  display: block;
  width: 100%;
  padding: 10px 0;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px; 
  transition: background-color 0.3s ease; 
}

.buy-button:hover {
  background-color: #2980b9;
}
.header{
    background-color:#f4f4f4;
    position:fixed; 
    top:0; 
    width:100%; 
    padding:5px;
    height:50px; 
    margin-bottom:20px;
}
.hcont{
    float:left;
    margin-right:20px;
}
/* Media query for responsiveness */

@media screen and (max-width: 768px) {
  .item {
    width: 100%;
  }
  .itema{
        width:100%;
        overflow:auto;
        margin-left:0px;
    }
    .odetail {
        width: 90%; /* Adjust width as needed */
        margin: 0 auto;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%);
        background-color:#DAF7A6;
    }
}