/* 
Theme Name: 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
*/

/* Add your custom styles here */

.greytocolour img {
  /* Start fully desaturated */
  filter: grayscale(100%);
  
  /* Smoothly animate the filter over 0.5 seconds */
  transition: filter 0.5s ease-in-out;
  
  /* Optional: standard web practice to prevent 'jumping' */
  /* display: block;
  max-width: 100%;*/
}

.greytocolour:hover img {
  /* Bring back the full color */
  filter: grayscale(0%);
}

.greytocolour:hover :is(h1, h2, h3, h4, h5, h6) { color: #a2c870 !important; }
.greytocolour:hover{box-shadow: 1px 4px 5px 0px #a2c8708a !important;
}
/* 1. Reset & Setup Transitions */
.timeline h5, 
.timeline h6 {
    transition: color 0.4s ease-out !important;
}

/* 2. The Hover Color */
.timeline:hover h5,
.timeline:hover h6 {
    color: #a2c870 !important;
}

/* 3. The Staging (Row by Row) */

/* Row 1 */
.timeline:hover .e-con-child:nth-child(1) h5 { transition-delay: 0.1s; }
.timeline:hover .e-con-child:nth-child(1) h6 { transition-delay: 0.2s; }

/* Row 2 */
.timeline:hover .e-con-child:nth-child(2) h5 { transition-delay: 0.3s; }
.timeline:hover .e-con-child:nth-child(2) h6 { transition-delay: 0.4s; }

/* Row 3 */
.timeline:hover .e-con-child:nth-child(3) h5 { transition-delay: 0.5s; }
.timeline:hover .e-con-child:nth-child(3) h6 { transition-delay: 0.6s; }

/* Row 4 (and so on...) */
.timeline:hover .e-con-child:nth-child(4) h5 { transition-delay: 0.7s; }
.timeline:hover .e-con-child:nth-child(4) h6 { transition-delay: 0.8s; }

.allgrey img {
  filter: grayscale(100%);
  transition: filter 0.3s ease; /* Adds a smooth fade effect */
}

.allgrey img:hover {
  filter: grayscale(0%);
}