/*
 Theme Name:   Divi-child
 Theme URI:    https://synthweb.ch
 Description:  Divi Child Theme by Synthweb
 Author:       synthweb
 Author URI:   https://synthweb.ch
 Template:     Divi
 Version:      4.27.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  divi-child
*/

/* ------------------------
   Project Categories Grid Base
   ------------------------ */
   .project-categories-grid {
    gap: 1em; /* Maintain existing gap */
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Desktop Layout: 4 equal columns with custom grid areas */
  @media (min-width: 1249px) {
    .project-categories-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto auto;
      /* Layout:
           Row 1: portrait | landscape1 | landscape2 | landscape3
           Row 2: portrait | landscape4 | landscape5 | landscape6 */
      grid-template-areas:
        "portrait landscape1 landscape2 landscape3"
        "portrait landscape4 landscape5 landscape6";
    }
    /* Position the items */
    .project-categories-grid .project-category-item:nth-child(1) {
      grid-area: portrait;
    }
    .project-categories-grid .project-category-item:nth-child(2) {
      grid-area: landscape1;
    }
    .project-categories-grid .project-category-item:nth-child(3) {
      grid-area: landscape2;
    }
    .project-categories-grid .project-category-item:nth-child(4) {
      grid-area: landscape3;
    }
    .project-categories-grid .project-category-item:nth-child(5) {
      grid-area: landscape4;
    }
    .project-categories-grid .project-category-item:nth-child(6) {
      grid-area: landscape5;
    }
    .project-categories-grid .project-category-item:nth-child(7) {
      grid-area: landscape6;
    }
    /* Items beyond the seventh fill the full width below */
    .project-categories-grid .project-category-item:nth-child(n+8) {
      grid-column: 1 / -1;
    }
  }
  
