/* 
Theme Name: zfat | Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
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
*/

:root {
    --nav-bg-cat1: #ec008c;
    --nav-bg-cat1-d: #CB0379;
    --nav-bg-cat2: #d3a12a;
    --nav-bg-cat2-d: #BE8C16;
    --nav-bg-cat3: #6ac359;
    --nav-bg-cat3-d: #54B042;
    --nav-bg-cat4: #5242a2;
    --nav-bg-cat4-d: #3A2A85;
    --nav-bg-cat5: #ff9a39;
}

/*** yellow ***/
.single-post.category-p-9 #post-headline .elementor-heading-title {
    color: var(--e-global-color-0458446);
}
.single-post.category-p-9 #post-tabs-style .e-n-tab-title .e-n-tab-title-text {
    border-bottom-color: var(--e-global-color-0458446);
}
.single-post.category-p-9 #more_posts {
    background-color: rgba(211, 161, 42, 0.5);
}
/*** pink ***/
.single-post.category-p-38 #post-headline .elementor-heading-title {
    color: var(--e-global-color-f09e027);
}
.single-post.category-p-38 #post-tabs-style .e-n-tab-title .e-n-tab-title-text {
    border-bottom-color: var(--e-global-color-f09e027);
}
.single-post.category-p-38 #more_posts {
    background-color: rgba(236, 0, 140, 0.5);
}
/*** purple ***/
.single-post.category-p-7 #post-headline .elementor-heading-title {
    color: var( --e-global-color-47dedf7 );
}
.single-post.category-p-7 #post-tabs-style .e-n-tab-title .e-n-tab-title-text {
    border-bottom-color: var( --e-global-color-47dedf7 );
}
.single-post.category-p-7 #more_posts {
    background-color:rgba(82, 66, 162, 0.5);
}
/*** green ***/
.single-post.category-p-8 #post-headline .elementor-heading-title {
    color: var( --e-global-color-ebbb21d );
}
.single-post.category-p-8 #post-tabs-style .e-n-tab-title .e-n-tab-title-text {
    border-bottom-color: var( --e-global-color-ebbb21d );
}
.single-post.category-p-8 #more_posts {
    background-color:rgba(84, 176, 66, 0.6);
}

.navcat {
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 100px);
    transition: all 0.6s ease-in-out;
}
.navcat.active, .navcat.current {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
    z-index: 20;
}
.navcat.current {z-index: 10;}

#nav_cat1 .subcat-link {
    background: var(--nav-bg-cat1) !important;
}
#nav_cat1 .current .subcat-link,
#nav_cat1 .subcat-link:hover {
    background: var(--nav-bg-cat1-d) !important;
}

#nav_cat2 .subcat-link {
    background: var(--nav-bg-cat2) !important;
}
#nav_cat2 .current .subcat-link,
#nav_cat2 .subcat-link:hover {
    background: var(--nav-bg-cat2-d) !important;
}

#nav_cat3 .subcat-link {
    background: var(--nav-bg-cat3) !important;
}
#nav_cat3 .current .subcat-link,
#nav_cat3 .subcat-link:hover {
    background: var(--nav-bg-cat3-d) !important;
}

#nav_cat4 .subcat-link {
    background: var(--nav-bg-cat4) !important;
}
#nav_cat4 .current .subcat-link,
#nav_cat4 .subcat-link:hover {
    background: var(--nav-bg-cat4-d) !important;
}


.nav-bg {
    position: absolute;
    width: 100%;
    aspect-ratio: 4.752475;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.nav-bg.active {
    opacity: 1;
}

#navbar_bg, #navbar_bg * {
    pointer-events: none;
}

#navbar_bg {
    transition: background-color 0.3s ease-in-out;
}

#navbar_bg.hp::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url('./assets/bg-bw1.svg'),
        url('./assets/bg-bw2.svg');
    background-position: 
        right bottom,
        left bottom;
    background-size: 
        auto 90%,
        auto 90%;
    background-repeat: 
        no-repeat,
        no-repeat;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    pointer-events: none;
}

#navbar_bg.transparent::after {
    opacity: 0;
}

#navbar_bg.transparent {
    background-color: transparent !important;
}

/* Individual background colors */
#bg-cat1 {
    /*background-color: var(--nav-bg-cat1);*/
    background-image: 
        url('./assets/bg-c1-1.svg'),
        url('./assets/bg-c1-2.svg');
    background-position: 
        right 3px,
        left 3px;
    background-size: 
        contain,
        contain;
    background-repeat: 
        no-repeat,
        no-repeat;
}

