/*  the all teams page */

/* General styling for the card container and layout */
/* .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 1rem; 
  padding: 1rem;
} */



.page-container{
 
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;


height: auto;
}


.content-container{
margin: 4rem 0 0 0;

text-align: left;
}

header {
  text-align: center; /* Center-align the content */
  padding: 2rem 1rem; /* Add some space around the content */
}

header {
  text-align: center; /* Center-align the content */
  padding: 2rem 1rem; /* Add some space around the content */
}

/* Header Title Styling */
header h1 {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 5rem ; /* Larger and more prominent for desktop */
  margin: 5rem 0 10rem 0;
  font-weight: bold;
  color: #333; /* Neutral, professional text color */
  position: relative; /* Needed for the gradient underline */
}

header h1::after {
  content: ''; /* Add the decorative element */
  display: block;
  width: 40%; /* Narrower underline */
  height: 4px; /* Thickness of the underline */
  margin: 0.5rem auto 0; /* Center and add spacing */
  background: linear-gradient(90deg, #fdd835, #f57c00); /* Warm gradient underline */
  border-radius: 2px; /* Smooth edges for the underline */
}

/* Header Subtitle (Paragraph) Styling */
header p {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 1.4rem; /* Slightly larger for better balance with the header */
  color: #555; /* Softer text color for contrast */
  max-width: 800px; /* Limit width for readability */
  margin: 1rem auto 0; /* Center-align and add spacing */
  line-height: 1.8; /* Improve readability and complement larger text */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  header h1 {
    font-size: 3.8rem; /* Adjust for tablets */
  }

  /*  under line */
  header h1::after{
    width: 90%;
  }
  header p {
    font-size: 1.2rem; /* Adjust paragraph size for smaller screens */
  }


}

@media (max-width: 480px) {
  header h1 {
    font-size: 3.4rem; /* Adjust for mobile screens */
  }
  /*  under line */
  header h1::after{
    width: 90%;
  }

  header p {
    font-size: 1.1rem; /* Adjust paragraph size for extra small screens */
     text-align: left;
    line-height: 1.4;
    padding: 0 0.5rem;
  }


  /*  adjust spacing on smaller screens */

  .card-image {
    margin-top: 1rem !important;
  }

  /* keep the top card with margin */
  .top-card{
    margin-top: 7rem;
  }
}


.team-container{
   display: flex; /* Enable Flexbox for layout */
      flex-direction: row; /* Arrange items in a row */
      justify-content: space-evenly; /* Distribute items evenly across the row */
      align-items: center; /* Align items vertically to the center of the container */
     text-align: center;
     /* background-color:#6B7078; */
     margin-top: 1rem;
      width: 100vw;
     height: auto; /* Allow the container height to adapt */
      padding: 2rem 2rem 2rem 6rem; /* Add padding for better spacing */
      background-color: #f8f9fa; /* Light grey for a clean and professional look */
 
    
}

/* image container Ensure the card image maintains its aspect ratio  */
.card-image {
  margin-top: 12rem;
  position: relative;
  padding: 0px;
  width: 100%;
  height: 100%; /* Set height to 0 and use padding for aspect ratio */
  /* padding-top: 100%; Aspect ratio of 16:9; adjust as needed for other ratios */
  background-size: contain; /* Ensures the entire image fits inside the card */
  background-repeat: no-repeat; /* Prevents tiling of the image */
  background-position: center; /* Centers the image within the card */
  transition: opacity 0.3s ease; /* Smooth transition for hover effects */
}

 /* Common styles for all images */
    .card-image img {
   
    
  max-width: 350px;
   min-width: 280px;
  height: auto;

      object-fit: contain; /* Ensure the entire image fits within the box */


      /* Put a frame around the image */
       border: 8px solid #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
      border-radius: 12px;


      transform: translateY(-200%); /* Start images positioned above the container */
      z-index: 100;
      opacity: 0; /* Make images invisible initially */
      animation: slideIn 1s ease-in-out forwards; /* Apply the animation */
    }
  /* Add delay for each image 
  Discription: the image used for jen is sligtly larger. there is a custome keyframes for her to scale the image to the proper size*/
    #terra {
      animation-delay: 0s; /* No delay for the first image */
    }

    
    #jen {
     /* transform: scale(0.9) translateY(-150%);  */
     /* Scale down to 90% and maintain animation */

      animation-delay: 250ms; /* Half a second delay for the second image */
    }

    /* Keyframes for #jen with scale */
    @keyframes slideInJen {
      0% {
        transform: scale(0.9) translateY(-150%); /* Apply scale and translate */
        opacity: 0; /* Fully invisible */
      }
      100% {
        transform: scale(0.95) translateY(-90px); /* Maintain scale while translating */
        opacity: 1; /* Fully visible */
      }
    }

    /* Override animation for #jen */
    #jen {
      animation: slideInJen 1s ease-in-out forwards; /* Use custom keyframes */
    }

    #nicole {
      animation-delay: .5s; /* 1-second delay for the third image */
    }

    /* Animation keyframes */
    @keyframes slideIn {
      0% {
        transform: translateY(-100%); /* Start the image off-screen above the container */
        opacity: 0; /* Fully invisible */
      }
      100% {
        transform: translateY(-80px); /* Move the image to its final position */
        opacity: 1; /* Fully visible */
      }
    }
