.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-f6efc71:#451E1E;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
   AryanGems – WordPress / Elementor Custom CSS
   Paste this in: WordPress Dashboard → Appearance → Customize
   → Additional CSS   (or Elementor → Site Settings → Custom CSS)
   ============================================================ */

/* ── 1. GOOGLE FONTS ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ── 2. CSS DESIGN TOKENS ────────────────────────────────── */
:root {
  --ag-black:        #080808;
  --ag-card:         #111111;
  --ag-card-alt:     #0c0c0c;
  --ag-footer:       #050505;
  --ag-gold:         #c9a036;
  --ag-gold-light:   #e0b84a;
  --ag-gold-dim:     rgba(201, 160, 54, 0.15);
  --ag-emerald:      #004d33;
  --ag-white:        #fafafa;
  --ag-muted:        #a0a0a0;
  --ag-border:       rgba(201, 160, 54, 0.12);
  --ag-radius:       8px;
  --ag-font-serif:   'Playfair Display', Georgia, serif;
  --ag-font-sans:    'Poppins', sans-serif;
  --ag-transition:   all 0.35s ease;
  --ag-shadow-gold:  0 8px 32px rgba(201, 160, 54, 0.12);
  --ag-shadow-card:  0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ── 3. GLOBAL RESET & BASE ──────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body,
.elementor-page {
  background-color: var(--ag-black) !important;
  color: var(--ag-white) !important;
  font-family: var(--ag-font-sans) !important;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Remove default WordPress theme padding that can break full-width layouts */
.site-content,
.entry-content,
#content,
.page-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* ── 4. TYPOGRAPHY ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--ag-font-serif) !important;
  color: var(--ag-white) !important;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem,   4vw, 2.8rem);  font-weight: 700; }
