/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Child theme for Hello Elementor
Author: Your Name
Author URI: https://yourwebsite.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Your custom CSS starts here */

.hover-card:hover .our-team-title .elementor-heading-title {
  color:#f6a000;
}
.hover-card .our-team-title .elementor-heading-title {
  transition: .65s ease;
}
.hover-card:hover .our-team-icon svg {
  color: #f6a000 ;
}

.hover-card.our-team-icon,
.hover-card svg {
 transition: .65s ease;
}
.hover-card .our-team-icon {
  color: #fff;
}

.all-service-hover:hover .all-service-title .elementor-heading-title {
  color:#fff;
}
.all-service-hover:hover .elementor-widget-html .elementor-widget-container {
  background:#000;
border-radius: 30px 0px 30px 30px;
}
.all-service-hover:hover .elementor-widget-heading .elementor-widget-container {
  background:#000;
}
.all-service-hover .all-service-title .elementor-heading-title {
  transition: .4s ease-in-out;
}
.all-service-hover:hover .all-service-icon svg {
  color: #fff;
 transition: .4s ease-in-out;
transform: rotate(0deg);
}

.all-service-hover.all-service-icon,
.all-service-hover svg {
 transition: 0.4s ease-in-out;
transform: rotate(135deg);

}
.all-service-hover .all-service-icon {
  color: #000;
}

.project-card:hover .project-title .elementor-heading-title {
  color:#f6a000 !important;
}
.project-card:hover .card-image .elementor-widget-container img {
transform: scale(1.2);
}
.project-card .card-image .elementor-widget-container img {
 transition: .55s ease-in-out;
}
.project-card .card-image {
overflow:hidden;
border-radius:30px;
}

.project-card .project-title .elementor-heading-title {
  transition: .55s ease-in-out;
}

@media only screen and (max-width: 767px) 
{
.done-project{
width:clamp(200px,85vw,350px);
}
}

.adjust{aspect-ratio:16/9;}
.floating-img {
  animation: floatUpDown 4s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px); /* moves up */
  }
}

/* 0. Variables for easy theme changing */
:root {
    --primary-color: #F6A000; /* Main Orange Color */
    --primary-hover: #F6A000; /* Darker Orange for hover */
    --track-bg: #374151;      /* Dark gray for empty track */
    --text-color: #9CA3AF;    /* Light gray for text */
}

/* 1. Container */
.sr-podcast-player {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: ltr !important; 
    background: transparent !important;
    gap: 18px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 2. Play Button */
.sr-play-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    background-color: var(--primary-color) !important;
    border: none !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.25) !important;
}
.sr-play-btn:hover {
    background-color: var(--primary-hover) !important;
    transform: scale(1.05) !important;
}
.sr-play-btn svg {
    width: 22px !important;
    height: 22px !important;
}
.sr-icon-play {
    transform: translateX(1.5px) !important;
}

/* 3. Progress Bar */
.sr-progress-container {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    height: 24px !important;
    cursor: pointer !important;
}
.sr-progress-track {
    width: 100% !important;
    height: 4px !important;
    background-color: var(--track-bg) !important;
    border-radius: 2px !important;
    position: relative !important;
    pointer-events: none !important; /* Let container handle clicks */
}
.sr-progress-fill {
    height: 100% !important;
    width: 0%; 
    background-color: var(--primary-color) !important; 
    border-radius: 2px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
.sr-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    right: -5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}
.sr-progress-container:hover .sr-progress-fill::after {
    opacity: 1 !important;
}

/* 4. Time Display */
.sr-time {
    color: var(--text-color) !important; /* Neutral color, or change to var(--primary-color) if you want it orange too */
    font-size: 13px !important;
    font-family: ui-sans-serif, system-ui, sans-serif !important;
    min-width: 35px !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}
.logo-scroll-track {
  display: flex;
  width: max-content;
  animation: logoInfiniteScroll 45s linear infinite;
}
 .logo-scroll-group {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
}
.logo-scroll-group img {
  display: block;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes logoInfiniteScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}
@media (max-width: 767px) {
   .logo-scroll-group {
    gap: 10px;
  }
   .logo-scroll-group img {
    max-height: 60px;
  }
   .logo-scroll-track {
    animation: logoInfiniteScroll 45s linear infinite;
  }
}