/* Custom Jewelry Styles: gold, white, black, red, green, blue theme from logo */
/* Responsive global box-sizing for all elements */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Make all images responsive */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
:root {
  --gold: #d4af37;
  --deep-gold: #bfa13a;
  --black: #181818;
  --white: #fff;
  --logo-red: #b71c1c;
  --logo-green: #388e3c;
  --logo-blue: #1976d2;
}

body {
  background: linear-gradient(135deg, var(--white) 0%, var(--gold) 100%);
  color: var(--black);
  font-family: 'Segoe UI', Arial, sans-serif;
}

.navbar, .footer {
  background: linear-gradient(90deg, var(--black) 60%, var(--logo-blue) 100%) !important;
  color: #fff;
}

.gold {
  color: var(--gold) !important;
}

.btn-gold {
  background: linear-gradient(90deg, var(--gold), var(--deep-gold));
  color: var(--white);
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(212,175,55,0.15);
  transition: background 0.3s, color 0.3s;
}
.btn-gold:hover, .btn-gold:focus {
  background: linear-gradient(90deg, var(--logo-red), var(--logo-green));
  color: var(--white);
}

.navbar-brand span, .navbar-brand i {
  color: var(--gold) !important;
}

.nav-link.active, .nav-link:focus, .nav-link:hover {
  color: var(--logo-red) !important;
  text-shadow: 0 1px 4px var(--gold);
}

.lux-header {
  background: linear-gradient(120deg, var(--white) 60%, var(--logo-green) 100%);
  border-bottom: 4px solid var(--gold);
  box-shadow: 0 2px 12px rgba(212, 175, 55, 0.08);
}

.lux-header .gold {
  color: var(--gold);
}

.lux-header .fa-crown {
  color: var(--gold);
}

.lux-header p {
  color: #222;
  font-size: 1.25rem;
}

/* Section headings */
h2.gold, .gold.text-center {
  color: var(--logo-red) !important;
  text-shadow: 0 2px 8px var(--gold);
}

.card {
  border-radius: 1.2rem;
  border: 1.5px solid var(--gold);
  box-shadow: 0 4px 24px rgba(212,175,55,0.08);
}

.card-title.gold {
  color: var(--logo-blue);
}

footer.footer {
  background: linear-gradient(90deg, var(--black) 70%, var(--logo-red) 100%) !important;
  border-top: 4px solid var(--gold);
}

footer .fa-facebook-f { color: var(--logo-blue); }
footer .fa-instagram { color: var(--logo-red); }
footer .fa-whatsapp { color: var(--logo-green); }

.btn-outline-dark {
  border-color: var(--logo-blue);
  color: var(--logo-blue);
}
.btn-outline-dark:hover {
  background: var(--logo-blue);
  color: var(--white);
}

input.form-control, textarea.form-control {
  border: 1.5px solid var(--logo-blue);
  border-radius: 0.7rem;
}
input.form-control:focus, textarea.form-control:focus {
  border-color: var(--logo-green);
  box-shadow: 0 0 0 0.2rem rgba(56,142,60,0.15);
}

/* Add more color accents from logo to section backgrounds */
section.hero {
  border-bottom: 4px solid var(--logo-blue);
}
section.bg-light {
  background: linear-gradient(120deg, var(--white) 70%, var(--logo-green) 100%);
}
section.bg-black, .newsletter {
  background: linear-gradient(90deg, var(--black) 80%, var(--logo-red) 100%);
}
section.bg-white {
  background: linear-gradient(120deg, var(--white) 80%, var(--gold) 100%);
}

/* Accent lines and details */
hr {
  border-top: 2px solid var(--logo-blue);
}

.border-gold {
  border-color: var(--gold) !important;
}

/* Responsive adjustments for header and hero */
@media (max-width: 991.98px) {
  .lux-header h1 {
    font-size: 2.2rem;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar-nav {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar-collapse {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .lux-header {
    padding: 2rem 0 1.5rem 0;
  }
  .lux-header h1 {
    font-size: 1.5rem;
  }
  .lux-header p {
    font-size: 1rem;
  }
  .hero {
    min-height: 40vh !important;
    padding: 2rem 0;
  }
  .hero h1 {
    font-size: 1.3rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .row {
    flex-direction: column;
    gap: 1.5rem;
  }
  .col-md-4, .col-md-3, .col-md-2 {
    width: 100% !important;
    text-align: center;
  }
  .card {
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 575.98px) {
  .navbar-brand {
    font-size: 1.1rem;
  }
  .lux-header h1 {
    font-size: 1.1rem;
  }
  .lux-header p {
    font-size: 0.95rem;
  }
  .hero h1 {
    font-size: 1rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  .card-title {
    font-size: 1rem;
  }
  .container, .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 767.98px) {
  .card-img-top, .img-fluid {
    max-height: 220px;
    object-fit: cover;
  }
}