.team-card {
 
  cursor: pointer;
  
  /* overflow: hidden; */

  transition: transform 0.3s ease; /* Smooth scale effect on hover */
  /* height: 280px; Fixed height for consistent card sizes */
}


.team-card:hover {
  transform: scale(1.05); /* Slightly enlarge card on hover */
}

.card-hover{
  color: #fff;
}
/*  this is the name of each team member */
.card-hover h2 {

  font-size: 3rem !important;
  margin: 0px ;
}
/* This is the title i.e. CEO... */
.card-hover h3{
 margin-top: 0px ;
 font-size: 1.5rem !important;
}
/*  this is the learn more text */
.card-hover p{
margin-top: 1px ;
color: #ffffff;

font-size: 1.2;
 transition: all 0.3s ease; /* Smooth scale effect on hover */
}
.card-hover p:hover{
  color: #FDC93A; /* Change to a visually inviting color */
  transform: scale(1.3);
  
}

/* Hover effect overlay on the card */
.card-hover {
  position: absolute;
 
  top: -75px;
  left: .5rem;
  width: 97%;
  height: 97%;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.651); /* Semi-transparent dark overlay */
  border: solid  #fff;
  border-width: 5px;
  color: #fff;
  opacity: 0; /* Initially hidden */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease; /* Smooth fade-in on hover */
}

/* Override styles for card-hover inside #jen */
#jen-card .card-hover {
  width: 95% !important; /* Smaller width for Jen's card */
  height: 92% !important; /* Smaller height for Jen's card */
  top: -70px !important; /* Adjusted top position */
  left: 0px !important;
  background: rgba(0, 0, 0, 0.651); /* Semi-transparent dark overlay */
  border-width: 4px !important; /* Thinner border for Jen's card */
  margin-left: 4px;
}


.team-card:hover .card-hover {
  
  opacity: 1; /* Display overlay when card is hovered */

}

.team-card:hover .card-image {
  opacity: 0.7; /* Slightly fade the image when card is hovered */
  
}


 .team-card:active {
  transform: scale(0.98); /* Subtle press effect */

}


/* hide the description in the card. this will be extracted and passed to the overlay */
/* .description{
    display: none;
} */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.43);
  display: none;
  justify-content: center;
  align-items: center;
}

.overlay-content {
  position: relative;
  background: #fff;
  max-width: 800px;
  width: 90%;
  height: 50vh;
  padding: 2rem;
  display: flex;
  gap: 1rem;
  border-radius: 8px;
}

.overlay-left {
  flex: 2;
}

.overlay-right {
  flex: 1; /* Takes 1/3 of the container */
  display: flex;
  flex-direction: column; /* Stack image and icons */
  align-items: center;
  justify-content: flex-start;
}

/* Responsive image container */
.responsive-image-container {
    margin-top: 20px;
  width: 100%; /* Ensures it takes the full width of the right container */
  flex-shrink: 0; /* Prevents the image from shrinking */
  max-height: 60%; /* Restrict height to half of the parent container */
  overflow: hidden;
  position: relative;
}

.responsive-image-container img {
  width: 100%; /* Makes the image responsive */
  height: auto; /* Maintains aspect ratio */
  object-fit: cover; /* Ensures the image fills the container */
  object-position: top; /* Focus on the top part of the image */
}

