.elementor-kit-6{--e-global-color-primary:#004E64;--e-global-color-secondary:#00BAB0;--e-global-color-text:#F17B29;--e-global-color-accent:#161616;--e-global-color-9b6ab16:#FFFFFF;--e-global-color-551ac59:#000000;--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-6 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 */.ast-single-post .entry-content a, .ast-comment-content a:not(.ast-comment-edit-reply-wrap a){
text-decoration: auto;    
}


div#blur {
    backdrop-filter: blur(32px);
}
img.wpml-ls-flag {
    width: 32px;
    border-radius: 4px !important;
}
div#bord {
    position: relative;
    overflow: hidden;
    z-index: 1;
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.05); /* خلفية خفيفة */
}

/* البوردر - شفاف قبل الهوفر */
div#bord::before {
    --angle: 0deg;
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px; /* سمك البوردر */
    background: linear-gradient(var(--angle), transparent, transparent) border-box;
    
    /* القص للحفاظ على الإطار فقط */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
    z-index: 2;
    transition: background 0.3s ease;
    box-sizing: border-box; /* مهم لمنع الانزياح */
}

/* عند الهوفر يظهر اللون + يتحرك */
div#bord:hover::before {
    background: linear-gradient(var(--angle), #272829B2, #f17b29) border-box;
    animation: rotate 4s linear infinite;
}



div#bord-red {
    position: relative;
    overflow: hidden;
    z-index: 1;
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.05); /* خلفية خفيفة */
}

/* البوردر - شفاف قبل الهوفر */
div#bord-red::before {
    --angle: 0deg;
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px; /* سمك البوردر */
    background: linear-gradient(var(--angle), transparent, transparent) border-box;
    
    /* القص للحفاظ على الإطار فقط */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
    z-index: 2;
    transition: background 0.3s ease;
    box-sizing: border-box; /* مهم لمنع الانزياح */
}

/* عند الهوفر يظهر اللون + يتحرك */
div#bord-red:hover::before {
    background: linear-gradient(var(--angle), #272829B2, #f17b29) border-box;
    animation: rotate 4s linear infinite;
}





@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

div#bout-motion {
  transition: margin-top 0.7s ease; /* ⏳ مدة الانتقال */
}

div#bout-motion:hover {
  margin-top: 10px;
}

#arrow .elementor-button-link span.elementor-button-icon {
    transition: margin 0.4s ease; /* الوقت 0.4 ثانية، غيره حسب رغبتك */
}

html[lang^="ar"] #arrow .elementor-button-link:hover span.elementor-button-icon {
    margin-left: -25px !important;
    margin-right: 25px !important;
}

html[lang^="en"] #arrow .elementor-button-link:hover span.elementor-button-icon {
    margin-right: -23px !important;
    margin-left: 23px !important;
}

div#blur-slid .e-con-boxed.e-con.e-child {
    position: relative;
    border-radius: 12px; /* الحواف */
    overflow: hidden;
    z-index: 1;
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.05); /* لون شفاف خفيف عشان البلر يبان */
}

/* البوردر الثابت */
div#blur-slid .e-con-boxed.e-con.e-child::before {
    --angle: 108.17deg; /* الزاوية الثابتة قبل الهوفر */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    padding: 1px; /* سمك البوردر */
    background: linear-gradient(var(--angle), #FFFFFF 0%, rgba(255, 255, 255, 0) 15%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* عند الهوفر يبدأ الأنيميشن */
div#blur-slid .e-con-boxed.e-con.e-child:hover::before {
    animation: rotate 6s linear infinite;
}

@keyframes rotate {
  to {
    --angle: 468.17deg; /* نضيف 360 على الزاوية الأصلية */
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 108.17deg;
  inherits: false;
}




span.elementor-counter-number-suffix {
    color: var(--e-global-color-primary);
}
div#dola span.elementor-counter-number-suffix {
    color: var(--e-global-color-48f8cdd);
}
div#dola span.elementor-counter-number-prefix {
    color: var(--e-global-color-primary);
}
/*منيو البلوج*/
/* عناصر المنيو */
div#cat li.menu-item a {
  display: flex;               /* يخلي المحتوى يتوسّط */
  align-items: center;         /* عموديًا في النص */
  justify-content: center;     /* أفقيًا في النص */
  padding: 10px 20px;          /* زبط البادينج */
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
  background-color: #FFFFFF1A;
  border: 1px solid var(--e-global-color-b2aa7cb);
  height: 100%;
  line-height: 1.4;
  white-space: nowrap;         /* يمنع تكسير الكلام */
}

