@charset "utf-8";
/* CSS Document */
.container2{
    width: 94%;
    margin: 0px auto;
    padding-top: 20px;
    padding-right: 3%;
    padding-left: 3%;
    padding-bottom: 0;
    overflow: hidden;
    background-image: url(../my-images/team_bg_2.jpg);
    box-sizing: content-box;
}
.employee-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      justify-items: center;
	height: auto;
	margin-top: 120px;
	direction: rtl;
	font-family: 'Cairo', 'Amiri', sans-serif;
    }
    .employee-card {
      width: 280px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      
      text-align: center;
      position: relative;
      transition: all 0.3s ease;
		height: 300px;
		margin-bottom: 100px
    }
.finalone{
	margin-bottom: 0px
}
    /* Profile Image */
    .employee-card .image-container {
      overflow: hidden;
		position: absolute;
		top:-100px;
		left: 40px;
		border-radius: 50%;
		width: 200px;
		height: 200px;
		border: 4px solid #ffffff;
    }
    .employee-card img {
      width: 100%;
/*      border-radius: 50%;*/
      width: auto;
      margin-top: 0px;
      transition: transform 0.4s ease;
		height: 200px;
		object-fit: cover
    }

    /* Info Section */
    .employee-info {
	 background-size: 100% 200%;
    background-image: linear-gradient(to bottom, #eaf6ff 50%, var(--primary-color) 50%);
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
	padding-top: 15px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 15px;
	transition: all 0.4s ease;
	position: absolute;
	z-index: 2;
	bottom: 20px;
	width: 80%;
	left: 10%;
		border-radius: 15px
    }
    .employee-info h3 {
      margin: 10px 0 5px;
      font-size: 20px;
    }
    .employee-info p {
      margin: 0;
      color: #666;
      font-size: 14px;
    }

    /* Hover Effects */
    .employee-card:hover img {
      transform: scale(1.1);
    }
    .employee-card:hover .employee-info {
      background-position: 0 -100%;
      color: #fff;
    }
	  
    .employee-card:hover .employee-info p {
      color: #f1f1f1;
    }

    /* Social Icons */
    .social-icons {
      margin-top: 15px;
    }
    .social-icons a {
      display: inline-block;
      margin: 0 5px;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      border: 1px solid #0077ff;
      color: #0077ff;
      line-height: 35px;
      text-align: center;
      transition: 0.3s;
    }
.social-icons a .fab {
	line-height: 35px
}
    .employee-card:hover .social-icons a {
      border-color: #fff;
      color: #fff;
    }
    
 /* Responsive */
    @media (max-width: 992px) {
      .employee-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 600px) {
      .employee-container {
        grid-template-columns: 1fr;
      }
    }