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



@keyframes moveUpDown {
  0% {
    transform: translateY(0); /* Starts at original position */
  }
  50% {
    transform: translateY(20px); /* Moves down by 10px */
  }
  100% {
    transform: translateY(0); /* Returns to original position */
  }
}

.move-img {
  animation: moveUpDown 2s ease-in-out infinite; /* 2s duration, infinite loop */
}
@keyframes blink {
  0% {
    opacity: 1; /* Fully visible */
  }
  50% {
    opacity: 0; /* Completely invisible */
  }
  100% {
    opacity: 1; /* Fully visible again */
  }
}

.blink-img {
  animation: blink 1s infinite; /* 1s duration, infinite loop */
}

@keyframes moveLeftRight {
  0% {
    transform: translateX(0); /* Starts at original position */
  }
  50% {
    transform: translateX(10px); /* Moves right by 10px */
  }
  100% {
    transform: translateX(0); /* Returns to original position */
  }
}

.img-moveLeftRight {
  animation: moveLeftRight 2s ease-in-out infinite; /* 2s duration, infinite loop */
}
.faded-text {
    font-size: 40px;
    font-weight: bold;
    background: linear-gradient(to bottom, #207bb0, rgba(255, 255, 255, 0.2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}


.hover-img .hover-image img {
  
  transition: transform 0.6s ease-in-out; /* Smooth transition */
  transform-style: preserve-3d; /* Ensure 3D effect is maintained */
  transform-origin: center; /* Define the center point of the transformation */
}

.hover-img:hover .hover-image img {
  transform: rotateY(180deg); /* Flap/Flip the image 180 degrees */
}
.box-shadow-sec{
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* Card styles */
.card {
  background-color: #f8f8f8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-top: 2px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 2px solid transparent;

  border-radius: 8px;
  transition: border 0.3s ease; /* Smooth transition for border */
}

/* Hover effect */
.card:hover {
  border-color: #3498db; /* Blue border when hovered */
}
/* Card styles */
.card1 {
  background-color: #f8f8f8;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-top: 2px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 2px solid transparent;

  border-radius: 8px;
  transition: border 0.3s ease; /* Smooth transition for border */
}

/* Card Style */


.faded-text1{
	 font-size: 40px;
    font-weight: bold;
    background: linear-gradient(to bottom, #207bb0, rgba(255, 255, 255, 0.2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.services-card:hover .faded-text1{
	background: linear-gradient(to bottom, #207bb0, rgba(0, 0, 0, 1));
    -webkit-background-clip: text;
}


/* Initial state of the image inside the service-hover-img container */
.services-card .service-hover-img img {
  transition: transform 0.6s ease-in-out; /* Smooth transition */
  transform-style: preserve-3d; /* Ensure 3D effect is maintained */
  transform-origin: center; /* Define the center point of the transformation */
}

/* Hover effect on the entire card (this ensures the image flips when the card is hovered) */

.services-card:hover .service-hover-img img {
  transform: rotateY(180deg); /* Flip the image 180 degrees */
}
.services-card{
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}




/* Card Container */
.card-team {

  border-radius: 15px;
  overflow: hidden;
  position: relative;
/*   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); */
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.card-team:hover {
  transform: scale(1.05);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); 
}

/* Card Image */
/* .card-image {
  object-fit: cover;
  transition: transform 0.3s ease;
} */

.card-team:hover .card-image {
  transform: scale(1.1);
}

/* Card Content */
.card-content {
/*   background: rgba(255, 255, 255, 0.8); */
  position: absolute;
  bottom: 0;
  width: 100%;
  
  transition: transform 0.3s ease;
}

.card-title {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

.card-description {
  font-size: 14px;
  color: #666;
}

/* Overlay for Likes and Comments */
/* .card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
 */
/* Likes and Comments Text */
 .card-likes {
  color: #fff;
  font-size: 18px;
  text-align: center;
  opacity: 0;
/*   transform: translateY(20px); */
  transition: opacity 0.5s ease, transform 0.5s ease;
/*   background: rgba(255, 255, 255, 0.8); */
}
/*  
.card-likes .likes {
  display: block;
} */

.card-likes  {
  display: block;
}

/* Hover Effect: Show Overlay and Likes */
.card-team:hover {
  opacity: 1;
}

.card-team:hover .card-likes {
  opacity: 1;
  transform: translateY(0);
}

/* When hovering the card, the content (title + description) slides up slightly */
.card-team:hover .card-content {
  transform: translateY(-20px);
}
 .card-team:hover .card-content-sec{
	background-color:#fff;
} 



/* Base styles */
/* Base styles */
.info-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease, background-color 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #000; /* Default border */
}

/* Hover effect */
.info-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  border-bottom: 4px solid #000 !important;
  border-right: 4px solid #000 !important;
  border-left: 1px solid #000 !important;
  border-top: 1px solid #000 !important;
}

/* Icon style inside the card */
.info-card .icon-wrapper {
  background-color: #003366; /* Default icon bg */
  transition: background-color 0.3s ease; /* Smooth transition for background-color */
}

/* On hover, change icon background */
.info-card:hover .icon-wrapper {
  background-color: #007BFF !important; /* Hover icon bg */
}