/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

.TSmall {
    border-collapse: separate;
    border-spacing: 0rem 0rem;
    background-color: transparent;
    border: 0px solid yellow;
}
.card-profile {
	border-radius: 25px;
	background-color: #FFF;
	
	width: 300px;
	border:2px solid var(--bg-strongest);
	cursor:pointer;
}
.card {
	border-radius: 25px;
	background-color: #FFF;
	max-width: 350px;
	width: 350px;
	border:2px solid var(--bg-strongest);
	cursor:pointer;
}
.card:hover {
  border:2px solid #4070F4;
}
.roll {
	/*position:relative;
	left:-500%;
	opacity:0;
	animation: smooth-card 2s ease forwards;*/
}
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 5px;
  height: 250px;
  border-radius: 25px;
}
.image-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 5px;
  max-height: 250px;
  border-radius: 25px;
}
.card-content {
	overflow:hidden;
}
.image-content {
  position: relative;
  row-gap: 5px;
  padding: 25px 0;
}

.card:hover > a > .image-content {
	padding: 0px 0;
	height: 200px;
}
.card:hover > a  >.image-content > .card-image {
	width: 336px;
	height: 180px;
	border-radius:25px;
	padding:0px 0;
}

.card:hover > a  >.image-content >.card-image > .card-img {
	width: 336px;
	height: 455px;
	border-radius:20px;
	border : 3px solid grey;
	padding:0px 0;
	opacity: 1;
	background-color:white;
	transition: 0.5s;
	position:absolute;
	z-index:2
}

.card-overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #4070F4;
  border-radius: 22px 22px 0 20px;
}

.card-overlay::before,
.card-overlay::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -40px;
  height: 40px;
  width: 40px;
  background-color: #4070F4;
  background-color: #4070F4;
}

.card-overlay::after {
  border-radius: 0 25px 0 0;
  background-color: #FFF;
}

.card-image {
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: #FFF;
  padding: 3px;
}

.card-image .card-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #4070F4;
}

.card-name {
  font-size: 18px;
  font-weight: 550;
  color: #333;
  text-align: center;  
  line-height: 120%;
  overflow-wrap: break-word;
  z-index:0;
  min-height:33px;
  
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.description {
	width:100%;
	text-transform: capitalize;
	margin-bottom:10px;
}

@media screen and (max-width: 768px) {
  .slide-content {
    margin: 0 10px;
  }

  .swiper-navBtn {
    display: none;
  }
}
@keyframes smooth-card {
	0%{
		
	}
	to {
		top: 0px;
		opacity:1;
		overflow:auto
	}
	100% {
		
	}
}
	.grid-cont{
		display: flex;
		justify-content:space-between;
		flex-direction:column;
		
		position:relative;
		top:-50px;
		opacity:0;
		animation: smooth-card 0.5s ease forwards;
	}
	.grid-view {
		display: grid;
		gap: 0.35rem;
		grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) );
		
		
	}
	.button{
		
		background:#3a5da5;
		border:2px outset #ffffff;
		border-radius:10px;
		text-shadow:0px -1px 3px #000000;
		color:white;
		

		min-height: 45px;
		
		width:60px;
		cursor:pointer;
		background-position-x: 9px;
		background-position-y: 6.5px;
		background-size: 25px;
		background-repeat:no-repeat;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: -moz-none;
		-o-user-select: none;
		user-select: none;	
	}
	.button:active {
		position:relative;
		top :1px;
		left:1px;
		
	}
	.M2 {
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 3; /* Limit to 2 lines */
	  overflow: hidden;
	  line-height: 100%;
	  height:45px;
	  font-weight: 550;
	}
	.M1 {
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 1; /* Limit to 2 lines */
	  overflow: hidden;
	}