/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */


:root{
    --ink:#0B0B0C;
    --panel:#151517;
    --panel-2:#1B1B1E;
    --gold:#C9A227;
    --gold-light:#E8CE7A;
    --gold-dim:#8A7434;
    --cream:#F2EFE6;
    --cream-dim:#B9B6AC;
    --hairline: rgba(201,162,39,0.22);
  }
  
  html{
      scroll-behavior:smooth;
  }
  body{
    background:var(--ink);
    color:var(--cream);
    font-family:'Inter',sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,.serif{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--cream);
  }
  
  .btn-gold a.elementor-button{
    background:linear-gradient(180deg, var(--gold-light), var(--gold));
    color:#1a1405; padding:14px 24px; border-radius:2px;
    font-size:14px; font-weight:600; letter-spacing:0.04em;
    text-transform:uppercase;
  }
  
  
  .hero {
    position: relative;
    padding: 150px 0px 130px;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% -10%, rgba(201, 162, 39, 0.14), transparent 60%), var(--ink);
}

.eyebrow {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold) !important;
    font-weight: 600;
}

.hero h1 em {
    font-style: italic;
    color: var(--gold-light) !important;
    font-weight: 400;
}
.hero h1 {
    font-size: 82px;
    line-height: 1.04;
    max-width: 900px;
    margin: 0 auto;
}

.btn-ghost a.elementor-button {
    border: 1px solid #c9a22738;
    padding: 14px 24px 14px 24px;
    border-radius: 2px;
    font-size: 14px;
    color: var(--cream);
    letter-spacing: 0.03em;
    background:transparent;
    text-decoration:unset;
    text-transform:uppercase;
}

.btn-ghost a.elementor-button:hover{
    
    background:linear-gradient(180deg, var(--gold-light), var(--gold));
     color:#1a1405;
    
}

.btn-gold a.elementor-button:hover{
    
  border: 1px solid #c9a22738 !important;
   background:transparent !important;
   color: var(--cream) !important;
}


/*Services Page*/

/**
 * services-grid-widget.css
 * Structural CSS only. Colors, spacing, typography are controlled
 * from the Elementor Style tab.
 *
 * DIVIDER TECHNIQUE: .sg-grid has a background color (the divider
 * color) and a small `gap` between cells. Each .sg-item has its own
 * background matching the inner panel. The gap is thin enough that
 * the grid's background shows through as a continuous line network
 * across the whole grid (like a table) — this is what makes the
 * dividers connect seamlessly across rows, instead of stopping at
 * each cell like a per-item border would.
 *
 * Structure: .sg-wrapper (outer frame band) > .sg-inner (dark panel)
 * > title + .sg-grid. The frame is created by padding on .sg-wrapper
 * revealing its background color around .sg-inner — not a border.
 *
 * RESET BLOCK: themes commonly style raw h1-h6/p/div tags globally
 * (font-family, text-transform, letter-spacing, margin). Because this
 * widget renders a real heading tag (h1-h4, configurable) and plain
 * divs for the rest, those theme rules can tie or beat Elementor's
 * generated `{{WRAPPER}} .sg-heading` selector on specificity and
 * silently override the Style tab. The block below scopes a reset to
 * `.sg-wrapper` so nothing outside this widget's own controls can ever
 * set the font/spacing here — the Style tab becomes the only source
 * of truth for how text in this widget looks.
 */
.sg-wrapper,
.sg-wrapper * {
	font-family: inherit;
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	padding: 0;
	text-decoration: none;
	box-sizing: border-box;
}

.sg-wrapper {
	width: 100%;
	background-color: #5A4E1E;
	padding: 10px 50px;
}
.sg-inner {
	width: 100%;
	background-color: #0D0D0D;
	--sg-inner-bg: #0D0D0D;
	padding: 48px;
}
.sg-heading {
	margin: 0;
}
.sg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 1px;
	row-gap: 1px;
	background-color: #7A6A2E;
}
.sg-item {
	display: block;
	position: relative;
	padding: 32px;
	background-color: var(--sg-inner-bg, #0D0D0D);
}
.sg-number {
	display: block;
	line-height: 1;
}
.sg-item-title {
	line-height: 1.25;
}
.sg-item-desc {
	line-height: 1.6;
}

/*Services Process*/

.jwm-section {
    background-color: #141414;
    position: relative;
}
 
.jwm-header {
    text-align: center;
    margin-bottom: 50px;
}
 
.jwm-eyebrow {
    color: #c9a227;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px;
}
 
.jwm-heading {
    color: #e8ce7a;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    margin: 0 0 60px;
}
 
.jwm-circle {
    --jwm-circle-size: 72px;
    width: var(--jwm-circle-size);
    height: var(--jwm-circle-size);
    border-radius: 50%;
    background-color: #c9a227;
    border: 1px solid #e8ce7a;
    color: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
 
.jwm-step-link {
    text-decoration: none;
    display: inline-block;
}
 
.jwm-step-title {
    color: #e8ce7a;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    margin: 0 0 8px;
}
 
.jwm-step-desc {
    color: #e8ce7a;
    opacity: 0.8;
    font-size: 15px;
    font-weight: 300;
    margin: 0;
    line-height: 1.6;
}
 
/* ───────────────────────────────
   HORIZONTAL LAYOUT
─────────────────────────────── */
.jwm-layout-horizontal .jwm-steps-row {
    display: grid;
    position: relative;
    text-align: center;
}
 
.jwm-layout-horizontal .jwm-steps-row::before {
    content: '';
    position: absolute;
    top: calc(var(--jwm-circle-size, 54px) / 2);
    left: 12.5%;
    right: 12.5%;
    border-top: 1px var(--jwm-connector-style, dashed) #c9a227;
    z-index: 1;
}
 
.jwm-layout-horizontal.jwm-no-connector .jwm-steps-row::before,
.jwm-layout-horizontal .jwm-steps-row.jwm-no-connector::before {
    display: none;
}
 
.jwm-layout-horizontal .jwm-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.jwm-layout-horizontal .jwm-circle {
    margin: 0 auto;
}
 
.jwm-layout-horizontal .jm_cnt_wrp {
    margin-top: 20px;
}
 
.jwm-layout-horizontal .jwm-step-desc {
    max-width: 240px;
    margin: 0 auto;
}
 
/* ───────────────────────────────
   VERTICAL LAYOUT — centered stack:
   circle → line → content → line → next circle
   (line never runs behind the text itself)
─────────────────────────────── */
.jwm-layout-vertical .jwm-steps-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
}
 
.jwm-layout-vertical .jwm-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 0;
    width: 100%;
}
 
