section {
    width: 100%;
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  h1 {
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: darkslateblue;
  }

  a {
    text-decoration: none;
    color: darkslateblue;
    display: flex;
    align-items: center;
  }

  a:hover .arrow {
    transform: translatex(3px);
    transition: 300ms ease-out;
    scale: 1.1;
  }

  .tile {
    text-align: center;
    width: 80px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
    .tile1:checked{
        scale: 1.02;
        transition: 200ms ease;
        background: #ebf9f5 !important;
    }
  .tile1 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile1:hover {
    scale: 1.02;
    transition: 200ms ease;

  }
  .tile1:checked{
    scale: 1.02;
    transition: 200ms ease;
    box-shadow: 1px 10px 25px rgba(0,0,0,.15);
    background: #ebf9f5 !important;
}

  .tile2 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile2:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  .tile3 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile3:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  .tile4 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile4:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  .tile5 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile5:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  .tile6 {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile6:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  .tile7 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile7:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  .tile8 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile8:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  .tile9 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile9:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  .tile10 {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile10:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

    .tile11 {
    text-align: center;
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile11:hover {
    scale: 1.02;
    transition: 200ms ease;

  }


  .tile12 {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile12:hover {
    scale: 1.02;
    transition: 200ms ease;

  }


  .tile-full {
    outline: 1px solid #f2f2f2;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 1px 10px 20px rgba(0,0,0,.1);
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
  }
  .tile-full:hover {
    scale: 1.02;
    transition: 200ms ease;
    background: #ebf9f5 !important;

  }

  .checkbox-title {
    font-size: 15px;
    font-weight: 300;
    color: #707070;
    direction: rtl;
    font-family: iranYekan;

  }
  .input-title {
    font-size: 14px;
    font-weight: 300;
    direction: rtl;
  }
  label {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 1px 10px 20px rgba(0,0,0,.1);
    border-radius: 8px;
    opacity: 0.9;
    transition: 200ms ease-out;
    padding: 8px;
    padding-right: 0;
    padding-left: 0;
  }

  input {
    position: absolute;
    top: 8px;
    left: 8px;
    cursor: pointer;
  }

  input[type=radio]:checked + label{
    border: 3px solid #d7bd9b;
    background: #c9af8da6;
    color: #000 !important;
  }
  input[type=checkbox]:checked + label{
    border: 3px solid #57c0cc;
    background: #8bdee7bf;
    color: #000 !important;
  }
  input[type="radio"],input[type="checkbox"] {
    display: none;
  }

  .tile:hover {
    scale: 1.02;
    transition: 200ms ease;

  }

  h2 {
    color: #333;
    font-size: 15px;
  }

  svg {
    fill: #333;
  }

  .selected {
    /*outline: 1px solid #e9e9e9;*/
    opacity: 1;
    /*background: #ebf9f5 !important;*/
  }

  .selected h2 {
    font-weight: medium;
    font-size: 17px;
  }

  .selected svg {
    fill: darkslateblue;
  }