/* Contact form card same gold background as brand */
.animate_top.w-full.nn\/5.vo\/3.vk.sg.hh.sm.yh.tq {
  background-color: #CDA641 !important;   /* gold */
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  color: #fff;
}

/* Labels white & slightly bold */
.animate_top.w-full.nn\/5.vo\/3.vk.sg.hh.sm.yh.tq label {
  color: #fff;
  font-weight: 500;
}

/* Inputs / textarea transparent with white border */
.animate_top.w-full.nn\/5.vo\/3.vk.sg.hh.sm.yh.tq input,
.animate_top.w-full.nn\/5.vo\/3.vk.sg.hh.sm.yh.tq textarea {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: 6px;
}

.animate_top.w-full.nn\/5.vo\/3.vk.sg.hh.sm.yh.tq input::placeholder,
.animate_top.w-full.nn\/5.vo\/3.vk.sg.hh.sm.yh.tq textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Darker gold button */
.animate_top.w-full.nn\/5.vo\/3.vk.sg.hh.sm.yh.tq button {
  background-color: #a88327 !important;  /* darker */
  border: none;
  color: #fff;
  transition: background 0.3s, transform 0.2s;
}

.animate_top.w-full.nn\/5.vo\/3.vk.sg.hh.sm.yh.tq button:hover {
  background-color: #8f721f !important;  /* even darker on hover */
  transform: translateY(-2px);
}

     .link, .xl:hover{
  color: #CDA641 !important;
}

.al:hover{
    color:white !important;
}
/* Base nav tweaks */
.nav-item { position: relative; list-style: none; }
.nav-link, .dropdown-item {
  display: block;
  padding: .55rem .9rem;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}

/* Disabled look */
.dropdown-item.disabled { pointer-events: none; opacity: .5; }

/* Remove default <details> triangle; we’ll draw our own */
.nav-item details > summary {
  display: inline-flex;
  align-items: center;
}
     line-height: 1.2; /* adjust if needed */
}

.nav-item details > summary::-webkit-details-marker { display: none; }

.nav-item details > summary::after {
  content: "▾";
  margin-left: .4rem;
  font-size: .8em;
  transition: transform .2s ease;
  display: inline-block;
  vertical-align: middle;   /* <-- FIX */
}

/* Open state caret */
.nav-item details[open] > summary::after { transform: rotate(180deg); }

/* Menus */
.menu {
  margin: 0;
  padding: .4rem 0;
  border-radius: .4rem;
  min-width: 220px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

/* Dark mode menu */
.dark .menu {
  background: #0b0b0b; /* matches blacksection */
  border-color: #22252b; /* strokedark */
}

/* Level 1 dropdown positioning (desktop) */
.menu-level-1 {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
}

/* Level 2 (submenu) positioning to the right of parent item */
.menu-level-2 {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: .2rem;
  z-index: 40;
  display: none;
}

/* Show logic:
   - When top-level details is open: show level-1
   - When nested details is open OR hover parent li: show level-2
*/
.nav-item > details[open] > .menu-level-1 { display: block; }
.menu-level-1 > .has-details > details[open] > .menu-level-2 { display: block; }

/* Hover open on desktop */
@media (hover:hover) and (pointer:fine) {
  .nav-item:hover > details > .menu-level-1 { display: block; }
  .menu-level-1 > .has-details:hover > details > .menu-level-2 { display: block; }
}

/* Submenu caret for items that own a submenu */
.menu-level-1 > .has-details > details > summary::after,
.menu-level-2 > .has-details > details > summary::after {
  content: "▸";
  transform: none;
}
.menu-level-1 > .has-details > details[open] > summary::after,
.menu-level-2 > .has-details > details[open] > summary::after {
  content: "▾";
}

/* Spacing inside menus */
.menu .dropdown-item { padding: .5rem .9rem; }

/* Optional hover styling */
.menu .dropdown-item:not(.disabled):hover {
  background: rgba(0,0,0,.04);
}
.dark .menu .dropdown-item:not(.disabled):hover {
  background: rgba(255,255,255,.05);
}

/* Keep menus above other content */
header { position: relative; z-index: 50; }

/* ========== Buttons (Bootstrap-like) ========== */
.btn {
  --btn-bg: #f8f9fa;
  --btn-color: #212529;
  --btn-border: rgba(0,0,0,.12);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--btn-border);
  border-radius: .5rem;            /* similar to .rounded */
  background: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(205,166,65,.35); /* brand focus ring */
}

