.rd {
    border-radius: 5px;
    border: 0;
    border-radius: 5px;
    box-shadow: 1px 2px 5px #666;
    font-size:25px;
    background-color: white;
        /*background-color: cornflowerblue;*/

        text-align: center;
         font-family:'Arabic Typesetting';
   font-size:35px;

 }
 
 .rd:hover {
    border: 0;
    box-shadow: 1px 2px 5px #999;
    background:  linear-gradient(35deg,#9999FF, #9999FF);
    color: rgb(255, 0, 102);
    padding: 5px;
    text-shadow: 0 -3px 3px #9999FF;
 }
 .radio{
  display: flex; 
}

.radio-btn-1 {
  margin-right: 40px;
}

.radio input {
  display: none;
}

.radio-btn-1 input:checked ~ label, .radio-btn-2 input:checked ~ label {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
}

.radio-btn-1 input:checked ~ label::after, .radio-btn-2 input:checked ~ label::after {
  background: var(--primary);
}

.radio-btn-1 label, .radio-btn-2 label {
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}

.radio-btn-1 label:hover::after, .radio-btn-2 label:hover::after {
  background: var(--primary);
}

.radio-btn-1 label::after, .radio-btn-2 label::after {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--greyDark);
  border-radius: 50%;
  transition: 0.3s ease;
}