/**
 * Theme Name: PIAM
 * Template:   hello-elementor
*/
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

html {
  scroll-behavior: smooth;
  scroll-padding: 150px; 
}

body {
  font-family: "Playfair Display", serif;
}

p,
h2,
h4,
h6 {
  margin: 0 !important;
}

.bg-divider {
  background-color: #f7f7f7;
}

.bg-primary-light {
  background-color: #e6f6ec;
  border-radius: 8px;
}
.text-white {
  color: white;
}
.text-primary {
  color: #212121 !important;
}
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.display-flex {
  display: flex;
  flex-direction: column;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.flex-direction-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.white-space-wrap{
    white-space: wrap;
}
.gap-24 {
  gap: 24px;
}

.gap-16 {
  gap: 16px;
}

.gap-8 {
  gap: 8px;
}

.button-primary {
  background-color: rgba(245, 160, 55, 1);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  text-transform: uppercase;
}

.button-primary:hover,
.button-primary:focus {
  background-color: rgba(245, 160, 55, 0.75);
}
h1{
font-size: 48px;
font-weight: 700;
line-height: 60px;
}
h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
}

h4 {
  font-size: 28px;
  font-weight: 500;
  line-height: 37.32px;
  color: rgba(33, 33, 33, 1);
}
h6 {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
}
.body-1 {
  font-size: 16px;
  color: rgba(117, 117, 117, 1) !important;
}

.body-2 {
  font-size: 14px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  color: rgba(117, 117, 117, 1);
}

.caption {
  color: rgba(117, 117, 117, 1) !important;
  font-family: Inter !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 14px !important;
  letter-spacing: 0.004em !important;
}

.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}

.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.divider {
  border: none;
  height: 1px;
  background-color: rgba(217, 217, 217, 1);
  margin: 16px 0 8px 0;
}
.separator {
  width: 100px;
  height: 2px;
  background-color: #f9c784;
  margin: 24px 0;
}

.hero-section {
  position: relative;
  height: 560px;
  background-image: url("https://piam.pk/wp-content/uploads/2024/12/bg-experts.webp");
  background-repeat:no-repeat;
  background-size:cover;
  z-index: -1;
}

.overlay {
  position: absolute;e
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.experts-finder {
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  padding: 32px 48px;
  margin-top: -150px;
  margin-bottom: 96px;
}
.experts-finder select,
.experts-finder input[type="search"] {
  background-color: white;
  border: 1px solid #e0e0e0;
}
.card-wrapper {
  position: relative;
  height: 330px;
  overflow: hidden;
}
.card-wrapper .card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  height:90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition:height 0.3s ease-in-out;
}

.card-wrapper .card-content .card-description {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, visibility 0s 0.5s, height 0.5s ease;
}

.card-wrapper .card-content .card-title,
.card-wrapper .card-content .card-subtitle {
  display: block;
}

.card-wrapper:hover .card-content {
  height: 100%;
  transition: all 0.5s ease-in-out;
}

.card-wrapper:hover .card-content .card-description {
  display: block;
  opacity: 1;
  visibility: visible;
  height: auto;
  transition: opacity 0.5s ease, visibility 0s 0s, height 0.5s ease;
}

.card-wrapper:hover .card-content .card-title,
.card-wrapper:hover .card-content .card-subtitle {
  display: block;
}

.experts-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 64px;
}

.experts-item {
  min-width: 255px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.experts-photo {
  overflow: hidden;
  width:100%;
  height:250px;
  background-color:#D7E3F4
}

.experts-photo img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.experts-photo img:hover {
  transform: scale(1.25);
}

.experts-item-data {
  min-height: 187px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

/*.experts-item-data h6:first-of-type {*/
/*    white-space:nowrap;*/
/*}*/

.badge {
  background-color: #e6f6ec;
  border-radius: 5px;
  padding: 2px 4px;
  margin-right: 4px;
  margin-bottom: 4px;
  color: #757575;
}
@media (min-width: 1140px) {
  .experts-item {
    flex-basis: calc(25% - 24px);
  }
}
@media (min-width: 960px) and (max-width:1139px) {
  .experts-item {
    flex-basis: calc(33.33% - 24px); 
  }
}
@media (min-width: 768px) and (max-width:959px) {
  .experts-item {
    flex-basis: calc(50% - 24px); 
  }
}
@media (max-width: 767px) {
  .experts-photo{
        height:auto;
   }
  .experts-item {
    flex-basis: calc(100% - 24px); 
  }
}
@media (min-width: 768px) {
  .flex-direction-md-row {
    flex-direction: row; /* Change to row layout on medium and larger screens */
  }
}