/* Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: A child theme for Hello Elementor, optimized for Sendan Real Estate with Elementor Pro integration.
Author: Antigravity - Senior WordPress Developer
Author URI: https://antigravity.ai
Template: hello-elementor
Version: 1.1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html */

/* ==========================================================================
   SENDANSA REAL ESTATE - LUXURY STYLE LIBRARY (Al Ramz Design System)
   ========================================================================== */

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

/* 2. DESIGN TOKENS */
:root {
  --color-primary: #380516; /* Luxury Deep Burgundy */
  --color-primary-light: #5A122B;
  --color-secondary: #A2845E; /* Warm Muted Gold */
  --color-gold: #C49A6C; /* Premium Brand Gold */
  --color-gold-light: #D4B692;
  --color-cream: #FAF6F0; /* Luxury Cream Background */
  --color-cream-dark: #F2EAE0;
  --color-dark: #1A1A1A; /* Rich Off-Black */
  --color-white: #FFFFFF;
  --color-text-muted: #808285;
  --font-main: 'Cairo', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  --shadow-premium: 0 15px 35px rgba(56, 5, 22, 0.08);
}

/* 3. GLOBAL RESET & BASE OVERRIDES */
body {
  font-family: var(--font-main) !important;
  color: var(--color-dark);
  background: var(--color-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
  font-family: var(--font-main) !important;
}
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4, [dir="ltr"] h5, [dir="ltr"] h6 {
  font-family: var(--font-serif) !important;
}
html {
  scroll-behavior: smooth;
}
.page-header {
  display: none !important;
}

/* ==========================================================================
   ELEMENTOR PRO HELPER CLASSES - AL RAMZ BRAND ORNAMENTS
   ========================================================================== */

/* A. SECTION HEADING WITH GOLDEN FLOWER ORNAMENT */
.ar-section-title {
  text-align: center !important;
  margin-bottom: 25px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.ar-section-title .elementor-heading-title {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-primary) !important;
  font-weight: 800 !important;
  transition: var(--transition) !important;
  padding: 0 45px !important;
  width: auto !important;
}

/* Light Title Modifier (For dark background sections) */
.ar-section-title.light-title .elementor-heading-title,
.ar-dark-bg .ar-section-title .elementor-heading-title {
  color: var(--color-gold) !important;
}

.ar-section-title .elementor-heading-title::before,
.ar-section-title .elementor-heading-title::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  height: 34px !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 2C20 2 24 10 20 18C16 10 20 2 20 2Z' fill='%23C49A6C'/%3E%3Cpath d='M20 18C20 18 28 22 20 30C12 22 20 18 20 18Z' fill='%23C49A6C'/%3E%3Ccircle cx='20' cy='20' r='2.5' fill='%23380516'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

.ar-section-title.light-title .elementor-heading-title::before,
.ar-section-title.light-title .elementor-heading-title::after,
.ar-dark-bg .ar-section-title .elementor-heading-title::before,
.ar-dark-bg .ar-section-title .elementor-heading-title::after {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 2C20 2 24 10 20 18C16 10 20 2 20 2Z' fill='%23FAF6F0'/%3E%3Cpath d='M20 18C20 18 28 22 20 30C12 22 20 18 20 18Z' fill='%23FAF6F0'/%3E%3Ccircle cx='20' cy='20' r='2.5' fill='%23C49A6C'/%3E%3C/svg%3E") no-repeat center !important;
  background-size: contain !important;
}

.ar-section-title .elementor-heading-title::before {
  right: 0 !important;
}

.ar-section-title .elementor-heading-title::after {
  left: 0 !important;
}

@media (max-width: 768px) {
  .ar-section-title .elementor-heading-title {
    padding: 0 30px !important;
  }
  .ar-section-title .elementor-heading-title::before,
  .ar-section-title .elementor-heading-title::after {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ==========================================================================
   ELEMENTOR PRO HELPER CLASSES - ARCHED IMAGE MASK & DOUBLE OFFSET FRAMES
   ========================================================================== */

/* B. ARCHED IMAGE WITH OFFSET GOLD BORDERS */
.ar-arched-image {
  position: relative !important;
  display: inline-block !important;
  padding: 10px 10px 30px 10px !important;
  z-index: 10;
  width: auto !important;
  margin: 0 auto !important;
}

.ar-arched-image img {
  border-radius: 220px 220px 20px 20px !important;
  border: 1px solid rgba(196, 154, 108, 0.3) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12) !important;
  transition: var(--transition) !important;
  z-index: 2;
  position: relative;
  display: block;
  max-width: 100% !important;
}

.ar-arched-image::before {
  content: "" !important;
  position: absolute !important;
  inset: 20px -20px -20px 20px !important;
  border: 2px solid var(--color-gold) !important;
  border-radius: 240px 240px 25px 25px !important;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  transition: var(--transition);
}

.ar-arched-image::after {
  content: "" !important;
  position: absolute !important;
  inset: 35px -35px -35px 35px !important;
  border: 1px dashed var(--color-primary) !important;
  border-radius: 260px 260px 30px 30px !important;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  transition: var(--transition);
}

.ar-arched-image:hover img {
  transform: scale(1.04);
}
.ar-arched-image:hover::before {
  transform: translate(-6px, 6px);
  border-color: var(--color-primary);
}
.ar-arched-image:hover::after {
  transform: translate(6px, -6px);
  opacity: 0.8;
}

/* ==========================================================================
   ELEMENTOR PRO HELPER CLASSES - ARCHED CARD & HOVER OVERLAY
   ========================================================================== */

/* C. OUTER CARD CONTAINER (OFFSET DOUBLE BOUNDARY) */
.ar-project-card-container {
  position: relative !important;
  padding: 25px 20px !important;
  transition: var(--transition) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
}

/* Card images with beautiful arched layout and double offsets */
.ar-project-card-container .elementor-widget-image {
  margin-bottom: 25px !important;
  width: 100% !important;
  display: inline-block !important;
  position: relative !important;
  overflow: visible !important;
  text-align: center !important;
}

.ar-project-card-container .elementor-widget-image img {
  border-radius: 180px 180px 15px 15px !important;
  border: 1px solid rgba(196, 154, 108, 0.35) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  transition: var(--transition) !important;
  display: block !important;
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Elegant borders flanking the project card image directly */
.ar-project-card-container .elementor-widget-image::before,
.ar-project-card-container .elementor-widget-image::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  transition: var(--transition) !important;
}

.ar-project-card-container .elementor-widget-image::before {
  inset: -8px !important;
  border: 1.5px solid var(--color-gold) !important;
  border-radius: 188px 188px 20px 20px !important;
  z-index: 1 !important;
  transform: rotate(-1deg) !important;
}

.ar-project-card-container .elementor-widget-image::after {
  inset: -14px !important;
  border: 1px dashed var(--color-primary) !important;
  border-radius: 194px 194px 25px 25px !important;
  z-index: 0 !important;
  transform: rotate(1deg) !important;
}

.ar-project-card-container:hover .elementor-widget-image img {
  transform: translateY(-5px) scale(1.03) !important;
  box-shadow: 0 20px 45px rgba(56, 5, 22, 0.18) !important;
}

.ar-project-card-container:hover .elementor-widget-image::before {
  transform: translateY(-3px) scale(1.01) rotate(-0.3deg) !important;
}

.ar-project-card-container:hover .elementor-widget-image::after {
  transform: translateY(-3px) scale(1.01) rotate(0.3deg) !important;
}

.ar-project-card-container .elementor-widget-heading {
  margin: 5px 0 !important;
  text-align: center !important;
  width: 100% !important;
}

.ar-project-card-container .elementor-widget-heading .elementor-heading-title {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  line-height: 1.4 !important;
}

.ar-project-card-container .elementor-widget-heading + .elementor-widget-heading .elementor-heading-title {
  color: var(--color-gold) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}

.ar-project-card-container .elementor-widget-text-editor {
  margin: 10px 0 15px 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  width: 100% !important;
}

.ar-project-card-container .ar-outline-btn {
  margin-top: auto !important;
  width: 100% !important;
}

/* ==========================================================================
   ELEMENTOR PRO HELPER CLASSES - OTHER LAYOUT DETAILS
   ========================================================================== */

/* G. STATS BAR COLUMN DIVIDER */
.ar-stats-item {
  border-right: 1.5px solid rgba(196, 154, 108, 0.25) !important;
}
[dir="rtl"] .ar-stats-item {
  border-right: none !important;
  border-left: 1.5px solid rgba(196, 154, 108, 0.25) !important;
}
.ar-stats-item:last-child {
  border-right: none !important;
  border-left: none !important;
}
@media (max-width: 900px) {
  .ar-stats-item {
    border: none !important;
  }
}

/* H. PREMIUM GOLD CTA BUTTON */
.ar-gold-btn a.elementor-button {
  background: var(--color-gold) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  border: 2px solid var(--color-gold) !important;
  transition: var(--transition) !important;
  border-radius: 4px !important;
}
.ar-gold-btn a.elementor-button:hover {
  background: transparent !important;
  color: var(--color-gold) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(196, 154, 108, 0.35) !important;
}

/* I. LUXURY OUTLINE BUTTON */
.ar-outline-btn a.elementor-button {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary) !important;
  font-weight: 700 !important;
  transition: var(--transition) !important;
  border-radius: 4px !important;
}
.ar-outline-btn a.elementor-button:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  transform: translateY(-3px) !important;
}