/* Tablet Layout: 3 columns */
@media (max-width: 1248px) and (min-width: 768px) {
  .project-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    /* Layout:
         Row 1: portrait    | landscape1
         Row 2: portrait    | landscape2
         Row 3: landscape3  | landscape4
         Row 4: landscape5  | landscape6
         (7 items total: item1 is portrait; items2–7 are landscape)
    */
    grid-template-areas:
      "portrait landscape1"
      "portrait landscape2"
      "landscape3 landscape4"
      "landscape5 landscape6";
    gap: 0.5em;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .project-categories-grid .project-category-item:nth-child(1) {
    grid-area: portrait;
  }
  .project-categories-grid .project-category-item:nth-child(2) {
    grid-area: landscape1;
  }
  .project-categories-grid .project-category-item:nth-child(3) {
    grid-area: landscape2;
  }
  .project-categories-grid .project-category-item:nth-child(4) {
    grid-area: landscape3;
  }
  .project-categories-grid .project-category-item:nth-child(5) {
    grid-area: landscape4;
  }
  .project-categories-grid .project-category-item:nth-child(6) {
    grid-area: landscape5;
  }
  .project-categories-grid .project-category-item:nth-child(7) {
    grid-area: landscape6;
  }
}

  
/* Mobile Layout: 2 columns with grid template areas (for 7 items) */
@media (max-width: 767px) {
  .project-categories-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    /* Layout:
         Row 1: portrait    | landscape1
         Row 2: portrait    | landscape2
         Row 3: landscape3  | landscape4
         Row 4: landscape5  | landscape6
         (7 items total: item1 is portrait; items2–7 are landscape)
    */
    grid-template-areas:
      "portrait landscape1"
      "portrait landscape2"
      "landscape3 landscape4"
      "landscape5 landscape6";
    gap: .5em;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .project-categories-grid .project-category-item:nth-child(1) {
    grid-area: portrait;
  }
  .project-categories-grid .project-category-item:nth-child(2) {
    grid-area: landscape1;
  }
  .project-categories-grid .project-category-item:nth-child(3) {
    grid-area: landscape2;
  }
  .project-categories-grid .project-category-item:nth-child(4) {
    grid-area: landscape3;
  }
  .project-categories-grid .project-category-item:nth-child(5) {
    grid-area: landscape4;
  }
  .project-categories-grid .project-category-item:nth-child(6) {
    grid-area: landscape5;
  }
  .project-categories-grid .project-category-item:nth-child(7) {
    grid-area: landscape6;
  }
  /* Remove any rules that force items beyond the fifth to span full width */
}
/* -----------------------------------------------------------------
   Mini hero‑gallery INSIDE the project‑categories grid
   ----------------------------------------------------------------- */
   .project-categories-grid .media-gallery{
    /* occupy exactly the same rectangle the <img> did */
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;   /* hide the non‑active slides */
    margin:0;          /* kills default margins */
}
.project-categories-grid .media-gallery-item{
    position:absolute;
    inset:0;           /* top:0; right:0; bottom:0; left:0 */
}
.project-categories-grid .media-gallery-image,
.project-categories-grid .media-gallery video{
    width:100%;
    height:100%;
    object-fit:cover;  /* identical crop behaviour */
    display:block;
}

  /* ------------------------
     Project Category Item Styles
     ------------------------ */
  .project-category-item {
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    padding: 0; /* Previously adjusted from 15px to 0 */
    border: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .project-category-item .category-title {
    font-size: 31px;
    font-weight: 500;
    margin: 0 0 3px;
    padding: 0;
    text-align: center;
    flex: 0 0 auto;
  }
  
  /* Make the anchor wrapping the image fill the remaining space */
  .project-category-item a {
    flex: 1 1 auto;
    display: block;
    overflow: hidden;
  }
  
  /* Make the image fill the anchor container */
  .project-category-item a img {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  /* For items 2–5, have the image cover the available container height */
  .project-categories-grid .project-category-item:not(:first-child) a img {
    object-fit: cover;
  }
/* Reduce font size on smaller screens */
@media (max-width: 767px) {
  .project-category-item .category-title {
    font-size: 20px; /* Adjust this value as needed */
  }
}
  
  
  /* ------------------------
     Optional Masonry Overrides for Project Categories Grid (if needed)
     ------------------------
     You can keep these commented out if Masonry is not being applied.
     
     .project-categories-grid.masonry-initialized {
       display: block !important;
       gap: 0 !important;
       position: relative;
     }
     
     .project-categories-grid .grid-sizer,
     .project-categories-grid .project-category-item {
       width: 33.333%;
     }
     
     .project-categories-grid .project-category-item {
       margin-bottom: 1em;
     }
     .project-categories-grid.masonry-initialized .project-category-item {
       display: block !important;
       height: auto !important;
     }
     
     @media (max-width: 980px) {
       .project-categories-grid.masonry-initialized .grid-sizer,
       .project-categories-grid.masonry-initialized .project-category-item {
         width: 50%;
       }
     }
     
     @media (max-width: 767px) {
       .project-categories-grid.masonry-initialized .grid-sizer,
       .project-categories-grid.masonry-initialized .project-category-item {
         width: 100%;
       }
     }
  */
  
  
  /* ------------------------
     Divi Portfolio Modules
     ------------------------ */
  
  /* Masonry-style columns for the portfolio items */
  .custom-divi-portfolio .et_pb_portfolio_grid_items {
    column-count: 4;
    column-gap: 0.5em;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Responsive column counts */
  @media (max-width: 980px) {
    .custom-divi-portfolio .et_pb_portfolio_grid_items {
      column-count: 3;
      column-gap: 0.5em;
    }
  }
  @media (max-width: 767px) {
    .custom-divi-portfolio .et_pb_portfolio_grid_items {
      column-count: 2;
      column-gap: 0.5em;
    }
  }
  
/* Let each item be inline-block inside the column, so it can have variable height */
.custom-divi-portfolio .et_pb_portfolio_grid_items .et_pb_portfolio_item {
  display: inline-block;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0 0 0.5em;
  padding: 0 !important;
  float: none !important;
  /* Prevent splitting across columns */
  break-inside: avoid-column; 
  page-break-inside: avoid;
  vertical-align: top;
}
/* Allow portfolio image containers to adjust their height automatically */
.custom-divi-portfolio .et_pb_portfolio_item .et_portfolio_image {
  height: auto !important;
  overflow: visible !important;
}

/* Let images scale naturally according to their intrinsic ratio */
.custom-divi-portfolio .et_pb_portfolio_item .et_portfolio_image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

  
  /* Remove extra margin from first and last items in each row if Divi applies it */
  .custom-divi-portfolio .et_pb_portfolio_item.last_in_row,
  .custom-divi-portfolio .et_pb_portfolio_item.first_in_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Custom Portfolio Hover Overlay */
  .et_pb_portfolio_item {
    position: relative;
  }
  .et_pb_portfolio_item .et_pb_module_header {
    display: inline-block;
    width: auto;
    /* Allow the header to expand based on its content, but never exceed the container minus some padding */
    max-width: calc(100% - 40px);
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    /* Use balanced horizontal padding */
    padding: 5px 10px !important;
    border-radius: 4px;
    color: #000;
    text-transform: lowercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
  }  
  
  .et_pb_portfolio_item:hover .et_pb_module_header {
    opacity: 1;
  }
  .et_pb_portfolio_item:hover .et_portfolio_image {
    filter: brightness(0.85);
  }
/* ——————————————————————————
   PROJECT-IMAGES masonry (SCF block)
   —————————————————————————— */
.project-images{
    /* ①  Masonry in 2 columns */
    column-count: 2;          /* desktop & tablet */
    -webkit-column-count: 2;
    column-gap: 1em;         /* ← the only place you change the gutter */
    -webkit-column-gap: 1em;
    margin: 0;                /* keeps edges neat */
    padding: 0;
}

@media (max-width: 767px){    /* mobile: single column */
    .project-images{ column-count: 1; }
}

/* Every tile takes the column width and breaks nowhere */
.project-image{
    break-inside: avoid;      /* crucial for masonry */
    margin-bottom: 1em;      /* vertical part of the gutter */
    width: 100%;              /* 100 % of the column */
    /* ★ Safari fix — turn each tile into an inline-block
       ★ and pin its baseline at the very top           */
    display: inline-block;
    vertical-align: top;
}

/* ②  Show the *whole* picture, no crop */
.project-image img{
    width: 100%;
    height: auto;             /* keep natural ratio */
    display: block;
}

/* Optional subtle frame so the gutter looks intentional */
.project-image{
    background: #ffffff;      /* light grey */
    padding: 0px;
    box-sizing: border-box;
}
  
  /* -------------- 
     Videos
     -------------- */
  .project-videos {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  .project-video iframe,
  .project-video video {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 5px;
    object-fit: cover; 
  }
  
  @media (max-width: 980px) {
    .project-video iframe,
    .project-video video {
        height: 100%;
    }
  }
  @media (max-width: 767px) {
    .project-video iframe,
    .project-video video {
        height: 100%;
    }
  }
  
  /* ------------------------
     Secondary Menu
     ------------------------ */
  #secondary-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: transparent;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }
  #secondary-menu.show-secondary-menu {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* ------------------------
     Inline URLs
     ------------------------ */
  .project-urls.inline-urls {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0em;
  }
  .project-urls.inline-urls .project-url-link {
    text-decoration: none;
    color: gray;
    font-size: 14px;
    margin-right: 1em;
  }
  @media (max-width: 980px) {
    .project-urls.inline-urls .project-url-link {
      font-size: 14px;
    }
  }
  @media (max-width: 767px) {
    .project-urls.inline-urls .project-url-link {
      font-size: 21px;
      margin-top: 1em;
    }
  }
  .project-urls.inline-urls .project-url-link:not(:last-child)::after {
    color: #cccccc;
  }
  .project-urls.inline-urls .project-url-link {
    position: relative;
    color: gray;
  }
  .project-urls.inline-urls .project-url-link:hover {
    color: black;
    text-decoration: none;
  }
  
/* ------------------------
   Title & Date & Tags
   ------------------------ */
   .project-title {
    padding-bottom: 0px;
  }
  .project-date {
    padding-top: 1rem;
    /* Remove margin-top:auto from here */
  }
  
  .project-tags {
    /*margin-top: 0.5rem;*/
    font-size: 14px;
    color: #555;
  }
  
  .project-tags a {
    color: #555;
    text-decoration: none;
  }
  
  .project-tags a:hover {
    text-decoration: underline;
  }
  @media screen and (max-width: 767px) {
    .project-title {
    padding-bottom: 0px;
  }
  .project-date {
    padding-top: 1rem;
    margin-top: 1em !important;
    /* Remove margin-top:auto from here */
  }
  
  .project-tags {
    /*margin-top: 0.5rem;*/
    font-size: 14px;
    color: #555;
  }
  
  .project-tags a {
    color: #555;
    text-decoration: none;
  }
  
  .project-tags a:hover {
    text-decoration: underline;
  }
  }
  /* ──────────────────────────────────────────────────────────────
   1)  Two-column fix  ⟶  only on LANDSCAPE 480-980 px
   2)  Leave Divi’s default single-column stacking everywhere else
   ────────────────────────────────────────────────────────────── */
@media screen and (min-width: 480px) and (max-width: 980px) {

  /* make the 5-col row a flex container that wraps */
  .et_pb_row_5col {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* every ordinary column = 50 % → two per row */
  .et_pb_row_5col > .et_pb_column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* — URL column — goes in the right cell of the first row */
  .et_pb_column_2_tb_body {
    order: 2;                 /* after the title/intro column   */
    text-align: right;
  }

  /* — empty spacer column — sits left of the URL column        */
  .et_pb_column_3_tb_body {   /* the blank column               */
    order: 1;
  }

  /* — navigation column — gets its own 100 % row and is centred */
  .et_pb_column_4_tb_body {
    order: 3;                 /* after the first two 50 % cells */
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}
/* —————————————————————————————————————————————
   1) Extra left-padding for the URL links
      ⇢ tablet width (768 – 980 px) only
   2) Make absolutely sure the navigation column
      spans the full row (float & width overrides)
   ————————————————————————————————————————————— */

/* 1️⃣  add 2.3 em indent in the tablet band  */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .project-urls.inline-urls .project-url-link {
    padding-left: 2.3em;   /* <- new indent              */
  }
}

/* 2️⃣  strengthen the full-width nav rule ( 480-980 px ) */
@media screen and (min-width: 480px) and (max-width: 980px) {
  .et_pb_column_4_tb_body {          /* navigation column        */
    order: 3;
    flex: 0 0 100% !important;       /* flex basis               */
    max-width: 100% !important;      /* override Divi widths     */
    width: 100% !important;          /* extra safety             */
    float: none !important;          /* cancel Divi’s float      */
    clear: both !important;          /* start on a new line      */
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}
/* 1 — URL block: extra indent just for the tablet band (768-980 px) */
@media screen and (min-width: 768px) and (max-width: 980px) {
  .project-urls.inline-urls .project-url-link {
    padding-left: 2.3em;                /* new left indent         */
  }
}

/* 2 — Navigation column: full-width & centred (480-980 px) */
@media screen and (min-width: 480px) and (max-width: 980px) {
  /* the column itself */
  .et_pb_column_4_tb_body {
    /* break onto its own line */
    flex: 0 0 100% !important;          /* flex-basis 100 %         */
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;             /* cancel Divi float        */
    clear: both !important;             /* start a new visual row   */

    /* centre whatever lives inside the column */
    display: flex !important;
    justify-content: center !important;
  }

  /* make sure the arrow block itself is centred inside the column */
  .et_pb_column_4_tb_body .project-navigation {
    margin: 0 auto !important;          /* haemorrhage-proof centring */
  }
}
/* ————————————————————————————————————————————
   FINAL override: make the nav column full-width
   and centre its content, only 480-980 px
   ———————————————————————————————————————————— */
@media screen and (min-width: 480px) and (max-width: 980px) {

  /* ▲▲ same selector depth as the “50 %” rule, so this wins */
  .et_pb_row_5col > .et_pb_column_4_tb_body {
    order: 3;                       /* keep it below the first row     */
    flex: 0 0 100% !important;      /* flex-basis 100 %                */
    max-width: 100% !important;     /* cancel the 50 % width           */
    width: 100% !important;         /* extra safety                    */
    float: none !important;         /* cancel any Divi float           */
    clear: both !important;         /* start a new visual row          */
    margin-top: 2em;

    /* centre whatever lives inside this column */
    display: flex !important;
    justify-content: center !important;
  }

  /* in case something inside has left-float margins */
  .et_pb_row_5col > .et_pb_column_4_tb_body .project-navigation{
    margin: 0 auto !important;
  }
}


/*  No rules below this point —
    In portrait mode, or below 480 px, Divi’s default
    “each column 100 % wide, one after another” behaviour
    is left untouched and you get a single column layout.  */

  
  /* Horizontal Scroll Menu */
  .pa-horizontal-scroll-menu {
    width: 100%;
    cursor: pointer;
  }
  .pa-horizontal-scroll-menu .et_pb_menu__menu {
    display: block !important;
  }
  .pa-horizontal-scroll-menu .et_mobile_nav_menu {
    display: none !important;
  }
  .pa-horizontal-scroll-menu .et_pb_menu__menu {
    width: 100%;
  }
  .pa-horizontal-scroll-menu .et_pb_menu__wrap {
    overflow-x: scroll;
  }
  .pa-horizontal-scroll-menu .et_pb_menu__menu ul.et-menu {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    margin: 0 auto;
  }
  .pa-horizontal-scroll-menu .et_pb_menu__wrap {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .pa-horizontal-scroll-menu .et_pb_menu__wrap::-webkit-scrollbar {
    display: none;
  }
  
  /* Responsive Hero Video BG */
  .et_pb_section_video {
    position: relative !important;
    overflow: hidden !important;
  }
  .et_pb_section_video::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 ratio */
  }
  .et_pb_section_video .mejs-container.mejs-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
    background-color: transparent;
  }
  .et_pb_section_video .mejs-container.mejs-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
  }
  .et_pb_section_video .mejs-controls,
  .et_pb_section_video .mejs-overlay,
  .et_pb_section_video .mejs-poster {
    display: none !important;
  }
  
/* Flex settings to ensure the info container sticks to the bottom */
.et_pb_row.et_pb_row_0_tb_body {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch !important;
}
.et_pb_row.et_pb_row_0_tb_body > .et_pb_column {
  display: flex !important;
  flex-direction: column;
}
.et_pb_column.et_pb_column_0_tb_body .et_pb_module.et_pb_code {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column;
  text-align: left;
}
.et_pb_column.et_pb_column_0_tb_body .project-title-shortcode {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column;
}

/* Apply margin-top:auto to the container that groups date and tags */
.et_pb_column.et_pb_column_0_tb_body .project-info {
  margin-top: auto !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Remove any extra padding/margin if needed */
}
.et_pb_column.et_pb_column_0_tb_body .project-info > div {
  flex: 0 0 auto; /* Prevent stretching */
  line-height: 1.2em;
  margin: 0;
  padding: 0;
}

.et_pb_column.et_pb_column_0_tb_body .et_pb_code_inner {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
  
  /* Project navigation arrows */
  .project-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
  }
  .project-navigation .project-nav {
    font-size: 18px;
    padding: 0 10px;
    text-decoration: none;
    color: #333;
  }
  .project-navigation .project-nav.disabled {
    opacity: 0.5;
    cursor: default;
  }
  .project-navigation .project-number {
    font-size: 18px;
    margin: 0;
  }
/* Masonry Grid for Custom Portfolio */
.my-custom-portfolio {
  column-count: 4;
  column-gap: 0.5em;
  padding: 0;
  margin: 0;
}
@media (max-width: 980px) {
  .my-custom-portfolio {
    column-count: 3;
    column-gap: 0.5em;
  }
}
@media (max-width: 767px) {
  .my-custom-portfolio {
    column-count: 2;
    column-gap: 0.5em;
  }
}

/* Portfolio Items */
.my-custom-portfolio .portfolio-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 0em;
  break-inside: avoid-column;
  position: relative;
  overflow: hidden;
}

/* Portfolio Images */
.my-custom-portfolio .portfolio-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.my-custom-portfolio .portfolio-item:hover img {
  /*transform: scale(1.05);*/
  filter: brightness(0.85);
}

/* Overlay Icon */
.my-custom-portfolio .et_portfolio_image .et_overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.4);
  color: #000;
  padding: 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  z-index: 2;
}
.my-custom-portfolio .portfolio-item:hover .et_overlay {
  opacity: 1;
}

/* Title Styling */
.my-custom-portfolio .et_pb_module_header {
  text-align: center;
  margin-top: 0.5em;
  font-size: 16px;
  color: #000;
  transition: color 0.3s ease;
}
@media (max-width: 767px) {
  .my-custom-portfolio .et_pb_module_header {
    font-size: 12px; /* Adjust this value as needed */
    margin-top: auto;
  }
}

.my-custom-portfolio .et_pb_module_header a {
  color: inherit;
  text-decoration: none;
}
.my-custom-portfolio .portfolio-item:hover .et_pb_module_header a {
  color: #000;
}

.trp-ls-language-name {
  text-transform: lowercase;
  display: inline-block;
}

.trp-ls-language-name::first-letter {
  text-transform: uppercase;
}

/* Container for the opt-in form */
.newsletter-optin-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 0em;
  background: #f9f9f900;
  border: 0px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0);
}