.overlay-icons a {
  display: inline-block;
  margin: 0.5rem;
  text-decoration: none;
  font-size: 1.5rem;
  color: #0077b5; /* LinkedIn blue */
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
}

.overlay.show {
  display: flex;
}




/* ----------------------------------------individual teams page --------------------------------- */
/* Global Styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
 
  background-color: #e9ecef;
  color: #333;
}



/* Top Section this has the same layout as the bottom section. Each section has 3 divs and the same styling. This will 
Keep the text and content aligned as desired with the text left aligned and the content in the center of the screen*/
.top-section {
  background-color: #ffffff;
  display: flex;
  justify-content: center; /* Center the container */
  margin: 8rem 0 0 0;
  padding: 2rem 0;
   
  width: 100vw; /* Full-width background */
}

/* Top Section Content Wrapper */
.top-content {
  display: flex;
  flex-direction: column;
  
  align-items: flex-start; /* Align text to the left of the container*/
  width: 100%;
  max-width: 1150px; /* Match bottom-content width */
  padding: 0 3rem; /* Add horizontal padding */
  box-sizing: border-box;
}

/* Set the title of the second card to the right */
.title-right{
  max-width: 750px; /* Match bottom-content width */
   align-items: flex-end; /* Align text to the left of the container*/
}


.top-section h1 {
  /* font-size: 2.5rem; */
  color: #222;
  margin-bottom: 0.5rem;
   display: inline-block;
  background-image: linear-gradient(to right, #EBC2AF, #232934);
  background-size: 100% 2px; /* Height of the underline */
  background-repeat: no-repeat;
  background-position: 0 100%; /* Position the underline below text */
  /* transform: translateX(-40rem); */
}

.top-section h2 {
  /* font-size: 3.5rem; */
  color: #555;
 
  /* transform: translateX(-35rem); */
}

/* Bottom Section */
.bottom-section {
  background-color: #F2F2F2;
  display: flex;
   
  justify-content: center; /* Center the container */
  padding: 2rem 0 4rem;
  width: 100vw; /* Full-width background */
}

/* Bottom Section Content Wrapper */
.bottom-content {
  display: flex;
  flex-wrap: wrap;
  
  justify-content: space-around; /* Align inner content to the left */
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  
  max-width: 1200px; /* Set a maximum width for the content */
  padding: 0 2rem; /* Add horizontal padding */
  box-sizing: border-box;
}

/* This is for the second card text and image. It sets the text to the right and the image to the left */
.image-left{
 flex-direction: row-reverse;
  /* justify-content: flex-end; */
   /* Align inner content to the left */
  /* align-items: flex-start; */
}

/* adjust the image in the image-left container to line up line page content */
.image-left img{
  margin-right: 150px;
}
/* Description - This is for the bottom text only */
.description-container {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  width: 100%; /* Keep the description container aligned with the top content */
}

/* Team Image Container */
.team-image-container {
  flex: 1;
  max-width: 500px;
 
  display: flex;
  justify-content: center;
  align-items: center;
}
.description {
      line-height: 1.6;
    font-size: 1.8rem; 
  transition: transform 1.3s ease, opacity 1.6s ease;
  opacity: 0;
  transform: translateX(-1000px); /* Initial state for animation */
}
/* text animation when js adds animate class */

/* Add animation when the class is applied */
.description.animate {
  opacity: 1; /* Fade in */
  animation: slideDown 2s ease forwards; /* Trigger animation */
}

/* This is for all the images except for the first. 
this will set the inital state off the screen to the left. "animate" class will be added
when it comes into the view port and fade the text in from the left. */
.add-description-animation{
      line-height: 1.6;
    font-size: 1.8rem; 
  transition: transform 1.3s ease, opacity 1.6s ease;
  opacity: 0;
  transform: translateX(-1000px); /* Initial state for animation */
}
.add-description-animation.animate {
  opacity: 1; /* Fade in */
  animation: slideDown 2s ease forwards; /* Trigger animation */
}
/* Define the animation */
@keyframes slideDown {
  0% {
    transform: translateX(-400px); /* Initial position */
  }
  50% {
    transform: translateX(20px); /* Move to original position */
  }
  100% {
    transform: translateX(0); /* Hover position */
  }
}



/* The id is for the first image animation. the class is for the styling of all the images */
/* Image initial state */
#profile-image {

  opacity: 0;
  /* transform: translateY(-400px); */
   /* Start off-screen */
  transition: opacity 2s ease;
}

