:root {
  --bg-primary:white;
  --text-primary:black;
}
.bg-primary {
  background:var(--bg-primary)
}
.text-primary {
  color:var(--text-primary);
}
.text-variant {
  color:var(--text-primary);
}
.primaryColorBG {
  background:var(--bg-primary)
}
.primaryColorFG {
  background:var(--text-primary)
}
@media screen and (max-width: 1024px) {
      .responsiveOrder {
          order:1;
      }

}  
.image-container {
  position: relative;
  --bg-image: none;
  --bg-opacity: 1;
}
.image-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--bg-opacity);
  z-index: 0;
}
.image-container > .bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
}
.image-container > .content {
  position: relative;
  z-index: 20;
}
.contactInput {
  padding: .5rem;
  border: 1px solid lightgray;
  border-radius: 0.5rem;
  background-color: unset;
}
.contactForm {
  order: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
  gap: 1rem;
}
.half {
  width: 50%;
  min-width: 0px;
}
textarea {
  padding: 1rem;
  border: 0;
  background-color: rgb(226 232 240);
  border-radius: 1rem;
  box-sizing: border-box;
  resize: none;
}
@media screen and (max-width: 768px) {

  .responsiveDevices {
    display:none;
  }
}

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 1.125rem;   /* ~18px */
  line-height: 1.333;     /* ~24px / 18px */
  color: #ffffff;
  background-color: #ff5a00;
  border: none;
  border-radius: 0.375rem; /* ~6px */
  padding: 0.75rem 1.5rem;  /* ~12px top/bottom, ~24px left/right */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn:hover {
  background-color: #ff4700;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* Spinner.css */

.spinner-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.03);
}

.spinner-container--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  display: flex;
}

.spinner-circle {
  box-sizing: border-box;
  border-radius: 999px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: rgba(0, 0, 0, 0.6);
  animation: spinner-rotate 0.8s linear infinite;
}

.spinner-message {
  margin: 0;
  font-size: 0.875rem;
  color: #333;
  text-align: center;
}

/* Simple spin animation */
@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

:root{
    /* Theme variables - change these to customize */
    --bg: #0f172a;
    --btn-bg: linear-gradient(180deg,#0ea5a4 0%, #028b8a 100%);
    --btn-ink: #fff;
    --btn-accent: rgba(14,165,164,0.22);
    --shadow: 0 6px 18px rgba(2, 139, 138, 0.18);
    --glass: rgba(255,255,255,0.06);
    --size: 48px;
    --radius: 12px;
  } /* The button */
  .config-btn{
    --pad: 12px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: calc(var(--pad) * 0.5) calc(var(--pad) * 1.1);
    height: var(--size);
    border-radius: var(--radius);
    background: var(--btn-bg);
    color: var(--btn-ink);
    box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.03) inset;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    line-height:1;
    letter-spacing: 0.01em;
    transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s, filter .18s;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
  }

  .config-btn .gear {
    width:20px;
    height:20px;
    flex: 0 0 20px;
    display:inline-block;
    transform-origin:center;
    transition: transform .25s ease;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
  }

  /* subtle breathing glow to attract attention (not too aggressive) */
  .config-btn.attention::after{
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: calc(var(--radius) + 6px);
    background: radial-gradient(50% 50% at 50% 50%, var(--btn-accent), transparent 35%);
    opacity: 0.9;
    filter: blur(10px);
    z-index: -1;
    animation: pulse 2.8s infinite;
    pointer-events:none;
  }

  @keyframes pulse{
    0% { transform: scale(.98); opacity: .7; }
    50% { transform: scale(1.05); opacity: .35; }
    100% { transform: scale(.98); opacity: .7; }
  }

  /* hover and active feedback */
  .config-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(2,139,138,0.18);
    filter: saturate(1.05);
  }
  .config-btn:active{
    transform: translateY(-1px) scale(.995);
  }

  /* rotate gear slightly on hover for affordance */
  .config-btn:hover .gear{ transform: rotate(18deg); }

  /* focus-visible for keyboard users */
  .config-btn:focus-visible{
    outline: 3px solid rgba(14,165,164,0.18);
    outline-offset: 4px;
    box-shadow: 0 8px 22px rgba(2,139,138,0.18);
  }

  /* small & large variants */
  .config-btn.small{ --size: 36px; font-size:13px; padding:6px 10px; border-radius:10px; }
  .config-btn.large{ --size:56px; font-size:15px; padding:14px 16px; border-radius:14px; }

  /* accessible reduced motion preference */
  @media (prefers-reduced-motion: reduce){
    .config-btn, .config-btn.attention::after, .config-btn .gear { transition: none !important; animation: none !important; }
  }

  /* subtle label visually hidden for icon-only variant */
  .visually-hidden{
    position:absolute !important;
    height:1px; width:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
    white-space:nowrap;
  }