/***************title + tabs*******************/
 .news-section-title {
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   padding: 100px 30px 80px;
   box-sizing: border-box;
   gap: 0px;
   text-align: left;
   font-size: 60px;
   color: #000;
   font-family: 'Lyon Arabic Display';
 }

 .news-title-text {
   align-self: stretch;
   width: 603px;
   position: relative;
   line-height: 100%;
   font-weight: 500;
   display: inline-block;
   flex-shrink: 0;
 }

 .news-ctas {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 20px;
   font-size: 16px;
   color: #fff;
   font-family: 'GT America';
 }

 .news-news-cta {
   background-color: #000;
   height: 36px;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 8px 20px;
   box-sizing: border-box;
 }

 .news-paragraph {
   position: relative;
   line-height: 140%;
 }

 .news-media-cta {
   border: 1.4px solid #000;
   box-sizing: border-box;
   height: 36px;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 8px 20px;
   color: #000;
 }

 /* Responsive: stack title + tabs */
 @media (max-width: 768px) {
   .news-section-title {
     flex-direction: column;
     align-items: flex-start;
     padding: 48px 20px 0;
     gap: 32px;
   }

   .news-title-text {
     font-family: "Lyon Arabic Display";
     font-size: 30px;
     font-style: normal;
     font-weight: 500;
     line-height: 30px;
     letter-spacing: 1px;
   }

   .tab.active {
     background: #000;
     color: #fff;
     display: flex;
     height: 36px;
     padding: 8px 65px !important;
     justify-content: center;
     align-items: center;
     gap: 13.618px;
     flex: 1 0 0;
   }

   .tab {
     padding: 4px 65px !important;
   }

   .tab.inactive {
     display: flex;
     height: 36px;
     padding: 8px 65px !important;
     justify-content: center;
     align-items: center;
     gap: 13.618px;
     flex: 1 0 0;

   }

   .search-container {
     width: 98%;
     margin: auto;
   }

   .media-cta {
     padding: 0px 13px 9px;
   }
 }

 /***************Search + filter*******************/

 .news-content {
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: space-between;
   padding: 0px 30px;
   box-sizing: border-box;
   gap: 0px;
   text-align: left;
   font-size: 24px;
   color: #667085;
   font-family: 'GT America';
 }

 .search-field {
   width: 612px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 16px;
 }

 .search-field-type-area {
   align-self: stretch;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   gap: 0px;
 }

 .search-copy {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
 }

 .stroke {
   width: 1px;
   position: relative;
   background-color: #000;
   height: 32px;
   overflow: hidden;
   flex-shrink: 0;
 }

 .subtitle {
   position: relative;
   line-height: 120%;
  padding-right: 78px;
  
 }

 .icons {
   width: 24px;
   position: relative;
   height: 24px;
 }

 .icon {
   position: absolute;
   height: 100%;
   width: 100%;
   top: 0%;
   right: 0%;
   bottom: 0%;
   left: 0%;
   overflow: hidden;
 }

 .union-icon {
   position: relative;
   width: 18.9px;
   height: 18.9px;
 }

 .stroke-icon {
   align-self: stretch;
   position: relative;
   max-width: 100%;
   overflow: hidden;
   max-height: 100%;
 }

 .ctas {
   width: 260px;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 16px;
   font-size: 16px;
 }

 .media-cta {
   flex: 1;
   /*	border-bottom: 1px solid #000;*/
   overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 0px 0px 8px;
   /*	color: #000;*/
 }

 .paragraph {
   position: relative;
   line-height: 140%;
 }

 .content-media-cta {
   flex: 1;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 0px 0px 8px;
 }

 /* Responsive: CTAs first, Search field second */
 @media (max-width: 768px) {
   .list-image img {
     width: 375px;
   }

   .news-content {
     flex-direction: column;
     /* stack vertically */
     align-items: stretch;
     /* take full width */

     padding: 32px 20px;
   }

   .ctas {
     order: 1;
     /* CTAs come first */
     width: 100%;
     display: flex;
     justify-content: center;
     gap: 15px;
     flex-wrap: wrap;
   }

   .search-field {
     order: 2;
     /* Search field comes after */
     width: 100%;
   }
 }

 /*************** Listing- tabs: news*******************/

 /*stories cards : list*/

 .list-our-stories-card {
   margin-top: 48px;
   margin-bottom: 48px;
   padding: 0px 30px;
   width: 100%;
   position: relative;
   /* height: 552px;*/
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 30px;
   text-align: left;
   font-size: 16px;
   color: #000;
   font-family: 'GT America';
 }

 .list-card-content-area {
   width: 440px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 320px;
 }

 .list-card-title-area {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 40px;
 }

 .list-date {
   font-family: "GT America";
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 16px;
   align-self: stretch;
   position: relative;
   text-transform: uppercase;
 }

 .list-title {
   width: 100%;
   position: relative;
   font-size: 40px;
   line-height: 48px;
   font-weight: 500;
   font-family: 'Lyon Arabic Display';
   display: inline-block;
   max-width: 400px;
 }

 .list-unlock-the-stories {
   margin: 0;
 }

 .list-button {
   background-color: #eeff75;
   overflow: hidden;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding: 15px 20px;
   text-align: center;
   font-size: 14px;
   text-transform: uppercase;
   font-family: 'GT America';
 }

 .list-button:hover {
   background-color: #000;
   color: #eeff75;
 }

 .list-menu {
   position: relative;
   letter-spacing: 2px;
   line-height: 100%;
   text-transform: uppercase;
   font-weight: 500;
 }

 .list-image {
   position: relative;
   width: 100%;
   max-width: 910px;
   aspect-ratio: 910 / 552;
   /* keeps same ratio */
   overflow: hidden;
 }

 .list-image img {
   width: 100% !important;
   height: 100%;
   object-fit: cover;
   /* fills box, crops if needed */
   transition: transform 0.3s ease;
 }

 .list-image img:hover {
   transform: scale(1.2);
   /* zooms image by 20% */
 }

 .list-image-icon {
   position: relative;
   top: 0px;
   left: 0px;
   width: 910px;
   height: 552px;
   object-fit: cover;
 }

 .list-divider {
   width: 98%;
   /* make it shorter */
   border-top: 1px solid #000;
   margin: 20px auto;
   /* center horizontally */

 }



 /* Responsive: stack image first, content below */
 @media (max-width: 768px) {

   .list-divider {
     width: 88%;
     /* make it shorter */
     border-top: 1px solid #000;
     margin: 20px auto;
     /* center horizontally */

   }


   .list-our-stories-card {

     display: flex;
     width: 335px;
     flex-direction: column;
     align-items: flex-start;
     gap: 20px;

   }

   .list-image {
     position: relative;
     /* remove absolute positioning */
     order: 1;
     /* image first */
     width: 335px;
     /* mobile width */
     height: 350px;
     /* mobile height */
     flex-shrink: 0;
     margin: 0 auto;
     /* center horizontally */
   }

   .list-image-icon {
     position: relative;
     /* remove absolute */
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* cover the box */
   }

   .list-card-content-area {
     width: 100%;
     /* full width */
     order: 2;
     /* content below image */
     gap: 20px;
     /* reduce excessive gap */
   }

   .list-card-title-area {
     gap: 20px;
     /* reduce spacing for mobile */
   }

   .list-title {
     font-size: 28px;
     /* scale down title on mobile */
     max-width: 100%;
   }
 }



 /*************** grid- tabs: media*******************/
 /* grid*/

 .grid-cards {
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   padding: 0px 30px;
   box-sizing: border-box;
   gap: 48px;
   text-align: left;
   font-size: 16px;
   color: #000;
   font-family: 'GT America';
 }

 .grid-cards2 {
   align-self: stretch;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 30px;
 }

 .grid-cards3 {
   width: 675.6px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 28px;
 }

 .grid-image-group {
   align-self: stretch;
   height: 408px;
   display: flex;
   flex-direction: row;

   justify-content: flex-start;

   box-sizing: border-box;

   background-size: cover;
   background-repeat: no-repeat;
   background-position: top;
 }

 .grid-image-group img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* transition: transform 0.3s ease;*/
 }

 /*
.grid-image-group:hover img {
    transform: scale(1.05);
}*/

 .grid-play-button-icon {
   width: 122px;
   position: relative;
   border-radius: 61px;
   height: 122px;
   object-fit: cover;
 }

 .grid-card-content {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 48px;
 }

 .grid-content {
   align-self: stretch;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 32px;
 }

 .grid-date {
   align-self: stretch;
   position: relative;
   line-height: 100%;
   text-transform: uppercase;
   font-weight: 500;
 }

 .grid-title {
   align-self: stretch;
   position: relative;
   font-size: 40px;
   line-height: 120%;
   font-weight: 500;
   font-family: 'Lyon Arabic Display';
 }

 .grid-stroke {
   align-self: stretch;
   position: relative;
   border-top: 1px solid #000;
   box-sizing: border-box;
   height: 1px;
 }

 .grid-image-group-icon {
   align-self: stretch;
   max-width: 100%;
   overflow: hidden;
   height: 408px;
   flex-shrink: 0;
   object-fit: cover;
 }

 /* ----------------- Responsive for mobile ----------------- */
 @media (max-width: 768px) {
   .play-btn {
     top: 22% !important;
     margin-left: 173px !important;
   }

   .grid-cards2 {
     flex-direction: column;
     /* stack vertically */
     align-items: center;
     /* center children */
     gap: 20px;
   }

   .grid-image-group {
     order: 1;
     /* image first */
     width: 335px;
     /* mobile width */
     height: 350px;
     /* mobile height */
     padding: 0;
     /* remove large desktop padding */
     margin: 0 auto;
     /* center horizontally */
     background-size: cover;
     /* keep background cover */
     background-position: center top;
   }

   .grid-image-group-icon {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .grid-card-content {
     order: 2;
     /* content below image */
     width: 100%;
     /* full width on mobile */
     gap: 20px;
     /* reduce spacing for mobile */
   }

   .grid-cards3 {
     width: 100%;
     /* allow content to fill width */
   }

   .grid-title {
     font-size: 28px;
     /* smaller font on mobile */
   }
 }

 /****************************************/

 /* Tabs */
 .tabs {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
 }

 .tab {
   font-style: normal;
   line-height: 22.4px;
   padding: 10px 30px;
   cursor: pointer;
   border: 2px solid black;
   font-weight: 400;
   transition: background 0.3s, color 0.3s;
   font-size: 16px;
   font-family: "gt-america-regular";
 }

 /*
 .tab.active {
   background-color: black;
   color: white;
   border-color: black;
 }*/

 .tab.inactive {

   color: black;
 }

 /* Content sections */
 .news-tab-content {
   display: none;
 }

 .news-tab-content.active {
   display: block;
 }

 /* News list style */
 .news-list {
   list-style: none;
   padding: 0;
 }

 .news-list li {
   padding: 10px;
   border-bottom: 1px solid #ccc;
 }

 /* Media grid style */
 .media-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 15px;
 }

 .media-grid div {
   background-color: #fff;
   padding: 20px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 4px;
 }

 .ctas {
   display: flex;
   gap: 10px;
   margin-bottom: 45px;
 }

 .news-tab-content {
   display: none;
 }

 .news-tab-content.active {
   display: block;
 }

 .list-card,
 .grid-card {
   border: 1px solid #eee;
   padding: 10px;
   margin-bottom: 15px;
   border-radius: 4px;
 }

 .grid-card img {
   width: 100%;
   height: auto;
 }

 /**********************************/
 .load-more-btn-news {
   font-family: 'gt-america-regular';
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 14px;
   letter-spacing: 2px;
   text-transform: uppercase;
   display: none;
   margin: 100px auto 80px auto;
   padding: 15px 28px;
   cursor: pointer;
   background: #EEFF75;
   color: #000;
   border: none;
 }


 .active-filter {
   border-bottom: 1px solid #000;
   color: #000 !important;
 }

 .tab.active {
   background: #000;
   color: #fff;
   cursor: pointer;
 }

 /* .news-items, .grid-cards2 { display: grid; gap: 20px; }*/

 /* Search icon inside input */
 .search-wrapper {
   position: relative;
   display: inline-block;
   width: 100%;
 }

 .search-wrapper input {
   width: 100%;
   padding: 8px 40px 8px 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
 }

 .search-wrapper .search-icon {
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
 }

 .search-wrapper .search-icon img {
   width: 16px;
   height: 16px;
 }


 /* search with icon*/
 .search-container {
   width: 100%;
   max-width: 600px;
   margin: 50px auto;
   border-bottom: 1px solid #666;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 5px 0;
 }

 .search-container input {
   flex: 1;
   border: none;
   outline: none;
   font-size: 16px;
   background: transparent;
   color: #333;
 }

 .search-container input::placeholder {
   color: #667;
 }

 .search-container button {
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   display: flex;
   align-items: center;
 }

 .search-container svg {
   width: 18px;
   height: 18px;
   stroke: #333;
 }

 /**********video popup***************/
 .video-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;

 }

 .play-btn {
   position: absolute;
   top: 38%;
   /*left: 75%;*/
   margin-left: 300px;
   transform: translate(-50%, -50%);
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background: #EEFF75;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .play-btn::before {
   content: '';
   border-style: solid;
   border-width: 15px 0 15px 25px;
   border-color: transparent transparent transparent black;
   margin-left: 5px;
 }

 /* Lightbox */
 .lightbox {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.8);
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 1000;
 }

 .lightbox:target {
   display: flex;
 }

 .lightbox iframe {
   width: 80vw;
   height: 45vw;
   max-width: 960px;
   max-height: 540px;
   border: none;

 }

 .lightbox a.close {
   position: absolute;
   top: 20px;
   right: 20px;
   color: white;
   text-decoration: none;
   font-size: 30px;
 }

 /*******************Video*****************/
 .video-wrapper {
   position: relative;
   padding-bottom: 56.25%;
   /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
   max-width: 100%;
   background: #000;
   /* optional: black background */
   border-radius: 8px;
   /* optional: rounded corners */
 }

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

 /****************************************/