@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Almarai', sans-serif;
  }
  li{
    direction: rtl;
  }
  header{
    background-color: transparent;
    position: absolute;
    top:0;
  }
  .home{
    height: 100vh;
  }
  
  .slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .slides-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
  }
  
  .slide {
    flex: 0 0 100%;
    height: 100%;
  }
  
  video {
    width: 100%;
    height: 100%;
    object-fit:cover;
  }
  
  .description{
    text-align: right;
    position: absolute;
    right: 5%;
    top:45%;
    transform: translateY(-50%);
  }
  .description ul {
    padding: 20px;
    padding-inline: 40px;
  }
  .description li{
    list-style-type: disc;
  }
  /* Add these styles to your existing CSS */
  .indicators {
    position: absolute;
    bottom:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
  }
  
  .image-holder {
    display: flex;
    background-image: linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75));
    padding: 20px;
    justify-content: space-between;
    border-radius: 10px;
    gap: 10px;
  }
  
  .image-holder img {
    flex-basis: calc(80% / 3);
    height: 100px;
    border: 2px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.3s ease-in-out;
  }
  
  .image-holder img:hover {
    border-color: #3498db;
  }
  
  /* New styles for indicator active state */
  .image-holder .active {
    border-color: #3498db;
  }
  
  /* Style changes for responsiveness */
  @media (max-width: 768px) {
    .indicators {
      flex-direction: column;
      margin-top: 10px;
    }
  
    .image-holder {
      width: 90%;
      gap: 8px;
    }
  
    .image-holder img {
      flex-basis: calc(100% / 3);
      height: 60px;
      /* transform: scale(1.2); */
    }
  }
  
  @media (max-width: 280px){
    .image-holder{
      width: 80%;
    }
    .image-holder img{
      height: 60px;
    }
  }