/* =====================================================
 Theme Name:   Bricks Design Framework
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this design framework to enhance and extend Bricks Builder.
 Author:       ReyadWeb
 Author URI:   https://reyadweb.com/designframework
 Template:     bricks
 Version:      1.0.0
 Text Domain:  bricks
*/

 /* =============================================== 
    Bricks Design System    
    Update Date: 2024 - 08 - 1
    Highlights: 310 lines & 190 CSS Variables.     
   =============================================== */

/*  HEADER  */

#brx-header{
    height: calc(var(--gs-header-mini-height, 0px) + var(--gs-header-height, 0px));
}
/*  --- hide on the scroll*/

/*Mini Header*/
[dse-hide-on-scroll]{
    transition: all 0.6s ease-in-out;
    height: var(--gs-header-mini-height);
    min-height: 0px;
    transition: transform 0.3s ease-in-out;
}

.sticky.scrolling [dse-hide-on-scroll] {
    transform: translateY(calc(-1 * var(--gs-header-mini-height)));
}

.sticky.scrolling:hover [dse-hide-on-scroll]{
    transform: translateY(0);
}

/*Main Header*/
[dse-header-main]{
    transform: translateY(calc(1 * var(--gs-header-mini-height, 0px)));
    transition: 0.3s ease-in-out;
}


.scrolling.sticky [dse-header-main] > div{
    transform: translateY(0);
    height: calc(var(--gs-header-height) - 1rem);
}

.scrolling.sticky [dse-header-main]{
    transform: translateY(calc(0 * var(--gs-header-mini-height, 0px)));
}

.scrolling.sticky:hover [dse-header-main]{
    transform: translateY(var(--gs-header-mini-height));
}

.scrolling [dse-header-main] .bricks-button{
    padding: 0.7rem 2rem !important;
    transition: 0.3s ease-in-out;
}

/*OffCanva*//*

[dse-offcanva]{
    max-height: calc(100vh - var(--gs-header-height) - var(--gs-header-mini-height));
    max-width: 100vw !important;
}

[dse-offcanva-content]{
    max-height: calc(100vh - var(--gs-header-height) - var(--gs-header-mini-height));
    max-width: 100vw !important;
    transition: transform 0.3s ease-in-out;
}*/

/*Header Tool Bar*/
[dse-header="secondary"]{
    transform: translateY(calc(1 * var(--gs-header-mini-height)));
    transition: 0.3s ease-in-out 0.3s;
}

.sticky.scrolling [dse-header="secondary"]{
    transform: translateY(calc(0 * var(--gs-header-mini-height)));
    visibility: visible;
}


.sticky.scrolling.sliding.slide-up [dse-header="secondary"]{
    transform: translateY(calc(1 * var(--gs-header-mini-height)));
    visibility: hidden;
}

.sticky.scrolling:hover [dse-header="secondary"]{
    transform: translateY(calc(1 * var(--gs-header-mini-height)));
    visibility: visible;
    opacity: 1;
}

/*Default Theme Style: Blog & Search*/
.gs_page_hero__container, .search .bricks-archive-title-wrapper.brxe-container, .blog .layout-default .brxe-container, .post-template-default .bricks-post-header .brxe-container, .error404 #brx-content > section { 
    padding-top: calc(var(--gs-header-height, 0px) + var(--gs-header-mini-height, 0px) + var(--gs-hero-top-margin, 0px));
 }

.search .bricks-archive-title-wrapper.brxe-container{
    margin-top: calc(var(--gs-header-height, 0px) + var(--gs-hero-top-padding, 0px));
    justify-content: center;
    align-items: center;
 }

.sticky [dse-hero="sticky-on-scroll"] {
    transform: translateY(calc(-1 * (var(--gs-header-height, 0px) + var(--gs-header-mini-height, 0px))));
}

/*Sticky header - offcanva offset mode*//*
#brx-header.sticky {
    margin-left: inherit;
    margin-right: inherit;
}

#brx-header.sticky {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: background-color .2s, transform .4s;
    width: 100vw;
    z-index: 998;
}*/

