.banner{
   width: 85%;
    height: 280px;
    background-color:rgba(31, 120, 241, 1);
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}

.android-div{
   
    height: 280px;
    background-color: grey;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background-color: rgba(160, 166, 184, 0.98);
    background-image: linear-gradient(to right,rgba(255, 255, 255, 1), rgba(238, 241, 249, 1));
    border:0.5px solid rgba(160, 166, 184, 0.98) !important;
    cursor: pointer;
}

.ios-div{

    height: 280px;
    background-color: grey;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background-color: rgba(160, 166, 184, 0.98);
    background-image: linear-gradient(to right,rgba(255, 255, 255, 1), rgba(238, 241, 249, 1));
    border: 0.5px solid rgba(160, 166, 184, 0.98) !important;
    cursor: pointer;
}

nav{

    height: 120px;
    border-bottom: rgba(0, 0, 0, 0.12);
background-color: white;

}

.logobrand{
    width: 214px;
height: 38.51px;
top: 41px;
left: 60px

}

.banner-txt{
   
font-size: 3.875em;
font-weight: 500;
line-height: 106px;
letter-spacing: 0px;
text-align: left;
color: white;
}

.doctor-hand{

    
height: 280px;
margin-top: -270px;
margin-right: -90px;


}

.banner-btn{
    width: 14.000em;
height: 54px;
font-size: 1.375em;
border-radius: 10px;
background-color: rgba(255, 255, 255, 1);
color: rgba(15, 95, 203, 1);

}

.android-font{
    font-size: 2.625em;
    font-weight: 500;
}


.ios-font{
    font-size: 2.625em;
    font-weight: 500;
}

.android-para{
    font-size: 1.500em;
    font-weight: 200;
}

.ios-para{
    font-size: 1.500em;
    font-weight: 200;
}

@media only screen and (max-width: 1200px) {
    .hand{
      display:none;
    }.banner-txt{
        font-size: 2.500em;
     
    }.ios-para{
        font-size: 1.1000em;;
    }.android-para{
        font-size: 1.1000em;;
    }
  }

  @media only screen and (max-width: 510px) {
    .banner{
     width: 96%;

   
       
    }.banner-txt{
        margin-top: 17px !important;
        font-size: 42px;
        line-height: 75px;
    }.banner-btn{
        margin-top: 10px !important;
    }.App-Guide-Block{
      width: 100% !important ;
     
    }
  }



  @media only screen and (max-width: 991px) {
    .ios-para{
        font-size: 14px;
    }.android-para{
        font-size: 14px;
    }.logobrand{
        height: 1.063em;
    }
  }

 


 


  @media only screen and (max-width: 567px) {
   .App-Guide-Block{
    height: 568px !important;
   }.step-y{
    display:none!important
   }.step-1-para{
    width: 100% !important;
    /* margin: 10px !important; */
    padding-left: 10px !important;
   margin-left: 15px;
   margin-top: 45px !important;
   /* border: 2px solid black; */

line-height: 25px !important;
   
   }.guiderow{
    display: inline !important;
   }.kilores{
    margin-top: 40px !important;
   }
  }

  @media only screen and (max-width: 1400px) {
    .step-1-para{
 font-size: 1.125em !important;
    }
   }
 
   @media only screen and (max-width: 577px) {
     
    #iosandroid{
      margin-left: 1px !important;
      width:99.3%
    }
   }

   @media only screen and (max-width: 767px) {
    .step-y{
          display: none;
 
    }.logincrad{
      margin-top: 50px !important;
      /* margin-right: -120px !important; */
    }.step-1-para{
      margin-top: 30px;
      font-size: 20px !important;
      padding: 0 22px 0 0 !important;
      width: 100% !important;
      
    }.App-Guide-Block{
      height: 558px !important;
    }.reportcred{
      margin-top: 50px !important;
  
    }.appguide{
      margin-right:-210px !important
    }.reslogin{
      display:block !important;
      text-align: center;

      

    }.login-screen{

        display: none !important
    }.logincrad{
      margin-right: 0px !important;
    }
   
   }

   @media only screen and (min-width: 1200px){
    .step-1-para{
     
    width: 50% ;
          }
   }
   @media only screen and (max-width: 1200px) {
    .step-1-para{
font-size: 14px !important;

    }
   }

   @media screen and (min-width: 767px) and (max-width: 1200px) {
    .step-1-para{
      width: 50% !important;
      text-align: justify;
   
    }
  }

  .hand{
    margin-right: 120px;
  }

  .largestar{
   
    height: 86px;
    margin-top: -190px
    
  }

  .mediumstar{
   
    height: 86px;
    margin-top: -190px;
    margin-top: -90px;

    margin-right:130px
    
  }
  .littlestar{
   
    height: 86px;
    margin-top: -290px;

    margin-right:230px
    
  }

  .forborder{
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);

  }

  .btn-txt{
    margin-left: 55px;
  }

  .appguide{
    font-size: 1.500em;
    font-weight: 600;
   
  }

  .App-Guide-Block{
    border-radius: 20px;
    width: 89%;
    height: 340px;

  background-color:rgba(31, 120, 241, 1); ;
  }



.backglance{
  height: 342px;
  margin-top: -261px;
  border: #A0A6B8FA;

  border-radius: 20px;


}
.Step-1{
  font-size: 2.125em;
  color: #F7F7F7;
  font-weight: 700;
  Font:Readex Pro
}
.step-y{
  margin-top:74px
}
.stephorizontalline{
  border: 1px solid white;
  width: 115px;
margin-top:-10px
}
.step-1-para{
  font-size: 1.500em;
  color: white;
  font-weight: 300;
  width: 70%;
  
}


/* Add the following CSS for animation */
.App-Guide-Block {

  position: relative; /* Add position relative */
}

/* Apply animation to all slides */
.App-Guide-Block img {
  animation: slideInOut 1s; /* Change duration as needed */
}

/* Initial state for all slides */
.App-Guide-Block img {
  transform: translateX(100%); /* Move slides to the right initially */
}

/* Display the first slide */
.App-Guide-Block img:first-child {
  transform: translateX(0); /* Move the first slide to its position */
}

/* Add styles for the active slide */
.App-Guide-Block.active img {
  transform: translateX(1); /* Move active slide to its position */
}

@keyframes slideInOut {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}


.dot {
  height: 9px;
 margin: -30px 4px 30px 0 !important;
  width: 9px;
  margin: 0 5px;
  background-color:#a0bce2;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active-dot {
  background-color:#2073E5;
  height: 12px;
  width: 12px;
}


.absoulte{
  margin-top:-48px
}



 .reportcred{
  height: 403px;
  margin-top: -310px;
margin-right: 90px !important;

}  
 


.logincrad{
  height: 403px;
  margin-top: -350px;

  margin-right: 85px !important;


 
}

.logincrad1{
  height: 403px;
  margin-top: 15px;




 
}

.skystar{
  width: 110px !important;
  height: 110px !important;
  margin-top: -290px !important;
  

}

.skystar2{
  width: 70px !important;
  height: 70px !important;
 margin-right: 300px;
    margin-top: -270px !important;
    
  
  }

  .skystar3{
    width: 60px !important;
    height: 60px !important;
   margin-right: 4px;
      margin-top: -270px !important;
      
    
    }
  


    .wrapper{
      overflow-x: hidden;
      
    }

  .logofinal{
  height: 76px;
  margin-top: -15px;
  }

  .reslogin{
    display: none;

  }