/*
Theme Name: Hello Child
Theme URI: https://elementor-site.ir/
Description:
Author: Elementor Site
Author URI: https://elementor-site.ir/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ========================================
   1) Sticky / Fixed Transparent Header
   ======================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  background-color: transparent;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease,
    -webkit-backdrop-filter 0.3s ease,
    padding 0.3s ease;
}

.site-header.is-scrolled {
  background-color: rgba(19, 30, 54, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ========================================
   2) Baraks Hover Box Effect
   فقط برای باکس‌هایی که کلاس baraks دارند
   ======================================== */

/* خود باکس */
.baraks {
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* حالت هاور باکس */
.baraks:hover {
  background-color: #000000 !important;
}

/* ترنزیشن نرم فقط برای عناصر رایج داخل باکس */
.baraks .elementor-heading-title,
.baraks .elementor-icon-box-title,
.baraks .elementor-icon-box-title a,
.baraks .elementor-icon-box-description,
.baraks .elementor-widget-text-editor,
.baraks .elementor-widget-text-editor p,
.baraks .elementor-icon,
.baraks .elementor-icon i,
.baraks .elementor-icon svg,
.baraks .elementor-icon svg path,
.baraks .elementor-icon svg circle,
.baraks .elementor-icon svg rect,
.baraks .elementor-icon svg line,
.baraks .elementor-icon svg polyline,
.baraks .elementor-icon svg polygon,
.baraks .elementor-divider-separator {
  transition:
    color 0.3s ease,
    fill 0.3s ease,
    stroke 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

/* عنوان‌ها */
.baraks:hover .elementor-heading-title,
.baraks:hover .elementor-icon-box-title,
.baraks:hover .elementor-icon-box-title a {
  color: #C4A265 !important;
}

/* توضیحات و متن‌ها */
.baraks:hover .elementor-icon-box-description,
.baraks:hover .elementor-widget-text-editor,
.baraks:hover .elementor-widget-text-editor p {
  color: #B3B9C0 !important;
}

/* آیکن‌های فونتی */
.baraks:hover .elementor-icon,
.baraks:hover .elementor-icon i,
.baraks:hover .elementor-icon-box-icon .elementor-icon {
  color: #C4A265 !important;
}

/* آیکن‌های SVG */
.baraks:hover .elementor-icon svg,
.baraks:hover .elementor-icon svg path,
.baraks:hover .elementor-icon svg circle,
.baraks:hover .elementor-icon svg rect,
.baraks:hover .elementor-icon svg line,
.baraks:hover .elementor-icon svg polyline,
.baraks:hover .elementor-icon svg polygon,
.baraks:hover .elementor-icon-box-icon svg,
.baraks:hover .elementor-icon-box-icon svg path,
.baraks:hover .elementor-icon-box-icon svg circle,
.baraks:hover .elementor-icon-box-icon svg rect,
.baraks:hover .elementor-icon-box-icon svg line,
.baraks:hover .elementor-icon-box-icon svg polyline,
.baraks:hover .elementor-icon-box-icon svg polygon {
  fill: #C4A265 !important;
  stroke: #C4A265 !important;
}

/* جداکننده */
.baraks:hover .elementor-divider-separator {
  border-color: #ffffff !important;
  border-top-color: #ffffff !important;
}

/* ========================================
   Section: Custom Box Animations (Figma Style)
   Class: harakatehashiye
   ======================================== */

.harakatehashiye {
    position: relative !important;
    overflow: hidden !important;
}

/* خط متحرک بالا */
.harakatehashiye::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #C4A265 !important;
    transition: width 1s ease-in-out !important;
    z-index: 99 !important;
    pointer-events: none !important;
}

.harakatehashiye:hover::before {
    width: 100% !important;
}

/* ===== Divider ===== */

.harakatehashiye .elementor-divider-separator {
    width: 20% !important;
    transition: width 1s ease-in-out, background-color 0.4s ease !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.harakatehashiye:hover .elementor-divider-separator {
    width: 40% !important;
    border-top-color: #C4A265 !important;
}

/* ===== Icon Animation ===== */

.harakatehashiye .elementor-icon {
    transition: transform 0.8s ease, color 0.8s ease !important;
}

.harakatehashiye:hover .elementor-icon {
    transform: translateY(-3px);
    color: #C4A265 !important;
}

.harakatehashiye:hover .elementor-icon svg {
    fill: #C4A265 !important;
}

/* ========================================
   Section: Custom Box Animations (Figma Style)
   Class: harakatehashiyejadid
   ======================================== */
.harakatehashiye {
    position: relative !important;
    overflow: hidden !important;
}

/* خط متحرک بالا */
.harakatehashiyejadid::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 0 !important;
    height: 2px !important;
    background-color: #C4A265 !important;
    transition: width 1s ease-in-out !important;
    z-index: 99 !important;
    pointer-events: none !important;
}

.harakatehashiyejadid:hover::before {
    width: 100% !important;
}

/* ===== Divider ===== */

.harakatehashiyejadid .elementor-divider-separator {
    width: 85% !important;
    transition: width 1s ease-in-out, background-color 0.4s ease !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.harakatehashiyejadid:hover .elementor-divider-separator {
    width: 95% !important;
    border-top-color: #C4A265 !important;
}

/* ===== Icon Animation ===== */

.harakatehashiyejadid .elementor-icon {
    transition: transform 0.8s ease, color 0.8s ease !important;
}

.harakatehashiyejadid:hover .elementor-icon {
    transform: translateY(-3px);
    color: #C4A265 !important;
}

.harakatehashiyejadid:hover .elementor-icon svg {
    fill: #C4A265 !important;
}