/*  fade text in when in view css */
/* Initial State */
.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Slightly downward */
    transition: opacity 1s ease, transform 1s ease; /* Smooth transition */
}

/* Visible State */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0); /* Moves to its original position */
}




/* Main Container Styling */
.main-container {
  display: flex; /* Flexbox for layout */
  flex-wrap: wrap; /* Allow wrapping of items */
  flex-direction: column;
  width: auto;
  gap: 1rem; /* Space between items */
  justify-content: center; /* Center items horizontally */
  align-items: center;
}



.contact-card {
  display: flex; /* Flexbox for layout */
 
  align-items: center; /* Center items horizontally */
 

  /* width: 200px; Fixed width for card */
  text-align: center; /* Center text inside the card */
}

/*  teams text div */
.team-text{
  margin: 0 2rem;
 
  color: #504d4d;
  text-align: left;
  width: 50%;
}
.team-text h1{
    margin: 2rem 0;
  font-size: 2rem;
}

.team-text p{
    margin: 2rem 0;
 font-size: 1.5rem;
}

  /* Contact Card Styling */

.footer-name{
  font-size:1.6rem !important; 
}

.footer-icons{
display: flex;
flex-direction: row;
justify-content: space-evenly;

margin-top: .5rem;
/* justify-content: space-evenly; */

/* width:20%; */
  gap: 1.5rem; /* Space between icons */
}
/*  footer phone icon */
.footer-phone-icon{
  padding: .5rem 0 0 0;
   text-decoration: none;
   color:#ffffff;
   font-size: 2rem;
   margin-bottom: 1rem;
   transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for color and transform */
}

/*  for the teams page */
.footer-phone-icon:hover{
    color: #FDD051; /* Change icon color on hover */
  transform: scale(1.2);
}
.team-phone-icon{
  padding: .5rem 0 0 0;
   text-decoration: none;
   color:#040404;
   font-size: 2rem;
   margin-bottom: 1rem;
   transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for color and transform */
}
.team-phone-icon:hover{
    color: #FDD051; /* Change icon color on hover */
  transform: scale(1.2);
}
/* Icon Container Styling */
.icon-container {
  display: flex; /* Flexbox for layout */
  /* justify-content: space-around; Space items evenly */
  flex-direction: column;
  width: 100%; /* Full width of the card */
}

/*  linked in icon*/
.linkedin-icon{
     background-color: #0966C2;
    padding: .5rem;
    font-size:1.5rem;
    color: #ffffff;
      transition: transform 0.4s ease; /* Smooth transition for the fill effect */
}
.linkedin-icon:hover{

 transform: scale(1.2);

}
/* Individual social icon styling */
.email {
  /* margin: 0 10px; Horizontal margin between social icons */
   padding: .5rem 0 0 0;
  font-size:2rem; /* Size of social icons */
  color: #fff; /* White color for icons */
  transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for color and transform */
}

.email:hover {
  color: #FDD051; /* Change icon color on hover */
  transform: scale(1.2); /* Slightly enlarge icon on hover for effect */
}

/* teams email icon */
/* Individual social icon styling */
.team-email {
  /* margin: 0 10px; Horizontal margin between social icons */
   padding: .5rem 0 0 0;
  font-size:2rem; /* Size of social icons */
  color: #030303; /* White color for icons */
  transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for color and transform */
}

.team-email:hover {
  color: #FDD051; /* Change icon color on hover */
  transform: scale(1.2); /* Slightly enlarge icon on hover for effect */
}



/*  card- popup */
/* Profile Image Styling */
.profile-image {
    display: none;/* hide the image for the footer display */
  width: 100px; /* Fixed width */
  height: 100px; /* Fixed height */
  border-radius: 50%; /* Circular shape */
  object-fit: cover; /* Cover to maintain aspect ratio */
  margin-bottom: 10px; /* Space below the image */
}

.team-image{
  width: 30rem; /* Fixed width */
  height: 30rem; /* Fixed height */
  border-radius: 1rem; /* Circular shape */
  object-fit: cover; /* Cover to maintain aspect ratio */
  margin-bottom: 10px; /* Space below the image */
}

/* Icon Container Styling */
.icon-container {
  display: flex; /* Flexbox for layout */
  justify-content: space-around; /* Space items evenly */
  width: 100%; /* Full width of the card */
}

