/* Custom CSS starts here */

.mainTeam-row {
  display: flex;
}
.theMain-team {
  width: 50% !important;
  margin: 0 30px 0 0px !important;
}
.theMain-team .dtq-team {
  display: flex;
  gap: 30px;
}
.theMain-team .dtq-team .dtq-figure {
  width: 49%;
}

.theMain-team.fourTeam .dtq-team .dtq-figure {
  width: 100%;
}
.theMain-team .dtq-team .dtq-team-content {
  padding: 0;
  width: 46%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.theMain-team .dtq-team {
  position: relative;
  border-radius: 15px;
  z-index: 1;
}

.theMain-team .dtq-team::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* border thickness */
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(81, 54, 255, 0.5) 0%,
    rgba(107, 227, 248, 0.5) 100%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events: none;
}

.likedIn-icon .dtq-icon {
  position: relative;
}

.likedIn-icon .dtq-icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://seashell-dugong-380750.hostingersite.com/wp-content/uploads/2026/05/LinkedIn.jpg")
    no-repeat;
  top: 0;
  bottom: 0;
  border-radius: 5px;
}

.theMain-team.fourTeam .dtq-team {
  display: block;
}
.fourTeam {
  width: 100% !important;
}

.fourTeam .dtq-team .dtq-team-content {
  width: 100% !important; 
  padding: 10px;
  position: relative;
}

.fourTeam .et_pb_module,
.fourTeam .et_pb_module .et_pb_module_inner,
.fourTeam .et_pb_module .dtq-module,
.theMain-team .et_pb_module,
.theMain-team .et_pb_module .et_pb_module_inner,
.theMain-team .et_pb_module .dtq-module {
  height: 100%;
}

.fourTeam .dtq-team-social {
  position: absolute;
  right: 3px;
  top: -60px;
}

.responsiveRow {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.responsiveRow .et_pb_column {
  order: inherit !important;
}

.Meredith-img figure img {
  object-position: top center !important;
}

.dtq-team-figure {
  margin: 0;
  padding: 0;
  line-height: 0;
  position: relative;

  overflow: hidden;
  cursor: pointer; /* Indicates it's interactive */
}

.dtq-team-figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease; /* Smooth fade effect */
}

/* ==========================================================
           2. OVERLAY TEXT SETUP (Hidden by default)
           ========================================================== */

/* Hide original position */
.team-card .dtq-team-content-bio {
  display: none;
}

/* Overlay positioning and styling */
.team-card .overlay-bio-text {
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.95);

  padding: 10px 30px;
  box-sizing: border-box;
  color: #c9c9c9;
  font-size: 14px;
  line-height: 1.4;
  /* Hidden initially */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  z-index: 10;
  overflow-y: auto;
  border-radius: 15px;
}

/*  Press     */

.pressBox .post-content-inner {
  margin: 20px 0;
}

.pressBox a.more-link {
  display: inline-block;
  background-color: #56cfc8;
  padding: 10px 20px !important;
  border-radius: 15px;
  text-transform: uppercase;
  color: #000000 !important;
  font-weight: 600 !important;
  text-align: center;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  border: 1px solid #56cfc8;
  line-height: 1;
}

.pressBox a.more-link:hover {
  background-color: transparent;
  color: #56cfc8 !important;
  text-decoration: none;
}


.pressBox a.entry-featured-image-url {
    max-width: 350px;
    margin: 0px auto 30px;
}
.pressBox p.post-meta {
    margin: 10px auto 20px;
}

.girdPress h2 {
    text-align: start !important;
}
.girdPress .pressBox a.entry-featured-image-url {
    max-width: unset;
    margin: 0px auto 0;
    min-height: 220px !important;
}
.girdPress .pressBox a.entry-featured-image-url img {
	height: 100%;
	min-height: 220px;
	max-height: 220px;
	object-fit: cover;
}


.girdPress .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.girdPress .et_pb_ajax_pagination_container article {
  background: #f5f5f5;
  margin: 0;
}
.girdPress .pressBox h4.entry-title {
    padding: 20px;
}


@media only screen and (max-width: 1600px) {
  .mainTeam-row {
    display: flex;
    flex-wrap: wrap;
  }
  .theMain-team {
	width: 48% !important;
	margin: 0 30px 0 0px !important;
}
  .responsiveRow {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
  .responsiveRow .et_pb_column {
    order: inherit !important;
    margin: 0 !important;
  }
  .fourTeam {
    width: 100% !important;
}
}

@media only screen and (max-width: 1440px) {
  .team-card .overlay-bio-text {
    padding: 10px;
  }
  .theMain-team.fourTeam .dtq-team .dtq-figure {
    width: 100%;
    height: 250px !important;
}

}


@media only screen and (max-width: 1366px) {
 .theMain-team {
	width: 100% !important;
	margin: 0 0px 30px 0px !important;
}
.theMain-team .dtq-team .dtq-team-content {

	width: 70%;
}
.theMain-team .dtq-team .dtq-figure {
	width: 30%;
	height: auto;
}
.pressBox {
    max-width: 100% !important;
}
.girdPress .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
}


@media only screen and (max-width: 1280px) {
 .responsiveRow {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.theMain-team.fourTeam .dtq-team .dtq-figure {
    width: 100%;
    height: 420px !important;
}

.theMain-team .dtq-team .dtq-team-content {
	padding: 0;
	width: 69%;
}
.theMain-team .dtq-team .dtq-figure {
	width: 30%;
	height: auto;
}
.fourTeam .dtq-team .dtq-team-content {
	width: 100% !important;
	padding: 10px !important;
	position: relative;
}
.girdPress .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
}


@media only screen and (max-width: 980px) {
  h2 {
    font-size: 4em;
  }
  .theMain-team.fourTeam .dtq-team .dtq-figure {
    width: 100%;
    height: 300px !important;
}
}

@media only screen and (max-width: 768px) {
  .theMain-team .dtq-team {
    flex-wrap: wrap;
  }
.theMain-team .dtq-team .dtq-figure , .theMain-team.fourTeam .dtq-team .dtq-figure{
	width: 100%;
	height: 380px !important;
	/* max-width: 300px; */
}
  .theMain-team .dtq-team .dtq-team-content {
    width: 100%;
  }
  .responsiveRow {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }
  /* .theMain-team.fourTeam .dtq-team .dtq-figure {
    width: 100%;
    height: 400px !important;
} */
}

/* ==========================================================
           3. RESPONSIVE LOGIC (Hover vs. Click)
           ========================================================== */

/* --- DESKTOP (992px and larger) : HOVER TRIGGER --- */
@media (min-width: 992px) {
  .team-card .dtq-team-figure:hover .overlay-bio-text {
    opacity: 1;
    visibility: visible;
  }
  .team-card .dtq-team-figure:hover img {
    opacity: 0.15;
  }
}

/* --- TABLET & MOBILE (991px and smaller) : CLICK TRIGGER --- */
@media (max-width: 991px) {
  /* We use the '.bio-is-open' class added by the JS click event */
  .team-card.bio-is-open .overlay-bio-text {
    opacity: 1;
    visibility: visible;
  }
  .team-card.bio-is-open .dtq-team-figure img {
    opacity: 0.15;
  }
}