/* J. ARCHED VIEWPORT FOR WIDE IMAGE SECTIONS */
.ar-comfort-viewport {
  border: 1.5px solid rgba(196, 154, 108, 0.4) !important;
  border-radius: 40px !important;
  padding: 15px !important;
  background: rgba(255,255,255,0.02) !important;
  transition: var(--transition) !important;
}
.ar-comfort-viewport img {
  border-radius: 30px !important;
  transition: transform 8s ease !important;
}
.ar-comfort-viewport:hover img {
  transform: scale(1.05) !important;
}

/* K. STICKY GLASSMORPHISM HEADER NAVIGATION OVERRIDES */
.ar-sticky-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background: rgba(56, 5, 22, 0.85) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-bottom: 1.5px solid rgba(196, 154, 108, 0.25) !important;
  transition: var(--transition) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 90px !important;
  padding: 0 50px !important;
}

.ar-sticky-header.elementor-sticky--active {
  background: rgba(56, 5, 22, 0.98) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
  height: 80px !important;
}

.ar-sticky-header .elementor-element-0c89e14 { /* Logo container */
  width: auto !important;
  max-width: 180px !important;
  flex: 0 0 auto !important;
}

.ar-sticky-header .elementor-element-0c89e14 img {
  height: 50px !important;
  width: auto !important;
  object-fit: contain !important;
}

