/*
Theme Name:   Hello Elementor Child
Template:     hello-elementor
Description:  Child theme for alsabouni.net
Author:       S^2
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* Your custom CSS goes below this header */

@charset "UTF-8";

/* font load start */
/* noto-naskh-arabic-regular - arabic_latin */
@font-face {
    font-display: swap;
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/noto-naskh-arabic-v43-arabic_latin-regular.woff2') format('woff2');
}

/* noto-naskh-arabic-500 - arabic_latin */
@font-face {
    font-display: swap;
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/noto-naskh-arabic-v43-arabic_latin-500.woff2') format('woff2');
}

/* noto-naskh-arabic-600 - arabic_latin */
@font-face {
    font-display: swap;
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/noto-naskh-arabic-v43-arabic_latin-600.woff2') format('woff2');
}

/* noto-naskh-arabic-700 - arabic_latin */
@font-face {
    font-display: swap;
    font-family: 'Noto Naskh Arabic';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/noto-naskh-arabic-v43-arabic_latin-700.woff2') format('woff2');
}


/* font load end */



















:root {
    /* Desktop font sizes (default) */
    --h1-size: 64px;
    --h2-size: 36px;
    --h3-4-5-size: 20px;
    --h6-size: 18px;
    --p-size: 16px;
    --button-font-size: 16px;
    --small-font-size: 12px;
    /* Desktop spacing (default) */
    --section-margin: 40px;
    --section-padding: 16px;
    --section-margin-bottom: 96px;
    --section-border-radius: 8px;
    --gap-within-sections: 32px;
    --gap-within-inner-containers: 16px;
    /* colors start */
    --color-primary: #D5C86A;
    --color-secondary: #B8A416;
    --color-primary-inverse: #000;
    --color-background: #0C0D0E;
    --color-surface: #141414;
    --color-text: #fff;
    --color-text-muted: #ACACAC;
    --color-btn-tag: #2D2B1F;
    --color-btn-tag-border: var(--color-primary);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-secondary);
    --color-icon: var(--color-primary);
    /* colors end */
    /* opacity */
    --opacity-hover: 0.6;
  }
  
  /* Mobile sizes */
  @media (max-width: 767px) {
    :root {
      --h1-size: 40px;
      --h2-size: 28px;
      --section-margin: 0px;
      --section-padding: 16px;
      --section-margin-bottom: 64px;
      --section-border-radius: 0px;
    }
  }
  /* Font family based on direction */
  body {
    background-color: var(--color-background);
    font-family: Georgia, serif;
    text-align: left;
  }
  
  .arabic * {
    direction: rtl !important;
    font-family: "Noto Naskh Arabic", serif !important;
    text-align: right !important;
  }
  
  [dir=rtl], body [dir=rtl] {
    font-family: "Noto Naskh Arabic", serif;
    text-align: right;
  }
  
  /* layout - start */
  .section {
    max-width: 1200px;
    margin: var(--section-margin);
    margin-bottom: var(--section-margin-bottom);
    padding: var(--section-padding);
    gap: var(--gap-within-sections);
    background: var(--color-surface);
    border-radius: var(--section-border-radius);
    border: var(--color-primary) 1px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .section.flex {
    display: flex;
    flex-direction: column;
    gap: var(--gap-within-sections);
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-within-sections);
  }
  
  .flex-row {
    display: flex;
    gap: var(--gap-within-inner-containers);
    flex-wrap: wrap;
    align-items: flex-end;
  }
  
  .flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap-within-inner-containers);
  }
  
  /* layout - end */
  /* typography - start */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-transform: capitalize;
    color: var(--color-primary);
  }
  h1.elementor-heading-title,
  h2.elementor-heading-title,
  h3.elementor-heading-title,
  h4.elementor-heading-title,
  h5.elementor-heading-title,
  h6.elementor-heading-title {
    text-transform: capitalize;
    color: var(--color-primary);
  }
  
  h1 {
    font-size: var(--h1-size);
    font-weight: bold;
    margin: 0;
  }
  h1.elementor-heading-title {
    font-size: var(--h1-size);
    font-weight: bold;
    margin: 0;
  }
  
  h2 {
    font-size: var(--h2-size);
    font-weight: bold;
    margin: calc(32px - var(--gap-within-inner-containers)) 0;
  }
  h2.elementor-heading-title {
    font-size: var(--h2-size);
    font-weight: bold;
    margin: calc(32px - var(--gap-within-inner-containers)) 0;
  }
  
  h3,
  h4 {
    font-size: var(--h3-4-5-size);
    font-weight: bold;
    margin: calc(16px - var(--gap-within-inner-containers)) 0;
  }
  h3.elementor-heading-title,
  h4.elementor-heading-title {
    font-size: var(--h3-4-5-size);
    font-weight: bold;
    margin: calc(16px - var(--gap-within-inner-containers)) 0;
  }
  
  h5 {
    font-size: var(--h3-4-5-size);
    margin: 0;
  }
  h5.elementor-heading-title {
    font-size: var(--h3-4-5-size);
    margin: 0;
  }
  
  h6 {
    font-size: var(--h6-size);
    margin: 0;
  }
  h6.elementor-heading-title {
    font-size: var(--h6-size);
    margin: 0;
  }
  
  p {
    font-size: var(--p-size);
    margin: 0;
    line-height: 1.6;
    color: var(--color-text);
  }
  
  .text-box {
    width: 50%;
  }
  
  .small-text {
    font-size: var(--small-font-size);
    color: var(--color-text-muted);
  }
  
  /* typography - end */
  /* links - start */
  a {
    color: var(--color-link);
    text-decoration: underline;
    cursor: pointer;
  }
  a:hover {
    color: var(--color-link-hover);
  }
  @media (hover: none) and (pointer: coarse) {
    a:hover {
      color: unset;
    }
    a:active {
      color: var(--color-link-hover);
    }
  }
  
  /* links - end */
  /* buttons - start */
  [dir=rtl] button,
  [dir=rtl] body button,
  [dir=rtl] body .elementor-button,
  body [dir=rtl] button,
  body [dir=rtl] .elementor-button {
    font-weight: bold;
    font-family: inherit;
  }
  [dir=rtl] button.button,
  [dir=rtl] body button.button,
  [dir=rtl] body .elementor-button.button,
  body [dir=rtl] button.button,
  body [dir=rtl] .elementor-button.button {
    font-weight: bold;
    font-family: inherit;
  }
  
  html body button, html body .button {
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--button-font-size);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: unset;
    text-transform: capitalize;
    line-height: normal;
  }
  html body button::after, html body button.button::after, html body .button::after, html body .button.button::after {
    content: "›";
    line-height: 1;
  }
  html body button:hover, html body button.button:hover, html body .button:hover, html body .button.button:hover {
    opacity: var(--opacity-hover);
    background-color: unset;
    color: unset;
  }
  
  html .btn-primary,
  html body .btn-primary, html body .button.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-inverse);
  }
  html .btn-primary:hover,
  html body .btn-primary:hover, html body .button.btn-primary:hover {
    background: var(--color-primary);
    color: var(--color-primary-inverse);
  }
  html .btn-secondary,
  html body .btn-secondary,
  html body .button.btn-secondary {
    background: var(--color-primary-inverse);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
  }
  html .btn-secondary:hover,
  html body .btn-secondary:hover,
  html body .button.btn-secondary:hover {
    background: var(--color-primary-inverse);
    color: var(--color-primary);
  }
  html .btn-small,
  html body .btn-small,
  html body .button.btn-small {
    background: var(--color-btn-tag);
    color: var(--color-text);
    border: 1px solid var(--color-btn-tag-border);
    font-size: var(--small-font-size);
    padding: 4px 8px;
  }
  html .btn-small:hover,
  html body .btn-small:hover,
  html body .button.btn-small:hover {
    background: var(--color-btn-tag);
    color: var(--color-text);
  }
  html body a.elementor-button:hover {
    color: var(--color-primary-inverse);
    text-decoration: unset;
    opacity: var(--opacity-hover);
  }
  
  /* buttons - end */
  /* iconography - start */
  .svg {
    display: flex;
    gap: 20px;
  }
  .svg svg {
    fill: var(--color-icon);
  }
  .svg .small_svg svg {
    stroke: var(--color-icon);
    fill: none;
  }
  .svg .small_svg svg.barcode-isbn {
    stroke: none;
    fill: var(--color-icon);
    transform: scaleY(2);
  }
  .svg div {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  .large_svg svg {
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 32px;
  }
  
  .medium_svg svg {
    width: 100%;
    height: 100%;
    max-width: 24px;
    max-height: 24px;
  }
  
  .small_svg svg {
    width: 100%;
    height: 100%;
    max-width: 20px;
    max-height: 20px;
  }
  
  /* iconography - end */
  
  /*# sourceMappingURL=style.css.map */