/*
Theme Name: Nakhyla
Theme URI: https://nakhyla.ir/
Description: A custom child theme for Hello Elementor, developed for the Nakhyla project.
Author: rasool jamali
Author URI: https://rasooljamali.ir/
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: nakhyla
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: elementor, ecommerce, woocommerce, rtl-language-support, custom-background, custom-logo, custom-menu, featured-images
*/


/* -- header -- */
.box-header {
    position: relative;
    isolation: isolate;
    --r: 60px;
    --s: 100px;
    --a: 50deg;
    --bg: #e7ebe5;
    --br: 20px;
    --w: 84px;
}
.box-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg);
    border-top-left-radius: var(--br);
    border-top-right-radius: var(--br);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: calc(var(--w) / 2);
    --_m: 0 / calc(2 * var(--r)) var(--r) no-repeat radial-gradient(50% 100% at bottom, #000 calc(100% - 1px), #0000);
    --_d: calc((var(--s) + var(--r)) * cos(var(--a)));
    mask: calc(50% + var(--_d)) var(--_m), calc(50% - var(--_d)) var(--_m), radial-gradient(var(--s) at 50% calc(-1 * sin(var(--a)) * var(--s)), #0000 100%, #000 calc(100% + 1px)) 0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(50% - var(--_d)), #0000 0 calc(50% + var(--_d)), #000 0);
}
.box-header::after {
    content: "";
    position: absolute;
    inset: 0;
    top: calc(var(--w) / 2);
    background: var(--bg);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--br);
    border-bottom-right-radius: var(--br);
    height: calc(var(--w) / 2);
    --_m: 100% / calc(2 * var(--r)) var(--r) no-repeat radial-gradient(50% 100% at top, #000 calc(100% - 1px), #0000);
    --_d: calc((var(--s) + var(--r)) * cos(var(--a)));
    mask: calc(50% + var(--_d)) var(--_m), calc(50% - var(--_d)) var(--_m), radial-gradient(var(--s) at 50% calc(100% + sin(var(--a)) * var(--s)), #0000 100%, #000 calc(100% + 1px)) 0 calc(-1 * var(--r) * (1 - sin(var(--a)))) no-repeat, linear-gradient(90deg, #000 calc(50% - var(--_d)), #0000 0 calc(50% + var(--_d)), #000 0);
}


/* -- animation -- */
  .cloud {
    animation: clouds 6s infinite;
    animation-timing-function: ease-in-out;
  }
  .sunshine {
    animation: sunshines 3s infinite;
  }
  
  @keyframes sunshines {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }

    100% {
      transform: scale(1.4);
      opacity: 0;
    }
  }

  @keyframes clouds {
    0% {
      transform: translateX(30px);
    }

    50% {
      transform: translateX(0px);
    }

    100% {
      transform: translateX(30px);
    }
  }