/* footer slider is here ---  */
.slider-item {
    width: 100%;
    position: relative;
    margin: 5px;
    overflow: hidden;
    border: 0px solid red;
    overflow: hidden;
    border-radius: 0.625rem;
    box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
  }
  .slider-item img {
    width: 100%;
    height: 450px !important ;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 50ms ease;
  }
  .slider-item img:hover{
    transform: scale(1.3);
  }
  .slider-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 76%;
    background: linear-gradient(
    180deg,
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, 0.3) 10%,
    hsl(0, 0%, 0%) 100%
  );
    color: white;
    padding: 20px;
    transition: 0.1s;
  }
  .slider-content h3 {
    margin: 0;
    font-size: 16px;
  }
  .slider-content h1{
    color: white;
    font-size: 38px;
    margin-bottom: 10px;
    text-align: left;
  }
  .slider-content p {
    margin: 10px 0;
    font-size: 20px;
    color: white;
    text-align: left;
  }
  .slider-content .btn{
    /* width: 60%; */
    border: 1px solid white !important;
    color: white ;
    display: table;
  }
  .view-more-btn {
    /* width: 60%; */
    /* margin: auto; */
    border: 1px solid black !important;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: table;
  }
  .slider-item:hover .slider-content {
    top: 20%;
    transition: 0.3s;
    
  }
  .slider-item:hover .view-more-btn {
    /* display: block; */
    color: white;
  }
  .btn:hover{
    border: none !important;
  }
 
  
  @media screen and (max-width: 750px) and (min-width: 0px) {
    .view-more-btn {
      /* width: 40%; */
      /* margin: auto; */
      border: 1px solid black !important;
      padding: 8px 16px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 12px !important;
    }
    .slider-item{
      margin: 5px !important;
    }
    .slider-content h1{
      font-size: 23px;
      margin-bottom: 25px;
    }
  }
  /* ---footer slider is over now ---  */

  @media (min-width: 750px) and (max-width: 1400px) {
    .slider-item{
      margin:5px;
      margin-inline: 0px !important;
    }
    .slider-item h1{
      font-size: 26px;
    }
    .slider-content{
      top: 80%;
    }
  
   }
   @media (min-width: 750px) and (max-width: 1150px) {
    .slider-item{
      margin:20px;
    }
    .slider-item h1{
      font-size: 22px;
    }
    .slider-content p{
      font-size: 16px;
    }
   }
    @media (min-width: 750px) and (max-width: 940px) { 
      .slider-item{
        margin:5px !important;
      }
      .slider-item h1{
        font-size: 16px;
        margin-bottom: 28px;
      }
      .slider-content p{
        font-size: 12px;
      }
      .slider-content .btn{
        font-size: 12px;
      }
     
    }
    @media (min-width: 750px) and (max-width: 800px) { 
      .slider-item{
        margin:5px !important;
      }
      .slider-item h1{
        font-size: 14px;
      }
      .slider-content p{
        font-size: 12px;
      }
      .slider-content{
        top: 85%;
      }
      .slider-content .btn{
        font-size: 12px;
      }
    }

    @media (min-width: 930px) and (max-width: 1550px) { 
      .slider-item{
        margin: 5px !important;;
      }
    }

    @media (min-width: 500px) and (max-width: 990px) { 
      .slider-item h1{
        font-size: 16px;
        margin-bottom: 38px;
      }
      .slider-content p{
        font-size: 12px;
      }
      .slider-content .btn{
        font-size: 12px;
      }
    }