.ar-sticky-header .elementor-element-e1d8517 { /* Menu container */
  width: auto !important;
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
}

.ar-sticky-header .elementor-element-91fd161 { /* CTA container */
  width: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Header Menu Link Styles */
.ar-sticky-header .elementor-item,
.ar-sticky-header .elementor-sub-item {
  color: #faf6f0 !important;
  font-family: var(--font-main) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: color 0.3s ease !important;
}

.ar-sticky-header .elementor-item:hover,
.ar-sticky-header .elementor-item.elementor-item-active {
  color: var(--color-gold) !important;
}

/* L. ACCORDION MODERN LUXURY STYLING */
.elementor-accordion .elementor-tab-title {
  background: var(--color-white) !important;
  border: 1.5px solid var(--color-cream-dark) !important;
  border-radius: 6px !important;
  margin-bottom: 12px !important;
  padding: 20px 25px !important;
  transition: var(--transition);
}
.elementor-accordion .elementor-tab-title:hover,
.elementor-accordion .elementor-tab-title.elementor-active {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}
.elementor-accordion .elementor-tab-title:hover .elementor-accordion-icon svg,
.elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg {
  fill: var(--color-gold) !important;
}
.elementor-accordion .elementor-tab-content {
  background: var(--color-cream) !important;
  border: 1.5px solid var(--color-cream-dark) !important;
  border-top: none !important;
  padding: 25px 30px !important;
  border-radius: 0 0 6px 6px !important;
  line-height: 1.8;
  color: var(--color-dark);
}

/* M. SMOOTH SCROLLBAR & SELECTION */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-gold);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-light);
}
::selection {
  background: var(--color-gold);
  color: var(--color-primary);
}