/*
.sticky.scrolling [dse-hide-on-scroll] [dse-back-to-top]{
transform: translateY(calc(100vh - var(--dse-back-to-top-size) - var(--dse-back-to-top-position-y-bottom)));
}

.sticky.scrolling .brx-offcanvas-inner, .sticky.scrolling .brxe-offcanvas.brx-open .brx-offcanvas-backdrop{
    height: 100%;
    max-height: calc(100vh - var(--gs-header-height) - var(--gs-header-mini-height));
    transform: translateY(calc(var(--gs-header-height) + var(--gs-header-mini-height)));
    transition: transform 0.3s ease-in-out;
    /*margin-top:  calc( var(--gs-header-height) + var(--gs-header-mini-height));*//*
}

*/

/**Body*/
body { 
    overflow-x: hidden;
    max-width: 100vw;
    scrollbar-gutter: stable both-edges;
    background-color: var(--gs-body) !important; 
    background-image: var(--gs-background-image, none) !important; 
    background-size: cover !important; 
    background-repeat: no-repeat !important; 
    background-attachment: scroll !important; 
    background-position: top center !important; 
    } 

body .no-scroll{
    overflow: hidden !important;
    max-width: 100vw !important;
    max-height: 100vh !important;  
    }
    


/*RTL language support*/

.translated-rtl .gs-rtl-flex{
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;

}

.translated-rtl .gs-rtl-flex-item{
  /*  text-align: end !important;
    justify-content: end !important;
    align-items: flex-end;*/
    direction: rtl !important;

}

.translated-rtl  .gs_overlay-left-side-st1-dark{
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
     transition: 0S;
}

.translated-rtl font font {
    display: flex;
    text-align: end;
    text-justify: revert;
    direction:rtl;
    text-align:right;
    text-align-last: right;
    -moz-text-align-last: right;
    font-family: arial !important;
  }

.translated-rtl .gs_title-st1-center__info_box font span{
    text-align: center !important;
    text-align-last: center;
    -moz-text-align-last: center;
    justify-content: end !important;
  }


.translated-rtl .gs_info_box-st1-large__heading{
  flex-direction: row;
  width: 100%;
  display: flex;
  gap: 0.4em ;
  flex-wrap: wrap;
  justify-content: inherit;
}

.translated-rtl .gs_info_box-st1-large__heading font {
    width: auto ;
    white-space: wrap nt;
  }


.translated-rtl .gs_info_box-st1-large__heading font {
    order: -1;
  }

.translated-rtl ul, .translated-rtl  li, .translated-rtl ul font font{
    direction: rtl !important;
    padding-right: 0px;
  }
.translated-rtl ul font font{
    display: unset;
}

.translated-rtl .gs-rtl-text-center{
    text-align: center !important;
    display: contents;
} 


.translated-rtl .gs-rtl-text-center font font{
    text-align: center !important;
    display: contents;
} 

.translated-rtl .gs_counter_st1__number{
  display: flex;
  flex-wrap: wrap-reverse;
}

.translated-rtl .brxe-heading{
}


/*Menu*/
.translated-rtl .gs_header_main-st2__menu_nav.brxe-nav-menu .bricks-nav-menu > li > .brx-submenu-toggle {
    justify-content: center;
    flex-direction: row-reverse;
  }

/*Font*/
.translated-rtl{
--gs-font-multiplier: 1.2 !important;
}

/*Accordion
.translated-rtl .gs_accordion_custom-st2.brxe-accordion-nested .accordion-title-wrapper{
    flex-direction: row-reverse;
    justify-content: space-between;
  }

.translated-rtl .gs_accordion_custom-st2.brxe-accordion-nested .accordion-content-wrapper{
    direction: rtl;
}

/**//*Section Wrapper & Info-Box Element*/
.translated-rtl .gs_info_box-st1-large, .translated-rtl .gs-inner-wrapper{
    direction: rtl;
}

/* 
.translated-rtl .gs-rtl-text-alignment{
    font-family: var(--gs-rtl-font);
    text-align: end !important;
    justify-content: end !important;
}
*/
    
.translated-rtl p {
    font-family: var(--gs-rtl-font);
    font-family: arial !important;
    display: inline; /*grid*/;
    grid-template-columns: auto auto auto;
    justify-content: right;
    /*display: flex;*/
    /*flex-direction: row-reverse;*/
    /*text-align: end !important;*/
    /*justify-content: end !important;*/
}

