@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
/*
Theme Name: 4AS Barebones
Theme URI: https://tbwa-smp.com
Author: Mogi Anover
Author URI: https://mogi.work/
Description: A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond
Version: 1.0
*/

/* Fullscreen Menu */

.header.menu-open,
.main-menu-wrapper.open {
  display: block;
}
.nav-burger .nav-burger__line {
  transition: 0.2s;
  transform-origin: left;
}
.navigation-wrapper {
  height: 100%;
  overflow: auto;
}
.navigation-wrapper ul li{
  transition: 0.3s;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 12rem);
  text-transform: uppercase;
  font-weight: 700;
}
.navigation-wrapper ul li a {
  -webkit-text-stroke: 0.5px #fff;
  color: transparent;
  transition: 0.3s;
}
.navigation-wrapper ul li a:hover {
  color: #eee;
}

.navigation-wrapper ul li.current_page_item > a,
.navigation-wrapper ul li.current_page_ancestor > a,
.navigation-wrapper ul li.current-menu-item > a,
.navigation-wrapper ul li.current_page_ancestor > a {
  color: #fff;
}
/* Hamburger */
.nav-burger.open .nav-burger__line:nth-child(1) {
  transform: rotate(45deg);
  width: 1.875rem;
}
.nav-burger.open .nav-burger__line:nth-child(2) {
  opacity: 0;
  transform: translateX(-50px);
}
.nav-burger.open .nav-burger__line:nth-child(3) {
  transform: rotate(-45deg);
  width: 1.855rem;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  background: #e5e7eb !important;
}

#cards:hover > .card::after {
  opacity: 1;
}

.card {
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
}

.card:hover::before {
  opacity: 1;
}

.card::before,
.card::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.04),
    transparent 40%
  );
  z-index: 3;
}

.card::after {  
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.04),
    transparent 40%
  );
  z-index: 1;
}

.card-content {
  height: 100%;
}

.video-container {
  position: relative; 
  overflow: hidden; 
  width: 100%; 
  padding-top: 47.25%
}

.inner-memoreel-content .content {
  padding: 0px 24px 25px;
}
/* 
.inner-memoreel-content .content {
  --max-lines: 5;
  --line-height: 1.4;

  max-height: calc(var(--max-lines) * 1em * var(--line-height));
  line-height: var(--line-height);
  margin-bottom: 2.5em;
  overflow: hidden;
  position: relative;
}

.inner-memoreel-content .content p {
  padding: 1.5em;
  padding-bottom: 0;
  line-height: 2em;
}

.inner-memoreel-content .content:has( + .expand-btn:not(:checked))::before {
  content: "";
  position: absolute;
  display: block;
  height: calc(2em * var(--line-height));
  width: 100%;
  bottom: -0.2em;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, #262626 )
}

.inner-memoreel-content .content.content:has( + .expand-btn:checked) {
  max-height: none;
} */

.expand-btn {
  appearance: none;
  cursor: pointer;
  width: 100%;
  border-top: solid 1px #434343;
  border-bottom-right-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  padding: 10px;
}
.grecaptcha-badge {
  display: none;
}

.expand-btn:hover {
  background-color: #434343;
}

.expand-btn::before {
  content: "Read more";
  text-align: center;
  display: block;
  font-size: 0.9em;
}

.expand-btn:checked::before {
  content: "Collapse";
  font-size: 0.9em;
}

.expand-btn::before {
  content: "Read more";
  text-align: center;
  display: block;
  font-size: 0.9em;
}

.member-agencies .background::after {
  position: absolute;
  bottom: 0;
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 40%;
  background: linear-gradient(to bottom, transparent, #000 90%)
}

.member-agency #about-content p {
  padding: 12px 0px !important;
  line-height: 1.3em;
}

#about-wrapper p {
  padding-bottom: 20px
}

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

.arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transition: linear 0.15s;
}
.arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.arrow.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.memoreel iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/* 
.single p,
.news-events .content p {
  padding: 24px 0px;
} */


.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#fff;
  stroke-width: 5;
  stroke-linecap:round;
}
.hamRotate.active {
  transform: rotate(45deg);
}
.ham4 .top {
  stroke-dasharray: 40 121;
}
.ham4 .bottom {
  stroke-dasharray: 40 121;
}
.ham4.active .top {
  stroke-dashoffset: -68px;
}
.ham4.active .bottom {
  stroke-dashoffset: -68px;
}

/* .single img, */
div.single .content img {
  width: 100%;
  flex: 1;
}


.visuals {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.page-numbers.current {
  background: #fff;
  color: #000;
  border-radius: 100px;
  padding: 0px 24px
}
.prev {
  justify-self:first baseline
}
.next {
  justify-self:last baseline
}

/* md */
@media (min-width: 640px) {

  .news-featured {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr ;
    gap: 12px;
  }

  .news-article:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .news-article{
    grid-template-columns: 2fr;
  }
  
}

/* lg */
@media (min-width: 1024px) {


  .flex {
    flex-direction: row;
  }

  .news-featured {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr ;
    gap: 12px;
  }

  .news-article:nth-child(1){
    grid-row-start: 1;
    grid-column-start: 1;
  
    grid-row-end: 1;
    grid-column-end: 4;
  }
  
  .news-article:nth-child(2) {
    grid-column-start: 4;
    grid-row-start: 1;
  
    grid-row-end: 1;
    grid-column-end: 6;
  }
  
  .news-article:nth-child(3) {
    grid-column-start: 3;
    grid-row-start: 2;
  
    grid-row-end: 2;
    grid-column-end: 1;
  }
  
  
}