/* utilities */
.border-bottom {
  border-bottom: solid var(--clr-primary) 2px !important;
}

#g-colOne,
#g-colTwo,
#g-colThree {
  display: flex !important;
  flex-flow: column nowrap;
}

.frontpage-events-container .g-content {
  height: 100% !important;
}

#contentarray-1109-particle>div:nth-child(1) {
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

#contentarray-1109-particle {
  /* height: 100%; */
}

#front-page-news .g-content-array .g-grid {
  /* gap: 4% !important;
  height: 100% !important;
  margin-bottom: 2.3445rem !important; 
  flex-direction: row !important; */
  flex-wrap: nowrap;
}

.g-content-array .g-content {
  height: 100% !important;
}

#g-testcolOne .g-content-array .g-grid {
  gap: 2rem !important;
  height: 100% !important;
  border-bottom: 0 !important;
  margin-bottom: 2.3445rem !important;
}

#g-testcolOne .g-array-item {
  border-bottom: 1px solid #ddd;
  height: 100% !important;
}

#g-testcolOne .g-content-array .g-grid .g-content {
  height: 100% !important;
}

.g-content-array .g-grid:last-child {
  /* margin-bottom: 2.3445rem !important; */
}

.g-content-array .g-grid {
  margin-bottom: 1rem !important;
  gap: 15px !important;
}

.g-array-item-details {
  color: #666;
  font-size: 80% !important;
  padding-top: 10px !important;
  margin-bottom: 0 !important;
}

.g-array-item-text {
  width: 100%;
  grid-column: 1 / -1;
  /* Force full width */
  font-size: 1rem !important;
  margin-bottom: 10px !important;
}

/* off canvas icon config */
.g-offcanvas-toggle {
  padding-top: 1rem !important
}

#g-aside {
  padding: 0;
  margin-right: 1.5rem !important;
}

/* banner text and image */
.banner-text {
  position: absolute;
  color: #fff;
  font-size: 2.5em;
  top: 50%;
  margin-left: 10%;
  transform: translate(0%, -50%);
  font-weight: var(--fw-600) !important;
  width: 100%;
}

.banner-text,
.banner-text h3 {
  font-size: var(--fs-800) !important;
}

.banner {
  min-height: 25vh !important;
  background-color: rgba(240, 240, 240, 0.7)
}

/* services banner images styles */
.banner-image {
  width: 100% !important;
  height: 250px !important;
  object-fit: cover;
}

.hero h1 {
  text-transform: uppercase;
  /*letter-spacing: -0.07rem !important;*/
  font-size: var(--fs-800) !important;
}

#g-highlights {
  background-color: var(--clr-third);
}

.highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
  line-height: 1.3;
}

.highlights *:hover {
  color: var(--clr-secondary) !important;
  transition: color 0.3s ease;
}

.ratio>div {
  height: 100% !important;
}

.df-bg {
  background-color: var(--clr-primary) !important;
}

.dflip-responsive {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  /* 16:9 ratio */
}

.dflip-responsive>div,
.dflip-responsive iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* On small screens, let DearFlip expand naturally instead of strict 16:9 */
@media (max-width: 767.98px) {
  .dflip-responsive {
    height: auto;
    padding-top: 0;
  }

  .dflip-responsive>div,
  .dflip-responsive iframe {
    position: relative !important;
    height: auto !important;
  }
}

#g-navigation {
  position: fixed !important;
  width: 100% !important;
  max-width: 2000px !important;
  height: 120px !important;
}

#g-header {
  margin-top: 120px;
}

.m-top {
  margin-top: 120px !important;
}

.m-top-150 {
  margin-top: 150px !important;
}

figcaption {
  text-align: center !important;
  font-size: 0.8rem !important;
  font-weight: var(--fw-400) !important;
  background-color: var(--clr-primary-60) !important;
  color: var(--clr-white) !important;
  margin: 0 !important;
  padding: 1rem !important;
}

.post-type-page {
  margin: 3rem auto !important;
}

.front-blog-card p {
  margin-bottom: 0 !important;
  color: var(--clr-white) !important;
}

.platform-content {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.rounded-bottom-end {
  border-bottom-right-radius: 2rem !important;
}

.f-p-blog .g-grid {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 20px !important;
  justify-content: center !important;
}

/* QUERY LOOP TEMPLATE CONFIG */
ul.wp-block-post-template {
  margin-left: 0 !important;
}

/* background-dark */
.background-dark {
  background-color: #0B2C3B;
}

.T-F2 {
  font-size: 0.8em !important;
  font-weight: var(--fw-600) !important;
  color: var(--clr-third) !important;
  padding: 0 0.5rem !important;
  width: fit-content !important;
  margin: auto !important;
  letter-spacing: 0.05em !important;
  /* background-color: var(--clr-primary-60) !important; */
  line-height: 1.2 !important;
}

.video-responsive {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.news-page {
  grid-template-columns: repeat(auto-fit, minmax(200px, 250px)) !important
}

/* #g-mainbar {
  padding: 1rem !important;
  padding-right: 1rem !important;
} */

@media only screen and (max-width: 480px) {
  .research-grid-card {
    width: min(calc(50% - 15px), 200px) !important;
  }

  .border-sm-none {
    border: 0px !important;
  }

  .wp-block-columns>.wp-block-column {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .border-sm-none {
    border: 0px !important;
  }

  .wp-block-columns>.wp-block-column {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .wp-block-columns>.wp-block-column {
    flex: 0 0 45%;
    max-width: 45%;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .container-home .g-container .g-grid {
    display: flex !important;
    flex-flow: column nowrap;
  }

  .news_block,
  .event_block,
  .pub_block {
    width: 100% !important;
  }

  .wp-block-columns>.wp-block-column {
    flex: 0 0 45%;
    max-width: 45%;
  }
}