/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(143, 50%, 16%);
  --first-color-light: hsl(29, 80%, 70%);
  --black-color: #9bccc3;   /*===============b3d8d1 ===============*/
  --hod-color: #458780;
  --asst-color: #98ae9e;
  --text-color: hsl(0, 0%, 100%);
  --body-color: hsl(29, 100%, 99%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Poppins", sans-serif;
  --h3-font-size: 1.5rem;
  --smaller-font-size: 0.75rem;
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  background-color: var(--text-color);
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}


/*=============== CARD ===============*/
.cardhod {
  position: relative;
  width: 256px;  
  background-color: var(--hod-color);
  padding: 1rem 2rem; /* Reduced padding */
  border-radius: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 16px hsla(153, 76%, 8%, 0.2);
  margin-bottom: 30px; /* Adjust the value as needed */
  margin-right: auto; /* Adjust the value as needed */
  margin-left: auto; /* Ensures the card is centered horizontally */
  margin-right: auto; /* Ensures the card is centered horizontally */
}



.card {
  position: relative;
  width: 256px; 
  background-color: var(--black-color);
  padding: 1rem 2rem; /* Reduced padding */
  border-radius: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 16px hsla(153, 76%, 8%, 0.2);
  margin-bottom: 30px; /* Adjust the value as needed */
  margin-right: auto; /* Adjust the value as needed */
  margin-left: auto; /* Ensures the card is centered horizontally */
  margin-right: auto; /* Ensures the card is centered horizontally */
 
}


.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card__img {
  width: 120px;
  border-radius: 50%;
}

.card__border {
  width: 150px; /* Increased size */
  height: 150px; /* Increased size */
  border: 2px solid var(--first-color);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 0.75rem;
}

.card__name {
  color: var(--first-color);
  font-size: var(--h3-font-size);
  font-weight: 500;
}

.card__profession {
  color: var(--text-color);
  font-size: var(--medium-font-size);
  font-weight: 550;

  white-space: nowrap; /* Prevents the text from wrapping */
  overflow: hidden; /* Hides any overflowed content */
  text-overflow: ellipsis; /* Shows an ellipsis (...) when the text overflows */
}





.content-container {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
  background-image: url('images-fcs/bgimg.jpg'); /* Replace with your image path */
  background-size: cover; /* Adjust as needed */
  background-position: center; /* Adjust as needed */
}

.content-container:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.content-container ul {
  margin-top: 0;
  padding-left: 20px;
}