.elementor-1712 .elementor-element.elementor-element-140bd63:not(.elementor-motion-effects-element-type-background), .elementor-1712 .elementor-element.elementor-element-140bd63 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-1712 .elementor-element.elementor-element-140bd63{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-1712 .elementor-element.elementor-element-140bd63 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-57a75b8 > .elementor-widget-container{margin:0px 0px -41px 0px;padding:0px 0px 0px 0px;border-style:solid;}.elementor-1712 .elementor-element.elementor-element-57a75b8{text-align:center;}.elementor-1712 .elementor-element.elementor-element-57a75b8 .elementor-heading-title{font-family:"Cabin Sketch", Sans-serif;font-size:152px;text-decoration:none;letter-spacing:100px;word-spacing:28px;color:#ECE7D0;}.elementor-1712 .elementor-element.elementor-element-281d8cd:not(.elementor-motion-effects-element-type-background), .elementor-1712 .elementor-element.elementor-element-281d8cd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-1712 .elementor-element.elementor-element-281d8cd{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:45px 45px 0px 45px;}.elementor-1712 .elementor-element.elementor-element-281d8cd > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-004223d:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-004223d > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2022/04/DSC9922-768x512.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-004223d > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-004223d > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-004223d > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-004223d > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-004223d > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-004223d > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-dc2665e{text-align:center;}.elementor-1712 .elementor-element.elementor-element-dc2665e .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-c57f297:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-c57f297 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2025/01/Lofoten-2024-75-768x512.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-c57f297 > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-c57f297 > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-c57f297 > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-c57f297 > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-c57f297 > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-c57f297 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-c4d6cd3{text-align:center;}.elementor-1712 .elementor-element.elementor-element-c4d6cd3 .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-ca2c2bf:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-ca2c2bf > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2025/10/Hans-K-Zig-Zag-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-ca2c2bf > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-ca2c2bf > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-ca2c2bf > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-ca2c2bf > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-ca2c2bf > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-ca2c2bf > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-a5a5922{text-align:center;}.elementor-1712 .elementor-element.elementor-element-a5a5922 .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-570c68f:not(.elementor-motion-effects-element-type-background), .elementor-1712 .elementor-element.elementor-element-570c68f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-1712 .elementor-element.elementor-element-570c68f{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 45px 0px 45px;}.elementor-1712 .elementor-element.elementor-element-570c68f > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-1949c6c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2022/04/IMG_1681-2-768x1152.jpg");background-position:0px -83px;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-aa5e17e{text-align:center;}.elementor-1712 .elementor-element.elementor-element-aa5e17e .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-8c190ea:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2025/01/Danse-Hele-Natten-6-768x1152.jpg");background-position:0px -224px;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-edfb60e{text-align:center;}.elementor-1712 .elementor-element.elementor-element-edfb60e .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-a9746a6:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-a9746a6 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2025/01/DSCF7568-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-a9746a6 > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-a9746a6 > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-a9746a6 > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-a9746a6 > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-a9746a6 > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-a9746a6 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-94a5b31{text-align:center;}.elementor-1712 .elementor-element.elementor-element-94a5b31 .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-2df974b:not(.elementor-motion-effects-element-type-background), .elementor-1712 .elementor-element.elementor-element-2df974b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-1712 .elementor-element.elementor-element-2df974b{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:0px 45px 45px 45px;}.elementor-1712 .elementor-element.elementor-element-2df974b > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-b36696e:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-b36696e > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2025/01/DSCF6146-768x512.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-b36696e > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-b36696e > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-b36696e > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-b36696e > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-b36696e > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-b36696e > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-3ac4637{text-align:center;}.elementor-1712 .elementor-element.elementor-element-3ac4637 .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-b73e11e:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-b73e11e > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2025/01/Libredo-konferens-2024-30-768x512.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-b73e11e > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-b73e11e > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-b73e11e > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-b73e11e > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-b73e11e > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-b73e11e > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-070e8e7{text-align:center;}.elementor-1712 .elementor-element.elementor-element-070e8e7 .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-ad82011:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-ad82011 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://senio.se/wp-content/uploads/2025/01/Egen-Sommar-Final-2024-23-768x512.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1712 .elementor-element.elementor-element-ad82011 > .elementor-element-populated >  .elementor-background-overlay{background-color:#1A1717;opacity:0;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1712 .elementor-element.elementor-element-ad82011 > .elementor-element-populated{border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-ad82011 > .elementor-element-populated, .elementor-1712 .elementor-element.elementor-element-ad82011 > .elementor-element-populated > .elementor-background-overlay, .elementor-1712 .elementor-element.elementor-element-ad82011 > .elementor-background-slideshow{border-radius:-16px -16px -16px -16px;}.elementor-1712 .elementor-element.elementor-element-ad82011 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1712 .elementor-element.elementor-element-e5ea79f{text-align:center;}.elementor-1712 .elementor-element.elementor-element-e5ea79f .elementor-heading-title{font-family:"Helvetica", Sans-serif;font-size:48px;color:#FFFFFF;}.elementor-1712 .elementor-element.elementor-element-03fb051{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1712 .elementor-element.elementor-element-03fb051 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}@media(max-width:1024px){.elementor-1712 .elementor-element.elementor-element-1949c6c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-1712 .elementor-element.elementor-element-8c190ea:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}}@media(max-width:767px){.elementor-1712 .elementor-element.elementor-element-1949c6c:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-1949c6c > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-1712 .elementor-element.elementor-element-8c190ea:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1712 .elementor-element.elementor-element-8c190ea > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}}/* Start custom CSS for heading, class: .elementor-element-dc2665e *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-004223d *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
    height: 220px; /* Sätter höjden på kolumnen till 220px */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(236, 231, 208, 0.7); /* Färg #ece7d0 (ljusbeige) med transparens */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}

/* Justera mellanrummet mellan kolumnerna (öka padding) */
.elementor-column {
    margin-right: 30px; /* Justera mellanrummet mellan kolumnerna genom att öka margin-right */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen */
}

/* Skapa höjd för mellanrum mellan kolumnerna */
.elementor-column + .elementor-column {
    height: 220px; /* Sätt höjd på varje kolumn till 220px */
    margin-bottom: 30px; /* Justera margin mellan kolumner i vertikal riktning */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-c4d6cd3 *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-c57f297 *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
    height: 220px; /* Sätter höjden på kolumnen till 220px */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(252, 218, 8, 0.7); /* Färg #fcda08 (gul) med transparens */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}

/* Justera mellanrummet mellan kolumnerna (om det behövs) */
.elementor-column {
    margin-right: 20px; /* Justera höger margin för kolumnerna */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen */
}

/* Skapa höjd för mellanrum mellan kolumnerna */
.elementor-column + .elementor-column {
    height: 220px; /* Sätt höjd på varje kolumn till 220px */
    margin-bottom: 20px; /* Justera eventuellt mellanrum nedanför kolumnerna */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-a5a5922 *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-ca2c2bf */.hover-effect {
    overflow: hidden;
}
.elementor-1712 .elementor-element.elementor-element-ca2c2bf {
    height: 220px; /* Sätt en höjd i px eller använd % */
}
/* För kolumnen */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* Färglager som ska visas vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnen */
    height: 100%; /* Täcker hela kolumnen */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent blå färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Placera detta lager under texten */
}

/* Färgen visas vid hover */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Placera texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
}

