/*
 Theme Name:   Hello Elementor Child — LEVELZwithKshema
 Theme URI:    https://levelz-culture-hub.base44.app/
 Description:  Child theme for LEVELZwithKshema — Exact 1:1 Replica of Base44 Culture Hub
 Author:       LEVELZwithKshema
 Version:      3.0.4
 Template:     hello-elementor
 Text Domain:  levelz-child
*/

@import url("../hello-elementor/style.css");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --levelz-ink: #0B0B0B;
  --levelz-onyx: #151515;
  --levelz-border: #303030;
  --levelz-gold: #E6B84A;
  --levelz-red: #D94B38;
  --levelz-paper: #F5F3EF;
  --levelz-bone: #FFFFFF;
  --levelz-muted: #B8B8B8;
  --levelz-ash: #8A8A8A;
}

html,
body {
  background-color: var(--levelz-ink) !important;
  color: var(--levelz-muted) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body .site,
.site-content {
  background-color: var(--levelz-ink) !important;
}

.site-header,
.site-footer {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--levelz-bone);
  letter-spacing: -0.035em;
}

.label-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

a {
  color: var(--levelz-gold);
  text-decoration: none;
  transition: all 0.25s ease;
}

a:hover {
  color: #FFFFFF;
}

/* Base44 Button Styles */
.btn-gold {
  background-color: #E6B84A !important;
  color: #0B0B0B !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  padding: 14px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
  border: none !important;
  cursor: pointer;
}

.btn-gold:hover {
  background-color: #FFFFFF !important;
  color: #0B0B0B !important;
}

.btn-ghost {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid #303030 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  padding: 14px 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}

.btn-ghost:hover {
  border-color: #E6B84A !important;
  color: #E6B84A !important;
}

/* Image zoom hover effect - triggers ONLY on containers with #img-hov or .img-hov */
#img-hov .elementor-widget-image img,
.img-hov .elementor-widget-image img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#img-hov:hover .elementor-widget-image img,
.img-hov:hover .elementor-widget-image img {
  transform: scale(1.04) !important;
}

/* Heading H2 color transition on card hover */
#img-hov h2,
#img-hov h2 a,
#img-hov h2.elementor-heading-title,
.img-hov h2,
.img-hov h2 a,
.img-hov h2.elementor-heading-title {
  transition: color 0.3s ease !important;
}

#img-hov:hover h2,
#img-hov:hover h2 a,
#img-hov:hover h2.elementor-heading-title,
.img-hov:hover h2,
.img-hov:hover h2 a,
.img-hov:hover h2.elementor-heading-title {
  color: #E6B84A !important;
}

/* Button color and icon transition on card hover */
#img-hov .elementor-button,
#img-hov .elementor-button .elementor-button-text,
#img-hov .elementor-button .elementor-button-icon svg,
.img-hov .elementor-button,
.img-hov .elementor-button .elementor-button-text,
.img-hov .elementor-button .elementor-button-icon svg {
  transition: all 0.3s ease !important;
}

#img-hov:hover .elementor-button,
#img-hov:hover .elementor-button .elementor-button-text,
.img-hov:hover .elementor-button,
.img-hov:hover .elementor-button .elementor-button-text {
  color: #E6B84A !important;
  border-color: #E6B84A !important;
}

#img-hov:hover .elementor-button .elementor-button-icon svg,
.img-hov:hover .elementor-button .elementor-button-icon svg {
  fill: #E6B84A !important;
}