/* Add animation when the class is applied */
#profile-image.animate {
  opacity: 1; /* Fade in */
  animation: slideUpAndHover 2s ease forwards; /* Trigger animation */
}

/* animation for all the images except the first */
.fade-in-image{
 opacity: 0;
  /* transform: translateY(-400px); */
   /* Start off-screen */
  transition: opacity 2s ease;
}

.fade-in-image.animate {
  opacity: 1; /* Fade in */
  animation: slideUpAndHover 2s ease forwards; /* Trigger animation */
}


.team-profile-image{
    width: 80%;
  max-width: 350px;
   min-width: 280px;
  height: auto;
  border: 8px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}

/* Define the animation */
@keyframes slideUpAndHover {
  0% {
    transform: translateY(-400px); /* Initial position */
  }
  50% {
    transform: translateY(-20px); /* Move to original position */
  }
  100% {
    transform: translateY(-60px); /* Hover position */
  }
}

/* Responsive Design */
@media (max-width: 1000px) {
.team-image-container img {

  transform: translateY(-80px) !important; /* Initial state for animation */
}

  .card-name h1 {
  
    /* transform: translateX(-30rem); */
  }

  .top-section h2 {
    
    /* transform: translateX(-25rem); */
  }

}



/* Mobile Screens (max-width: 480px or 48rem) */
@media (max-width: 48rem) {


  /* Add animation for the first conatainer image when the class is applied */
#profile-image.animate {
  opacity: 1; /* Fade in */
  animation: smallScreenSlideUpAndHover 2s ease forwards; /* Trigger animation */
}

/* Add aminmation to the rest of the image */
.team-profile-image.animate{
  
  opacity: 1; /* Fade in */
  animation: smallScreenSlideUpAndHover 2s ease forwards; /* Trigger animation */

}
/* Define the animation */
@keyframes smallScreenSlideUpAndHover {
  0% {
    transform: translateY(-400px); /* Initial position */
  }
  50% {
    transform: translateY(20px); /* Move to original position */
  }
  100% {
    transform: translateY(10px); /* Hover position */
  }
}
  .why-text h2 {
    font-size: 2.8rem; /* 28px for headers */
    margin-bottom: 1rem; /* Reduced spacing */
    text-align: center; /* Center-align for better readability */
  }

  .why-text p {
    font-size: 1.4rem; /* 14px for paragraphs */
    margin: 0 1rem; /* Minimal horizontal margin */
    text-align: left; /* Left-align for a better reading experience */
    line-height: 1.6; /* Slightly tighter line spacing */
  }
}

@media (max-width: 880px) {
    
  /* put the team images in a column */
  .team-container{
      flex-direction: column;
      width: 94%;
      
      
     }
  /* Pupose: center the top text */
  .top-content {

  align-items: center; /* Align text to the left */
  }

  .bottom-content {
    
    flex-direction: column-reverse; /* Stack items vertically but put the image on top */
    align-items: center; /* Center the content */
  }


.top-section{
  justify-content: center;
}
  .top-section h1 {
    font-size: 4rem; /* Adjust font size for smaller screens */
    /* transform: translateX(0); */
  }

  .top-section h2 {
    font-size: 3rem;
    /* transform: translateX(0); */
  }

  .description {
    font-size: 1.6rem;
  }

    /*  Purpose: cener the image on small screens */
  .team-image-container {

    justify-content: center; /* Center the image horizontally */
    
    width: 100%; /* Ensure it spans the full width */
   
  }
.team-image-container img {
/* Set the transform to fit on the smaller screens. This it set for larg screens. this will fix the layout*/
  transform: translateY(10px) !important;
}

  .image-left img{
  margin-right: 0;
}
footer{
  padding-left: 12% !important;
}

}
.team-image-frame {
  padding: 1.5rem;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  display: flex;
  justify-content: center;
  width: min(100%, 420px);
  max-width: 420px;
  margin: 0 auto;
}
.team-picture img {
  width: 100%;
  height: auto;
  border-radius: 26px;
}
@media (max-width: 768px) {
  .team-image-frame { width: 82vw; }
  .team-picture img { width: 100%; }
}