.translated-rtl h1, .translated-rtl h2, .translated-rtl h3, .translated-rtl h4, .translated-rtl h5 {
    font-family: var(--gs-rtl-font);
    font-family: arial !important;
    display: inline-grid; /*grid*/;
    grid-template-columns: auto auto auto;
    justify-content: right;
    gap: 0.4em;
    /*justify-content: end;*/
    display: flex;

    /*display: flex;*/
    /*flex-direction: row-reverse;*/
    /*text-align: end !important;*/
    /*justify-content: end !important;*/
}


.translated-rtl h1 font, .translated-rtl h2 font, .translated-rtl h3 font, .translated-rtl h4 font, .translated-rtl h5 font{
   /*width: 100%;*/
    gap: 1rem;
    justify-content: right;
}

.translated-rtl .gs-title-st1.brxe-block{
    direction: rtl !important;
}



/* ----------    Dark Mode   ------------ */
body.dark-mode { 
/* === CSS Variables Trans === */
--gs-display-on-light-mode: none;
--gs-display-on-dark-mode: block;  
/* Main (Brand) Colors */
--gs-primary: var(--gs-primary-dark);
--gs-primary-subtle: var(--gs-primary-subtle-dark);
--gs-primary-subtler: var(--gs-primary-subtler-dark);
--gs-primary-subtlest: var(--gs-primary-subtlest-dark);
--gs-primary-bold: var(--gs-primary-bold-dark);
--gs-primary-bolder: var(--gs-primary-bolder-dark);
--gs-primary-boldest: var(--gs-primary-boldest-dark);
--gs-secondary: var(--gs-secondary-dark);
--gs-tertiary: var(--gs-tertiary-dark);
/* Text Colors */
--gs-text: var(--gs-text-dark);
--gs-text-base: var(--gs-text-base-dark);
--gs-text-emphasis: var(--gs-text-emphasis-dark);
--gs-text-inverse: var(--gs-text-inverse-light-dark);
--gs-text-inverse-dark: var(--gs-text-inverse-dark-light);
--gs-text-mute: var(--gs-text-mute-dark);
/* Border Colors*/   
--gs-border: var(--gs-border-dark);
--gs-border-subtle: var(--gs-border-subtle-dark);
--gs-border-bold: var(--gs-border-bold-dark);
/* Fixed Colors */
--gs-white: var(--gs-white-dark);
--gs-black: var(--gs-black-dark);
/* neutral (Gray) Colors - */
--gs-neutral-1: var(--gs-neutral-1-dark);
--gs-neutral-2: var(--gs-neutral-2-dark);
--gs-neutral-3: var(--gs-neutral-3-dark);
--gs-neutral-4: var(--gs-neutral-4-dark);
--gs-neutral-5: var(--gs-neutral-5-dark);
--gs-neutral-6: var(--gs-neutral-6-dark);
--gs-neutral-7: var(--gs-neutral-7-dark);
--gs-neutral-8: var(--gs-neutral-8-dark);
/* Background Colors  */
--gs-body: var(--gs-body-dark);
--gs-background-image: var(--gs-background-image-dark);
--gs-surface-1: var(--gs-surface-1-dark);
--gs-surface-2: var(--gs-surface-2-dark);     
--gs-surface-3: var(--gs-surface-3-dark);  
--gs-transparent: var(--gs-transparent-dark);  
--gs-transparent-subtle: var(--gs-transparent-subtle-dark);      
--gs-transparent-bold: var(--gs-transparent-bold-dark); 
--gs-light: var(--gs-light-dark);
--gs-dark: var(--gs-dark-light); 
/* UI - Supportive Colors */
--gs-active: var(--gs-active-dark);
--gs-hover: var(--gs-hover-dark); 
--gs-accent: var(--gs-accent-dark); 
--gs-mute: var(--gs-mute-dark);
--gs-info: var(--gs-info-dark);
--gs-border: var(--gs-border-dark);
--gs-warning: var(--gs-warning-dark);
--gs-negative: var(--gs-negative-dark);
--gs-positive: var(--gs-positive-dark);
/* Shadows*/
--gs-shadow-primary: var(--gs-shadow-primary-dark);

/* Backgrounds*/
--gs-background-line-color: var(--gs-background-line-color-dark);
background-color: var(--gs-body-dark);
background-image: var(--gs-background-image, none);
background-size: contain;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top center;
}
/*Images*/
body.dark-mode img {
    filter: brightness(var(--gs-dark-mode-image-brightness)) contrast(var(--gs-dark-mode-image-contrast));
}

