.elementor-kit-5{--e-global-color-primary:#9E6D7E;--e-global-color-secondary:#3F0F20;--e-global-color-text:#3F0F20B3;--e-global-color-accent:#7D1D3F;--e-global-color-253b309:#F5EDE5;--e-global-color-ebbd00c:#D8E2DC;--e-global-color-dad68f3:#559888;--e-global-color-8b2d321:#1D7D68;--e-global-color-7bc73c4:#0F3B3FBF;--e-global-color-80d7443:#EFEFF0;--e-global-color-27d8052:#FFFFFF;--e-global-color-753c003:#D3A227;--e-global-color-03761b7:#F3EED8;--e-global-color-3b5e500:#F8F8E7;--e-global-color-89d99c1:#B01F36;--e-global-color-ea574a0:#7D1D3FD9;--e-global-color-0ffe07f:#9F0E59;--e-global-color-9352f1a:#E5E9E1;--e-global-color-fc93340:#E1E9E4;--e-global-color-73bbc35:#D8DDE2;--e-global-color-a23b0f4:#D8DCE2;--e-global-typography-primary-font-family:"Nudica";--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-secondary-font-family:"Behind The Nineties";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Nudica";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Nudica";--e-global-typography-accent-font-weight:600;color:var( --e-global-color-text );--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:500ms;--e-preloader-animation-duration:600ms;--e-preloader-delay:0ms;--e-preloader-width:7%;}.elementor-kit-5 e-page-transition{background-color:var( --e-global-color-80d7443 );}.elementor-kit-5 a{color:var( --e-global-color-primary );}.elementor-kit-5 a:hover{color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */./* 1) Shell layout: header / scroller / footer all visible inside 100vh */

.landing-shell{
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden; /* prevents vertical scrolling inside shell */
}

/* Keep header/footer in place */
.landing-shell .shell-header,
.landing-shell .shell-footer{
  z-index: 2;
}

/* 2) The only scrollable area (horizontal) */
.landing-shell .shell-scroller{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}


/* Optional: hide scrollbar (choose if you want) */
.landing-shell .shell-scroller::-webkit-scrollbar{ height: 0; }
.landing-shell .shell-scroller{ scrollbar-width: none; }

/* 3) Make the loop items flow horizontally.
   This depends on Elementor’s markup; these .elementor-kit-5s usually work for Loop Grid */
.landing-shell .shell-scroller .elementor-loop-container,
.landing-shell .shell-scroller .elementor-posts-container{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(700px, 30vw);
    gap: 24px;
    align-items: stretch;
    height: 100%;
    padding: 16px;
    padding-top: 0px;
    grid-template-columns: none;

}

/* If Elementor outputs items as .e-loop-item */
.landing-shell .shell-scroller .e-loop-item{
  height: 100%;
}


.landing-shell .shell-scroller.projects-page .elementor-loop-container,
.landing-shell .shell-scroller.projects-page .elementor-posts-container{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(auto, 25vw);
    gap: 24px;
    align-items: stretch;
    height: 100%;
    padding: 16px;
    padding-top: 0px;
    grid-template-columns: none;
    grid-template-rows: repeat(2, minmax(0, 1fr));

}

.shell-scroller.projects-page .e-con.e-flex>.e-con-inner {
        margin: 0 0 0 0 !important;
}

.shell-scroller.projects-page .e-loop-item {
    width: fit-content !important;
}


/* projects page css */

.landing-shell .shell-scroller-projects-page .elementor-loop-container,
.landing-shell .shell-scroller-projects-page .elementor-posts-container{
  display: grid;
  grid-auto-flow: column;              /* horizontal scroll */
  grid-template-rows: auto auto;
  grid-auto-columns: minmax(300px, 30vw);
  gap: 24px;
  align-items: stretch;
  height: 100%;
  width: max-content;
  grid-template-columns: none;
  column-gap: 40px;
}

/* end of projects page css */



@media (max-width: 1024px){
  body.page-id-29, body.page-id-17{ overflow: auto; }

  .landing-shell{
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .landing-shell .shell-scroller{
    overflow: visible; /* let it behave normally */
    margin-left: 0vw;
  }

  /* optional: revert the horizontal layout */
  .landing-shell .shell-scroller .elementor-loop-container,
  .landing-shell .shell-scroller .elementor-posts-container{
    display: block;
    padding: 0;
  }
  
  .landing-shell .shell-scroller .elementor-loop-container,
.landing-shell .shell-scroller .elementor-posts-container{
    display: grid;
    gap: 24px;
    grid-template-columns: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    margin-left: 0px;
    padding: 0px;
}

.landing-shell{
  overflow-x: hidden; /* prevents horizontal scrolling inside shell */
}

.landing-shell .shell-scroller .e-loop-item .e-con-inner {
    width: fit-content !important;
    margin: 0px !important;
}

.landing-shell .shell-scroller .e-loop-item.type-post > .e-parent {
    margin: 0px ;
}

.shell-scroller .elementor-loop-container.elementor-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto !important;
    padding-left: 20px !important;
    gap: 20px;
    }
  
}

/* The element that has grid-auto-flow:column */
.landing-shell .shell-scroller .elementor-loop-container,
.landing-shell .shell-scroller .elementor-posts-container{
  width: max-content; /* important for accurate scrollWidth */
}




.swiper-image-stretch .swiper-slide .swiper-slide-image {
    width: 100%;
    height: 250px !important;
}


.overflow-hidden {
    overflow: hidden;
}

.top-auto {
    margin-top: auto;
}

.left-auto {
    margin-left: auto;
}

.logo-white svg path {
    fill: #fff;
}

.logo-green svg path {
    fill: var(--e-global-color-7bc73c4);
}

.logo-yellow svg path {
        fill: var(--e-global-color-753c003);
}

.logo-pink svg path {
    fill: var(--e-global-color-0ffe07f);
}

@media (max-width: 767px){

.left-auto-mobile {
    margin-left: auto;
}
}

.display-none {
    display: none;
}

@media (min-width: 1240px){

.page-id-19, .page-id-18, .page-id-17 .no-scroll {
    overflow-y: hidden;
    overflow-x: hidden;
}

}

.cta-header {
    padding-top: 8px !important;
}

.elementor-widget-image a {
 display: block !important;
} 


.elementor-loop-container.elementor-grid .tag-recensionstart .elementor-page-title{
    display: none;
}

.elementor-loop-container.elementor-grid .tag-recensionstart a {
    pointer-events: none;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Nudica';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://koiaarkitektur.se/wp-content/uploads/2026/01/nudica-medium.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Behind The Nineties';
	font-display: auto;
	src: url('https://koiaarkitektur.se/wp-content/uploads/2026/01/Behind-The-Nineties-Variable-Italic.ttf') format('truetype');
}
/* End Custom Fonts CSS */