/* white you custom css code here. only css code will work */
/* Scroll bar customization */
::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
background-color: #353535;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, rgba(96, 121, 243, 0), #FF6600); /* Set the gradient colors */
border-radius: 5px; /* Add rounded corners */
}

/*Start of whatsapp styling*/
    .whatsapp-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background-color: #25D366;
  color: #fff;
  padding: 10px 16px;
  border-radius: 30px;
  font-weight: 600;
  font-family: sans-serif;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 999;
  transition: all 0.3s ease;
}

.whatsapp-float img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.whatsapp-float:hover {
  background-color: #1ebd5a;
}

/*End of whatsapp stying*/

:root {
      --size: 30px;
      --color-bg: transparent;
      --color-border: black;
      --color-arrow: #F92806;
      --color-shadow: transparent;
    }

    #backToTop {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      background: var(--color-bg);
      border: 0px solid var(--color-border);
      box-shadow: 0 4px 8px var(--color-shadow);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, transform 0.3s;
    }

    #backToTop svg {
      position: absolute;
      transform: rotate(-90deg);
    }

    #backToTop .progress-ring__circle {
      stroke: var(--color-border);
      stroke-width: 2;
      fill: transparent;
    }

    #backToTop .arrow {
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 12px solid var(--color-arrow);
      z-index: 1;
    }

    #backToTop.show {
      opacity: 1;
      visibility: visible;
    }

    @media (max-width: 600px) {
      #backToTop {
        width: 30px;
        height: 30px;
      }
    }