@layer components {
  .custom-container {
    max-width: 1230px;
    padding-left: 25px;
    padding-right: 25px;
    @apply mx-auto;
  }
  .switch-box {
    @apply flex-shrink-0 flex items-center justify-center bg-gray rounded-full ml-2 mr-6;
  }
  .switch {
    @apply relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2  dark:bg-blue;
  }
  .switch-btn {
    @apply appearance-none pointer-events-none translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200;
  }
  .switch-btn:checked {
    @apply translate-x-5;
  }
  /* button */
  .btn {
    @apply font-bold inline-flex justify-center items-center capitalize;
    min-width: 214px;
    height: 60px;
    padding: 14px 4px;
    line-height: 1;
  }
  .btn-red {
    @apply bg-red hover:bg-red-dark focus:bg-red-dark text-white;
  }
  .btn-teal {
    @apply bg-teal hover:bg-teal-dark focus:bg-teal-dark text-white;
  }
  .btn-outline {
    border: 3px solid;
    @apply border-black hover:border-gray-dark focus:border-gray-dark;
  }
  /* tabs */
  .tabs {
    @apply flex flex-row gap-3 items-center overflow-x-auto custom-container;
  }
    .tabs::-webkit-scrollbar {
    display: none;
  scrollbar-width: none; 
  }
  .tab {
    @apply bg-white rounded-3xl mx-auto capitalize inline-flex items-center justify-center px-4 py-2 text-base
    cursor-pointer font-semibold flex-shrink-0 border-2 border-white dark:bg-black dark:text-white;
    flex-basis: max-content;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 125ms ease-out;
  }
  .tab img {
    @apply mr-1.5 shadow;
  }
  .filter-tab:checked + .tab,
  .filter-tab:checked:hover + .tab,
  .filter-tab:checked:focus + .tab {
    @apply border-2 border-gray-dark;
  }
  .filter-tab:not(checked):hover + .tab,
  .filter-tab:not(checked):focus + .tab {
    @apply border-2 border-gray;
  }

  /* carousel */
  .slick-slider {
    display: flex !important;
  }
  .carousel-btn {
    @apply flex-shrink-0 p-3 focus:outline-none focus:shadow-lg;
  }
  .custom-carousel {
    @apply relative;
  }
  .custom-carousel .carousel-btn[aria-label='prev'] {
    @apply absolute 2xl:left-4  dark:filter dark:invert;
    top: 45%;
    left: 5%;
    z-index: 1;
  }
  .custom-carousel .carousel-btn[aria-label='next'] {
    @apply absolute 2xl:right-4 dark:filter dark:invert;
    top: 45%;
    right: 5%;
    z-index: 1;
  }
  .carousel-dots {
    @apply flex flex-row gap-2.5;
  }
  .carousel-dots li {
    @apply rounded-sm;
    width: 63px;
    height: 5px;
    background-color: #e0e0e0;
  }
  .carousel-dots li button {
    @apply opacity-0;
  }
  /* category-filter */
  .category {
    @apply lg:w-auto overflow-x-auto overflow-y-hidden flex flex-nowrap items-end;
    margin-bottom: 3.8rem;
  }
  .category::-webkit-scrollbar {
    display: none;
  scrollbar-width: none; 
  }

  .category-item {
    @apply flex-shrink-0 cursor-pointer font-black font-heading text-transparent capitalize;
    font-size: 6rem;
    -webkit-text-stroke: 1px black;
  }
  .dark .category-item {
    -webkit-text-stroke: 1px white;
  }
  .category > .filter-option {
    margin-right: 3.25rem;
  }
  .category > .filter:checked + label {
    -webkit-text-fill-color: black;
  }
  .dark .category > .filter:checked + label {
    -webkit-text-fill-color: white;
  }
  /* modal */

  .modal-container {
    @apply fixed top-0 left-0 w-full z-40 transition-all ease-out duration-300;
  }
  .modal-content {
    @apply mx-12 border bg-gray w-full border-gray-dark;
  }
  .modal {
    @apply relative flex;
  }
  .modal-lg {
    @apply top-6 h-1/2 sm:h-2/3 w-4/5 max-w-screen-2xl;
  }
  .modal-sm {
    @apply max-w-lg md:max-w-5xl;
    max-height: 650px;
    height: 100%;
  }
  .modal-overlay {
    background-color: rgba(34, 34, 34, 0.7);
  }
  .modal-close-btn {
    @apply bg-black-lighter text-white text-4xl w-16 h-16 rounded-full absolute -top-4 right-4;
  }
  /* home */
  .accessibility-btn {
    @apply bg-black h-14 w-14 rounded-full inline-flex items-center justify-center fixed right-4 bottom-48 z-10 dark:bg-white dark:text-black;
  }
  .accessibility-btn > svg {
    @apply dark:filter dark:invert;
  }
  .accessibility {
    @apply bg-black text-sm text-white sticky top-0 w-full z-50 transition-all ease-out duration-75;
  }
  .accessibility-box {
    min-height: 0;
    max-width: calc(1440px - 121px);
    @apply w-full h-full flex flex-col md:flex-row gap-2.5 md:items-center mx-auto;
  }
  .accessibility-close-btn {
    @apply appearance-none inline-flex items-center max-w-max;
  }

  .main-body {
    @apply dark:bg-black dark:text-white;
  }
  .hero,
  .about,
  .analytics,
  .podcasts,
  .data {
    @apply grid pb-9 xl:pb-0 items-center custom-container;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .about,
  .analytics,
  .podcasts,
  .data {
    @apply gap-10;
  }
  .hero h1 {
    @apply font-heading capitalize;
    font-size: 120px;
    line-height: 99.5px;
  }
  .about h2,
  .data h2,
  .podcasts h2,
  .analytics h2,
  .stories-section h2 {
    @apply font-heading capitalize;
  }
  .about h2,
  .data h2,
  .analytics h2,
  .podcasts h2,
  .stories-section h2 {
    @apply text-5xl mb-4;
    line-height: 51px;
  }
  .analytics img {
    @apply object-center lg:object-cover mx-auto xl:w-full;
  }
  .analytics img {
    @apply object-center;
  }
  .hero p,
  .about p,
  .analytics p,
  .data p {
    @apply text-left mt-6;
  }
  .hero-content,
  .about-content,
  .analytics-content {
    padding-top: 120px;
    @apply xl:pt-0;
  }
  .about-content ul {
    @apply list-none list-inside mt-2;
  }
  .about-content p,
  .about-content ul {
    @apply text-base;
  }
  .hero-content .btn,
  .about-content .btn,
  .analytics-content .btn,
  .podcast-content .btn,
  .data-content .btn {
    @apply mt-9;
  }
  .hero {
    min-height: 695px;
    @apply dark:bg-black dark:text-white relative overflow-hidden;
  }
  .hero img {
    @apply absolute xl:static transform opacity-50 xl:opacity-100 xl:transform xl:translate-x-8;
    z-index: 0;
    transform: scale(1);
  }
  .hero-content{
  z-index: 1;;
  }
  .partners-section {
    @apply custom-container bg-white dark:bg-black dark:text-white mx-auto pt-0;
    min-height: 160px;
  }
  .partners {
    @apply relative;
  }
  .partners img {
    @apply dark:filter dark:invert dark:grayscale;
  }
  .about-section {
    @apply bg-gray-lighter dark:bg-black-lighter dark:text-white;
  }
  .about-section .btn {
    @apply dark:border-white;
  }
  .about-section .btn {
    @apply dark:bg-white dark:text-black;
  }
  .about {
    min-height: 932px;
  }
  .about-icon {
    grid-template-rows: repeat(3, minmax(0, max-content));
    @apply grid grid-cols-1 gap-y-4 justify-items-center items-center mx-auto;
  }
  .about-icon svg {
    width: 300px;
    height: 300px;
  }
  .data-section {
    background: url('../assets/icons/blue-bg.jpg');
    min-height: 566px;
    padding-top: 120px;
    @apply bg-center bg-no-repeat bg-cover xl:bg-bottom text-white dark:filter dark:invert dark:grayscale;
  }
  .data-content {
    @apply self-start;
  }
  .countdown {
    @apply text-center flex flex-col;
  }
  .timer {
    font-size: 144px;
    @apply font-black;
  }
  .data-numbers {
    @apply grid grid-cols-1 md:grid-cols-3 grid-rows-4 md:grid-rows-2 2xl:grid-rows-2;
    column-gap: 69px;
  }
  .data-number-item {
    @apply w-44 text-7xl font-heading text-center;
  }
  .analytics {
    min-height: 726px;
  }
  .stories-section {
    @apply bg-gray-lighter text-center  dark:bg-black-lighter dark:text-white;
    min-height: 897px;
    padding-top: 70px;
    padding-bottom: 122px;
  }
  .carousel-stories {
    @apply mt-12;
  }
  .carousel-story {
    max-width: 400px;
    @apply inline-flex flex-col lg:flex-row-reverse items-end mx-auto w-9/12 lg:w-11/12 lg:max-w-max xs:w-3/4 dark:bg-black-lighter dark:text-white;
  }
  .carousel-story-img {
    height: 250px;
    @apply w-full bg-gray-light object-cover object-center;
  }
  .stories-hero-info,
  .carousel-story-info {
    padding-bottom: 15px;
    @apply w-full bg-white px-5 sm:px-10 pt-7.5 pb-8.5 lg:py-11 self-end text-left lg:-mr-8 flex flex-col justify-between dark:bg-black dark:text-white;
  }
  .podcasts-section {
    min-height: 643px;
    @apply bg-red text-white flex dark:bg-black;
  }
  .podcasts {
    @apply custom-container grid grid-cols-1;
    grid-template-rows: repeat(1, minmax(0, 1fr));
    grid-gap: 57px;
  }
  .podcast-img {
    height: 378px;
    width: 378px;
    @apply object-cover object-center bg-gray-lighter;
  }
  .tag {
    @apply px-2.5 py-0.5  inline-block font-bold;
  }
  .tag-white {
    @apply bg-white text-black;
  }
  .tag-red {
    @apply bg-red text-white;
  }
  .stories-hero-section {
    @apply flex items-center justify-center dark:bg-black;
    min-height: 543px;
  }
  .stories-hero {
    @apply custom-container inline-flex flex-col lg:flex-row-reverse items-end mx-auto w-full py-4 dark:bg-black dark:text-white;
  }
  .stories-hero-img {
    height: 300px;
    @apply w-full object-center object-cover bg-gray-mildest;
  }
  .stories-list {
    @apply custom-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 pt-4 pb-12 lg:py-12;
  }
  .content-hero {
    @apply w-full h-full object-cover object-center bg-yellow;
    height: 350px;
  }
  .content-body {
    @apply bg-white px-6 lg:px-14;
  }
  .content-container {
    @apply bg-gray-lighter dark:bg-black-lighter dark:text-white px-12 lg:px-24 pt-20 pb-32 -mt-20;
  }
  .content-container .details {
    max-width: 240px;
    @apply w-full;
  }
  .content-header {
    @apply font-body font-bold flex flex-nowrap justify-between items-end xs:items-center gap-y-4 mx-auto;
    max-width: 1142px;
  }
  .content-header #back-btn {
    @apply sm:w-max flex items-center self-start xs:self-auto text-2xl font-bold;
  }
  .content-header [data-info] {
    @apply flex items-center;
  }
  .content-header [data-country] {
    @apply text-base font-semibold mr-auto;
  }
  .content-header svg[title='clock'] {
    @apply sm:ml-6 flex-shrink-0;
  }
  .content-info {
    @apply mx-auto mt-20;
    max-width: 953px;
  }
  .content-info h1 {
    @apply font-heading pb-16 text-6xl sm:text-7xl tracking-tight;
  }
  .content-info h2 {
    @apply text-3xl font-bold py-8;
  }
  .content-info p {
    @apply whitespace-pre-line text-left lg:text-justify;
  }
  .story {
    @apply flex flex-col h-full w-full;
  }
  .story-img {
    @apply w-full bg-gray-lighter object-cover object-center;
    height: 300px;
  }
  .story-info {
    min-height: 346px;
    @apply w-full bg-white px-5 sm:px-10 py-5 sm:py-11 flex flex-col justify-between dark:bg-black dark:text-white;
  }
   .truncate-header {
     display: -webkit-box;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;  
     overflow: hidden;
     text-overflow:ellipsis;
    }
   .truncate-body  {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;  
      overflow: hidden;
      text-overflow:ellipsis;
  }
  .who-we-are-hero {
    min-height: 534px;
    @apply custom-container font-bold font-heading flex flex-col justify-center;
  }
  .who-we-are-hero h1 {
    line-height: 1.25;
    @apply capitalize w-full;
  }
  .who-we-are-video {
    height: 546px;
    @apply w-full object-cover object-center relative;
  }
  .who-we-are-data {
    @apply dark:filter dark:grayscale dark:invert bg-no-repeat bg-cover bg-center flex items-center;
    min-height: 400px;
    background-image: url('../assets/images/yellow-paper-rip.jpg');
  }
  .approaches-section {
    @apply text-center text-black dark:text-white bg-gray-lighter dark:bg-black-lighter bg-cover bg-center dark:filter flex flex-col items-center justify-between;
    min-height: 502px;
  }
  .approaches {
    @apply max-w-xs xs:max-w-md lg:max-w-3xl;
  }

  .career-section {
    @apply bg-blue-dark dark:bg-gray dark:text-black capitalize text-center mx-3 md:mx-10 my-12 text-white flex flex-col items-center justify-center gap-8 font-heading;
    min-height: 500px;
  }
  .careers {
    @apply py-36;
    background: #f4f7fb;
  }
  .testimonial-card {
    @apply flex items-center px-5 py-12 lg:pt-12 lg:pb-0;
    min-height: 381px;
  }
  .testimonial {
    @apply bg-gray-lightest dark:bg-black-lighter relative;
    min-height: 381px;
  }
  .testimonials {
    @apply bg-gray-lightest dark:bg-black-lighter relative;
    min-height: 487px;
  }

  .hide-trailer {
    @apply h-0 opacity-0;
  }
  .show-trailer {
    @apply h-screen opacity-100;
  }
  .resource {
    min-height: 538px;
  }
  .resource-img {
    height: 272px;
    @apply object-cover object-center w-full bg-gray;
  }
  .resource-info {
    width: 95%;
    min-height: 310px;
    margin-top: -35px;
    @apply bg-white dark:bg-black dark:text-white relative px-10 py-11 text-left flex flex-col justify-between;
  }
  .resource-title {
    @apply font-heading pt-5;
    font-size: 1.5rem;
    line-height: 30px;
  }
  .become-a-partner-max-w {
    @apply mx-auto px-5 custom-container;
  }
  .become-a-partner-header {
    background-color: #f7f7f7;
    @apply pt-12 sm:pt-24 pb-96;
  }
  .become-a-partner-header h2 {
    max-width: 995px;
    @apply text-5xl md:text-7xl font-heading font-extrabold mx-auto px-5;
  }
  .become-a-partner-card {
    @apply bg-white dark:bg-gray-darker md:mx-auto md:w-11/12 py-9 sm:py-20 space-y-8 md:space-y-12 text-lg leading-8 -mt-80;
  }
  .become-a-partner-max-w h3,
  .podcast-body h3,
  .latest-podcast h3 {
    @apply text-3xl font-bold font-heading;
  }
  .become-a-partner-max-w ul {
    list-style-type: square;
    @apply pl-8 leading-5;
  }
  .contact-card {
    @apply custom-container font-semibold place-items-center md:px-24 justify-between md:flex py-16 md:mx-auto pl-8 sm:pl-16;
  }
  .contact-card-info {
    @apply flex space-x-4 md:space-x-9 items-center;
  }
  .contact-card-info h4 {
    @apply text-4xl font-heading;
  }
  .contact-card-img {
    @apply w-52 h-52 overflow-hidden rounded-full;
  }
  .contact-card-link {
    @apply flex space-x-4 text-2xl md:space-x-8 place-content-center md:place-content-start;
  }
  .text-green-400 {
    color: #269a47;
  }
  .text-red-400 {
    color: #c21f33;
  }
  .text-orange-400 {
    color: #ee402b;
  }
  .text-orange-500 {
    color: #f36d24;
  }
  .text-blue-400 {
    color: #00aed9;
  }
  .text-yellow-400 {
    color: #fdb713;
  }
  .text-yellow-300 {
    color: #f99c26;
  }
  .text-brown-400 {
    color: #8f1838;
  }
  .text-pink-400 {
    color: #e11483;
  }
  .text-green-500 {
    color: #48773e;
  }
  .text-blue-500 {
    color: #02558b;
  }
  .text-blue-300 {
    color: #183668;
  }
  .nav-banner {
    background-position: top;
    width: min(100%, 1440px);
    @apply hidden flex-col md:flex h-96 mx-auto;
  }
  .nav-banner-container {
    @apply mt-auto flex justify-between items-center mb-3 custom-container w-full;
  }
  .nav-banner-text-big {
    @apply flex space-x-6 py-5 px-4 items-center bg-gray-lightest pl-8 dark:bg-gray-dark dark:text-white;
    min-height: 7rem;
    max-width: 50%;
  }
  .nav-banner-text-sm {
    @apply h-16 flex space-x-4 pl-5 items-center p-4 bg-gray-lightest  dark:bg-gray-dark dark:text-white;
  }
  .nav-banner-text-big .text {
    @apply font-semibold font-heading text-4xl;
  }
  .nav-banner-text-sm .text {
    @apply font-semibold whitespace-nowrap;
  }
  .text-stack {
    @apply flex-col md:flex-row custom-container py-14 md:py-28 flex w-full;
  }
  .text-stack .header {
    height: min-content;
    max-width: 500px;
    @apply bg-yellow w-full flex font-heading text-5xl capitalize dark:bg-gray-darker md:py-14 py-6 md:pl-14 pl-6 pr-10 md:pr-24;
    padding-left: 60px;
  }
  .text-stack .header h3 {
    @apply capitalize font-heading font-black text-black-lighter min-w-min dark:text-white dark:bg-gray-darker relative top-0 -right-0 bg-yellow text-3xl md:text-5xl md:leading-tight;
  }

  .text-stack .content {
    max-width: 67ch;
    @apply space-y-4 w-full mt-14 leading-7;
  }
  .become-a-partner-section {
    @apply space-y-12 lg:space-x-12  flex-col lg:flex-row custom-container justify-evenly py-14 sm:py-28 flex w-full;
  }
  .become-a-partner-img {
    height: auto;
    width: 100%;
    max-width: 667px;
    max-height: 440px;
    @apply overflow-hidden;
  }
  .become-a-partner-text {
    @apply flex flex-col justify-center;
  }
  .become-a-partner-text > p {
    max-width: 15ch;
    @apply lg:text-right font-heading font-semibold leading-10 capitalize mb-9 text-4xl;
  }
  @keyframes fadeEffect {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .img-hero {
    @apply bg-transparent custom-container flex items-center relative;
    height: 378px;
  }
  .img-hero-text {
    @apply bg-yellow font-heading w-max inline-block text-white z-10 py-7 px-10 leading-none dark:bg-gray-dark dark:text-white capitalize absolute left-6;
    font-size: 3rem;
  }

  /* countries */
  .countries-hero {
    min-height: 558px;
    @apply flex flex-col justify-center items-center pt-8.5 lg:pt-0;
  }
  .countries-hero * {
    max-width: 1141px;
    width: 95%;
    @apply mx-auto;
  }
  #countries-landing .countries-hero h2 {
    @apply mb-10 font-heading capitalize text-5xl text-center font-bold dark:text-white text-black-light;
    max-width: 500px;
  }

  #countries-landing .countries-hero p {
    @apply mb-4 text-center dark:text-white text-black-light whitespace-normal;
    max-width: 650px;
  }

  .countries-hero {
    @apply dark:bg-gray-darker bg-gray-lightest;
  }

  #countries-landing .map-section {
    @apply py-24 px-4 mx-auto relative text-center dark:bg-black bg-teal;
  }

  .styled-select {
    @apply w-full inline-block relative bg-white mb-24 dark:bg-gray-darker;
  }

  .styled-select .select-icon {
    top: 45%;
    left: calc(50% - 100px);
    @apply absolute z-0 dark:filter dark:invert;
  }
  .styled-select-sm {
    max-width: 241px;
  }
  .styled-select-lg {
    max-width: 413px;
  }
  .styled-select select {
    max-width: 440px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align-last: center;
    -moz-text-align-last: center;
    @apply w-full bg-transparent appearance-none text-center px-8 py-4 font-bold relative z-10 dark:text-white;
  }

  #countries-landing .view-country {
    width: fit-content;
    box-shadow: 1px 2px 16px rgba(186, 149, 158, 0.2);
    @apply text-black-light absolute right-40 top-40 bg-white py-6 px-6 flex gap-8 items-center rounded-lg dark:bg-gray-darker dark:text-white;
  }

  #world-map path:hover {
    fill: gray !important;
  }

  #world-map path.selected:hover,
  #world-map path.selected {
    @apply fill-crimson !important;
  }

  /* country detail page */
  .country-name {
    font-size: 90px;
    line-height: 70px;
  }

  #country-detail .number-heading {
    font-size: 96px;
  }

  .flag {
    height: 46px;
    width: 76px;
    @apply object-cover;
  }

  select#countries {
    min-width: 190px;
    padding: 15px 30px;
    max-width: 300px;
  }

  .country-hero {
    height: 624px;
    @apply bg-yellow;
    background-blend-mode: color;
  }

  #country-detail .timeline-item {
    height: 120px;
  }

  #country-detail .timeline-item span.dot:before {
    content: '';
    height: 20px;
    width: 20px;
    border: 4px solid white;
    top: 60px;
    right: calc(50% - 5px);
    transition: all 0.2s;
    @apply absolute rounded-full;
  }

  #country-detail .timeline-item span.dot:after {
    content: '';
    height: 70px;
    width: 3px;
    top: 80px;
    right: calc(50% + 3px);
    transition: all 0.2s;
    @apply absolute bg-white;
  }

  #country-detail .timeline-item span.line:after {
    content: '';
    height: 3px;
    width: 100%;
    top: 150px;
    @apply absolute left-0 bg-white;
  }

  #country-detail .timeline-item:hover span.dot:before,
  #country-detail .timeline-item.active span.dot:before {
    @apply bg-yellow border-yellow top-10;
    z-index: 1;
  }

  #country-detail .timeline-item:hover span.dot:after,
  #country-detail .timeline-item.active span.dot:after {
    height: 95px;
    top: 55px;
  }

  #country-detail .caption {
    transform: translateY(0);
    transition: all 0.2s;
  }

  #country-detail .timeline-item:hover .caption,
  #country-detail .timeline-item.active .caption {
    @apply text-yellow;
    transform: translateY(-20px);
  }

  #country-detail .download-section {
    min-height: 380px;
  }

  #country-detail .view-stories path {
    fill: white !important;
  }

  #country-detail .checkout-card {
    background: #f7f7f7;
  }

  .dark #country-detail .checkout-card {
    @apply bg-gray-darker;
  }

  #country-detail .dark a path {
    fill: white;
    stroke: white;
  }

  /* country story */
  .dark #country-story > div {
    @apply bg-gray-darker;
  }

  #country-story > div {
    background-color: #f7f7f7;
  }

  .dark #country-story path {
    fill: white !important;
  }

  .bar-dots li button {
    width: 10px;
    max-height: 18px;
    height: 44.4%;
    margin-left: 8px;
    transition: all 0.2s;
    @apply bg-black-light block text-transparent;
  }

  /* impact section */
  .how-we-work-hero {
    @apply w-full font-black px-36 relative flex flex-col;
    @apply hidden;
  }

  .how-we-work-hero h1 {
    padding: 30px 40px;
    font-size: 90px;
    @apply bg-yellow;
  }

  .we-believe-section {
    @apply bg-gray-lighter;
  }

  .we-believe-section li {
    list-style-image: url('../assets/images/list-icon.svg');
  }

  .we-believe-section li::marker {
    margin-left: 15px;
  }
  .work-with-us {
    @apply bg-white dark:bg-black py-16;
    min-height: 755px;
  }
  .data-gap {
    height: 400px;
  }
  .work-with-us-content {
    @apply custom-container flex flex-col lg:flex-row items-baseline;
    gap: 72px;
  }
  .data-hubs {
    width: 350px
  }
  .nav-tabs {
    min-width: 300px;
    @apply w-full lg:w-auto bg-gray-lightest text-black dark:bg-black-lighter px-7 py-10;
  }
  .data-tabs {
    max-width: 255px;
  }
  .overview {
    display: block;
    max-width: calc(100vw - 500px);
    overflow-wrap: anywhere;
  }
  .projections .nav-tabs {
    background: #39aea8;
    color: #ffffff;
  }
  .get-update-section > div {
    padding: 80px 106px;
    @apply bg-red;
  }
  .get-update-section #email::placeholder {
    @apply text-black-light;
  }
  .nav-tab {
    @apply capitalize mt-4 font-extrabold;
  }
  button.nav-tab {
    @apply dark:text-white border-l-3 border-transparent hover:border-red-lighter py-2 px-3.5;
  }
  button.nav-tab:hover,
  button.nav-tab.active {
    @apply text-red border-red outline-none;
  }
  .projections button.nav-tab:hover,
  .projections button.nav-tab.active {
    @apply text-white border-white outline-none;
  }
  /* Content for tabs*/
  .tab-content {
    @apply hidden;
  }
  .tab-content p {
    @apply text-base my-4;
  }
  .tab-content li {
    @apply mt-5;
  }
  .tab-content table th,
  .tab-content table td {
    @apply border border-gray-darker p-2 text-base;
  }
  .download-facts {
    @apply bg-red dark:bg-gray-dark flex items-center mx-6;
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
    min-height: 360px;
  }
  .download-facts .form {
    @apply w-full custom-container flex flex-col lg:flex-row gap-y-6 lg:items-center justify-between;
  }
  .download-facts .form-heading {
    @apply text-5xl font-black capitalize font-heading w-full;
    line-height: 109%;
    max-width: 28.56rem;
  }
  .download-facts #email {
    max-width: 449px;
    @apply px-8 py-5 placeholder-black-light w-full;
  }
  #how-we-work .menu {
    height: 100px;
  }
  .data-hub-banner {
    background: url('../assets/images/data-hub-background.png');
    background-position: bottom right;
    background-size: auto;
    background-repeat: no-repeat;
  }
  .is-sticky {
    position: fixed;
    top: 0;
  }

  /* sticky-nav */
  .sticky-nav {
    @apply w-full z-30 sm:flex grid grid-cols-4 items-center sm:gap-x-12 gap-x-6 justify-center bg-white dark:bg-black-light sm:py-9 py-4;
  }
  .sticky-nav button {
    @apply text-black-lighter dark:text-white font-bold focus:outline-none focus:text-red-light;
  }
  .sticky-nav button.not-hidden {
    @apply text-red;
  }
  .menu-active {
    @apply text-red;
  }
  .subcategory {
    @apply flex flex-row flex-wrap lg:flex-nowrap justify-center items-center md:max-w-lg lg:max-w-3xl md:overflow-x-auto gap-3.5;
  }
  .subcategory-filters::-webkit-scrollbar {
    display: none;  /* IE and Edge */
  scrollbar-width: none; 
  }
  .subcategory .filter-option {
    @apply text-black-light capitalize dark:text-white font-semibold border border-gray-darker dark:border-white flex-shrink-0;
    border-radius: 41px;
  }
  .subcategory .filter-option {
    padding-top: 5px;
    padding-bottom: 5px;
    @apply px-6 inline-block;
  }
  .job-filters .filter:checked + .filter-option {
    @apply bg-yellow border-yellow dark:text-black-light;
    transition: all 125ms ease-out;
  }
  .filter-container {
    @apply custom-container py-7.5 lg:py-0 flex gap-y-6 flex-col sm:flex-row items-center justify-center sm:justify-between;
    min-height: 146px;
  }
  .filters .filter:checked + .filter-option {
    @apply bg-red border-red text-white;
    transition: all 125ms ease-out;
  }
  .filters::-webkit-scrollbar {
    display: none;  /* IE and Edge */
  scrollbar-width: none; 
  }
  .partner-display-view {
    @apply flex gap-6 items-center justify-between py-2.5 cursor-pointer w-max sm:mr-auto font-bold;
  }
  .partner-display-view .filter:checked + .filter-option {
    @apply text-red;
    transition: all 125ms ease-out;
  }
  .partners-tooltip {
    padding: 22px 18px;
    box-shadow: 1px 2px 16px rgba(186, 149, 158, 0.2);
    width: fit-content;
    @apply text-black-light absolute z-20 right-40 top-40 bg-white flex flex-col items-start rounded-lg dark:bg-gray-darker dark:text-white;
  }
  .partner-item {
    @apply w-full flex gap-6 items-center justify-between;
  }
  .partner-item > figure {
    @apply flex justify-start gap-5 py-4.5;
  }
  #partners dd:not(:last-child) figure {
    border-bottom-width: 1px;
    border-color: #e0e0e0;
  }
  .partner-card-img {
    height: 489px;
    filter: brightness(50%);
    @apply w-full object-cover object-center;
  }
  .partner-card-info {
    @apply w-full h-full flex flex-col justify-between absolute top-0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .partner-card-header {
    @apply w-full flex justify-between items-end transition-all hover:bg-white text-white hover:text-black px-9 pt-10 pb-12;
    height: 289px;
  }
  .partner-card-header:hover .partner-card-logo {
    @apply inline-block;
  }
  .partner-card-logo {
    width: 76px;
    height: 76px;
    @apply object-cover object-center bg-transparent hidden;
  }
  .partner-country-tags {
    @apply w-full flex justify-between items-center text-white px-9 pt-12;
  }
  .partner-country-tags [data-tag='country'] {
    @apply px-2.5 text-base font-bold text-white bg-red;
  }
  .partner-country-tags [data-tag='partner'] {
    @apply capitalize font-bold;
  }
  .publications-hero {
    background-image: url(../assets/images/publication-hero.svg);
    background-position: 50% 2%;
    @apply relative bg-cover dark:filter dark:grayscale dark:invert;
  }
  .publications {
    @apply flex flex-row xl:flex-nowrap flex-wrap gap-10 lg:gap-20 justify-between custom-container pb-0;
  }
  .publications .category-filters {
    max-width: 100%;
    @apply w-3/4 xl:w-full flex-row xl:flex-col overflow-x-scroll;
  }

  .publications .stories-list {
    @apply px-0;
  }
  .category-filters {
    @apply flex flex-row md:flex-col gap-5;
  }
  .category-filters .filter-option {
    @apply text-black-light text-center capitalize text-base font-semibold border border-white bg-white flex-shrink-0;
    border-radius: 41px;
  }
  .category-filters .filter-option {
    @apply py-2.5 px-4 inline-block;
  }
  .category-filters .filter:checked + .filter-option {
    @apply bg-teal border-teal text-white;
    transition: all 125ms ease-out;
  }
  .category-filters::-webkit-scrollbar {
    display: none;
    ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; 
  }
  .publication-hero {
    @apply hero;
    overflow: visible;
    min-height: 636px;
  }
  .publication-hero h1 {
    font-size: 72px;
  }
  .publication-hero .hero-content {
    @apply w-full;
  }
  .publication-hero .category {
    @apply font-bold capitalize;
  }
  .publication-hero picture {
    @apply w-max relative xl:top-14 xl:left-8 mx-auto;
  }
  .publication-hero img:first-of-type {
    max-height: 660px;
    max-width: 552px;
    @apply w-3/5;
  }
  .publication-hero .publication-img {
    max-height: 624px;
    max-width: 502px;
    @apply absolute w-3/5;
    left: 85px;
    top: 15px;
  }
  .publication-hero img {
    @apply object-cover object-center;
  }
  .publication-body {
    min-height: 580px;
    @apply bg-gray-lightest dark:bg-gray-darker mx-6 xl:mx-14 flex flex-col justify-center items-center;
  }
  .publication-body-content {
    max-width: 1230px;
    @apply mx-auto p-6 flex flex-col items-center;
  }
  .publication-body-content p {
    @apply whitespace-pre-line text-justify;
  }
  .wp-block-button {
    margin-top: 12px;
    @apply btn btn-red;
  }

  /* contact form  */
  .contact-form input,
  .contact-form textarea {
    background: #fbfbfb;
    @apply border border-gray-mildest w-full p-6;
  }
  .contact-form input {
    height: 65px;
    width: 98%;
  }

  /* Search    */
  .search-input {
    @apply become-a-partner-max-w mt-10;
  }
  .search-input input[type='text'] {
    height: 60px;
    @apply border border-gray-mildest bg-white w-full mr-0 pl-4 text-black-lighter;
  }
  .search-input-filters {
    @apply w-full md:w-9/12 md:pr-0 mt-10 flex flex-wrap items-center justify-center md:justify-start;
  }
  .search-input-filters label {
    @apply w-full flex flex-nowrap items-center border border-gray-mildest bg-white text-black-mild relative rounded-md ml-2 py-2 cursor-pointer text-base dark:text-gray-dark my-2 md:my-0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    max-width: 170px;
    height: 40px;
    outline: none;
  }
  .search-input-filters .filter-select {
    @apply w-full appearance-none text-black-mild bg-transparent font-body font-normal pl-5 pr-4 outline-none;
    font-size: 16px;
  }
  .search-input-filters label .select-arrow {
    @apply inline-block mr-3 dark:filter dark:invert;
  }
  .number-of-result {
    @apply pb-10 border-b border-gray-milder text-black-mild dark:text-white;
    font-size: 24px;
    font-weight: 600;
  }
  .search-result-item {
    @apply border-b border-gray-milder whitespace-normal py-16;
  }
  .search-result-item h3 {
    font-size: 24px;
    @apply font-body;
  }
  .item-badge {
    @apply inline-block text-red text-sm font-bold bg-gray-mild px-3 py-1 rounded-none mb-3;
  }
  .item-attributes {
    @apply w-full flex flex-wrap justify-start md:justify-between content-center mt-6;
  }
  .item-categories {
    @apply w-full md:w-6/12 flex flex-wrap justify-start mb-2 md:mb-0;
  }
  .item-categories .item-badge {
    @apply mb-0;
  }
  .item-date {
    @apply w-full md:w-6/12 inline-block md:text-right text-base;
  }
  .video-content {
    @apply mx-auto;
    max-width: 953px;
    margin-top: -280px;
  }
  .video-content img {
    max-width: 913px;
    height: 350px;
    @apply w-full object-cover object-center;
  }
  .faqs {
    @apply become-a-partner-max-w whitespace-pre-line;
  }
  .faqs h2 {
    @apply font-heading text-4xl;
  }
  .faq::webkit-details-marker {
    display: none;
  }
  .faq-category {
    @apply inline-block bg-red text-white text-base px-6 py-2.5 my-12;
  }
  .faq-heading {
    @apply text-base;
  }
  .faq summary {
    @apply font-bold text-2xl py-4 border-b-3;
  }
  .faq-btn {
    @apply dark:filter dark:invert transition-all duration-300;
  }
  .faq[open] .faq-btn {
    transform: rotate(180deg);
  }
  .team-summary svg {
    @apply transition-all duration-300;
  }
  .team-summary[open] svg {
    transform: rotate(180deg);
  }
  .team-summary[open] p {
    animation: animateDown 0.2s linear forwards;
  }

  @keyframes animateDown {
    0% {
      opacity: 0;
      transform: translateY(-15px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /*  Podcast    */
  .podcast-body,
  .podcast-list {
    @apply bg-white dark:bg-black dark:text-white py-16;
  }
  .podcast-container {
    @apply custom-container flex flex-wrap;
  }
  .podcast-summary {
    @apply w-full md:w-8/12 md:pr-10 mb-12 md:mb-0;
  }
  .podcast-summary p {
    @apply my-4;
  }
  .podcast-link {
    @apply w-full md:w-4/12;
  }
  .podcast-button {
    @apply bg-black dark:bg-white flex flex-nowrap w-full justify-center items-center;
    height: 95px;
    min-width: 260px;
    max-width: 280px;
    border-radius: 17px;
  }
  .podcast-button-text {
    @apply flex flex-col justify-start;
  }
  .podcast-button-text p {
    @apply text-white dark:text-black font-body;
  }
  .podcast-button .spotify-text {
    @apply font-heading my-0;
    font-size: 36px;
    color: #1ed760;
  }
  .podcast-button .apple-text {
    @apply text-white dark:text-black font-heading my-0;
    font-size: 24px;
  }
  .all-episodes {
    @apply download-facts dark:bg-black;
  }
  .episode-container {
    @apply custom-container flex w-full  flex-wrap justify-center md:justify-between text-center md:text-left;
  }
  .episode-list-heading {
    @apply text-5xl font-black capitalize font-heading text-white w-full md:w-9/12;
    line-height: 109%;
  }

  /* contact form  */
  .contact-form input,
  .contact-form textarea {
    background: #fbfbfb;
    border: 1px solid #e0e0e0;
    @apply w-full p-6;
  }
  .contact-form input {
    height: 65px;
    width: 98%;
  }
  .loading {
    overflow: hidden;
  }
  .loading #page-loader,
  .loading .loader-overlay {
    @apply absolute top-0 right-0 left-0 bottom-0 h-screen w-screen;
  }
  .loading main {
    opacity: 0;
  }
  .loaded main {
    opacity: 1;
  }
  .loaded .loader-overlay {
    display: none;
    overflow: auto;
  }
  .loader-overlay {
    background: transparent;
    @apply flex items-center justify-center left-0 right-0 top-0 bottom-0 w-full h-full z-20 col-span-full;
  }
  .lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    @apply bg-gray-dark dark:bg-white;
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }
  .pagination {
    @apply flex justify-center items-center h-28;
  }
  .pagination-btn {
    @apply px-4 py-2 font-medium text-black-lighter text-xl mr-1 rounded-md bg-white;
  }
  button.pagination-btn {
    @apply hover:bg-gray-mild;
  }
  button.pagination-btn:disabled {
    @apply bg-gray-mildest hover:bg-gray-mildest text-gray;
  }
}
#approaches-dots li.slick-active {
  @apply bg-red;
}

.bar-dots li.slick-active button {
  height: 100%;
}
.wp-block-button {
  @apply btn btn-red mx-0;
  margin-top: 16px !important;
  height: 100% !important;
}

.wp-block-button a,
.wp-block-button:hover a ,
.wp-block-button:focus a {
 background: inherit !important;
 color: inherit !important;
}