.button-style {
  background-color: var(--primary-background-color);
  color: var(--primary-text-color);
  font-size: 1.5rem;
  padding: 0.9rem 1.4rem;
  border: none;
  border-radius: 8px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  max-width: 360px;
}
.button-style:visited,
.button-style:focus,
.button-style:active {
    background-color: var(--primary-background-color);;
    color: var(--primary-text-color);
    text-decoration: none;
    outline: none;
}
.button-style:hover, .button-style-hover:hover {
	background-color: var(--primary-btn-background-hover-color);
	color: #f5f5f5;
	backdrop-filter: blur(4px);
	transform: translateY(-4px);
	box-shadow: 0 4px 15px rgba(26, 124, 145, 0.1);
	transition: all 0.2s ease-in-out;
	text-decoration: none;
}

.modal-footer .button-style {
	width: 200px;
}

.button_new_circle {
	background-image: var(--primary-gradient-background);
   width: 35px;
   height: 35px;
   color: #fff;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 12px;
   font-weight: bold;
   margin: -15px 0px 0px 0px;
}

.page-circle-button {
	--size: var(--primary-page-btn-circle-size, 4rem);
    --icon-size: var(--primary-page-btn-icon-size, 2rem);
    --offset: var(--primary-page-btn-offset, 2rem);
    
    display: flex;
    z-index: 99;
    position: fixed;
    width: var(--size);
    height: var(--size);
    border: none;
    border-radius: 50%;
    background: #17455e;
    color: var(--primary-text-color);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-circle-button:hover {
    background: var(--primary-btn-background-hover-color);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.page-circle-button i {
    width: var(--icon-size);
    font-size: var(--icon-size);
}

.page-circle-button svg {
  width: calc(var(--icon-size) * 2);
  height: calc(var(--icon-size) * 2);
  fill: currentColor;
}

@media (max-width: 768px) {
  :root {
    --primary-page-btn-circle-size: 3.8rem;
    --primary-page-btn-icon-size: 1.8rem;
    --primary-page-btn-spacing: 4.6rem;
  }
}