* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

body {
    height: 100%;
    width: auto;
    overflow-x: hidden;
    background-color: #fff;
}

html {
    scroll-behavior: smooth;
}

.banner {
    margin-top: 0;
    height: 17rem;
    width: 100%;
}

.photo img {
    height: 11rem;
    width: auto;
    display: block;
    margin: -50px auto 0 auto; 
    margin-left: 200px;
}

h1 {
    text-align: center;
    margin-top: 10px;
    font-size: 3rem;
    font-family: poppins sans-serif;
}

.container {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 2rem 10rem; /* Adjust padding */
}

.info {
    padding: 1rem 2rem; /* Reduce padding */
    font-weight: bold;
    overflow: hidden;
}

p {
    /* Optional styles for paragraphs */
}

hr {
    background-color: black;
    height: 2px;
    opacity: 0.2;
}

.photo1 img {
    height: 350px;
    width: 100%; 
    max-width: 350px; 
}
.info-content{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 2rem 10rem;
    
}
.aboutme{
    /* text-align: center;
    margin-right: 500px;
    font-size: 2rem;
    margin-left: 90px;
    font-weight: bold; */
    padding: 0px 50px;
}
.aboutme h1{
    text-align: center;
    /* margin-right: 500px; */
    font-size: 2rem;
    margin-left: -40px;
    color: #b74b4b;
    font-weight: bold;
}
.aboutme h2{
    /* margin-left: 60px; */
}
.app-info{
   
    display: flex;
     flex-wrap: wrap; 
     justify-content: center;
    gap: 10px; 
    width: 50%;
    margin: auto; 
}
.app-info img{
    width: calc(50% - 10px); 
      object-fit: cover;
}
.canva{
    position:relative ;
    height: 100px;
    width: auto;
}
.capcut{
    position:relative ;
    height: 100px;
    width: 100px;
}
.wink{
    position:relative ;
    height: 100px;
    width: 100px;
    border-radius: 10px;
}
.kinemaster{
    position:relative ;
    height: 100px;
    width: auto;
}
/* .app-photo{
    position: relative;
    display: flex;
    justify-content: center;
} */

    h5 {
        color: #b74b4b;
        font-size: 2rem;
        font-weight: bold;
        text-align: center; 
        margin-top: 20px; 
    }
    
/* 1st client */

    .client {
        position: relative;
        display: flex;
        justify-content: space-between; 
        align-items: center; 
        flex-wrap: wrap;
        padding: 2rem 5rem;
        gap: 2rem; 
        max-width: 1200px;
        margin: auto; 
      }
  
      
      .client-info img {
        height: 200px;
        width: auto;
        border-radius: 50%;
      }
  
      
      .client-testamonial {
        flex: 1; 
        margin-left: 2rem;
        font-size: 1rem;
        line-height: 1.5;
        max-width: 400px;
      }
  
      
      .client-video video {
        height: 300px; 
        width: auto;
        max-width: 100%;
        border-radius: 8px;
      }
  
      
      /* 1st client over */
      /* over-------------------------------------------------------------- */
      /* 2nd start--------------------------------------------------------------------- */
        .client-info2 img {
          height: 200px;
          width: 190px;
          border-radius: 50%;
        }
      
        
        .client-testamonial2 {
          flex: 1; 
          margin-left: 2rem;
          font-size: 1rem;
          line-height: 1.5;
          max-width: 400px;
        }
      
        
        .client-video2 video {
          height: 300px; 
          width: auto;
          max-width: 100%;
          border-radius: 8px;
        }
      
        
        .client2{
            position: relative;
                display: flex;
                justify-content: space-between; 
                align-items: center; 
                flex-wrap: wrap;
                padding: 2rem 5rem;
                gap: 2rem; 
                max-width: 1200px;
                margin: auto;
        }
      /* 2nd over------------------------------------------------------------------------------------------ */


   /* 3rd client start */
    .client3 {
    position: relative;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap;
    padding: 2rem 5rem;
    gap: 2rem; 
    max-width: 1200px;
    margin: auto; 
  } 

   .client-info3 img {
    height: 200px;
          width: 190px;
          border-radius: 50%;
  }
  /* .client-info3 h1{ */
    /* margin-left: 4rem; */
  /* } */
  
  .client-testamonial3 {
    flex: 1; 
    margin-left: 2rem;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 400px;
  }

  
  .client-video3 video {
    height: 300px; 
          width: auto;
          max-width: 100%;
          border-radius: 8px;
  } 
/* 3rd client over  */

/* 4th client start */
.client4 {
    position: relative;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap;
    padding: 2rem 5rem;
    gap: 2rem; 
    max-width: 1200px;
    margin: auto; 
  }

  
  .client-info4 img {
    height: 200px;
    width: auto;
    border-radius: 50%;
  }

  
  .client-testamonial4 {
    flex: 1; 
    margin-left: 2rem;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 400px;
  }

  
  .client-video4 video {
    height: 300px; 
    width: auto;
    max-width: 100%;
    border-radius: 8px;
  }


@media (max-width: 768px) {
    .aboutme h1 {
        font-size: 2rem;
        margin-left: 2rem;
        width: 100px;
    }
    .aboutme h2{
        margin-left: 2rem;
    }
    

    .container {
        padding: 1rem 2rem;
        flex-direction: column; 
        align-items: center;
    }

    .info {
        width: 100%;
        text-align: center;
    }

    .client {
        flex-direction: column;
        align-items: center;
    }

    .client-info img {
        height: 120px;
        width: 120px;
    }

    .client-video video {
        height: 250px;
    }

    .app-info {
        position: relative;
        width: 100%; 
        margin-top: 5rem;
    }

    .app-info img {
        width: calc(100% - 10px); 
        height: 100px;
        width:auto;
    }
    .container2 {
        padding: 1rem 2rem;
        flex-direction: column; 
        align-items: center;
    }

    .info2 {
        width: 100%;
        text-align: center;
    }

    .client2 {
        flex-direction: column;
        align-items: center;
    }

    .client-info2 img {
        height: 120px;
        width: 120px;
    }

    .client-video2 video {
        height: 250px;
    }

     .app-info {
        width: 100%; 
        margin-top: 5rem;
    }

 
    .info-content{
        margin-left: -150px;
        display: flex;
        justify-content: space-between;
    }

    .client4 {
        flex-direction: column;
        align-items: center;
    }

    .client-info4 img {
        height: 120px;
        width: 120px;
    }

    .client-video4 video {
        height: 250px;
    }
}


@media (max-width: 480px) {
    h1 {
        font-size: 1.8rem;
    }

    .banner {
        height: 12rem;
    }

    .photo img {
        height: 8rem;
        margin-left: 8rem;
    }

    .client-testamonial {
        font-size: 0.9rem;
    }

    .client-info img {
        height: 100px;
        width: 100px;
    }
    .photo img {
        height: 8rem;
    }

    .client-testamonial2 {
        font-size: 0.9rem;
    }

    .client-info2 img {
        height: 100px;
        width: 100px;
    }
}
@media (max-width: 480px){
    .client-info3 img{
        height: 100px;
        width: 100px;
    }   
    .client3 {
        flex-direction: column;
        align-items: center;
    }
    .client-video3 video {
        height: 250px;
    }
    .client-info4 img{
        height: 100px;
        width: 100px;
    }   
    .client4 {
        flex-direction: column;
        align-items: center;
    }
    .client-video4 video {
        height: 250px;
    }
}