/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
   * This injects Tailwind's component classes and any component classes
   * registered by plugins.
   */
@tailwind components;

/**
   * This injects Tailwind's utility classes and any utility classes registered
   * by plugins.
   */
@tailwind utilities;

/**
   * Use this directive to control where Tailwind injects the hover, focus,
   * responsive, dark mode, and other variants of each class.
   *
   * If omitted, Tailwind will append these classes to the very end of
   * your stylesheet by default.
   */
@tailwind variants;

/* Variables */
:root {
  --color-base: #222;
  --color-highlight: #e5422b;
  --color-muted: #aaa;
  --layout-site-gutter: 2rem;
  --layout-site-section-spacer: 6rem;
  --layout-site-width: 94.5rem;
  --header-height: 108px;
  --type-system-ui: "Public Sans", sans-serif system-ui, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --type-technical: monospace;
}

/* Containers */

body {
  color: var(--color-base);
  font-family: var(--type-system-ui);
  line-height: 1.5;
  margin: 0;
}
/* Top bar */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.top-bar {
  @apply fixed top-0 left-0 z-[999] w-full backdrop-blur-[5px];
  background-color: rgba(255, 255, 255, 0.9);
}
.top-bar ul {
  @apply list-none pl-[0];
  /*padding: revert;*/
}
.top-bar-nav .active {
  @apply bg-main-navy text-main-white;
}
.top-bar .top-bar-logo svg {
  @apply max-w-[51px] lg:max-w-[unset];
}
/* Top bar and HeroImage */
body:has(#hero-image):not(.is-homepage) .top-bar {
  @apply text-main-white backdrop-blur-none;
  background-color: transparent;
}
body:has(#hero-image):not(.is-homepage) .top-bar .top-bar-logo {
  @apply text-main-white;
  background-color: transparent;
}
body:has(#hero-image):not(.is-homepage) .top-bar .top-bar-logo svg path {
  @apply fill-main-white;
}
body:has(#hero-image) .is-homepage .top-bar svg path {
  @apply fill-main-navy;
}
body:has(#hero-image) .hamburger-menu svg path {
  @apply fill-main-white;
}
body:has(#hero-image)
  .is-homepage
  .top-bar
  .navigation-mobile
  .navigation-menu
  svg
  path {
  @apply fill-main-white;
}
/* Top bar and Homepage */
.is-homepage .top-bar {
  @apply text-main-navy;
  background-color: transparent;
}
.is-homepage .top-bar .top-bar-logo svg path {
  @apply fill-main-navy;

}
body:has(#hero-image).is-homepage .hamburger-menu svg path {
  @apply fill-main-navy;
}
body:has(#hero-image).is-homepage .top-bar .navigation-menu .hamburger-menu svg path {
  @apply fill-main-white;
}
/* Top bar on scroll */
.top-bar,
.top-bar .top-bar-logo svg path,
.top-bar-menu li a,
.navigation-mobile .navigation-menu {
  @apply transition ease-out duration-300;
}
body:has(#hero-image).top-bar-is-scroll .top-bar {
  @apply text-main-navy backdrop-blur-[5px];
  background-color: rgba(255, 255, 255, 0.9);
}
body:has(#hero-image).top-bar-is-scroll .top-bar .top-bar-logo svg > path {
  @apply fill-main-navy;
}
body:has(#hero-image).top-bar-is-scroll .top-bar .hamburger-menu svg > path {
  @apply fill-main-navy;
}
body:has(#hero-image).top-bar-is-scroll .top-bar .navigation-menu .hamburger-menu svg > path {
  @apply fill-main-white;
}
body:has(#hero-image).top-bar-is-scroll .top-bar .navigation-menu .top-bar-logo svg > path {
  @apply fill-main-white;
}
.top-bar-menu li a.active,
.top-bar-nav li a.active,
.top-bar-nav li a:hover {
  @apply bg-main-navy text-main-white;
}
/* mobile navigation */
.has-header-image.top-bar-is-scroll
  .top-bar
  .navigation-mobile
  .navigation-menu
  svg
  path,
.top-bar .navigation-mobile .navigation-menu .top-bar-logo svg path {
  @apply fill-main-white;
}
.navigation-mobile .navigation-menu {
  @apply absolute top-0 left-0 z-50 w-full h-screen px-[40px] pb-[70px] bg-main-navy text-main-white;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
}
.navigation-open {
  overflow: hidden;
}
.navigation-open .navigation-menu {
  overflow: auto;
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.hamburger-menu {
  @apply cursor-pointer;
}
.navigation-mobile .navigation-mobile-follow-us svg path{
  @apply fill-main-white;
}
header.scrolling {
  background: rgba(255, 255, 255, 0.9);
}
header.main-white {
  color: white;
}
header.main-navy {
}

main {
}

/* Elements */

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

time {
  color: var(--color-muted);
  font-family: var(--type-technical);
}

/* Header */

header .home {
  font-weight: bold;
}

/* Navigation */

nav {
}

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin-left: var(--layout-site-gutter);
}

nav a {
  color: var(--color-muted);
}

nav a.active,
nav a:hover {
  color: var(--color-base);
}

/* Footer */

footer {
  font-size: 0.75em;
  width: 100%;
  display: flex;
  justify-content: center;
}

footer .copyright,
footer .colophon {
  color: var(--color-muted);
}

/* Blog */

article + article {
  /*margin-top: var(--layout-site-section-spacer);*/
}

article a {
  color: var(--color-highlight);
  text-decoration: underline;
}

.thumbnail {
}

/* Posts */

.topics {
  display: flex;
  list-style: none;
  margin: var(--layout-site-gutter) 0;
  padding: 0;
}

.topics li {
  margin-right: 4px;
}

.topics a {
  background-color: var(--color-highlight);
  border-radius: 2px;
  color: white;
  font-family: var(--type-technical);
  padding: 2px 8px;
  text-transform: uppercase;
}

.show-list li {
  list-style: disc;
  margin-left: 10px;
}
.topics a:hover {
  background-color: var(--color-base);
}

.feature-image {
  margin-bottom: var(--layout-site-section-spacer);
  margin-left: calc(-1 * var(--layout-site-gutter));
  margin-right: calc(-1 * var(--layout-site-gutter));
}

.content-block {
  margin-bottom: var(--layout-site-gutter);
}

.content-block:last-child {
  margin-bottom: 0;
}

/* About */
.about {
}

.about .photo {
  border-radius: 100%;
  height: 180px;
  margin: 0 auto var(--layout-site-gutter) auto;
  overflow: hidden;
  width: 180px;
}

/* Font family */
h1,
h2,
h3,
h4,
h5,
h6,
q {
  font-family: Degular;
}

* {
  font-family: "Public Sans";
}

/* Text styling */
h1,
.h1 {
  @apply text-[50px]  lg:text-[110px] text-main-navy font-normal leading-[90%];
}

h2,
.h2 {
  @apply text-main-navy text-[40px] md:text-[80px] font-normal leading-[90%];
}
.h2-medium {
  @apply text-[50px] md:text-[80px];
}

h3,
.h3 {
  @apply text-[50px] text-main-navy font-normal leading-[90%];
}
h4,
.h4 {
  @apply text-3xl font-normal leading-9 lg:text-[40px] lg:leading-[100%] text-main-navy;
}
.h4.text-main-white {
  color: #fff;
}

h5,
.h5 {
  @apply text-[24px] text-main-blue font-normal leading-[90%];
}

h6,
.h6 {
  @apply text-[20px] text-main-blue font-normal leading-[90%];
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: Degular;
}

p {
  @apply text-[16px] text-main-navy font-extralight leading-[130%];
}

q {
  /* Desktop/03 Text/Quote */
  @apply text-[26px] font-medium leading-[130%];
}

q::after,
q::before {
  content: "";
}

.btn-primary-link-olive {
  @apply bg-secondary-olive text-main-navy;
}
.btn-primary-link-navy {
  @apply bg-main-navy text-main-white;
}
.btn-primary-link-blue {
  @apply bg-main-blue text-main-white;
}

.btn-primary-link-white {
  @apply bg-main-white text-main-navy;
}
.btn-primary-link-orange {
  @apply bg-secondary-orange text-main-white;
}
.btn-primary-link-border {
  @apply text-main-navy border-b border-main-navy;
  background-color: transparent;
}
.btn-white-link-border {
  @apply text-main-white border-b border-main-white;
  background-color: transparent;
}
@layer utilities {
  .masonry {
    display: block;
  }
  .masonry-item {
    break-inside: avoid;
    margin-bottom: 2.5rem;
  }
}

/* tailwind components */
@layer components {
  .label-pill {
    @apply p-[7px_11px_6px] bg-main-cream rounded-[40px] justify-center items-center gap-2.5 flex text-[16px] font-light leading-[120%];
  }
  .label-pill > p {
    @apply text-center text-main-navy;
  }

  .btn-primary-link,
  .btn-primary-link-olive,
  .btn-primary-link-navy,
  .btn-primary-link-blue,
  .btn-primary-link-white,
  .btn-rollout {
    @apply pt-2 pb-2 px-4 text-main-white bg-main-navy font-medium focus:outline-none focus:ring focus:ring-opacity-75 uppercase;
    @apply leading-[20px] tracking-[1.28px];
  }

  .btn-rollout {
    @apply inline-block md:h-[36px] py-[8px] md:py-[unset] md:overflow-hidden;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .btn-rollout .btn-rollout-text {
    @apply md:-translate-y-1/2;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
  }
  .btn-rollout .btn-rollout-text span {
    @apply md:h-[36px] text-center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn-rollout .btn-rollout-text span:nth-child(1) {
    @apply hidden md:flex;
  }
  .btn-rollout:hover .btn-rollout-text {
    @apply md:translate-y-0;
  }

  .btn-ghost-link {
    @apply py-2.5 px-4 bg-main-white text-main-navy font-semibold focus:outline-none focus:ring focus:ring-opacity-75 uppercase;
  }

  .btn-story-link {
    @apply py-2.5 px-4 bg-secondary-orange text-main-white font-semibold focus:outline-none focus:ring focus:ring-opacity-75 uppercase;
  }

  .heading-primary {
    font-family: Degular;

    font-style: normal;
    @apply text-[50px] leading-[90%] lg:text-[110px] text-main-navy font-normal;
  }

  /* Section - Why NSI */
  .block-alternating-ranking {
    @apply flex flex-col xl:justify-between items-start flex-1 self-stretch gap-[24px];
  }
  .block-alternating-ranking > img {
    @apply h-[156px] w-full object-cover;
  }
  .section-why-nsi.section-olive {
    @apply bg-secondary-olive;
  }
  .section-why-nsi.section-navy {
    @apply bg-main-navy;
  }
  .section-why-nsi.section-navy h2,
  .section-why-nsi.section-navy .content-text * {
    @apply text-main-white;
  }

  .head-chapter {
    font-family: "Public Sans";
    @apply text-2xl font-light leading-[130%]  text-center text-main-navy;
  }

  /* Section - Project */
  .project-row {
    @apply flex h-[557px] justify-center items-start gap-[50px] self-stretch;
  }
  .project-block {
    @apply flex h-[557px] flex-col items-center flex-1 bg-main-white;
  }
  .project-block-text {
    @apply flex p-10 flex-col justify-between items-start gap-[30px] flex-1 self-stretch;
  }
  .project-block-image {
    @apply h-[270px] flex-shrink-0 self-stretch;
  }
  .project-get-in-touch .card-list-user-card {
    @apply w-full;
  }

  /* Section - Story */
  .story-row {
    @apply flex h-[557px] justify-center items-start gap-[50px] self-stretch;
  }

  .story-block {
    @apply flex h-[557px] flex-col items-center flex-1 bg-main-white;
  }
  .story-block-text {
    @apply flex p-10 flex-col justify-between text-secondary-orange items-start gap-[30px] flex-1 self-stretch;
  }
  .story-block-image {
    @apply h-[270px] flex-shrink-0 self-stretch;
  }

  /* Section - review */
  .reviews {
    @apply flex items-center self-stretch;
  }

  .review-block .review-block-inner {
    @apply flex p-[40px] md:p-[32px_60px_57px] gap-[50px] items-start items-stretch;
  }
  .review-block {
    @apply min-h-[500px];
  }
  .review-block .img {
    @apply flex w-[292px] h-[291px] flex-col justify-center items-end flex-shrink-0;
  }
  .review-block.blue .review-block-inner,
  .review-block.blue .review-block-inner * {
    @apply bg-main-navy text-secondary-olive;
  }
  .review-block.yellow .review-block-inner,
  .review-block.yellow .review-block-inner * {
    @apply bg-secondary-yellow text-main-navy;
  }

  .review-block .review-block-quote p {
    @apply text-xl leading-[26px] font-normal md:text-[26px] md:leading-[130%] md:font-medium;
    font-family: Degular;
  }
  .review-block .review-block-person {
    @apply leading-[120%] font-light;
  }

  /* animation transition */
  .review-block.selected {
    @apply translate-x-[0vw];
  }

  .review-block.queue {
    @apply translate-x-[120vw] opacity-0;
  }

  .review-block.wait {
    @apply translate-x-[60vw];
  }

  .review-block.shown {
    @apply translate-x-[-30vw] opacity-0 select-none;
  }

  .review-block.green > section {
    @apply bg-secondary-olive text-main-navy;
  }
  /* animation transition END */

  /* Section - Image slider */
  .image-slider {
    @apply self-stretch justify-start items-start gap-[50px] inline-flex;
  }

  .image-slide {
    left: 50%;
    @apply transition transform-gpu duration-300 opacity-100 absolute w-full  flex justify-center;
  }

  .image-slide.selected {
    transform: translateX(calc(0vw - 50%));
  }

  .image-slide.queue {
    display: none;
    transform: translateX(calc(10vw - 50%));
    opacity: 0;
  }

  .image-slide.wait {
    transform: translateX(calc(10vw - 50%));
    opacity: 0;
  }

  .image-slide.shown {
    transform: translateX(calc(-10vw - 50%));
    opacity: 0;
    user-select: none;
  }

  .image-slide.green > section {
    @apply bg-secondary-olive text-main-navy;
  }

  /* Section - Labels */
  .label-location {
    font-family: "Public Sans";

    @apply flex p-2.5 justify-center items-center gap-2.5 rounded-full   text-main-navy  leading-[120%];
  }

  .label-date {
    font-family: "Public Sans";

    @apply text-main-navy text-center text-[16px] leading-[120%];
  }

  /* Section - Dynamic Text */
  .section-dynamic-text {
    @apply flex flex-col gap-[30px] self-stretch text-[24px];
  }

  .section-dynamic-text p {
    @apply lg:text-[24px];
  }
  .section-dynamic-text .subtitle {
    @apply text-[24px] lg:text-[40px] lg:leading-[90%];
  }
  .section-dynamic-text *:first-child {
    @apply mt-0;
  }
  .section-dynamic-text *:last-child {
    @apply mb-0;
  }

  .section-dynamic-text h1,
  .section-dynamic-text h2,
  .section-dynamic-text h3,
  .section-dynamic-text h4,
  .section-dynamic-text h5,
  .section-dynamic-text h6 {
    @apply text-main-blue;
  }

  .section-dynamic-text h4{
    @apply lg:mt-[32px];
  }

  /* Section - header detail */
  .header-article {
    @apply bg-main-cream pt-[108px] pb-[3.75rem];
  }
  .header-invester-strategy,
  .header-project {
    @apply py-[3.75rem];
  }

  .header-article .label-pill,
  .header-career .label-pill {
    @apply bg-secondary-orange;
  }
  .header-article .label-pill > p,
  .header-career .label-pill > p {
    @apply text-main-white;
  }

  /* section - two column text */
  .section-two-column-text .section-text-right * {
    @apply lg:text-[24px] lg:leading-[130%];
  }
  .section-two-column-text .section-text-right p {
    @apply mb-[10px];
  }
  .section-two-column-text .section-text-right *:last-child {
    @apply mb-0;
  }
  /* Cards */

  /* Cards theme */
  .cards-creme {
    @apply bg-main-cream;
  }
  .cards-creme * {
    @apply text-secondary-orange;
  }

  .cards-creme .head-chapter {
    @apply text-main-navy;
  }
  .cards-pramry {
    @apply bg-main-navy;
  }
  /* Shows orange styled card (used for stories) */
  .card-orange a {
    @apply text-secondary-orange  border-secondary-orange;
  }
  .card-orange path {
    @apply stroke-secondary-orange;
  }

  /* Card Article */
  .article .date {
    @apply text-main-navy;
  }
  .article .head-chapter {
    @apply text-secondary-orange;
  }
  .investor-strategy-slide-title {
    @apply border-b-[1px] leading-7 border-[#ffffff00] transition-all duration-100 ease-out;
  }

  .investor-strategy-slide-title.active {
    @apply text-main-blue border-main-blue;
  }
}

/* _Single pages */

/* Page - Story overview */
.filter-dropdowns {
  .option-container {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px); /* Subtle initial offset */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out;
  }
  .toggle-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

.filter-dropdowns.active {
  .option-container {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Slide into view */
  }
  .filter-container {
    border-color: white;
  }
  .toggle-icon {
    transform: rotate(180deg);
  }
}

/* Slick */
@media (min-width: 768px) {
  .block-slider .slick-list {
    padding: 0 50% 0 0;
    margin: 0 -50% 0 0;
  }
}
@media (min-width: 768px) {
  .block-slider .slick-slide {
    margin: 0 25px;
  }
}
/* Block Portfolio Intro */
.block-portfolio-intro {
}
.block-portfolio-intro .block-portfolio-intro-text p {
  @apply text-[18px] font-light leading-[130%] lg:text-[24px];
}
.is-portfolio .hero-image {
  @apply min-h-screen;
}
/* Sub title */
.sub-title {
  @apply text-xl leading-[90%] md:text-2xl md:leading-[90%] cursor-default text-main-blue;
}

.buildingInformationCard ul,
.block-careers-detail-content ul {
  @apply list-none pl-[15px];
}
.buildingInformationCard ul li:before,

/* Section - Split image  */
.block-split-image .block-split-image-content,
.block-split-image .block-split-image-content p {
  @apply text-[18px] font-light leading-[130%] lg:text-[24px];
}
.block-split-image .split-image-mask {
  @apply opacity-0 transition-opacity ease-out duration-300;
}
.block-split-image .split-image-mask.active {
  @apply opacity-100;
}
/* Card item */
.card-list-item .card-list-item-inner,
.card-list-item .card-list-item-inner .date,
.card-list-item .card-list-item-inner .head-chapter,
.card-list-item .card-list-item-inner .btn-primary-link-orange,
.card-list-item .card-list-item-inner .card-list-item-title,
.card-list-item .card-list-item-inner .card-list-item-label,
.card-list-item .card-list-item-inner .btn-primary-link {
  @apply transition duration-[.6s];
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-video:hover img {
  display: none;
  opacity: 0;
}

.hover-video:hover video {
  @apply block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.hover-video video {
  display: none;
  opacity: 0;
}

.card-list-item a {
  text-decoration: none;
}
.card-list-item .card-list-item-title {
  @apply text-main-blue;
}
/* Card list article */
.card-list-article .date {
  @apply text-main-navy;
}
.card-list-article .head-chapter {
  @apply text-secondary-orange;
}
.card-list-article .card-list-item-inner:hover {
  @apply bg-secondary-orange;
}
.card-list-article .card-list-item-inner:hover .date,
.card-list-article .card-list-item-inner:hover .head-chapter,
.card-list-article .card-list-item-inner:hover .card-list-item-title,
.card-list-article .card-list-item-inner:hover .card-list-item-label {
  @apply text-main-white;
}
.card-list-article .card-list-item-inner:hover .btn-primary-link-orange,
.card-list-article .card-list-item-inner:hover .btn-primary-link {
  @apply bg-main-white text-main-navy;
}
/* Card item project */
.card-list-project .card-list-item-inner:hover {
  @apply bg-main-blue;
}
/* Cart List hover */
.card-list-items-hover .card-list-item {
  @apply transition duration-[.6s];
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: width;
}
.card-list-items-hover .card-list-item:hover {
  width: 50%;
}
@media only screen and (min-width: 1024px) {
  .card-list-items-hover .card-list-item-title {
    height: 80px;
    display: -webkit-box; /* Ustawienie trybu flexbox dla Webkit */
    -webkit-line-clamp: 2; /* Ograniczenie do 2 linii */
    -webkit-box-orient: vertical; /* Orientacja w pionie */
    overflow: hidden; /* Ukrycie nadmiarowego tekstu */
    text-overflow: ellipsis; /* Opcjonalnie: dodanie kropek */
  }
}
@media only screen and (min-width: 1024px) {
  .card-list-items-hover .card-list-item-sub-title {
    display: -webkit-box; /* Ustawienie trybu flexbox dla Webkit */
    -webkit-line-clamp: 1; /* Ograniczenie do 2 linii */
    -webkit-box-orient: vertical; /* Orientacja w pionie */
    overflow: hidden; /* Ukrycie nadmiarowego tekstu */
    text-overflow: ellipsis; /* Opcjonalnie: dodanie kropek */
  }
}
/* Portfolio detail page - Story card */
.card-list-story-card .card-list-item-title {
  @apply text-secondary-orange;
}
.project-single-card-list .btn-primary-link-navy .btn-rollout-text span {
  @apply text-main-white;
}
.project-single-gallery .slick-initialized .slick-slide {
  @apply flex items-center justify-center;
}
.project-single-gallery .slick-card-list-mobile-navigation svg path {
  @apply fill-main-navy;
}
/* User card */
.card-list-user-card .card-list-item-title {
  @apply text-secondary-orange;
}
/* Mobile CartList slider */
.slick-card-list-mobile-navigation-blue svg path {
  @apply fill-main-blue;
}
.slick-card-list-mobile.slick-initialized {
  @apply block;
}
/* Header detail - Stories */
.header-detail-isArticle .header-detail-content {
  @apply mt-[32px] gap-[30px] lg:gap-[42px];
}
.project-card .project-card-inner:hover {
  @apply bg-main-blue;
}
.project-card .project-card-inner:hover .project-card-label,
.project-card .project-card-inner:hover .project-card-title {
  @apply text-main-white;
}
.project-card .project-card-inner:hover .btn-primary-link {
  @apply bg-main-white text-main-navy;
}

.block-careers-detail-content ul,
ol {
  @apply pl-5 list-disc list-outside text-2xl;
}

/* Section - Accordion */

.accordion {
  cursor: pointer;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 300ms;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;

  @apply pt-[10px] pb-[15px] lg:pt-[20px] lg:pb-[24px] border-t-[1px] border-main-white;
}
.accordion:last-child {
  @apply border-b-[1px] border-main-white;
}
.accordion svg {
  transform: rotate(0deg);
  transition: transform 0.2s ease-in-out;
  transform-origin: center;
}
.accordion .content {
  @apply text-[16px] font-normal leading-[120%] lg:text-[24px] lg:font-light leading-[130%];
}
.active svg {
  transform: rotate(180deg);
  transition: transform 150ms ease-in-out;
}

.section-accordion .panel {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  @apply text-main-white;
}
.section-accordion .content p {
  @apply lg:text-[24px] text-main-white;
}
.section-accordion .content a {
  @apply text-main-white my-3;
}
.section-accordion .content-left p {
  @apply text-[18px] font-light leading-[130%] lg:text-[24px] text-main-white;
}
/* Homepage - HeroImage */
.is-homepage .hero-image {
  @apply min-h-screen;
  background-image: unset !important;
}
.is-homepage .hero-image .hero-image-inner {
  @apply gap-[35px] pt-[50px] pb-[215px];
}
.is-homepage .hero-image .hero-image-title {
  @apply mb-[25px];
}
.is-homepage .hero-image .btn-primary-link-navy {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.is-homepage .hero-image .btn-primary-link-navy:hover {
  @apply bg-main-white text-main-navy;
}
.is-homepage .hero-image .btn-rollout:hover .btn-rollout-text {
  transform: translateY(-50%);
}
/* Homepage - Latest stories */
.is-homepage
  .articles-card-list-block
  .btn-primary-link-white
  .btn-rollout-text
  span {
  @apply text-main-navy;
}
/* BLock Image Slider */
.block-image-slider .slick-list {
  @apply ml-0 mr-0;
}

.section-management-board h4 {
  @apply text-main-blue;
}
.section-management-board .section-management-board-content h5 {
  @apply mb-[20px] text-main-navy;
}
.section-management-board .section-management-board-content p {
  @apply lg:text-[18px];
}
/**/
.block-columns-introduction .block-columns-introduction-content p {
  @apply mb-[10px] lg:text-[24px] lg:leading-[130%];
}
.block-columns-introduction .block-columns-introduction-content *:last-child {
  @apply mb-0;
}
/* Careers detail page */
.block-careers-detail-content > div *:first-child {
  @apply mt-0;
}
.block-careers-detail-content > div *:last-child {
  @apply mb-0;
}
.block-careers-detail-content h3 {
  @apply mt-[43px] mb-[17px] font-normal text-[40px] leading-[100%];
}
.section-working-at .card-list-user-card {
  @apply w-full;
}
/* Content content */
.content-content *:first-child {
  @apply mt-0;
}
.content-content *:last-child {
  @apply mb-0;
}
.content-content h2 {
  @apply mt-[28px] lg:mt-[62px] mb-[21px] lg:mb-[16px] text-[30px] font-medium leading-[100%] lg:text-[40px] lg:font-normal text-main-navy;
}
.content-content p {
  @apply pt-[30px] pb-[80px] mb-[10px] text-[18px] font-light leading-[130%] lg:text-[24px] text-main-navy;
}
.content-content p:last-child {
  @apply pb-[0px];
}
/* Card investor strategy */
.card-investor-strategy .card-investor-strategy-content p {
  @apply leading-[120%] lg:text-[24px] font-light lg:leading-[130%];
}
.is-investorsStrategy .section-contact-block {
  @apply mt-0;
}
/* Filters */
.filter-dropdown-buttons label.h5 {
  @apply text-main-navy;
}

/* Forms */
body .fui-input,
body .fui-select {
  @apply rounded-none;
}
.is-articles .section-card-list-block {
  @apply py-[140px] lg:mt-[140px];
}
/* Story */
.is-articles .slick-card-list-block .slick-card-list-mobile {
  @apply lg:justify-center;
}
/* 404 */
.div-with-bg {
  @apply bg-[url('../uploads/images/404-bg.png')] bg-contain bg-no-repeat bg-right-top;
}
/* About us */
.section-image-with-content-block .section-text-right h3 {
  @apply mb-[23px] lg:mb-[18px] text-[35px] lg:text-[50px] leading-[90%] font-normal;
}
.section-image-with-content-block .section-text-right p {
  @apply text-[18px] font-light leading-[130%] lg:text-[24px];
}
.is-aboutUs .section-two-column-text {
  @apply lg:pt-[120px];
}
/* Homepage hero animation */
@keyframes fadeInUpTitle_ {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -80px, 0);
    transform: translate3d(0, -80px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp_ {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -35px, 0);
    transform: translate3d(0, -35px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ZoomIn_ {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
  }

  from {
    scale: 100%;
  }

  to {
    scale: 115%;
  }
}
.is-homepage .hero-image {
  @apply overflow-hidden;
}
.is-homepage .hero-image .hero-image-bg {
  @apply block;
}
.is-homepage .hero-image .hero-image-title {
  -webkit-animation-name: fadeInUpTitle_;
  animation-name: fadeInUpTitle_;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.is-homepage .hero-image .hero-image-sub-title,
.is-homepage .hero-image .hero-image-button {
  -webkit-animation-name: fadeInUp_;
  animation-name: fadeInUp_;
  -webkit-animation-duration: 2s;
  animation-duration: 0.89s;
}
.is-homepage .hero-image .hero-image-bg {
  -webkit-animation-name: ZoomIn_;
  animation-name: ZoomIn_;
  -webkit-animation-duration: 2s;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
/* Grid */
.grid-layout{
  @apply mx-[-25px];
}
.grid-layout:after{
  content: '';
  display: table;
  clear: both;
}
.grid-sizer,
.grid-layout .grid-item{
  @apply inline-block float-left w-[100%] sm:w-[50%] lg:w-[33.33333%] mb-[30px] lg:mb-[40px] px-[25px];
}
.grid-layout-loader{
@apply opacity-100;
}
.grid-layout-loader.loader-hidden{
@apply opacity-0;
}
/* toggle image night */
.toggle-image-night,
.toggle-image-night .toggle-image-night-label,
.toggle-image-night .toggle-image-night-icon,
.toggle-image-night .toggle-image-night-icon-day{
  @apply transition ease-out duration-300;
}
.toggle-image-night{
  @apply w-[252px];
}
.toggle-image-night.night-active{
 @apply w-[237px] border-main-white;
}
.toggle-image-night.night-active .toggle-image-night-label{
 @apply text-main-white;
}
.toggle-image-night.night-active .toggle-image-night-icon{
 @apply bg-secondary-yellow;
}
.toggle-image-night.night-active .toggle-image-night-icon-day{
 @apply opacity-100;
}
.toggle-image-night.night-active .toggle-image-night-label-night{
 @apply hidden;
}
.toggle-image-night.night-active .toggle-image-night-label-day{
  @apply inline;
}