.clickable-container {
  position: relative;
  cursor: default;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  border-radius: 12px; /* rounded corners */
  overflow: hidden; /* keeps inner content inside rounded edges */
}

/* Hover effect */
.clickable-container:hover {
  transform: translateY(-4px);
  border: 1px solid #FCCA73;
}

/* Optional smooth inner transitions */
.clickable-container > * {
  transition: all 0.3s ease;
}


/* =====================
   TEXT COLORS
===================== */
.custom-text-1,
.custom-text-1 *,
.custom-text-1 h1,
.custom-text-1 h2,
.custom-text-1 h3,
.custom-text-1 h4,
.custom-text-1 p,
.custom-text-1 span {
  color: var(--color-primary) !important;
}

.custom-text-2,
.custom-text-2 *,
.custom-text-2 h1,
.custom-text-2 h2,
.custom-text-2 h3,
.custom-text-2 h4,
.custom-text-2 p,
.custom-text-2 span {
  color: var(--color-contrast-higher) !important;
}

.custom-text-3,
.custom-text-3 *,
.custom-text-3 h1,
.custom-text-3 h2,
.custom-text-3 h3,
.custom-text-3 h4,
.custom-text-3 p,
.custom-text-3 span {
  color: var(--color-contrast-medium) !important;
}

.custom-text-4,
.custom-text-4 *,
.custom-text-4 h1,
.custom-text-4 h2,
.custom-text-4 h3,
.custom-text-4 h4,
.custom-text-4 p,
.custom-text-4 span {
  color: var(--color-contrast-low) !important;
}

.custom-text-5,
.custom-text-5 *,
.custom-text-5 h1,
.custom-text-5 h2,
.custom-text-5 h3,
.custom-text-5 h4,
.custom-text-5 p,
.custom-text-5 span {
  color: var(--color-contrast-lower) !important;
}

.custom-text-6,
.custom-text-6 *,
.custom-text-6 h1,
.custom-text-6 h2,
.custom-text-6 h3,
.custom-text-6 h4,
.custom-text-6 p,
.custom-text-6 span {
  color: var(--color-bg) !important;
}

/* =====================
   BACKGROUND COLORS
===================== */
.custom-bg-1 {
  background-color: var(--color-primary) !important;
}

.custom-bg-2 {
  background-color: var(--color-contrast-higher) !important;
}

.custom-bg-3 {
  background-color: var(--color-contrast-medium) !important;
}

.custom-bg-4 {
  background-color: var(--color-contrast-low) !important;
}

.custom-bg-5 {
  background-color: var(--color-contrast-lower) !important;
}

.custom-bg-6 {
  background-color: var(--color-bg) !important;
}

/* =====================
   BORDER COLORS
===================== */
.custom-border-1 {
  border: 1px solid var(--color-primary) !important;
}

.custom-border-2 {
  border: 1px solid var(--color-contrast-higher) !important;
}

.custom-border-3 {
  border: 1px solid var(--color-contrast-medium) !important;
}

.custom-border-4 {
  border: 1px solid var(--color-contrast-low) !important;
}

.custom-border-5 {
  border: 1px solid var(--color-contrast-lower) !important;
}

.custom-border-6 {
  border: 1px solid var(--color-bg) !important;
}




/* =====================
   HOVER BORDER COLORS
===================== */
.custom-hover-border-1 {
  transition: border-color 0.3s ease !important;
}
.custom-hover-border-1:hover {
  border: 1px solid var(--color-primary) !important;
}

.custom-hover-border-2 {
  transition: border-color 0.3s ease !important;
}
.custom-hover-border-2:hover {
  border: 1px solid var(--color-contrast-higher) !important;
}

.custom-hover-border-3 {
  transition: border-color 0.3s ease !important;
}
.custom-hover-border-3:hover {
  border: 1px solid var(--color-contrast-medium) !important;
}

.custom-hover-border-4 {
  transition: border-color 0.3s ease !important;
}
.custom-hover-border-4:hover {
  border: 1px solid var(--color-contrast-low) !important;
}

.custom-hover-border-5 {
  transition: border-color 0.3s ease !important;
}
.custom-hover-border-5:hover {
  border: 1px solid var(--color-contrast-lower) !important;
}

.custom-hover-border-6 {
  transition: border-color 0.3s ease !important;
}
.custom-hover-border-6:hover {
  border: 1px solid var(--color-bg) !important;
}

/* =====================
   HOVER FILL/BG COLORS
===================== */
.custom-hover-fill-1 {
  transition: background-color 0.3s ease !important;
}
.custom-hover-fill-1:hover {
  background-color: var(--color-primary) !important;
}

.custom-hover-fill-2 {
  transition: background-color 0.3s ease !important;
}
.custom-hover-fill-2:hover {
  background-color: var(--color-contrast-higher) !important;
}

.custom-hover-fill-3 {
  transition: background-color 0.3s ease !important;
}
.custom-hover-fill-3:hover {
  background-color: var(--color-contrast-medium) !important;
}

.custom-hover-fill-4 {
  transition: background-color 0.3s ease !important;
}
.custom-hover-fill-4:hover {
  background-color: var(--color-contrast-low) !important;
}

.custom-hover-fill-5 {
  transition: background-color 0.3s ease !important;
}
.custom-hover-fill-5:hover {
  background-color: var(--color-contrast-lower) !important;
}

.custom-hover-fill-6 {
  transition: background-color 0.3s ease !important;
}
.custom-hover-fill-6:hover {
  background-color: var(--color-bg) !important;
}

/* =====================
   HOVER TEXT COLORS
===================== */
.custom-hover-text-1,
.custom-hover-text-1 * {
  transition: color 0.3s ease !important;
}
.custom-hover-text-1:hover,
.custom-hover-text-1:hover * {
  color: var(--color-primary) !important;
}

.custom-hover-text-2,
.custom-hover-text-2 * {
  transition: color 0.3s ease !important;
}
.custom-hover-text-2:hover,
.custom-hover-text-2:hover * {
  color: var(--color-contrast-higher) !important;
}

.custom-hover-text-3,
.custom-hover-text-3 * {
  transition: color 0.3s ease !important;
}
.custom-hover-text-3:hover,
.custom-hover-text-3:hover * {
  color: var(--color-contrast-medium) !important;
}

.custom-hover-text-4,
.custom-hover-text-4 * {
  transition: color 0.3s ease !important;
}
.custom-hover-text-4:hover,
.custom-hover-text-4:hover * {
  color: var(--color-contrast-low) !important;
}

.custom-hover-text-5,
.custom-hover-text-5 * {
  transition: color 0.3s ease !important;
}
.custom-hover-text-5:hover,
.custom-hover-text-5:hover * {
  color: var(--color-contrast-lower) !important;
}

.custom-hover-text-6,
.custom-hover-text-6 * {
  transition: color 0.3s ease !important;
}
.custom-hover-text-6:hover,
.custom-hover-text-6:hover * {
  color: var(--color-bg) !important;
}

/* Desktop */
.frm_submit {
    text-align: left;
}

/* Tablet & Mobile */
@media (max-width: 1024px) {
    .frm_submit {
        text-align: center;
    }
}