h3 { font-size: clamp(1.25rem,2vw, 1.5rem);  font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

p,
.elementor-text-editor p,
.elementor-widget-text-editor {
  font-family: var(--ag-font-sans) !important;
  color: var(--ag-muted) !important;
  line-height: 1.85;
}

/* Gold label / eyebrow text */
.ag-eyebrow,
.elementor-widget-heading p.ag-eyebrow {
  font-family: var(--ag-font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  color: var(--ag-gold) !important;
}

/* ── 5. ELEMENTOR SECTION BACKGROUNDS ───────────────────── */

/* Dark black sections */
.elementor-section.ag-section-black,
.ag-section-black > .elementor-container {
  background-color: var(--ag-black) !important;
}

/* Slightly lighter card sections */
.elementor-section.ag-section-alt,
.ag-section-alt > .elementor-container {
  background-color: var(--ag-card-alt) !important;
}

/* Emerald CTA section */
.elementor-section.ag-section-emerald {
  background-color: var(--ag-emerald) !important;
}

/* Footer section */
.elementor-section.ag-footer {
  background-color: var(--ag-footer) !important;
  border-top: 1px solid var(--ag-border) !important;
}

/* ── 6. STICKY HEADER / NAVBAR ───────────────────────────── */
#site-header,
.site-header,
.elementor-location-header,
header.elementor-location-header {
  background: transparent !important;
  transition: var(--ag-transition) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* Scrolled state – added via JS or Elementor Sticky */
.elementor-sticky--active header,
.is-sticky .elementor-location-header,
header.scrolled {
  background: rgba(8, 8, 8, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--ag-border) !important;
}

/* Nav links */
.elementor-nav-menu a,
.elementor-location-header nav a {
  font-family: var(--ag-font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--ag-muted) !important;
  transition: color 0.25s ease !important;
}

.elementor-nav-menu a:hover,
.elementor-location-header nav a:hover {
  color: var(--ag-gold) !important;
}

/* Logo text */
.site-title a,
.custom-logo-link,
.elementor-site-title {
  font-family: var(--ag-font-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--ag-white) !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
}

/* ── 7. BUTTONS ──────────────────────────────────────────── */
.elementor-button,
.elementor-button-wrapper .elementor-button,
.wp-block-button__link,
button,
input[type="submit"] {
  font-family: var(--ag-font-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  border-radius: var(--ag-radius) !important;
  transition: var(--ag-transition) !important;
  cursor: pointer !important;
}

/* Primary gold button */
.elementor-button.ag-btn-primary,
.ag-btn-primary {
  background-color: var(--ag-gold) !important;
  color: var(--ag-black) !important;
  border: none !important;
  padding: 18px 44px !important;
}

.elementor-button.ag-btn-primary:hover,
.ag-btn-primary:hover {
  background-color: var(--ag-gold-light) !important;
  box-shadow: 0 8px 24px rgba(201, 160, 54, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* Outline / ghost button */
.elementor-button.ag-btn-outline,
.ag-btn-outline {
  background-color: transparent !important;
  color: var(--ag-white) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  padding: 18px 44px !important;
}

.elementor-button.ag-btn-outline:hover,
.ag-btn-outline:hover {
  border-color: var(--ag-gold) !important;
  color: var(--ag-gold) !important;
}

/* Gold outline button */
.elementor-button.ag-btn-gold-outline,
.ag-btn-gold-outline {
  background-color: transparent !important;
  color: var(--ag-gold) !important;
  border: 1px solid var(--ag-gold) !important;
  padding: 12px 28px !important;
}

.elementor-button.ag-btn-gold-outline:hover,
.ag-btn-gold-outline:hover {
  background-color: var(--ag-gold) !important;
  color: var(--ag-black) !important;
}

/* ── 8. CARDS (Feature, Product, Testimonial) ────────────── */
.ag-card,
.elementor-column.ag-card > .elementor-column-wrap,
.elementor-column.ag-card > .elementor-widget-wrap {
  background-color: var(--ag-card) !important;
  border: 1px solid var(--ag-border) !important;
  border-radius: var(--ag-radius) !important;
  transition: var(--ag-transition) !important;
  box-shadow: var(--ag-shadow-card) !important;
}

.ag-card:hover,
.elementor-column.ag-card:hover > .elementor-column-wrap,
.elementor-column.ag-card:hover > .elementor-widget-wrap {
  border-color: rgba(201, 160, 54, 0.35) !important;
  box-shadow: var(--ag-shadow-gold) !important;
  transform: translateY(-4px) !important;
}

/* Product card image — rounded top corners only */
.ag-card .elementor-widget-image img,
.ag-card img {
  border-radius: var(--ag-radius) var(--ag-radius) 0 0 !important;
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── 9. ICON BOXES ───────────────────────────────────────── */
.elementor-icon-box-wrapper {
  text-align: center !important;
}

.elementor-icon-box-icon .elementor-icon {
  color: var(--ag-gold) !important;
  transition: var(--ag-transition) !important;
}

.ag-card:hover .elementor-icon-box-icon .elementor-icon {
  color: var(--ag-black) !important;
  background-color: var(--ag-gold) !important;
  border-radius: 50% !important;
  padding: 12px !important;
}

.elementor-icon-box-title {
  font-family: var(--ag-font-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--ag-gold) !important;
}

.elementor-icon-box-description {
  font-family: var(--ag-font-sans) !important;
  font-size: 14px !important;
  color: var(--ag-muted) !important;
  line-height: 1.75 !important;
}

/* Benefits icon boxes – white title */
.ag-benefits .elementor-icon-box-title {
  color: var(--ag-white) !important;
}

/* ── 10. DIVIDER (Gold accent line) ──────────────────────── */
.elementor-divider-separator,
.ag-divider hr {
  border-color: var(--ag-gold) !important;
  border-width: 2px !important;
  width: 60px !important;
  margin: 0 auto 32px !important;
}

/* ── 11. TESTIMONIAL CARDS ───────────────────────────────── */
.ag-testimonial,
.elementor-widget-testimonial.ag-testimonial .elementor-testimonial-wrapper {
  background-color: var(--ag-card) !important;
  border: 1px solid var(--ag-border) !important;
  border-radius: var(--ag-radius) !important;
  padding: 40px 32px !important;
  transition: var(--ag-transition) !important;
}

.ag-testimonial:hover,
.elementor-widget-testimonial.ag-testimonial:hover .elementor-testimonial-wrapper {
  border-color: rgba(201, 160, 54, 0.4) !important;
  box-shadow: var(--ag-shadow-gold) !important;
}

.elementor-testimonial-content {
  font-family: var(--ag-font-sans) !important;
  font-size: 15px !important;
  color: var(--ag-muted) !important;
  line-height: 1.85 !important;
  font-style: italic !important;
}

.elementor-testimonial-name {
  font-family: var(--ag-font-serif) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ag-gold) !important;
}

.elementor-testimonial-job {
  font-family: var(--ag-font-sans) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Stars */
.ag-stars {
  color: var(--ag-gold) !important;
  font-size: 20px !important;
  letter-spacing: 2px !important;
}

/* ── 12. CONTACT FORM ────────────────────────────────────── */
.elementor-form .elementor-field-label,
.wpcf7 label {
  font-family: var(--ag-font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--ag-muted) !important;
  display: block !important;
  margin-bottom: 8px !important;
}

.elementor-form .elementor-field-textual,
.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  background-color: var(--ag-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  color: var(--ag-white) !important;
  font-family: var(--ag-font-sans) !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
  width: 100% !important;
  transition: border-color 0.25s ease !important;
  outline: none !important;
}

.elementor-form .elementor-field-textual:focus,
.elementor-form input:focus,
.elementor-form textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: var(--ag-gold) !important;
  box-shadow: 0 0 0 2px rgba(201, 160, 54, 0.15) !important;
}

.elementor-form .elementor-field-textual::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* Form submit button */
.elementor-form .elementor-button[type="submit"],
.wpcf7 input[type="submit"] {
  background-color: var(--ag-gold) !important;
  color: var(--ag-black) !important;
  border: none !important;
  padding: 18px 44px !important;
  width: 100% !important;
  font-weight: 700 !important;
}

.elementor-form .elementor-button[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover {
  background-color: var(--ag-gold-light) !important;
  box-shadow: 0 8px 24px rgba(201, 160, 54, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* ── 13. SOCIAL ICONS ────────────────────────────────────── */
.elementor-social-icon {
  background-color: var(--ag-card) !important;
  color: var(--ag-gold) !important;
  border: 1px solid var(--ag-border) !important;
  transition: var(--ag-transition) !important;
}

.elementor-social-icon:hover {
  background-color: var(--ag-gold) !important;
  color: var(--ag-black) !important;
  border-color: var(--ag-gold) !important;
  transform: translateY(-3px) !important;
}

/* ── 14. FOOTER LINKS ────────────────────────────────────── */
.ag-footer a,
.elementor-location-footer a {
  font-family: var(--ag-font-sans) !important;
  font-size: 14px !important;
  color: var(--ag-muted) !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
  line-height: 2.4 !important;
  display: block !important;
}

.ag-footer a:hover,
.elementor-location-footer a:hover {
  color: var(--ag-gold) !important;
}

/* Copyright text */
.ag-copyright,
.ag-footer .ag-copyright p {
  font-family: var(--ag-font-sans) !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.3) !important;
  text-align: center !important;
  border-top: 1px solid var(--ag-border) !important;
  padding-top: 28px !important;
  margin-top: 32px !important;
}

/* ── 15. HERO SECTION ────────────────────────────────────── */
.ag-hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

.ag-hero::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(8, 8, 8, 0.65) 0%,
    rgba(8, 8, 8, 0.5) 50%,
    rgba(8, 8, 8, 0.85) 100%
  ) !important;
  z-index: 1 !important;
}

.ag-hero .elementor-container,
.ag-hero .elementor-column,
.ag-hero .elementor-widget-wrap {
  position: relative !important;
  z-index: 2 !important;
}

.ag-hero .elementor-heading-title {
  color: var(--ag-white) !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5) !important;
}

/* ── 16. CTA SECTION ─────────────────────────────────────── */
.ag-section-emerald .elementor-heading-title {
  color: var(--ag-white) !important;
}

.ag-section-emerald p,
.ag-section-emerald .elementor-text-editor p {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ── 17. CONTACT ACTION BUTTONS ──────────────────────────── */
.ag-action-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

.ag-action-btns a {
  display: inline-block !important;
  padding: 14px 24px !important;
  font-family: var(--ag-font-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  transition: var(--ag-transition) !important;
}

.ag-btn-call  { background-color: var(--ag-gold) !important; color: var(--ag-black) !important; }
.ag-btn-email { background-color: transparent !important; color: var(--ag-gold) !important; border: 1px solid var(--ag-gold) !important; }
.ag-btn-wa    { background-color: #25D366 !important; color: #ffffff !important; }

.ag-btn-call:hover  { background-color: var(--ag-gold-light) !important; transform: translateY(-2px) !important; }
.ag-btn-email:hover { background-color: var(--ag-gold) !important; color: var(--ag-black) !important; transform: translateY(-2px) !important; }
.ag-btn-wa:hover    { background-color: #1ebe5a !important; transform: translateY(-2px) !important; }

/* ── 18. SCROLL ANIMATIONS (Elementor Motion Effects) ───── */
/* These animate in when Elementor's "Entrance Animation" is set to "Fade In Up" */
.animated.fadeInUp {
  animation-duration: 0.8s !important;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── 19. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1024px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2.2rem; }
}

@media (max-width: 768px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.2rem; }

  .ag-card img { height: 180px !important; }

  .ag-action-btns { flex-direction: column !important; }
  .ag-action-btns a { text-align: center !important; }

  .elementor-button.ag-btn-primary,
  .elementor-button.ag-btn-outline {
    padding: 14px 28px !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }

  .elementor-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── 20. ELEMENTOR OVERRIDES (prevent theme interference) ── */

/* Force dark background on all Elementor inner containers */
.elementor-inner-section,
.elementor-top-section {
  background-color: inherit !important;
}

/* Prevent white flashes from default Elementor styles */
.elementor-widget-wrap {
  background-color: transparent !important;
}

/* Override any WordPress theme default link colors */
a { color: var(--ag-gold) !important; }
a:hover { color: var(--ag-gold-light) !important; }

/* Ensure images don't overflow cards */
.elementor-widget-image img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ── 21. UTILITY CLASSES ─────────────────────────────────── */
.ag-text-gold   { color: var(--ag-gold) !important; }
.ag-text-white  { color: var(--ag-white) !important; }
.ag-text-muted  { color: var(--ag-muted) !important; }
.ag-bg-black    { background-color: var(--ag-black) !important; }
.ag-bg-card     { background-color: var(--ag-card) !important; }
.ag-bg-emerald  { background-color: var(--ag-emerald) !important; }
.ag-border-gold { border: 1px solid var(--ag-border) !important; }
.ag-rounded     { border-radius: var(--ag-radius) !important; }
.ag-serif       { font-family: var(--ag-font-serif) !important; }
.ag-sans        { font-family: var(--ag-font-sans) !important; }
.ag-uppercase   { text-transform: uppercase !important; letter-spacing: 3px !important; }/* End custom CSS */