/* Hover */
div#cat li.menu-item a:hover {
  background-color: #E60000;
}

/* العنصر الحالي */
div#cat li.current-menu-item a {
  background-color: #E60000;
  font-weight: 700;
}

/* الكونتينر */
div#cat .elementor-nav-menu {
  display: flex;
  justify-content: center; /* وسط في الديسكتوب */
  background: transparent;
  overflow: hidden;
  border-radius: 0;
  width: 100%; /* مهم عشان ياخد كل العرض */
}

/* فقط على الموبايل والتابلت */
@media (max-width: 1024px) {
  div#cat .elementor-nav-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start; /* يبدأ من الأول */
    width: 100%; /* يتمدد للعرض */
  }

  div#cat .elementor-nav-menu::-webkit-scrollbar {
    display: none;
  }

  div#cat li.menu-item {
    flex: 0 0 auto;
  }
}

/* --- الإضافات للتابلت والموبايل --- */
@media (min-width: 768px) and (max-width: 1024px) {
  div#cat .elementor-nav-menu {
    justify-content: space-between;
  }

  div#cat li.menu-item {
    flex: 1 1 auto;
    text-align: center;
  }

  div#cat li.menu-item a {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  div#cat .elementor-nav-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    width: 100%;
  }

  div#cat .elementor-nav-menu::-webkit-scrollbar {
    display: none;
  }

  div#cat li.menu-item {
    flex: 0 0 auto;
  }
}
/*منيو البلوج*/

/* dark & lite */
html.light body {
    background-color: #E2E8F0 !important;
}
.nocturne-dark-mode-floating-trigger {
    display: none !important;
}


html.dark #light {
    display: none;
}
html[lang="ar"].dark .elementor-15 .elementor-element.elementor-element-d5690f4::before, .elementor-15 .elementor-element.elementor-element-d5690f4 > .elementor-background-video-container::before, .elementor-15 .elementor-element.elementor-element-d5690f4 > .e-con-inner > .elementor-background-video-container::before, .elementor-15 .elementor-element.elementor-element-d5690f4 > .elementor-background-slideshow::before, .elementor-15 .elementor-element.elementor-element-d5690f4 > .e-con-inner > .elementor-background-slideshow::before, .elementor-15 .elementor-element.elementor-element-d5690f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
    background-image: url("/wp-content/uploads/2025/08/dark-over.png");
    --background-overlay: '';
    background-size: cover;
    background-position: bottom;
}
html[lang='en-US'].elementor-15 .elementor-element.elementor-element-d5690f4:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-d5690f4 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before {
    background-image: url("/wp-content/uploads/2025/08/dark-over.png");
    --background-overlay: '';
    background-size: cover;
    background-position: bottom;
}
html.dark div#abt-1::before {
    background-image: url(/wp-content/uploads/2025/08/dark-over.png);
    --background-overlay: '';
    background-size: cover;
    background-position: bottom;
}
html.dark div#abt-2 {
    background-color: #1B1B1C99;
}
/* dark */
/* lite */

html.light #dark {
    display: none;
}
html[lang="ar"].light div#dola span.elementor-counter-number-suffix {
    color: var(--e-global-color-secondary);
}
html.light .elementor-widget-theme-post-content {
    color: var(--e-global-color-528236c);
}
html.light .red_light_style{
    background-color:#C31212 !important;
}
html.light .blue_light_style{
    background-color: #5e779b !important;
}
html.light div#cat li.menu-item a {
  background-color: #FFFFFF80;
  color:var(--e-global-color-secondary);
}
html.light div#cat li.menu-item a:hover {
  background-color: #E60000;
  color:var(--e-global-color-48f8cdd);
}
html.light div#cat li.current-menu-item a {
    background-color: #E60000;
    color:var(--e-global-color-48f8cdd);

}
/* lite */

/* dark & lite */

#btn_hover_animation_from_white_to_red {
  position: relative;
  display: inline-block;
  background-color:White; 
  font-weight: bold;
  border: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
  border-radius: 100px; 
}

#btn_hover_animation_from_white_to_red::before {
  content: "";
  position: absolute;
  top: 100%;                  /* start at bottom */
  left: 50%;
  width: 110%;                /* fixed size large enough to cover */
  height: 400%;
  background: var( --e-global-color-primary );
  border-radius: 50%;
  transform: translate(-50%, 0);   /* center horizontally */
  transition: top 0.6s ease;
  z-index: -1;
}