#bg-cat2 {
    /*background-color: var(--nav-bg-cat2);*/
    background-image: 
        url('./assets/bg-c2-1.svg'),
        url('./assets/bg-c2-2.svg');
    background-position: 
        right 3px,
        left 3px;
    background-size: 
        contain,
        contain;
    background-repeat: 
        no-repeat,
        no-repeat;
}

#bg-cat3 {
    /*background-color: var(--nav-bg-cat3);*/
    background-image: 
        url('./assets/bg-c3-1.svg'),
        url('./assets/bg-c3-2.svg');
    background-position: 
        right 3px,
        left 3px;
    background-size: 
        contain,
        contain;
    background-repeat: 
        no-repeat,
        no-repeat;
}

#bg-cat4 {
    /*background-color: var(--nav-bg-cat4);*/
    background-image: 
        url('./assets/bg-c4-1.svg'),
        url('./assets/bg-c4-2.svg');
    background-position: 
        right 3px,
        left 3px;
    background-size: 
        contain,
        contain;
    background-repeat: 
        no-repeat,
        no-repeat;
}

#bg-cat5 {
    /*background-color: var(--nav-bg-cat5);*/
    background-image: 
        url('./assets/bg-c5-1.svg'),
        url('./assets/bg-c5-2.svg');
    background-position: 
        right 3px,
        left 3px;
    background-size: 
        contain,
        contain;
    background-repeat: 
        no-repeat,
        no-repeat;
}

/* Hover styles for buttons and their content */
.cat_button,
.cat_button.current {
    background-color: white;
}
.cat_button:hover,
.cat_button:hover *,
.cat_button.current,
.cat_button.current * {
    color: white !important;
}

.cat_button:hover svg,
.cat_button:hover svg *,
.cat_button.current,
.cat_button.current * {
    fill: white !important;
}

/* Individual button hover background colors */
.cat_button[data-cat="cat1"]:hover, .cat_button[data-cat="cat1"].current {
    background-color: var(--nav-bg-cat1);
}

.cat_button[data-cat="cat2"]:hover, .cat_button[data-cat="cat2"].current {
    background-color: var(--nav-bg-cat2);
}

.cat_button[data-cat="cat3"]:hover, .cat_button[data-cat="cat3"].current {
    background-color: var(--nav-bg-cat3);
}

.cat_button[data-cat="cat4"]:hover, .cat_button[data-cat="cat4"].current {
    background-color: var(--nav-bg-cat4);
}

.cat_button[data-cat="cat5"]:hover, .cat_button[data-cat="cat5"].current {
    background-color: var(--nav-bg-cat5);
}


/****** 
header -  marquee
*******/
.marquee {
    margin: 0 auto;
    width: 100%;
    height: 22px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}
.marquee__content {
    width: 400% !important;
    display: flex;
    flex-direction: row-reverse;
    line-height: 22px;
    -webkit-animation: marquee 60s linear infinite forwards;
            animation: marquee 60s linear infinite forwards;
}
#header-marquee .marquee__content:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}

  
.list-inline {
    display: flex;
    justify-content: flex-start;
    width:auto;
    /* reset list */
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-inline li {
    padding: 0 50px;
}
.list-inline li:nth-child(3n + 1), .list-inline li:nth-child(3n + 1) span a  {
    color: var(--nav-bg-cat1);
}

.list-inline li:nth-child(3n + 2), .list-inline li:nth-child(3n + 2) span a {
    color: var(--nav-bg-cat2); 
}

.list-inline li:nth-child(3n), .list-inline li:nth-child(3n) span a {
    color: #3AB8ED; /* 3rd in group */
}

  
  @-webkit-keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(66.6%);
    }
  }
  
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(66.6%);
    }
  }

/**
* Animations
**/

@keyframes subtleFadeInRight {
    from {
      opacity: 0;
      transform: translate3d(20px, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
}
  
.elementor-element.elementor-invisible[data-settings*="animation:fadeInRight"],
.fadeInRight,
.swiper-slide-contents.fadeInRight {
    animation-name: subtleFadeInRight !important;
    animation-duration: 0.8s !important;
    animation-timing-function: ease-out !important;
}

@keyframes subtleFadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation-name: subtleFadeInUp !important;
}