/* Se till att bakgrundsbilden är i rätt storlek */
.hover-effect .elementor-background-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}
/* Skapa mellanrum mellan kolumnerna i en sektion */
.elementor-column {
    margin-right: 20px; /* Justera höger margin för kolumnerna */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen *//* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-aa5e17e *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-1949c6c *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
    height: 220px; /* Sätter höjden på kolumnen till 220px */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(252, 218, 8, 0.7); /* Färg #fcda08 (gul) med transparens */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}

/* Justera mellanrummet mellan kolumnerna (om det behövs) */
.elementor-column {
    margin-right: 20px; /* Justera höger margin för kolumnerna */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen */
}

/* Skapa höjd för mellanrum mellan kolumnerna */
.elementor-column + .elementor-column {
    height: 220px; /* Sätt höjd på varje kolumn till 220px */
    margin-bottom: 20px; /* Justera eventuellt mellanrum nedanför kolumnerna */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-edfb60e *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-8c190ea *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
    height: 220px; /* Sätter höjden på kolumnen till 220px */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(252, 218, 8, 0.7); /* Färg #fcda08 (gul) med transparens */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}

/* Justera mellanrummet mellan kolumnerna (om det behövs) */
.elementor-column {
    margin-right: 20px; /* Justera höger margin för kolumnerna */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen */
}

