@media (max-width: 768px) {
    .content{
      margin-top: 4rem;
      width: 100%;
    }
      h1 {
        font-size: 2rem;
      }
      .typed-text {
        margin-top: 3rem;
        font-size: 1.6rem;
      }
      .button {
        margin-top: 4rem;
        padding: 25px 25px;
      }
      .banner{
        height: 250px;
      }
      .banner .slider{
          width: 100px;
          height: 160px;
          left: calc(50% - 50px);
          background-color: red;
      }
      .banner .slider .item{
          transform: 
              rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
              translateZ(150px);
      }

    }



/* ************************************************************************8 */
@media screen and (max-width: 1023px) {


    /* ************************** */
    /*  */
    #about{
        height: auto;
        flex-direction: column;
        /* background-color: red; */
    }
    .abt-texts{
        margin-top: 3vh;
        padding: 15px;
        width: 100%;
        height: auto;

    }
    .abt-texts h1, h3{
      letter-spacing: 0;
    }
    .abt-texts p{
      width: 90vw;
      font-size: 20px;
      font-weight: normal;
      
      color: white;
      text-align: center;
    }
    .circle-container {
        width: 320px; 
        height: 320px;
        /* background-color: orange;  */
      }
      .circle {
        width: 160px;
        height: 160px;
        border-radius: 50%;
      }
      .circle p, .r-arrow{
        font-size: 15px;
      }
      .r-arrow{
        width: 35px;
        height: 35px;
      }
    /* ********************** */
    .spinning-section{
        height: auto;
    }
    .box-container {     
        width: 100%;
        height: 100%;
        gap: 10px;
    }
    .box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%; 
      height: 100%; 
      background-color: orange;
      font-size: 17px;
    }
     .box:hover .box-text{
        width:100%;
        height: 95%;
      }

    /* ****************** */
    .discuss{
        margin-top: 0;
        margin-bottom: 10px;
        padding: 10px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* background-color: rgb(19,82,245); */       
      }
      
      .what-we-do, .call-pro{
        margin-top: 20px;
        width: 100%;
        height: auto;
        padding: 10px;
        /* background-color: red; */
      }    

    /* *********************************** */
    #why{
        margin-top: 30px;
        height: auto;
        width: 100vw;
    }
    
    .why-container{
        margin-top: 30px;
        margin-left: 0;
        width: 95%;
        height: auto;
    }
    /* **************************************8 */
    
  
}



/* ********************************************* */
 /* *********************************************************** */
    @media screen and (max-width: 1023px) {
        .banner .slider{
            width: 160px;
            height: 200px;
            left: calc(50% - 80px);
        }
        
    }
    @media screen and (max-width: 767px) {
        .banner .slider{
            width: 100px;
            height: 150px;
            left: calc(50% - 50px);
        }
    }

    /* ********************************************** */
    /* ============================= */
/* Responsive Media Queries */
/* ============================= */
/* For customers section  */
/* Tablets (≤ 992px) */
@media (max-width: 992px) {
  .testimonial-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .testimonial-text {
    font-size: 0.95rem;
  }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
  .testimonials .section-title {
    font-size: 1.3rem;
  }

  .testimonial-card {
    padding: 5px;
  }

  .testimonial-text {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .testimonial-author img {
    width: 40px;
    height: 40px;
  }

  .testimonial-carousel button.prev,
  .testimonial-carousel button.next {
    font-size: 1rem;
    padding: 8px 12px;
  }
  .testimonial-carousel .prev {
  left: -25px;
  }

  .testimonial-carousel .next {
    right: -25px;
  }
}