body.dark-mode img[gs-no-dark-mode-image]{
    filter: unset;
}

body [dse-hide-on-light-mode]{
    display: none !important;
}

body.dark-mode [dse-hide-on-dark-mode]{
    display: none;
}

body.dark-mode [dse-hide-on-light-mode]{
    display: unset !important;
}


:root {   
    @media (prefers-reduced-motion: no-preference) {  /*Respecting Users’ Motion Preferences   */  
        body{transition: background-color 0.3s ease;}}    /*   It is mainly used for dark mode color tansitions   */   
 /*  ----  Media Query Responsive Sizing & Spcings    ----    */
     @media screen and (min-width: 478px) {            /* For Mobile */ 
         --gs-font-multiplier: 1;
         --gs-spacing-multiplier: 1;
         --gs-container-padding-x: calc(var(--gs-container-padding-x) + 2rem);}
     @media screen and (min-width: 767px) {            /* For Mobile landscape */
         --gs-font-multiplier: 1;
         --gs-spacing-multiplier: 1;}
     @media screen and (min-width: 971px) {            /* For Tablet */ 
         --gs-font-multiplier: 1;
         --gs-spacing-multiplier: 1;}
     @media screen and (min-width: 1280px) {            /* For Big TV's (HD Screens) */ 
         --gs-font-multiplier: 1;
         --gs-spacing-multiplier: 1;}
     @media screen and (min-width: 1920px) {            /* For Projectors or Higher Resolution Screens (Full HD) [2] */
         --gs-font-multiplier: 1;
         --gs-spacing-multiplier: 1;}
     @media screen and (min-width: 3840px) {            /* For 4K Displays (Ultra HD) [3] */
         --gs-font-multiplier: 1;
         --gs-spacing-multiplier: 1;}	
         --gs-text-inverse-dark-light: var(--gs-text-inverse);
         --gs-text-inverse-light-dark: var(--gs-text-inverse-dark);          
}



/* === Accessibilty & Select Behavior === */
body.bricks-is-frontend:focus{ outline: var(--gs-focus-outline);}
body.bricks-is-frontend:focus-visible{ outline: solid (--gs-focus-visible-border-width) var(--gs-focus-visible-color); outline-offset: calc(var(--gs-focus-visible-border-width) * 5); transition: all .3s;}   
body.no-select { user-select: none;}  

/* === Background Lines === */
#brx-header, #brx-content, #brx-footer{
  background: linear-gradient(90deg, transparent calc(100% - var(--gs-line-width)), var(--gs-background-line-color) 0);
  background-size: calc((100% - var(--gs-line-number)*var(--w))/(var(--gs-line-number) + 1) + var(--gs-line-width)) 100%;
  transition: background 0.3s ease 0.3s;
}

/* === Page Title & Headers === */
body .wordpress h1{
    width: var(--gs-container-max-width);
    max-width: var(--gs-container-max-width);
    margin-top: 8rem;
    padding-right: 2.4rem;
    padding-left: 2.4rem;
    margin-top: 8rem;
}

/* === Resized Box === */
body [dse-box="resize"], .gs-box-resize{
  display: flex;
  resize: vertical;
  overflow: auto;
}

/* === Scrollbar === */
/* width */
::-webkit-scrollbar, 
body::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
/* Track */
::-webkit-scrollbar-track, 
body::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 0em; 
}
/* Handle */
::-webkit-scrollbar-thumb, 
body::-webkit-scrollbar-thumb {
    background: var(--gs-primary); 
    border: 2px solid var(--gs-accent);
    border-radius: 50px;   
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover, 
body::-webkit-scrollbar-thumb:hover {
    background: var(--gs-active); 
}
body::-webkit-scrollbar-thumb:hover {
    background: var(--gs-accent); 
}

.no-animations * {
    animation: none !important;
    transition: none !important;
}