/* Basic Button Styling */
.circled-button {
    background-color: transparent; /* No background by default */
    color: #165C7D; /* Text color in non-clicked state */
    border: 1px solid transparent; /* No border initially */
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 50%; /* Rounded corners */
    cursor: pointer;
    transition: all 0.6s ease; /* Smooth transition for states */
  }
  
  /* Clicked State */
  .circled-button.clicked {
    background-color: #165C7D; /* Background color when clicked */
    color: white; /* Text color when clicked */
    border-radius: 50%; /* Keep the 50% border radius */
  }
  
  /* Hover State */
  .circled-button:hover {
    color: #165C7D; /* Text color on hover */
    border: 1px solid #165C7D; /* Border color on hover */
  }


  /* Basic Button Styling */
.circled-light-button {
  background-color: transparent; /* No background by default */
  color: #F0E6D2; /* Text color in non-clicked state */
  border: 1px solid transparent; /* No border initially */
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 50%; /* Rounded corners */
  cursor: pointer;
  transition: all 0.6s ease; /* Smooth transition for states */
}

/* Clicked State */
.circled-light-button.clicked {
  background-color: #F0E6D2; /* Background color when clicked */
  color: #165C7D; /* Text color when clicked */
  border-radius: 50%; /* Keep the 50% border radius */
}

/* Hover State */
.circled-light-button:hover {
  color: #fff; /* Text color on hover */
  border: 1px solid #Fff; /* Border color on hover */
}

/* Style for both the custom-prev and custom-next buttons */
.custom-prev, .custom-next svg circle {
  transition: all 0.3s ease; /* Smooth transition for the color change */
}

/* On hover for the custom-prev button */
.custom-prev:hover svg circle {
  fill: #165C7D; /* Change fill color to the new one on hover */
  stroke: #165C7D; /* Change stroke color to match the fill */
}

.custom-prev:hover svg path {
  fill: white; /* Change the arrow path color to white on hover */
}

/* On hover for the custom-next button */
.custom-next:hover svg circle {
  fill: #165C7D; /* Change fill color to the new one on hover */
  stroke: #165C7D; /* Change stroke color to match the fill */
}

.custom-next:hover svg path {
  fill: white; /* Change the arrow path color to white on hover */
}