/* 
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
*/

.padding {
  padding: 2%;
}

@media (max-width: 768px) {
  .padding {
    padding: 5%;
  }
}

/* Add your custom styles here */
.sliderContainer {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.sliderContainer::before,
.sliderContainer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20%; /* Adjust height for the gradient area */
  z-index: 1; /* Ensure it overlays the slider */
  pointer-events: none; /* Make it non-interactive */
}

.sliderContainer::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
}

.sliderContainer::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.slider {
  position: relative;
  z-index: 0; /* Ensure the slider is below the gradient overlay */
  width: 100%;
  margin-bottom: 20px;
  height: 100%;
}

.slider .slick-list,
.slick-track {
  height: 100%;
}

.progressBarContainer {
  position: absolute;
  bottom: 40px;
  left: 0%;
  z-index: 2;
  display: flex;
  gap: 2rem;
}

@media (max-width: 768px) {
  .progressBarContainer {
    flex-direction: column;
  }
}

.progressBarContainer h3 a {
  color: #fff !important;
}
.progressBarContainer h3 {
  color: #fff !important;
  text-transform: none !important;
  font-size: 1em;
  margin: 0 0 5px 0;
}

.progressBar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.inProgress {
  height: 100%;
  background: white;
  transition: width linear; /* Animates the width */
}

.slick-controls {
  position: absolute;
  bottom: 40px;
  right: 0%;
  z-index: 1;
}

.slick-controls button {
  background: none;
  border: none;
  cursor: pointer;
}

.slick-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.custom-navigation {
  position: absolute;
  bottom: 40px;
  z-index: 2;
  right: 2%;
  display: flex;
  gap: 14px;
}

.custom-navigation button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-navigation svg {
  width: 24px;
  height: 24px;
  fill: #fff;
  transition: transform 0.2s ease;
}

.custom-navigation button:hover svg {
  transform: scale(1.1);
}

.custom-navigation button:focus {
  outline: none;
}

.linked .elementor-heading-title a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding-bottom: 6px;
  color: inherit; /* Maintain text color */
  border-bottom: 1px solid rgba(128, 128, 128, 0.7); /* Initial gray border */
}

.linked .elementor-heading-title a::after {
  content: '';
  position: absolute;
  bottom: -1px; /* Adjust to align with the border */
  left: 0;
  height: 1px; /* Border thickness */
  width: 100%; /* Matches the width of the text */
  background-color: white; /* Hover color */
  transform: scaleX(0); /* Initially hidden */
  transform-origin: left; /* Animates from left to right */
  transition: transform 0.3s ease; /* Smooth animation */
}

.linked .elementor-heading-title a:hover::after {
  transform: scaleX(1); /* Expands fully on hover */
}

/* Base styles for the article */
.elementor-post {
    position: relative;
    overflow: hidden; /* Ensure child elements are clipped to card */
}

/* Title positioning */
.elementor-post__title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

	padding: 5%;
    text-align: left;

    margin: 0;
    z-index: 1;
}

/* Hide the "View Project" link initially */
.elementor-post__read-more {
    position: absolute;
    bottom: 5%;
    left: 5%;
    transform: translateY(20px);
    color: #fff;
	padding-bottom: 6px;
	border-bottom: 1px solid white;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* On hover, show "View Project" link */
.elementor-post:hover .elementor-post__read-more {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Image styling to ensure it looks good */
.elementor-post__thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


.project-category-filter ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.project-category-filter ul li {
    margin: 0;
}

.project-category-filter ul li a {
    text-decoration: none;
    padding: 10px 25px;
    border: 1px solid #fff; /* White outline */
    color: #fff; /* White text */
    background-color: transparent;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.project-category-filter ul li a:hover {
    background-color: #fff; /* White background */
    color: black; /* Dark text */
}

.project-category-filter ul li a.active {
    background-color: #fff; /* White background */
    color: black; /* Accent color text */
}

/* 1) make sure the thumbnail container clips overflow */
.elementor-post__thumbnail {
  overflow: hidden;
  position: relative; /* in case you need stacking context */
}

/* 2) set up a smooth transition on the image */
.elementor-post__thumbnail img {
  display: block;           /* removes inline-image gaps */
  width: 100%;              /* ensures it fills the container */
  transition: transform 0.4s ease-in-out;
  will-change: transform;   /* gives the browser a heads-up */
}

/* 3a) zoom when you hover the link around the thumbnail */
.elementor-post__thumbnail__link:hover img {
  transform: scale(1.05) !important;
}

/* — or — */

/* 3b) zoom when you hover anywhere over the article */
.elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.05) !important;
}