.btn:active {
  transform: translateY(1px);
}

/* Large size (like .btn-lg) */
.btn.btn-lg { padding: .75rem 1.25rem; font-size: 1.05rem; border-radius: .65rem; }

/* Full width (optional helper) */
.btn.btn-block { display: flex; width: 100%; }

/* Disabled state */
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] {
  opacity: .65;
  pointer-events: none;
}

/* ========== Brand Primary ========== */
.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary {
  --btn-bg: #CDA641;
  --btn-color: #fff;
  --btn-border: #CDA641;
  background: var(--btn-bg);
  color: var(--btn-color);
  border-color: var(--btn-border);
  box-shadow: 0 8px 16px rgba(205,166,65,.22);
}

.btn-primary:hover {
  background: #bb9639;          /* slightly darker */
  border-color: #bb9639;
  color: #fff;
  box-shadow: 0 10px 22px rgba(205,166,65,.28);
}

.btn-primary:active {
  background: #a98632;
  border-color: #a98632;
  box-shadow: 0 6px 14px rgba(205,166,65,.22);
}

/* Keep your existing .al hover white text preference */
.btn-primary.al:hover { color: #fff !important; }

/* Optional subtle outline variant (if you ever need it) */
.btn-outline-primary {
  background: transparent;
  color: #CDA641;
  border-color: #CDA641;
  box-shadow: none;
}
.btn-outline-primary:hover {
  background: rgba(205,166,65,.1);
  color: #a98632;
}

/* ========== Dark Mode Tweaks ========== */
/* Works when you set .dark on <html> */
.dark .btn {
  --btn-bg: #141414;
  --btn-color: #e8eaed;
  --btn-border: #2a2a2a;
  background: var(--btn-bg);
  color: var(--btn-color);
  border-color: var(--btn-border);
}

.dark .btn-primary,
.dark a.btn.btn-primary {
  /* keep brand color vivid on dark backgrounds */
  background: #CDA641;
  border-color: #CDA641;
  color: #0b0b0b;               /* improves contrast on gold */
  box-shadow: 0 8px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(205,166,65,.15) inset;
}
.dark .btn-primary:hover {
  background: #d6b25a;
  border-color: #d6b25a;
  color: #0b0b0b;
}

/* If you prefer white text always on primary in dark: uncomment below
.dark .btn-primary,
.dark .btn-primary:hover { color:#fff; }
*/

/* ========== Utility: icon spacing inside buttons ========== */
.btn > svg, .btn > img { width: 1.1em; height: 1.1em; }

/* Fix and place the Back-to-Top button */
.xc.wf.xf.ie.ld.vg.sr.gh.tr.g.sa.ta._a {
  position: fixed;           /* ensure it's fixed */
  right: 20px;
  bottom: 24px;              /* leave room for WhatsApp above */
  z-index: 9999;
}

/* WhatsApp Floating Action Button */
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 90px;              /* stacked above Back-to-Top */
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: #25D366;       /* WhatsApp green */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 10000;
  transition: transform .25s, background .25s, box-shadow .25s;
}

.whatsapp-fab:hover {
  background: #1ebe57;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}

.whatsapp-fab svg path { fill: #fff; }

/* Optional: on very small screens nudge up a bit */
@media (max-width: 480px) {
  .whatsapp-fab { bottom: 96px; right: 16px; }
  .xc.wf.xf.ie.ld.vg.sr.gh.tr.g.sa.ta._a { right: 16px; bottom: 24px; }
}

.tiktok-icon path {
  fill: #8b8b8b; /* nice soft gray */
}

.tiktok-icon:hover path {
  fill: #CDA641; /* gold hover */
}


/* Make all social icons gray */
.tc.wf.fg a svg path,
.tc.wf.fg a img {
  filter: invert(65%) brightness(80%);     /* gray tone for <img> */
  fill: #b0b0b0 !important;                /* gray for SVG paths */
  transition: 0.3s ease;
}

/* Hover effect: gold brand color */
.tc.wf.fg a:hover svg path {
  fill: #CDA641 !important;
}

.tc.wf.fg a:hover img {
  filter: invert(50%) sepia(90%) saturate(600%) hue-rotate(10deg);
}

/* Make section titles gray */
.kk.wm.tj.ec {
  color: #bfbfbf !important;   /* light gray */
}


.xc.wf.xf.ie.ld.vg.sr.gh.tr.g.sa.ta._a {
  background-color: #CDA641 !important;
}