.elementor-icon-list-items {list-style:none; margin:0;}
.elementor-icon-list-icon svg {width:14px;}
.mission-vision-boxes .xpro-box-icon-description {line-height:1.6rem;}

.typing-text {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: bold;
  color: #222;
  overflow: hidden;
  border-right: none;
  white-space: pre; /* <-- important: respects spaces + line breaks */
  
  animation: typing 4s steps(40, end) infinite alternate;
}

@keyframes typing {
  from { max-width: 0ch; }
  to { max-width: 40ch; } /* adjust number to match total characters including spaces */
}

.our-verticals-logo {filter: brightness(0) invert(1);}
.custom-footer-logo {filter: brightness(0) invert(1); transition:all 0.5s ease-in-out;}
.custom-footer-logo:hover {filter: brightness(1) invert(0); transition:all 0.5s ease-in-out;}

.current-menu-item a {padding-left:1rem !important;}

/*================================== CLIENT GALLERY RESPONSIVE =====================================*/
/* Mobile: 2 columns */
@media (max-width: 767px) {
    .responsive-gallery .gallery-columns-7 .gallery-item {
        width: 50% !important;
        float: left !important;
    }
    
    .responsive-gallery .gallery-columns-7 {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

/* Tablet: 4 columns (optional) */
@media (min-width: 768px) and (max-width: 1024px) {
    .responsive-gallery .gallery-columns-7 .gallery-item {
        width: 25% !important;
        float: left !important;
    }
    
    .responsive-gallery .gallery-columns-7 {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}


/*================================== CLIENT GALLERY RESPONSIVE =====================================*/


/* ====================================== ANIMATED SECTION HEADING ============================================ */
/* ----------------- WHITE ------------------------ */
.animated-section-heading-white {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: "SpaceGrotesk", Sans-serif;
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 3.125rem;
  color: #fff;
  list-style-type: none;
  display: flex;
  margin:0;
}

.word {
  display: flex; /* Letters within a word stay together */
  flex-shrink: 0; /* Word won't break */
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: section-heading-animation;
  animation-duration: calc(var(--i) * 1s);
}

/* Add proper spacing for word separation */
.animated-section-heading-white li.space {
  margin-right: 0.6rem; /* Adjust this value as needed */
}

/* keyframes */
@keyframes section-heading-animation {
  0% {
    opacity: 0;
    transform: rotateX(0deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(720deg);
  }
}

/* ----------------- WHITE AND CENTER ------------------------ */
.animated-section-heading-white-center {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  font-family: "SpaceGrotesk", Sans-serif;
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 3.125rem;
  color: #fff;
  list-style-type: none;
  display: flex;
  margin:0;
}

.word {
  display: flex; /* Letters within a word stay together */
  flex-shrink: 0; /* Word won't break */
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: section-heading-animation;
  animation-duration: calc(var(--i) * 1s);
}

/* Add proper spacing for word separation */
.animated-section-heading-white li.space {
  margin-right: 0.6rem; /* Adjust this value as needed */
}

/* keyframes */
@keyframes section-heading-animation {
  0% {
    opacity: 0;
    transform: rotateX(0deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(720deg);
  }
}

/* ----------------- BLACK AND CENTER ------------------------ */
.animated-section-heading-black-center {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  font-family: "SpaceGrotesk", Sans-serif;
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 3.125rem;
  color: #000;
  list-style-type: none;
  display: flex;
  margin:0;
}

.word {
  display: flex; /* Letters within a word stay together */
  flex-shrink: 0; /* Word won't break */
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: section-heading-animation;
  animation-duration: calc(var(--i) * 1s);
}

/* Add proper spacing for word separation */
.animated-section-heading-white li.space {
  margin-right: 0.6rem; /* Adjust this value as needed */
}

/* keyframes */
@keyframes section-heading-animation {
  0% {
    opacity: 0;
    transform: rotateX(0deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(720deg);
  }
}


/* ----------------- BLACK AND LEFT ------------------------ */
.animated-section-heading-black-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: left;
  font-family: "SpaceGrotesk", Sans-serif;
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 3.125rem;
  color: #000;
  list-style-type: none;
  display: flex;
  margin:0;
}

.word {
  display: flex; /* Letters within a word stay together */
  flex-shrink: 0; /* Word won't break */
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: section-heading-animation;
  animation-duration: calc(var(--i) * 1s);
}

/* Add proper spacing for word separation */
.animated-section-heading-white li.space {
  margin-right: 0.6rem; /* Adjust this value as needed */
}

/* keyframes */
@keyframes section-heading-animation {
  0% {
    opacity: 0;
    transform: rotateX(0deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(720deg);
  }
}

/* ----------------- RED AND LEFT ------------------------ */
.animated-section-heading-red-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: left;
  font-family: "SpaceGrotesk", Sans-serif;
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 3.125rem;
  color: #bf1617;
  list-style-type: none;
  display: flex;
  margin:0;
}

.word {
  display: flex; /* Letters within a word stay together */
  flex-shrink: 0; /* Word won't break */
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: section-heading-animation;
  animation-duration: calc(var(--i) * 1s);
}

/* Add proper spacing for word separation */
.animated-section-heading-white li.space {
  margin-right: 0.6rem; /* Adjust this value as needed */
}

/* keyframes */
@keyframes section-heading-animation {
  0% {
    opacity: 0;
    transform: rotateX(0deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(720deg);
  }
}

/* ----------------- RED AND CENTER ------------------------ */
.animated-section-heading-red-center {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  font-family: "SpaceGrotesk", Sans-serif;
  font-weight: 700;
  font-size: 3.125rem;
  line-height: 3.125rem;
  color: #bf1617;
  list-style-type: none;
  display: flex;
  margin:0;
}

.word {
  display: flex; /* Letters within a word stay together */
  flex-shrink: 0; /* Word won't break */
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: section-heading-animation;
  animation-duration: calc(var(--i) * 1s);
}

/* Add proper spacing for word separation */
.animated-section-heading-white li.space {
  margin-right: 0.6rem; /* Adjust this value as needed */
}

/* keyframes */
@keyframes section-heading-animation {
  0% {
    opacity: 0;
    transform: rotateX(0deg);
  }

  100% {
    opacity: 1;
    transform: rotateX(720deg);
  }
}



/* Prevent initial animation - add this to your existing CSS */
.animated-section-heading-black-center li,
.animated-section-heading-black-left li,
.animated-section-heading-white-center li,
.animated-section-heading-red-left li,
.animated-section-heading-red-center li,
.animated-section-heading-white li {
  animation-play-state: paused !important;
}

/* Resume animation when scrolled into view */
.animated-section-heading-black-center.animate li,
.animated-section-heading-black-left.animate li,
.animated-section-heading-white-center.animate li,
.animated-section-heading-red-left.animate li,
.animated-section-heading-red-center.animate li,
.animated-section-heading-white.animate li {
  animation-play-state: running !important;
}

.yotu-video {transition:all 0.5s ease-in-out !important;}
.yotu-video:hover {background:#fff !important; box-shadow:0 0 10px #999 !important; border-radius:5px; transition:all 0.5s ease-in-out;}
.yotu-video-title {color:#000 !important;}
.yotu-video:hover .yotu-video-title {margin:0 !important; padding:10px !important; text-decoration:none !important; transition:all 0.2s ease-in-out;}
.yotu-pagination-more {background:#ff3031 !important; padding:7px 25px !important; border:0 !important; color:#fff !important; font-family: "GeneralSans", Sans-serif !important; font-size:1rem !important; font-weight:500 !important;}
.yotu-pagination-more:hover {background:#000 !important;}

.premium-insta-feed {transition:all 0.3s ease-in-out !important;}
.premium-insta-feed:hover {transform:scale(1.1) !important; z-index:9 !important; transition:all 0.3s ease-in-out !important;}
.premium-insta-feed:hover img {border-radius:5px !important; transition:all 0.3s ease-in-out !important;}