/* ===== GLOBAL BUTTON STYLES ===== */
.btn-primary {
  display: flex;                     
  justify-content: center;           
  align-items: center;               
  padding: 12px 24px;    
  background: var(--accent);
  color: var(--btn-text);
  font-size: var(--fs-body-sm);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--btn-r-sm);
  cursor: pointer;
  transition: all .6s ease; /* Added transition */

  max-width: 300px;
  width: 100%;
}
.btn-primary:hover {
  box-shadow: 0 12px 36px 0 rgba(253, 198, 50, 0.16);
}
.btn-primary:active {
  box-shadow: 0 12px 36px 0 rgba(253, 198, 50, 0.16);
}


.btn-secondary {
  display: flex;                     
  justify-content: center;           
  align-items: center;               
  padding: 12px 24px;    
  background: var(--accent-transparent-bg);
  color: var(--accent);
  font-size: var(--fs-body-sm);
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--btn-r-sm);
  cursor: pointer;
  transition: all .6s ease; /* Added transition */

  max-width: 300px;
  width: 100%;
}
.btn-secondary:hover {
  background: var(--accent);
  color: var(--btn-text);
}
.btn-secondary:active {
  background: var(--accent);
  color: var(--btn-text);
}


/* ===== ICON BUTTON SECONDARY ===== */
.btn-icon-secondary {
  display: flex;                     
  justify-content: center;           
  align-items: center;               
  width: 48px;   
  height: 48px;
  background: #191A1B;
  color: var(--accent);
  border-radius: var(--btn-r-sm);
  cursor: pointer;
  transition: all .6s ease; /* Added transition */
}



.btn-icon-secondary:hover {
  background: var(--accent);
  color: var(--btn-text);
}



.btn-icon-secondary svg {
  fill: currentColor;
}

@media (max-width: 1200px) {
    .btn-primary,
    .btn-secondary {
        /* This centers the 300px block within its parent */
        margin: 0 auto;
    }

    .btn-icon-secondary:active {
  background: var(--accent);
  color: var(--btn-text);
}
}


@media (max-width: 767px) {
    .btn-primary,
    .btn-secondary {
        /* On mobile, remove max-width constraint and ensure it takes up 100% of the available space */
        max-width: none;
        width: 100%;
        padding: 12px 16px;
    }
}