/* styles.css */
#product-list .product-card {
    background: white;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .product-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .product-card h3 {
    margin-top: 12px;
  }
  .product-card p {
    color: #555;
  }
  .headerDiv {
    text-align: start;
    overflow: hidden;
    float: bottom;
    position: absolute;
  }
  @keyframes mojo2{
    0%{}
    5%{margin-left:1%;}
    15%{margin-left: 10%;}
    40%{margin-left:20%;}
    60%{margin-left: 50%;}
    80%{margin-left: 70%;}
    100%{margin-left: 90%;}
  }
  
  
  .stage{
    width: 100%;
    height: 300px;
    border: 2px solid darksalmon;
    overflow: hidden;
  }
  
  .smallboxes{
    width: 200%;
     height: 100%;
    border: 1px solid cyan;
    overflow: hidden; 
    background-color: lightcoral;
    animation: moveboxes  15s infinite;
  }
  
  @keyframes moveboxes{
    0%{ margin-left: -1%;}
    10%{ margin-left: -5%}
    50%{ margin-left: -50%;}
    100%{ margin-left: -100%;}
    150%{ margin-left: -200%;}
    200%{ margin-left: -400%;}
    250%{ margin-left: -600%;}
    300%{ margin-left: -700%;}
  }
  .smallboxes div{
    height: 100%;
    width: 25%;
    float: left;
  }
  
  .smallboxes div img{
    width: 100%;
    height: 100%;
    
  }
  
  .s1{
    background-color: red;
    color: navy;
    font-weight: 400;
    background-image: url(belt.jpeg);
     background-size: 100% 100%;
  }
  .s2{
    background-color: green;
    color: navy;
    background-image: url(sandal.jpeg);
     background-size: 100%
    100%;
  }
  .s3{
    background-color: blue;
    color: navy;
    background-image: url(T-shirt-black1.jpeg);
     background-size: 100% 100%;
  }
  .s4{
    background-color: darkgrey;
    color: navy;
    background-image: url(wallets.jpeg);
    background-size: 100% 100%;
  
  }
  .s5{
    background-color: aquamarine;
    color: navy;
    background-image: url(bracelet-\ black.jpeg);
    background-size: 100% 100%;

  }
  .s6{
    background-color: olive;
    color: navy;
    background-image: url(sleepers-D-brown.jpeg);
    background-size: 100% 100%;

  }
  .cities{
    animation: mojo2 5s;
  }
  .contact{
    background-color:whitesmoke;
    text-align: center;
    font-weight: 400;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
  }
  
.navvy{
  color: navy;
  font-weight: 800;
  font-size:larger;
  margin-left: 4em;
  text-align: center;
}
.Tees{
  background-color: azure;
  background-size: 100% 100%;
  text-align: center;
  border: 2px;
  border-color: #555;
  box-sizing: border-box;

}
p{
  font-weight: 500;
  font-size: larger;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: #643792;
}