#btn_hover_animation_from_white_to_red:hover::before {
  top: -180%;                     /* move ball upward to cover */
}


#btn_hover_animation_from_red_to_white {
  position: relative;
  display: inline-block;
  background-color:var( --e-global-color-primary ); 
  font-weight: bold;
  border: none;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
  border-radius: 100px; 
}

#btn_hover_animation_from_red_to_white::before {
  content: "";
  position: absolute;
  top: 100%;                  /* start at bottom */
  left: 50%;
  width: 110%;                /* fixed size large enough to cover */
  height: 400%;
  background: white;
  border-radius: 50%;
  transform: translate(-50%, 0);   /* center horizontally */
  transition: top 0.6s ease;
  z-index: -1;
}

#btn_hover_animation_from_red_to_white:hover::before {
  top: -180%;                     /* move ball upward to cover */
}





/* ---------- BASE STYLES ---------- */
.cards-container-light .single-card-column,
.cards-container .single-card-column {
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- LIGHT MODE ---------- */
html.light .cards-container-light.hover-active .single-card-column {
  opacity: 0.2;
}

html.light .cards-container-light.hover-active .single-card-column.is-hovered {
  opacity: 1;
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15),
              0 12px 50px rgba(0,0,0,0.08);
}

/* ---------- DARK MODE ---------- */
html.dark .cards-container.hover-active .single-card-column {
  opacity: 0.2;
}

html.dark .cards-container.hover-active .single-card-column.is-hovered {
  opacity: 1;
  transform: translateY(-6px);
  box-shadow: 0 0 12px rgba(255,255,255,0.25),
              0 0 80px rgba(255,255,255,0.10);
}

/* ---------- RTL Enhancement ---------- */
html[dir="rtl"] .cards-container-light.hover-active .single-card-column.is-hovered,
html[dir="rtl"] .cards-container.hover-active .single-card-column.is-hovered {
  transform: translateY(-6px) translateX(-2px);
}

/* ---------- Dark/Light -> Witcher Design  ---------- */

/* Custom styling for dark/light mode switcher */

/* Container styling */
.elementor-element-0fb409c .nocturne-dark-mode-trigger {
    width: 60px !important;
    height: 30px !important;
    border-radius: 50px !important;
    padding: 3px !important;
    position: relative;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Light mode (default) - Light gray background */
.nocturne-dark-mode-trigger {
    background: #e8e8e8 !important;
}

/* Dark mode - Dark background */
.dark .nocturne-dark-mode-trigger {
    background: #1a1a1a !important;
}

/* SVG icons positioning */
.nocturne-dark-mode-trigger svg {
    position: absolute;
    width: 16px !important;
    height: 16px !important;
    transition: all 0.3s ease;
}

/* Moon icon (light mode visible) */
.nocturne-dark-mode-trigger .dark-mode-light {
    left: 8px;
    fill: #666 !important;
    z-index:1 ;
}

/* Sun icon (dark mode visible) */
.nocturne-dark-mode-trigger .dark-mode-dark {
    right: 7px;
    fill: black !important;
    z-index: 1;
}

/* Create the toggle circle using ::before pseudo-element */
.nocturne-dark-mode-trigger::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Move circle to right in dark mode */
.dark .nocturne-dark-mode-trigger::before {
    left: calc(100% - 27px);
    background: #ffa500;
}

/* Hide default hover effects */
.nocturne-dark-mode-trigger:hover,
.nocturne-dark-mode-trigger:focus {
    background: #e8e8e8 !important;
    border: none !important;
}

.dark .nocturne-dark-mode-trigger:hover,
.dark .nocturne-dark-mode-trigger:focus {
    background: #1a1a1a !important;
}

/* Optional: Add subtle hover effect */
.nocturne-dark-mode-trigger:hover::before {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Ensure proper display of icons */
.nocturne-dark-mode-trigger svg {
    display: block !important;
    opacity: 0.6;
}

.dark .nocturne-dark-mode-trigger .dark-mode-dark {
    display: block !important;
}

.nocturne-dark-mode-trigger .dark-mode-light {
    display: block !important;
}


.dark .nocturne-dark-mode-trigger .dark-mode-dark {
    display: block !important;
}/* End custom CSS */