/* Skapa höjd för mellanrum mellan kolumnerna */
.elementor-column + .elementor-column {
    height: 220px; /* Sätt höjd på varje kolumn till 220px */
    margin-bottom: 20px; /* Justera eventuellt mellanrum nedanför kolumnerna */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-94a5b31 *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-a9746a6 */.hover-effect {
    overflow: hidden;
}
.elementor-1712 .elementor-element.elementor-element-a9746a6 {
    height: 220px; /* Sätt en höjd i px eller använd % */
}
/* För kolumnen */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* Färglager som ska visas vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnen */
    height: 100%; /* Täcker hela kolumnen */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent blå färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Placera detta lager under texten */
}

/* Färgen visas vid hover */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Placera texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
}

/* Se till att bakgrundsbilden är i rätt storlek */
.hover-effect .elementor-background-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}
/* Skapa mellanrum mellan kolumnerna i en sektion */
.elementor-column {
    margin-right: 20px; /* Justera höger margin för kolumnerna */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen *//* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-3ac4637 *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-b36696e *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
    height: 220px; /* Sätter höjden på kolumnen till 220px */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(252, 218, 8, 0.7); /* Färg #fcda08 (gul) med transparens */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}

/* Justera mellanrummet mellan kolumnerna (om det behövs) */
.elementor-column {
    margin-right: 20px; /* Justera höger margin för kolumnerna */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen */
}

/* Skapa höjd för mellanrum mellan kolumnerna */
.elementor-column + .elementor-column {
    height: 220px; /* Sätt höjd på varje kolumn till 220px */
    margin-bottom: 20px; /* Justera eventuellt mellanrum nedanför kolumnerna */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-070e8e7 *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-b73e11e *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
    height: 220px; /* Sätter höjden på kolumnen till 220px */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(236, 231, 208, 0.7); /* Färg #ece7d0 (ljusbeige) med transparens */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}

/* Justera mellanrummet mellan kolumnerna (öka padding) */
.elementor-column {
    margin-right: 30px; /* Justera mellanrummet mellan kolumnerna genom att öka margin-right */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen */
}

/* Skapa höjd för mellanrum mellan kolumnerna */
.elementor-column + .elementor-column {
    height: 220px; /* Sätt höjd på varje kolumn till 220px */
    margin-bottom: 30px; /* Justera margin mellan kolumner i vertikal riktning */
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-e5ea79f *//* För kolumnen (eller sektionen) */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* För att skapa färglagret (overlay) vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnens bredd */
    height: 100%; /* Täcker hela kolumnens höjd */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Lägg hover-effekten under texten */
}

/* Hover-effekten aktiveras här och gör färgen synlig */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrerar texten */
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    opacity: 0; /* Texten är osynlig från början */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Lägg texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
    color: white; /* Texten blir vit vid hover */
}

/* För att säkerställa att bakgrundsbilden täcker hela kolumnen */
.hover-effect .elementor-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Se till att bilden täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-ad82011 */.hover-effect {
    overflow: hidden;
}
.elementor-1712 .elementor-element.elementor-element-ad82011 {
    height: 220px; /* Sätt en höjd i px eller använd % */
}
/* För kolumnen */
.hover-effect {
    position: relative;
    overflow: hidden; /* Förhindrar att hover-färgen går utanför kolumnens kant */
}

/* Färglager som ska visas vid hover */
.hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Täcker hela kolumnen */
    height: 100%; /* Täcker hela kolumnen */
    background-color: rgba(29, 46, 74, 0.7); /* Transparent blå färg #1d2e4a */
    opacity: 0;
    transition: opacity 0.2s ease-in; /* Snabbare transition på 0.2 sekunder */
    z-index: 1; /* Placera detta lager under texten */
}

/* Färgen visas vid hover */
.hover-effect:hover::before {
    opacity: 1; /* Gör färgen synlig vid hover */
}

/* Texten som ska visas vid hover */
.hover-effect .hover-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: rgba(255, 255, 255, 0); /* Osynlig text initialt */
    transition: opacity 0.2s ease-in; /* Texten visas snabbare */
    z-index: 2; /* Placera texten ovanpå färglagret */
}

/* Texten blir synlig vid hover */
.hover-effect:hover .hover-text {
    opacity: 1; /* Gör texten vit och synlig vid hover */
}

/* Se till att bakgrundsbilden är i rätt storlek */
.hover-effect .elementor-background-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover; /* Täcker hela kolumnen */
    background-position: center; /* Centrerar bilden */
    z-index: 0; /* Gör så att bakgrundsbilden är längst bak */
}
/* Skapa mellanrum mellan kolumnerna i en sektion */
.elementor-column {
    margin-right: 20px; /* Justera höger margin för kolumnerna */
}

.elementor-column:last-child {
    margin-right: 0; /* Ta bort margin från den sista kolumnen *//* End custom CSS */