/* Label styling */
.newsletter-optin-form label {
  display: block;
  font-family: 'TWK Lausanne Half Family400',Helvetica,Arial,Lucida,sans-serif;
  margin-bottom: 1em;
  color: #000;
  font-size: 13px;
  line-height: 1em;
}

/* Email input styling */
.newsletter-optin-form input[type="email"] {
  width: 100%;
  font-family: 'TWK Lausanne Half Family400',Helvetica,Arial,Lucida,sans-serif;
  padding: 0.4em;
  /*margin-bottom: 1em;*/
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.newsletter-optin-form input[type="email"]:focus {
  border-color: #0073aa;
  outline: none;
}

/* Submit button styling */
.newsletter-optin-form input[type="submit"] {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.newsletter-optin-form input[type="submit"]:hover {
  background-color: #1f1f1f;
}

.newsletter-response p.success {
  color: green;
  font-weight: bold;
  margin-top: 1em;
}

.newsletter-response p.error {
  color: red;
  font-weight: bold;
  margin-top: 1em;
}
.grecaptcha-badge {
  z-index: 10000 !important;
}
.sbi_bio{
  color:#C6C6C6
}

#recaptcha-container {
  transform: scale(0.5);
  transform-origin: left;
  text-align: left;
}
/* ╭─────────────────────────────────────────╮
   │ Two images (or one): use flex instead.  │
   ╰─────────────────────────────────────────╯ */
.project-images.few-images{
    column-count: 1;          /* cancel multi-column masonry */
    display:   flex;
    flex-wrap: wrap;
    gap:       1em;           /* keep the same gutter */
}
.project-images.few-images .project-image{
    flex: 0 0 calc(50% - 1em);   /* two equal tiles */
}

/* Mobile → still single column */
@media (max-width: 767px){
    .project-images.few-images .project-image{
        flex: 0 0 100%;
    }
}
/* ----------------------------------------------
   A.  If the gallery wrapper is completely empty
       → hide it (no height, no gap)
   ----------------------------------------------*/
.project-images:empty{
	display:none;
}

/* ----------------------------------------------
   B.  Remove the 5 % top + bottom padding from
       any section that contains ONLY an empty
       .project-images or starts directly with
       a .project-videos block.
   ----------------------------------------------*/
@media (min-width:981px){

	/* ① the gallery wrapper exists but is empty */
	.et_pb_section:has(.project-images:empty){
		padding:0;          /* kill 5 % top + bottom */
	}

	/* ② no gallery at all – video block is first */
	.et_pb_section:has(.project-videos):not(:has(.project-image)){
		padding-top:0;      /* keep bottom padding if you like */
	}
}
/*  Portrait thumbnail (1 296 × 1 853)  →  keep full image */
.project-categories-grid .project-category-item:nth-child(1) a{
    aspect-ratio: 1296 / 1853;   /* ≈ 0.70 : 1 – prevents over-tall box   */
    overflow: visible;           /* nothing gets cut off                  */
}
.project-categories-grid .project-category-item:nth-child(1) a img{
    width: 100%;
    height: auto;                /* preserve intrinsic ratio              */
    object-fit: contain;         /* show the whole picture – no cropping  */
}
/* -------------  DESKTOP (≥ 1249 px)  ------------- */
@media (min-width:1249px){

	/* How wide is one cell?
	   4 columns  →  (100 vw – 3 gaps) / 4               */
	.project-categories-grid{
		--gap: 1em;                                /* same as your .grid gap   */
		--cell: calc((100vw - 3 * var(--gap)) / 4);/* width of one column      */

		grid-auto-rows: var(--cell);               /* every row = that width   */
	}

	/* Make the portrait tile span two of those rows              */
	.project-categories-grid .project-category-item:nth-child(1){
		grid-row: span 2;                          /* already implied by grid  */
	}

	/* Let the picture fill its 2×row box with NO crop            */
	.project-categories-grid .project-category-item:nth-child(1) a{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;                          /* keeps things tidy        */
	}
	.project-categories-grid .project-category-item:nth-child(1) a img{
		height: 100%;
		width: auto;                               /* letter-box left/right    */
		object-fit: contain;
	}
}
/* -------------  VERY SMALL (≤ 389 px)  ------------- */
@media (max-width:389px){

	.project-categories-grid{
		--gap: .5em;                               /* same gap as your rule    */
		--cell: calc((100vw - 1 * var(--gap)) / 2);/* 2 columns → 1 gap        */
		grid-auto-rows: var(--cell);
	}

	/* portrait already spans two rows → done                    */
	.project-categories-grid .project-category-item:nth-child(1) a{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	.project-categories-grid .project-category-item:nth-child(1) a img{
		height: 100%;
		width: auto;
		object-fit: contain;
	}
}
/* Mobile only – kill the fixed height + inner scroll */
@media (max-width:767px){
    .project-categories-grid{
        height:auto   !important;   /* let it grow naturally   */
        max-height:none!important;  /* override inline styles  */
        overflow:visible!important; /* no internal scrollbar   */
    }
}
/* ──────────────────────────────────────────────
   1 ▸ under 768 px make columns shrinkable
   ──────────────────────────────────────────────*/
@media (max-width:767px){
    .project-categories-grid{
        /*   1fr  →  minmax(0,1fr)   */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ──────────────────────────────────────────────
   2 ▸ ultra-small phones (≤ 389 px): use 100 %
   ──────────────────────────────────────────────*/
/* -----------------------------------------------------------
   Ultra-small phones ( ≤ 389 px )
   Make each row ≈ 0.714 × its width so 2 rows ≈ portrait AR
   -----------------------------------------------------------*/
@media (max-width:389px){
    .project-categories-grid{
        --gap : .5em;                                     /* same gap */
        /* column width                                     */
        --col : calc((100% - var(--gap)) / 2);
        /* row height  = 0.714 × column width               */
        --cell: calc(var(--col) * 0.714);                  /* 1 / 1.40 */
        grid-auto-rows: var(--cell) !important;
    }
}


/*
 * Keyframe Animations for Logo
 */ 

@-webkit-keyframes gear-rotate {
  0% { 
    -webkit-transform: rotate(0deg);
  }
  100% { 
    -webkit-transform: rotate(-180deg); 
  }
}

@-moz-keyframes gear-rotate {
  0% { 
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(-180deg); 
  }
}

@keyframes gear-rotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(-180deg); 
  }
}

@-webkit-keyframes gear-rotate-left {
 0% {
   -webkit-transform: rotate(0deg); 
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes gear-rotate-left {
 0% { 
   -webkit-transform: rotate(0deg); 
  }
  100% { 
    -webkit-transform: rotate(360deg);
  }
}

@keyframes gear-rotate-left {
 0% { 
   -webkit-transform: rotate(0deg); 
  }
  100% { 
    -webkit-transform: rotate(360deg);
  }
}
/* make the logo spin using your existing keyframes */
.logo {
  display: inline-block;           /* safer for transforms */
  transform-origin: center center; /* spin around its center */
  animation: gear-rotate-left 5s linear infinite; /* or gear-rotate-left */
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo { animation: none; }
}
/* Phone only (Divi's phone breakpoint) 
@media (max-width: 767px) {
  svg[id^="Calque_"] {
    display: inline-block;     /* allows transform 
    transform: scale(.8);      /* 20% smaller 
    transform-origin: center;  /* shrink from center 
  }
}

/* (Optional) respect reduced motion—no animation here but good habit */
/*@media (prefers-reduced-motion: reduce) {
  svg[id^="Calque_"] { animation: none; }
}
*/