.jwm-layout-vertical .jwm-step.jwm-step-last {
    padding-bottom: 0;
}
 
.jwm-layout-vertical .jwm-circle {
    margin: 0 auto;
}
 
/* Explicit connector elements — one above the text, one below, both above/below the line never overlaps the text itself */
.jwm-layout-vertical .jwm-vertical-connector {
    width: 0;
    height: 56px;
    border-left: 2px var(--jwm-connector-style, dashed) #c9a227;
}
 
.jwm-layout-vertical.jwm-no-connector .jwm-vertical-connector,
.jwm-layout-vertical .jwm-steps-column.jwm-no-connector .jwm-vertical-connector {
    display: none;
}
 
.jwm-layout-vertical .jm_cnt_wrp {
    margin-bottom: 3px;
    max-width: 480px;
}
 
.jwm-layout-vertical .jwm-step-desc {
    max-width: none;
}
 
/* ───────────────────────────────
   GRID LAYOUT (cards)
─────────────────────────────── */
.jwm-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
 
.jwm-card {
    position: relative;
    background-color: rgba(232, 206, 122, 0.06);
    border-radius: 12px;
    padding: 40px;
    transition: background-color 0.2s ease;
}
 
.jwm-card:hover {
    background-color: rgba(232, 206, 122, 0.1);
}
 
.jwm-card-connector {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 0;
    border-left: 1px solid #c9a227;
}
 
.jwm-card .jwm-circle {
    margin-bottom: 20px;
}


.svcd-section {
    background-color: #141414;
    position: relative;
}

/*Services Specialities*/
 
.svcd-eyebrow {
    color: #c9a227;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 10px;
}
 
.svcd-heading {
    color: #e8ce7a;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 40px;
    max-width: 640px;
    margin: 0 0 20px;
    line-height: 1.25;
}
 
.svcd-intro {
    color: #e8ce7a;
    opacity: 0.8;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 0 40px;
}
 
/* ───────────────────────────────
   GRID + CARD
   Two layout modes: horizontal (cards side-by-side, grid)
   and vertical (full-width stacked rows, icon left / text right)
─────────────────────────────── */
.svcd-grid-horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
 
.svcd-grid-vertical {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
 
.svcd-card {
    position: relative;
    background-color: rgba(232, 206, 122, 0.06);
    border: 1px solid rgba(232, 206, 122, 0.2);
    border-radius: 12px;
    padding: 32px;
    transition: background-color 0.2s ease;
}
 
.svcd-card:hover {
    background-color: rgba(232, 206, 122, 0.1);
}
 
/* Vertical mode: icon sits to the left of the title+list, full width row */
.svcd-grid-vertical .svcd-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}
 
.svcd-grid-vertical .svcd-icon-circle {
    margin-bottom: 0;
    flex-shrink: 0;
}
 
.svcd-grid-vertical .svcd-card-body {
    flex: 1;
    min-width: 0;
}
 
/* ───────────────────────────────
   ICON
─────────────────────────────── */
.svcd-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(201, 162, 39, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
 
.svcd-icon-circle i,
.svcd-icon-circle svg {
    color: #c9a227;
    fill: #c9a227;
    font-size: 20px;
    width: 20px;
    height: 20px;
}
 
/* ───────────────────────────────
   TITLE + LIST
─────────────────────────────── */
.svcd-card-title {
    color: #e8ce7a;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    margin: 0 0 14px;
}
 
.svcd-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.svcd-list li {
    position: relative;
    color: #e8ce7a;
    opacity: 0.85;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 18px;
}
 
.svcd-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    color: #c9a227;
}
 
.svcd-list li:last-child {
    margin-bottom: 0;
}
 
 
/* ───────────────────────────────
   RESPONSIVE
─────────────────────────────── */
@media (max-width: 1024px) {
    .svcd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
 
/* ───────────────────────────────
   RESPONSIVE
─────────────────────────────── */
@media (max-width: 767px) {
    .jwm-layout-horizontal .jwm-steps-row {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
 
    .jwm-layout-horizontal .jwm-steps-row::before {
        display: none;
    }
 
    .jwm-cards-grid {
        grid-template-columns: 1fr !important;
    }
    .svcd-grid {
        grid-template-columns: 1fr;
    }
 
    .svcd-heading {
        font-size: 28px;
    }
}