.h2-sub{

    font-family: var(--font-family1);

    color: var(--color3);

}

.span-sub1{

    font-size: 16px;

    font-family: var(--font-family1);

}

.on-class-sardar{

        display: flex;

        align-items: center;

        justify-content: space-evenly;

        width: 100%;

        margin-bottom: 40px !important;

    }

    .on-class-sardar .on-class-sardar-first{

        width: 50%;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

    }

    .on-class-sardar .on-class-sardar-first .on-class-sardar-first-o{

        width: 75%;

        height: 60%;

    }

    .on-class-sardar-sec{

        width: 50%;

        height: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

   

    }

    .on-class-sardar-sec1{

        width: 230px;

        height: 230px;

        border-radius: 10px;

        background-color: rgb(255, 255, 255);

        box-shadow: 0px 5px 10px rgb(228, 228, 228);

       display: flex;

       align-items: center;

       justify-content: center;

       margin-top: 20px;

       transition: 0.9s all ease;



    }
    .h4-sub{
        font-family:var(--font-family1);
        font-size: 19px;
        font-weight: bold;
        margin: 10px 0px;
    }

       .on-class-sardar-sec1:hover{

         transform: scale(1.1);



    }

    .on-class-sardar-sec11{

        width: 70%;



    }

        .on-class-sardar-sec22{

        width: 70%;



    }

    .on-class-sardar-sec222{

        padding-top: 40px;

        margin-top: 50px;

    }

       .on-class-sardar-sec2{

        width: 230px;

        height: 230px;

        /* border: 1px solid black; */

        border-radius: 10px;

        background-color: rgb(255, 255, 255);

        box-shadow: 0px 5px 10px rgb(201, 201, 201);

       display: flex;

       align-items: center;

       justify-content: center;

       margin-left: 20px;

      margin-bottom: 20px;

      transition: 0.9s all ease;



    }

     .h4-sub{

        

        font-family: var(--font-family1);

        font-size: 19px;

        font-weight: bold;

        margin: 10px 0px;

    }

    .on-class-sardar-sec2:hover{

         transform: scale(1.1);

    }

    .on-class-sardar-sec1:hover h4{

        color: var(--color1);

    }

      .on-class-sardar-sec2:hover h4{

        color: var(--color1);



    }

      .on-class-sardar-sec3 :hover h4{

        color: var(--color1);

    }

       .on-class-sardar-sec3:hover{

         transform: scale(1.1);

    }

           .on-class-sardar-sec3{

        width: 230px;

        height: 230px;

        /* border: 1px solid black; */

        border-radius: 10px;

        background-color: rgb(255, 255, 255);

        box-shadow: 0px 0px 10px rgb(201, 201, 201);

       display: flex;

       align-items: center;

       justify-content: center;

       margin-left: 20px;

         transition: 0.9s all ease;



    }

/* .on-class-sardar .on-class-sardar-first .on-class-sardar-first-o button {

       background: linear-gradient(45deg, #1899ad, #0e454f);

      color: var(--color2);

      font-size: 16px;

      font-weight: 600;

      line-height: 1;

      padding: 15px 35px;

      border-radius: 30px;

      border: none;

      cursor: pointer;

      margin-top: 20px;

      transition: all 0.3s ease;

}

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o button:hover {

      background-color: var(--background-color2);

      transform: translateY(-3px);

      color: var(--color3);

}

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o button i{

    color: var(--color2) !important;

  transform: rotate(-46deg);

  transition: .5s;

  margin-left: 1px;

}

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o button:hover i{

      color: var(--color3) !important;

} */

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o button{

      
       /* background: linear-gradient(var(--background-color12)); */
   border: 1px solid var(--background-color3);

      color: var(--color2);

      font-size: 16px;

      font-weight: 600;

      line-height: 1;

           padding:18px 35px;
           
  background: linear-gradient(var(--background-color11));

        border-radius: 24px 0px 25px 0px;

   border: 1px solid var(--color400);

      cursor: pointer;

      margin-top: 20px;

      transition: all 0.3s ease;

}

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o button:hover {
    background:var(--background-color3);
    color: var(--color400);
      transform: translateY(-3px);
      border: 1px solid var(--color400);

}

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o button i{

  transform: rotate(36deg);
  color: var(--color2);

}
.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o button:hover i{
color: var(--color400);
}
.span-sub{

    font-size: 13px;

    margin: 0;

    padding: 0;

}

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o  span{

    color: var(--para-color);
    font-size: 18px;

}

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o  i{

      color: var(--color1);

    font-size:22px;

    margin-left: 5px;

    transform: rotate(-40deg);

}

.on-class-sardar .on-class-sardar-first .on-class-sardar-first-o  h2{

    font-size: 32px;

    /* margin: 10px; */
    color: var(--color44);
    font-family: var(--font-family1);
    font-weight: bold;

}

.logo{

  height: 50px;

  width: 50px;

  /* overflow: hidden; */

}

.logo img{

  width: 100%;

  height: 100%;  transition: transform 500ms;

    transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);

    transform-origin: center center;

}

.on-class-sardar-sec1:hover img{

    transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);

}

/* span{

    color: rgb(107, 107, 107);

} */

.on-class-sardar-sec222 .on-class-sardar-sec2 .on-class-sardar-sec22 h4{

    font-family:var(--font-family1);

}

.on-class-sardar-sec3  .on-class-sardar-sec22 h4{

     font-family: var(--font-family1);

}

@media(max-width: 1024px){

    .on-class-sardar-sec{

        margin-top: 50px;

    }

}

@media(max-width: 984px) {

    .on-class-sardar{

  display: grid;

gap: 30px;



    }

   .on-class-sardar .on-class-sardar-sec{

    width: 100%;

   }

  .on-class-sardar .on-class-sardar-first{

    width: 100%;

  }

  /* .on-class-sardar .on-class-sardar-first .on-class-sardar-first-o .btn{

    border: 0;

    height: 15vh;

    width: 25vw;

} */

 .on-class-sardar .on-class-sardar-first .on-class-sardar-first-o{

width: 80%;

 }

}

@media(max-width: 517px) {

    .on-class-sardar{

        width: 100%;

      

    }

.on-class-sardar-first{

  /* background-color: aqua; */

  height: 100%;

  width: 100%;

}

.on-class-sardar-sec{

 display: grid;

 width: 100%;

 /* align-items: center;

 justify-content: center; */

 padding-left: 51px;

 

}

.on-class-sardar-sec1{

    width: 90%;

    /* margin-left: 50px; */

}

.on-class-sardar-sec2{

     width: 90%;

    /* margin-left: 50px; */

    margin-left: -3px;

margin-top: -95px;

}

.on-class-sardar-sec3{

     width: 90%;

    /* margin-left: 50px; */

      margin-left: -3px;

}

}

@media(max-width: 425px){

    .on-class-sardar-sec111{

        margin-left: -20px;

    }

    .on-class-sardar-sec222{

       /* background-color: aqua; */

       margin-left: -20px;

    }

    

}