/*========================================================*/
/*=======================RESUME===========================*/
/*========================================================*/   
   
.action-buttons {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 1rem;
                  margin-top: 3rem;
                  justify-content: center;
                }

                .action-btn {
                  display: inline-flex;
                  align-items: center;
                  gap: 0.5rem;
                  font-size: 1rem;
                  font-weight: 600;
                  padding: 0.75rem 1.5rem;
                  border-radius: 0.75rem;
                  text-decoration: none;
                  transition: all 0.3s ease;
                }

                .action-btn i {
                  font-size: 1.2rem;
                }

                /* Filled button style */
                .action-btn.filled {
                  background-color: var(--accent-color);
                  color: #fff;
                  border: none;
                }

                .action-btn.filled:hover {
                  background-color: color-mix(in srgb, var(--accent-color), black 10%);
                }

                /* Outlined button style */
                .action-btn.outlined {
                  border: 2px solid var(--accent-color);
                  color: var(--accent-color);
                  background-color: transparent;
                }

                .action-btn.outlined:hover {
                  background-color: var(--accent-color);
                  color: #fff;
                }
                                .info-stats {
                  display: flex;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  gap: 2rem;
                  margin-bottom: 2.5rem;
                  padding: 2rem;
                  background-color: var(--surface-color);
                  border-radius: 1.5rem;
                  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
                }

                .info-stat {
                  flex: 1;
                  min-width: 180px;
                  text-align: center;
                }

                .info-number {
                  font-size: 2rem;
                  font-weight: 700;
                  color: var(--accent-color);
                  margin-bottom: 0.5rem;
                  display: block;
                }

                .info-label {
                  font-size: 0.875rem;
                  font-weight: 500;
                  color: color-mix(in srgb, var(--default-color), transparent 40%);
                }

                @media (max-width: 768px) {
                  .info-stats {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 1.5rem;
                  }
                }

/*========================================================*/
/*========================TILT============================*/
/*========================================================*/

                    .tilted-card {
                      width: 100%;
                      height: 100%;
                      perspective: 800px;
                      margin: 2rem auto;
                      z-index: 10;
                    }

                    .tilted-inner {
                      width: 100%;
                      height: 100%;
                      transform-style: preserve-3d;
                      transition: transform 0.5s ease-out;
                      border-radius: 15px;
                      position: relative;
                    }

                    .tilted-image-wrapper {
                      background-color: #1E1E1E;
                      padding: 10px;
                      border-radius: 20px;
                      width: 100%;
                      height: 100%;
                      box-sizing: border-box;
                    }

                    .tilted-card-img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                      border-radius: 15px;
                      display: block;
                      position: relative;
                      bottom: -10px;
                    }

                    .tilted-card-caption {
                      position: absolute;
                      bottom: 10px;
                      left: 0;
                      width: 100%;
                      text-align: center;
                      color: white;
                      font-weight: bold;
                      font-size: 16px;
                      background: rgba(0, 0, 0, 0.5);
                      padding: 6px;
                      border-bottom-left-radius: 15px;
                      border-bottom-right-radius: 15px;
                      transform: translateZ(30px);
                    }

                    #tiltOverlay {
                      pointer-events: auto;
                    }

                    #tiltOverlay::before {
                      content: '';
                      position: absolute;
                      inset: 0;
                      pointer-events: none;
                      /* This ensures children don't block clicks */
                    }

/*========================================================*/
/*========================ALERT===========================*/
/*========================================================*/
                    .form-alert {
                      position: fixed;
                      top: 20%;
                      left: 50%;
                      transform: translate(-50%, -20px);
                      background-color: white;
                      padding: 1rem 1.5rem;
                      border-radius: 8px;
                      font-size: 1rem;
                      font-weight: 500;
                      z-index: 9999;
                      max-width: 90%;
                      width: auto;
                      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                      opacity: 0;
                      pointer-events: none;
                      transition: opacity 0.4s ease, transform 0.4s ease;
                    }

                    .form-alert.success {
                      background-color: #d1f7c4;
                      color: #27632a;
                      border: 1px solid #88e28c;
                    }

                    .form-alert.error {
                      background-color: #fde2e2;
                      color: #8a1f1f;
                      border: 1px solid #f5a5a5;
                    }

                    .form-alert.show {
                      opacity: 1;
                      transform: translate(-50%, 0);
                      pointer-events: auto;
                    }

/*========================================================*/
/*=======================LOADER===========================*/
/*========================================================*/
.loader-container {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #ccc;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/*========================================================*/
/*=====================COLOR PICKER=======================*/
/*========================================================*/
.color-picker-wrapper{
  position: fixed;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  z-index: 999999;
}
.color-picker {
  position: relative;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 50px;
  box-sizing: border-box;
  border-radius: 0px 20px 20px 0px;
  background-color: red;
  cursor: pointer;
  z-index: 999999;
}

.color-picker .color-picker-toggle{
  position:relative;
  left: auto;
  top: 50%;
  align-items: center;
  justify-content: center;
}