/* CSS Reset */
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* SPA Transition Cloak */
#app {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
}

#app.loading {
    opacity: 0;
    visibility: hidden;
    transition: none; /* Instant hide when switching */
}

/* CSS Variables */
:root {
    /* Colors */
    --color-primary: #b38b59;   /* gold */
    --color-primary-dark: #a2763c; /*dark gold*/ 
    --color-dark: #1a1a1a;
    --color-light: #ffffff;
    --color-muted: #777777;
    --color-background-2: #f8eddb;
    --color-background-testimonials: #fefdfa;
    --color-testimonials-border: #eedfc7;
    
    /* Gradients */
    --accent-color: linear-gradient(to right, #D4AF73 70%, #bb9a66 90%);
    --btn-gradient: linear-gradient(90deg, #eec784, #CEAA6C);
    
    /* Backgrounds */
    --bg-dark: #0f0f0f;
    --bg-light: #ffffff;
    
    /* Typography */
    --font-primary: "Poppins", sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-footer-heading: 'Libre Baskerville', serif;
    
    /* Spacing & Layout */
    --container-width: 1280px;
    --section-padding: 4rem 20px; /* Added 20px horizontal padding for mobile */
}


/* Base Styles */
html {
  scroll-behavior: smooth;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

body {
  font-family: var(--font-primary);
  color: var(--color-dark);
  background-color: var(--bg-light);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

button, a {
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-primary);
}
#callBtn{
  z-index: 100;
}
@media (min-width:960px){
  #callBtn{
    display: none;
  }
}