/* Popup Styling */
.card-popup {
  position: fixed; /* Fixed positioning to cover screen */
  top: 0; /* Start from top */
  left: 0; /* Start from left */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex; /* Flexbox for centering */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 1000; /* Bring popup to front */
}

/* Hidden class to hide the popup initially */
.card-hidden {
  display: none; /* Hide the popup */
  
}

/* Popup content container */
.card-popup-content {
    position: relative;
  background-color: white; /* White background */
  padding: 0 4rem 0 0; /* Padding around content */
  border-radius: 10px; /* Rounded corners */
  display: flex; /* Flexbox layout */
  width: 80%; /* Relative width */
  max-width: 800px; /* Maximum width */
  justify-content: space-between; /* Space between left and right containers */
  align-items: center; /* Align items vertically */
}

/* Left Container Styling */
.card-left-container {
  display: flex; /* Flexbox for layout */
  border-radius:10px  0 0 10px; /* Rounded corners */
  padding: 3rem;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally */
  background-color: rgb(83, 82, 82);
  width: 45%; /* Half of the popup width */
  text-align: center; /* Center text inside container */
}

/* Profile Image in Popup */
.card-profile-image {
  width: 16rem; /* Fixed width */
  height: 16rem; /* Fixed height */
  border-radius: 50%; /* Circular shape */
  object-fit: cover; /* Cover to maintain aspect ratio */
    object-position: top; /* Focuses on the top of the image */
  margin-bottom: 10px; /* Space below the image */
}

/*  text for the name under the card popup image */
.card-name{
font-size:1.5rem;
margin-bottom: 1rem;
color: #fff;
}

/* Icons Container in Popup */
.card-icons {
  display: flex; /* Flexbox layout */
  flex-direction: row; /* Stack icons vertically */
  /* align-items: center; Center icons horizontally */
  justify-content: space-evenly;
  width:60%;
  gap: 10px; /* Space between icons */
}

/*  phone icon */
.card-phone-icon{
    padding-top: 0.5rem;
    font-size: 2.5rem;
    color: #ffffff;
    transition: transform 0.4s ease; /* Smooth transition for the fill effect */
}
/*  phone icon */
.card-phone-icon:hover{
    
    color: #ffffff;
    transform: scale(1.2);
    
}

/* card linked in icon*/
.card-linkedin{
     background-color: #0966C2;
    padding: .5rem;
    font-size:24px;
    color: #ffffff;
      transition: transform 0.4s ease; /* Smooth transition for the fill effect */
}
.card-linkedin:hover{

 transform: scale(1.2);

}
/* Right Container Styling */
.card-right-container {
  display: flex; /* Flexbox layout */
  flex-direction: column; /* Stack items vertically */
  
  gap: 10px; /* Space between input fields */
  width: 50%; /* Half of the popup width */
  padding-left: 2rem; /* Padding to separate from left container */

}

/* the card send button */
.card-submit{

margin-top: 1rem;
}

#card-close-popup{
    position: absolute;
    cursor: pointer;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    transition: color 0.4s ease; /* Smooth transition for the fill effect */
}
form input,
form textarea {
    width: 100%; /* Full width of the container */
    padding: 10px; /* Padding for input */
    margin-bottom: 15px; /* Space between inputs */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Font size for readability */
    resize: vertical; /* Allows resizing vertically for textarea */
}
#card-close-popup:hover{
  color: #f1ce42;

}
/* Responsive Styling */
@media (max-width: 600px) {
  .card-popup-content {
    width: 90%;
    margin: 0 ;
    padding: 0;
    flex-direction: column; /* Stack content vertically on smaller screens */
    align-items: center; /* Center content horizontally */
  }

  
  #card-close-popup{
    color:#ffffff;
    transition: color 0.4s ease; /* Smooth transition for the fill effect */
}

.card-left-container {
  display: flex; /* Flexbox for layout */
  border-radius:10px 10px  0 0 ; /* Rounded corners */
 margin-bottom: 1rem;
 padding: 1rem;
  width: 100%; /* Full width for both containers */
}

.card-right-container {
 width: 100% !important; /* Full width for both containers */
 padding: 1rem;
}




}