/* N. HERO SECTION FULL SCREEN */
.ar-hero-section {
  position: relative !important;
  overflow: hidden !important;
}
.ar-hero-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to bottom,
    rgba(56, 5, 22, 0.55) 0%,
    rgba(20, 2, 8, 0.35) 40%,
    rgba(20, 2, 8, 0.75) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.ar-hero-section > * {
  position: relative !important;
  z-index: 2 !important;
}

/* O. LIGHT OUTLINE BUTTON (For dark backgrounds) */
.ar-outline-btn-light a.elementor-button {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
  transition: var(--transition) !important;
  border-radius: 4px !important;
}
.ar-outline-btn-light a.elementor-button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #FFFFFF !important;
  transform: translateY(-3px) !important;
}

/* P. STATS BAR ENHANCED */
.ar-stats-bar {
  position: relative !important;
  z-index: 5 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}
.ar-stats-bar > .e-con {
  flex: 1 1 0 !important;
}

/* ==========================================================================
   ELEMENTOR LAYOUT STRUCTURAL FIXES (CLASS-BASED)
   ========================================================================== */

/* 1. Stats bar row layout */
.ar-stats-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-around !important;
  align-items: center !important;
}
.ar-stats-bar > .e-con,
.ar-stats-bar > .elementor-element {
  flex: 1 1 0 !important;
  max-width: 25% !important;
}

/* 2. Project cards row layout */
.ar-project-card-container {
  flex: 1 1 30% !important;
  max-width: 30% !important;
}

/* 3. Services row: child containers take 18% */
.ar-dark-bg .e-con[class*="e-con"] > .e-con {
  flex: 1 1 18% !important;
  max-width: 18% !important;
}

/* 4. Mobile responsive */
@media (max-width: 900px) {
  .ar-sticky-header {
    height: auto !important;
    padding: 15px 20px !important;
    flex-wrap: wrap !important;
  }
  .ar-sticky-header > .e-con,
  .ar-sticky-header > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
  }
  
  /* Stats go vertical on mobile */
  .ar-stats-bar {
    flex-direction: column !important;
  }
  .ar-stats-bar > .e-con,
  .ar-stats-bar > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 15px !important;
  }
  .ar-stats-item {
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1.5px solid rgba(196, 154, 108, 0.25) !important;
    padding-bottom: 20px !important;
  }
  .ar-stats-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  /* Projects go single column */
  .ar-project-card-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 30px !important;
  }

  /* Services go single column */
  .ar-dark-bg .e-con[class*="e-con"] > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 20px !important;
  }

  /* Hero adjustments */
  .ar-hero-section {
    min-height: 80vh !important;
    padding-top: 140px !important;
    padding-bottom: 60px !important;
  }
  .ar-hero-section .elementor-heading-title {
    font-size: 28px !important;
  }

  /* About section stack */
  .ar-arched-image {
    margin-bottom: 40px !important;
  }
}