/*
Theme Name: EKOTVÄTT
Author: Jimi
Version: 1.0
*/

@font-face {font-family: 'Quicksand';font-style: normal;font-weight: 300 700;font-display: swap;src: url(https://fonts.gstatic.com/s/quicksand/v31/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
* {margin: 0; padding: 0; box-sizing: border-box; color: black; font-family: 'Quicksand', sans-serif;}
html { scroll-behavior: smooth; margin-top: 0px !important;}
body { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #eaeaea; margin: 0 auto;}
main {width: 100%;}
h1 {font-size: 45px; font-weight: 500; color: #252525;margin-bottom: 17.5px;}
h2 {font-size: 35px; font-weight: 500; color: #252525;margin-bottom: 17.5px;}
h3 {font-weight: 500; font-size: 30px; color: #252525;margin-bottom: 17.5px;}
h4, h5, h6 {font-size: 25px; font-weight: 500; color: #353535;margin-bottom: 17.5px;}
h4 a {text-decoration: none; color: #151515;}
p { font-size: 18px; font-weight: 450; margin-bottom: 20px; color: #151515;}
strong {font-weight: 600; color: black; font-style: normal;}
img { max-width: 100%; border-radius: 6px;}
a img {display: block; margin: 0;}
hr {margin: 50px 0;border: solid 1.5px #f7f8fb;}
article {width: 100%;}
.btn-link {background-color: rgba(44, 127, 169, 0.9); border: 1px solid rgba(255, 255, 255, 0.3); padding: 20px; width: 100%; border-radius: 6px; text-decoration: none; color: white; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-top: 20px; border: none; cursor: pointer; }
.btn-link:hover {transform: scale(1.010); transition: all 0.3s ease;}   
.action-div {display: flex; flex-direction: row; width: auto; height: 100%; gap: 30px; justify-content: center; align-items: center;}
#action-btn {position: relative; background-color: rgba(44, 127, 169, 1); color: white; padding: 10px 12.5px; font-size: 20px; border: 1px solid rgba(255, 255, 255, 0.3); text-align: center; font-weight: 400; text-decoration: none; border-radius: 6px; z-index: 998;}
#action-btn:hover { transform: scale(1.05); transition: all 0.3s ease;}
#action-btn2 {background-color: rgba(255, 255, 255, 0.1); border: solid 1px #505050; margin-left: 20px; padding: 10px 15px; font-size: 18px; text-align: center; font-weight: 400; text-decoration: none; border-radius: 6px;}
#action-btn2:hover {transform: scale(1.010);}
.cta-button {padding: 20px;font-size: 18px;font-weight: 500;color: #fff;background-color: rgba(44, 127, 169, 1);border-radius: 6px;border: none; width: 100%; cursor: pointer;text-decoration: none;transition: background-color 0.3s ease;margin-bottom: 0;}
.cta-button:hover {transform: scale(1.010);}
.cta-button-hero {display: inline-flex;align-items: center;justify-content: space-between;   background-color: rgba(44, 127, 169, 1); border: 1px solid rgba(255, 255, 255, 0.3); padding: 17.5px; color: white; font-size: 18px;text-decoration: none;border-radius: 6px;font-weight: 400;width: 350px;transition: background-color 0.3sease; margin-top: 10px;}
.cta-button-hero:hover {transform: scale(1.010); transition: all 0.5s;}
.cta-button-hero2 {display: inline-flex;align-items: center;justify-content: space-between;background-color: rgba(255, 255, 255, 0.1); color: white; border:  1px solid rgba(255, 255, 255, 0.3); padding: 17.5px;font-size: 18px;text-decoration: none;border-radius: 6px; font-weight: 400;width: 350px;transition: background-color 0.3sease;   backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px);}
.cta-button-hero2:hover {transform: scale(1.010); transition: all 0.5s;}
.floating-buttons {position: fixed;bottom: 20px;right: 20px;display: flex;flex-direction: column;gap: 10px;z-index: 9999;}
.floating-button {width: 50px; height: 50px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.25); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: #fff; text-align: center;line-height: 50px; font-size: 24px; transition: all 0.3s ease; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); display: flex; justify-content: center;align-items: center;}
.floating-button:hover {transform: scale(1.1);}
.floating-button img.icon {width: 36px;height: 36px;}
.file-upload-button {background-color: #f7f8fb; border: 1px solid #efefef;cursor: pointer;border-radius: 6px;text-align: center;padding: 15px;margin-bottom: 10px;width: 100%;transition: background-color 0.3s ease;}
input[type="file"]:valid + .file-upload-button + .file-info {display: none;}
input[type="file"]:not(:valid) + .file-upload-button + .file-info {display: block;}
.file-upload-button:hover {background-color: #eef0f4;}
.header {position: absolute; top: 0;left: 0;width: 100%;box-sizing: border-box; background-color: transparent; ;height: 120px;padding: 0px 275px;display: flex;justify-content: space-between;align-items: center;z-index: 999;}
.header2 {position: relative; top: 0; left: 0; width: 100%; box-sizing: border-box; background-color: white; height: 120px; padding: 0px 275px; display: flex; justify-content: space-between; align-items: center; z-index: 999;}
.hero-container {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 140px 275px 80px 275px; overflow: hidden; position: relative; box-sizing: border-box; color: #fff;
  background-image: 
    
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url('https://ekotvattab.se/wp-content/uploads/2025/04/bakgrund-taktvatt.webp');
  
  background-size: cover; background-position: center 70%; background-repeat: no-repeat;
}

.step-for-step h2 { font-size: 2rem; margin-bottom: 40px;}
.step-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 10px 0;}
.step {background-color: white; border-radius: 6px; padding: 25px; box-shadow: 0 2px 8px rgba(44, 127, 169, 0.15);}
.step img {width: 60px; height: 60px; margin-bottom: 15px;}
.step h3 {font-size: 20px;  margin-bottom: 10px; font-weight: 600; color: #2C7FA9;}
.step p {font-size: 16px ;color: #555;margin: 0;}
.hero-container h1 {color: white;}
.info-container {display: flex;flex-direction: column;padding: 60px 275px;height: auto;background-color: white;justify-content: center;overflow: hidden;position: relative;box-sizing: border-box; border-top: solid 5px #f7f8fb;border-bottom: solid 5px #f7f8fb;}
.service-section {display: flex;flex-direction: column;padding: 60px 275px;height: auto;background-color: white;justify-content: center;overflow: hidden;position: relative;box-sizing: border-box; border-top: solid 2.5px #f7f8fb;}
.blogg-container {display: flex;flex-direction: column;width: 100%;box-sizing: border-box;padding: 60px 275px;height: auto;background-color: white;overflow: hidden; border-bottom: solid 3px #f7f8fb;}
.page-content {display: flex;width: 100%;box-sizing: border-box;flex-direction: row;background-color: white;padding: 60px 275px;position: relative;gap: 60px;}
.guide {display: flex;width: 100%; border-top: solid 2.5px #f7f8fb; box-sizing: border-box;flex-direction: row;background-color: white;padding: 60px 275px;position: relative;gap: 40px;}
.flex-info {width: 100%;box-sizing: border-box;background-color: white;gap: 10px;padding: 60px 275px;z-index: 2;height: auto;border-top: solid 3px #f7f8fb; border-bottom: solid 5px #f7f8fb; }

.flex-services {
  display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding: 140px 275px 80px 275px; overflow: hidden; position: relative;  box-sizing: border-box; color: #fff;
  background-image: 
    linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('');
  
  background-size: cover; background-position: center 70%; background-repeat: no-repeat; gap: 150px;}

.flex-services p {color: white;}
.flex-services h1 {color: white;}
.flex-services ul li {color: white;}
.flex-services strong {color: white;}
.flex-services hr {color: white;}
h2, h3, h4 {scroll-margin-top: 50px;}
.flex-text {display: flex; flex-direction: column; width: 60%;}
.flex-text strong {color: white;}
.flex-text p { width: 100%; color: white; margin-bottom: 25px;}
.flex-text .cta-button-hero, .flex-text .cta-button-hero2 {width: 60%;}
.image-wrapper h3 {position: absolute; top: 20px; right: 20px; margin: 0; padding: 5px 10px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(3px); color: white; font-size: 18px; border-radius: 4px; }
.faq-section {padding: 60px 275px;background-color: white;width: 100%; box-sizing: border-box; border-top: solid 5px #f7f8fb; border-bottom: solid 5px #f7f8fb; }
.review-section {display: flex;flex-direction: row; width: 100%; box-sizing: border-box;padding: 60px 275px;background: white; gap: 60px; border-bottom: solid 3px #f7f8fb;}


.footer {
  position: relative; bottom: 0; left: 0; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; height: auto; gap: 40px; padding: 60px 275px; background-color: white;
  background-image: 
    linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
    url('https://ekotvattab.se/wp-content/uploads/2025/05/sky.webp');
  background-repeat: no-repeat; background-position: center; background-size: cover;
}

.menu-container {display: flex;position: relative;flex-direction: row;width: auto;justify-content: center;align-items: center;height: 60px;}
.menu {display: flex;flex-direction: row;align-items: center;justify-content: center;right: 0;color: white;height: 100%;width: 100%;z-index: 1000;}
.menu ul {display: flex;flex-direction: row;list-style-type: none;align-items: center;justify-content: flex-end;gap: 10px;width: 100%;height: 100%;padding: 0;margin: 0;}
.menu li {display: flex; justify-content: center; align-items: center; height: 100%;}
.menu li a {text-decoration: none;border-radius: 5px;font-size: 16px;background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 8px 12px;}
.menu li a:hover {background-color: rgba(255, 255, 255, 0.2); transition: 0.5s all;}
.menu-label {display: none;}
.menu2-label {display: none;}
.menu .submenu {position: absolute; top: 100%; left: 0; flex-direction: column; align-items: flex-start; z-index: 1000; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); padding: 15px; width: 100%; border-radius: 6px; gap: 0; list-style: none; margin: 0; opacity: 0; visibility: hidden;}
.menu li:hover .submenu {width: auto; height: auto; opacity: 1; visibility: visible;}
.menu .submenu li {margin-bottom: 8px; width: 100%; transition: none;}
.menu .submenu li:last-child {margin-bottom: 0;}
.menu .submenu li a {display: block;padding: 8px 12px;color: white; background-color: rgba(255, 255, 255, 0.1); text-decoration: none;box-sizing: border-box; font-size: 15px; border-radius: 5px; width: 100%; transition: none;}
.menu .submenu li a:hover {background-color: rgba(255, 255, 255, 0.2); transition: 0.5s all;}
.menu .has-submenu > a { position: relative; display: flex; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 0.3); align-items: center; padding: 8px 12px; color: white; text-decoration: none;}
.menu .has-submenu > a:hover {background-color: rgba(255, 255, 255, 0.2);}
.menu .has-submenu {display: flex; justify-content: center; align-items: center; height: 100%; width: auto;}
.menu-arrow {display: inline-block; width: 7px; height: 7px; margin-left: 7.5px; border-left: 2px solid white; border-top: 2px solid white; border-radius: 1px; transform: rotate(225deg); transition: transform 0.3s ease;}
.bar {display: block;width: 30px;height: 3px;background-color: white;margin: 5px 0;transition: 0.3s;}
.menu-icon {display: none; cursor: pointer;position: absolute; top: 0;right: 0;z-index: 1001;}
#menu-toggle:checked + .menu-icon .bar:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
#menu-toggle:checked + .menu-icon .bar:nth-child(2) {opacity: 0;}
#menu-toggle:checked + .menu-icon .bar:nth-child(3) {transform: rotate(-45deg) translate(5px, -5px);}
#menu-toggle:checked + .menu-icon + .menu {display: block;}
.bar2 {display: block;width: 30px;height: 3px;background-color: #222;margin: 5px 0;transition: 0.3s;}
.menu2-icon {display: none; cursor: pointer;position: absolute; top: 0;right: 0;z-index: 1001;}
#menu2-toggle:checked + .menu2-icon .bar2:nth-child(1) {transform: rotate(45deg) translate(5px, 5px); color: white;}
#menu2-toggle:checked + .menu2-icon .bar2:nth-child(2) {opacity: 0; color: white;}
#menu2-toggle:checked + .menu2-icon .bar2:nth-child(3) {transform: rotate(-45deg) translate(5px, -5px); color: white;}
#menu2-toggle:checked + .menu2-icon + .menu2 {display: block;}
.menu2 {display: flex;flex-direction: row;align-items: center;justify-content: center;right: 0;color: white;height: 100%;width: 100%;z-index: 1000;}
.menu2 ul {display: flex;flex-direction: row;list-style-type: none;align-items: center;justify-content: flex-end;gap: 10px;width: 100%;height: 100%;padding: 0;margin: 0;}
.menu2 li {display: flex; justify-content: center; align-items: center; height: 100%;}
.menu2 li a {text-decoration: none;border-radius: 5px;font-size: 16px;background-color: #f7f8fb; border: 1px solid #efefef; color: #222; padding: 8px 12px;}
.menu2 li a:hover {background-color: #eceef3;transition: all 0.3s;}
.menu2 .submenu {position: absolute;top: 100%;left: 0;flex-direction: column;align-items: flex-start; background-color: white; border: 1px solid #efefef; z-index: 1000; padding: 15px; width: 100%; border-radius: 6px; gap: 0; list-style: none; margin: 0; opacity: 0; visibility: hidden;transition: opacity 0.3s ease, transform 0.3s ease;}
.menu2 li:hover .submenu {width: auto;height: auto;opacity: 1;visibility: visible;}
.menu2 .submenu li {margin-bottom: 8px; width: 100%;}
.menu2 .submenu li:last-child {margin-bottom: 0;}
.menu2 .submenu li a {display: block;padding: 8px 12px;color: #222;text-decoration: none;transition: background-color 0.3s ease;box-sizing: border-box; font-size: 15px; border-radius: 5px; width: 100%;}
.menu2 .submenu li a:hover {background-color: #eceef3;}
.menu2 .has-submenu > a { position: relative; display: flex; background-color: #f7f8fb; border: 1px solid #efefef; align-items: center; padding: 8px 12px; color: #222; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease;}
.menu2 .has-submenu > a:hover {background-color: rgba(255, 255, 255, 0.2);}
.menu2 .has-submenu {display: flex; justify-content: center; align-items: center; height: 100%; width: auto;}
.menu2-arrow {display: inline-block; width: 7px; height: 7px; margin-left: 7.5px; border-left: 2px solid #222; border-top: 2px solid #222; border-radius: 1px; transform: rotate(225deg); transition: transform 0.3s ease;}
.form-container .checkbox-grid .custom-checkbox {background-color: white; border-radius: 5px; border: 1px solid #efefef;}
.form-container .checkbox-grid .custom-checkbox:hover {background-color: #e5e7ea; box-shadow: none;}
form {display: grid;gap: 20px;max-width: 800px;margin: 0 auto;}
form p {margin: 0;}
form label {display: block; font-weight: 500;}
form input[type="text"],
form input[type="email"],
form input[type="date"] {width: 100%;border-radius: 6px;box-sizing: border-box; border: 1px solid #efefef;}
form input[type="file"] {display: none;}
form input[type="submit"] { background-color: rgba(44, 127, 169, 1); color: white; border: none; font-weight: 400px; padding: 20px;border-radius: 6px;cursor: pointer;font-size: 18px;transition: background-color 0.3s, color 0.3s;}
form input[type="submit"]:hover {transform: scale(1.05)}
.checkbox-grid {display: grid; grid-template-columns: 1fr 1fr; padding: 2px; width: 100%; gap: 10px; text-align: center; overflow: visible;}
input[type="checkbox"] {display: none;}
.custom-checkbox { display: flex; align-items: center;justify-content: center; height: 100px;border-radius: 6px;background-color: #f7f8fb;border: 1px solid #efefef; color: #333;text-align: center;cursor: pointer;transition: background-color 0.3s, color 0.3s, border-color 0.3s;}
input[type="checkbox"]:checked + .custom-checkbox {background-color: #e5e7ea;}
.custom-checkbox:hover {background-color: #eef0f4; box-shadow: none;}
input[type="text"] { display: flex; width: 100%; padding: 20px; font-size: 18px; border-radius: 6px; border: none; background-color: #f7f8fb; border: 1px solid #efefef;}
.checkbox-container { display: flex; flex-direction: column; padding: 2px; gap: 10px; margin-bottom: 20px;}
.guide-form { background-color: white; border-radius: 6px; }
.form-grid { display: flex; flex-direction: column; gap: 20px;}
.form-section1, .form-section2, .form-section3, .form-section4 {display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;}
.stars-container {display: flex;gap: 3px;margin: 0px 0 15px 0;}
.stars-container span {margin-left: 7.5px; font-weight: 500;}
.star-box {width: 18.5px;height: 18.5px;background-color:rgba(44, 127, 169, 1);border-radius: 4px;display: flex;align-items: center;justify-content: center;position: relative;}
.star-box::before {content: '';width: 12.5px;height: 12.5px;background: white;clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
.feature-list {display: flex; flex-direction: column; width: 100%; list-style-type: none;padding: 0; margin-bottom: 25px;}
.feature-list li {display: flex; width: 100%; align-items: flex-start;margin-bottom: 5px; font-weight: 500;font-size: 18px;}
.feature-list {list-style: none; padding-left: 0; gap: 5px; }
.feature-list li { position: relative; padding-left: 40px;}
.feature-list li::before {content: ''; position: absolute; left: 0; top: 50%; width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 0.3); transform: translateY(-50%); }
.feature-list li::after {content: ''; position: absolute; left: 12.5px; top: 50%; width: 4.5px; height: 8px; border: solid white; border-width: 0 2.5px 2.5px 0; transform: translate(-50%, -50%) rotate(40deg);}
p.social-proof-text3 {font-size: 16px; border-radius: 6px; background-color: #f7f8fb; border: 1px solid #efefef; padding: 15px; margin-top: 10px; font-weight: 500; }
p.form-p {font-size: 20px; margin-bottom: 20px;}
.file-container {display: flex;gap: 10px;justify-content: flex-start;align-items: center;margin-bottom: 10px;}
.file-item {display: flex;flex-direction: column;align-items: flex-start; width: 125px;}
.file-item input[type="file"] {display: none;}
.file-info {font-size: 14px; color: #333;margin-top: 5px;}
.cta-container .feature-list-cta {margin-left: 0px;}
.feature-list-cta {list-style-type: none;padding: 0;margin: 10px 0;}
.feature-list-cta li {display: flex;align-items: center;margin-bottom: 5px; color:#353535;font-weight: 500;font-size: 18px;}
.cta-container {width: 100%;max-width: 600px;margin: 40px 0px;padding: 25px;background-color: #f7f8fb;border-radius: 5px; border: 1px solid #efefef; }
.cta-container h3 {font-size: 30px;color: #333;margin-bottom: 10px;}
.cta-container p {font-size: 18px;color: #666;margin-bottom: 15px;}
.arrow {font-size: 20px;color: white;}
.arrow2 {font-size: 20px;color: #505050}
.flex-info ul, .flex-info ol {margin-left: 20px; margin-bottom: 20px; font-size: 18px;}
.flex-info ul li {margin-bottom: 5px; margin-left: 5px;}
.flex-services .page-content ul, .flex-services .page-content ol { margin-bottom: 20px; font-size: 18px;}
.flex-services .page-content ul li {margin-bottom: 5px; margin-left: 0px;}
.main-content ul, .main-content ol {margin-left: 20px; margin-bottom: 20px; font-size: 18px;}
.main-content ul li {margin-bottom: 5px; margin-left: 5px;}
.main-content img {display: block; width: 100%; height: auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.main-content-assistansbolag ul, .main-content-assistansbolag ol {margin-left: 20px; margin-bottom: 20px; font-size: 18px;}
.main-content-assistansbolag ul li {margin-bottom: 5px; margin-left: 5px;}
.row-container {display: flex;flex-direction: row; justify-content: space-between; margin-bottom: 25px;height: auto;}
.large-box {display: flex;flex-direction: column;height: 100%;}
.small-box {display: flex;flex-direction: column;overflow: hidden;height: 100%;box-sizing: border-box;}
.small-box img {max-width: 100%;max-height: calc(100% - 40px);object-fit: contain;display: block;}
.row-container .large-box p, .small-box p {margin-top: 0;margin-bottom: 10px;}
.post-modified-date {font-size: 18px; margin-bottom: 20px;padding-left: 10px;border-left: solid 1px #cccccc;}
.hero-container-post {display: flex;flex-direction: row;width: 100%;box-sizing: border-box;height: auto;padding: 60px 275px;background-color: white;justify-content: space-between;overflow: hidden;position: relative; border-bottom: solid 3px #f7f8fb; gap: 50px;}
.post-content-item {width: 60%;}
.hero-image-item {display: flex; justify-content: center; align-items: center; width: 40%; }
.hero-container-page {display: flex;flex-direction: row; width: 100%;box-sizing: border-box;height: auto;padding: 60px 275px;background-color: white;justify-content: space-between;overflow: hidden;position: relative; border-bottom: solid 3px #f7f8fb;}
.assistansbolag-table { display: flex; flex-direction: column; width: 600px; height: auto; justify-content: center; align-items: center;}
.small-text {font-size: 16px;color: #555;}
.product-grid {display: flex;flex-direction: row;flex-wrap: wrap;gap: 10px;justify-content: flex-start;width: 100%;}
.product-grid-item {background-color: #f7f8fb;border: 1px solid #efefef;border-radius: 5px;padding: 8px 10px;display: flex; font-size: 16px; align-items: center;justify-content: center;text-align: center;white-space: nowrap;flex-grow: 0;flex-shrink: 0; text-decoration: none;}
.product-grid-item a {text-decoration: none;}
.product-grid-item:hover {background-color: #eceef3; transition: all 0.3s; cursor: pointer;}
.product-grid-item ul {display: flex;flex-direction: row;width: 100%;font-weight: 500;}
.product-grid li {margin: 0; padding: 0; list-style-type: none; text-decoration: none; }
table {width: 100%;border-collapse: collapse;margin: 25px 0;background-color: #fff;}
table th, table td {padding: 12px 15px;border: 1px solid #ddd;text-align: left;}
table th {background-color: #f8f8f8;color: #333;font-weight: bold;}
table tr:nth-child(even) {background-color: #f9f9f9;}
table tr:hover {background-color: #f1f1f1;}
.breadcrumbs { display: flex; flex-direction: row; gap: 7.5px; flex-wrap: wrap;}
.breadcrumbs a, .breadcrumbs span { text-decoration: none; background-color: #f7f8fb; font-size: 16px; padding: 8px 10px; border-radius: 5px; border: 1px solid #efefef; }
.breadcrumbs a:hover {background-color: #eceef3;transition: all 0.3s;}
.breadcrumbs span:hover { background-color: #eceef3;transition: all 0.3s;cursor: pointer; }
.main-content {width: 55%;}
.main-content-assistansbolag {display: flex; flex-direction: column; justify-content: center; width: 60%;}
.guide-item { flex: 1 1 45%; }
.box p {margin-bottom: 10px ;}
.steg { color: black; height: auto; position: sticky; top: 50px; align-self: flex-start; flex: 1 1 55%; padding-right: 40px; border-right: solid 2.5px #f7f8fb;}
.ansokan {display: flex; flex-direction: row; border-radius: 5px;}
.ansokan-left {flex: 0 0 20%; align-items: center; justify-content: center;}
.ansokan-right {flex-direction: column; flex: 1;}
.ansokan h3 {font-size: 20px; margin-bottom: 5px;}
.ansokan p {font-size: 16px; margin-bottom: 5px;}
.punkter {display: flex;flex-direction: column;}
.punkt {display: flex; margin-bottom: 8px; padding: 10px; width: auto; background-color: #f7f8fb; border: 1px solid #efefef; border-radius: 6px; justify-content: center; align-items: center;}
.nummer {margin-right: 10px;font-size: 24px;font-weight: bold;color: white; background-color: rgba(44, 127, 169, 1); padding: 10px;border-radius: 6px;text-align: center;width: 50px;height: 100%;}
.innehall {flex: 1; p {font-size: 16px; margin: 0; font-weight: 500; }}
.punkt-titel {font-size: 18px;font-weight: bold;margin-bottom: 5px; color:rgba(44, 127, 169, 1);}
.table-of-contents { color: black; height: auto; position: sticky; top: 70px; align-self: flex-start; width: 35%; overflow: hidden; background-color: white ; border-left: solid 2.5px #f7f8fb; padding-left: 35px;}
.table-of-contents h2 { margin-bottom: 20px;}
.table-of-contents ul {list-style-type: none; margin-bottom: 0; margin-top: 20px;}
.table-of-contents ul li { width: 100%;}
.table-of-contents a {display: inline-block; text-decoration: none; font-size: 16px; margin-bottom: 7px; padding: 8px 10px; background-color: #f7f8fb; border-radius: 5px; border: 1px solid #efefef;  }
.table-of-contents a:hover { background-color: #eceef3; transition: all 0.3s;}
.vertical-list { margin-left: 10px; padding-left: 10px; width: 70%;}
.vertical-list li { margin-bottom: 10px;}
.box {background-color: #f3f3f3; padding: 20px; border-radius: 6px; margin-bottom: 20px;}
.category-container {padding: 30px 0px; margin-top: 20px; border-top: 2px solid #f7f8fb; border-bottom: 2px solid #f7f8fb;  }
.process-list {list-style-type: none;margin-bottom: 15px;}
.process-item {margin-bottom: 5px;position: relative;font-size: 18px;}
.highlight {font-weight: bold;}
.star-container-group {display: flex;flex-direction: row;gap: 5px;}
.star-container-group input[type="checkbox"] {display: none;}
.star-container-group label {display: flex;justify-content: center;align-items: center;font-size: 12px;width: 9px;height: 9px;padding: 12.5px;background-color: rgba(0, 0, 0, 0.10);color: #f7f8fb;cursor: pointer; transition: color 0.2s; border-radius: 4px;}
.star-container-group input[type="checkbox"]:checked + label, .star-container-group input[type="checkbox"]:hover + label {color: white;background-color: rgba(38, 118, 73, 0.9);}
.contact-info-logo {display: flex;flex-direction: row; width: 100%;justify-content: space-between; align-items: center;}
.contact-logo-container {display: flex;flex: 0 0 auto;justify-content: center;align-items: center;}
.logo {position: relative; max-width: 100%;height: 100%; z-index: 998;}
.contact-info {display: flex;flex-direction: column;flex: 0 0 auto;}
.contact-info h3 {margin-bottom: 10px;}
.contact-info ul {list-style-type: none;padding: 0;margin: 0;}
.contact-info li {margin-bottom: 5px;}
.contact-info li strong {font-weight: bold;}
.image-grid {display: grid; grid-template-columns: repeat(3, 1fr);gap: 15px; padding: 10px 0px;}
.image-grid img {width: 100%; height: 250px; border-radius: 6px; object-fit: cover; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease;}
.image-grid img:hover {transform: scale(1.03);}
.image-card {position: relative; overflow: hidden;border-radius: 6px;margin-bottom: 5px;}
.image-card img { width: 100%; display: block; filter: brightness(70%);}
.media-button {position: absolute;bottom: 20px;left: 20px;right: 20px;width: auto;background-color: rgba(255, 255, 255, 0.1);backdrop-filter: blur(3px);-webkit-backdrop-filter: blur(3px);border: 1px solid rgba(255, 255, 255, 0.3);color: white;padding: 17.5px;font-size: 16px;text-decoration: none;font-weight: 400;display: flex;justify-content: space-between;align-items: center;border-radius: 6px;transition: background-color 0.3s ease;}
.media-button span {color: white;}
.media-button:hover {background-color:  rgba(255, 255, 255, 0.2);transition: all 0.5s;}
.media-button .arrow {transition: transform 0.3s ease;display: inline-block;}
.media-button:hover .arrow {transform: translateX(4px);}
.media-container {display: flex;flex-direction: column;padding: 60px 275px;height: auto;background-color: white;justify-content: center;overflow: hidden;position: relative;box-sizing: border-box;}
.review-star {margin-bottom: 5px;}
.faq-item {margin-bottom: 4px;overflow: hidden;}
.faq-question {background-color: white; padding: 20px 0px; cursor: pointer; font-size: 18px; margin-bottom: 4px; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: box-shadow 0.2s ease, transform 0.2s ease; position: relative; }
.faq-question:hover {transform: translateY(-2px);}
.faq-answer {display: none;padding: 20px 0px;margin-top: 7.5px;background-color: white; font-size: 18px; margin-bottom: 4px; }
.footer-menu { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 10px 0px 10px 30px;  border-left: solid 4px white; border-radius: 2px; h3, p {color: white;}}
.footer-menu a { display: inline-flex; text-decoration: none; font-size: 16px; color: white; border-radius: 5px; padding: 8px 12px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background-color: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.3); }
.footer-menu a:hover { background-color: rgba(255, 255, 255, 0.2); transition: all 0.3s;}
.footer-menu li { list-style: none; font-size: 18px; color: white; }
.footer-menu li strong {color: white;}
.footer-menu p { margin-bottom: 5px; font-size: 18px; font-weight: 500;}


@media (max-width: 1600px) {
    #cookie-banner,
    .tre-steg,
    .info-container,
    .media-container,
    .faq-section,
    .review-section,
    .footer,
    .blogg-container,
    .flex-info,
    .page-content,
    .hero-container-page,
    .guide,
    .assistansbolag-container,
    .hero-container-post
     {padding: 50px 100px;}
	  .header, 
    .header2 {padding: 0px 100px;}
    .hero-container, .flex-services {padding: 140px 100px 80px 100px ;}
	  .post-dates {flex-direction: column; gap: 0;}
}

@media (max-width: 1250px) {
  h1 {font-size: 45px;}
  h2 {font-size: 30px;}
  h3 {font-size: 27.5px;}
  h4, h5, h6 {font-size: 20px;}
  p { font-size: 18px;}
  #action-btn {margin-right: 0px; font-size: 18px; padding: 10px 20px; }
  #action-btn2 {margin-right: 0px; font-size: 18px; padding: 10px 20px; }
  .header {width: 100%; height: 100px; padding: 0 30px}
  .header2 {width: 100%; height: 100px; padding: 0 30px}
	.hero-container {padding: 110px 30px 60px 30px;}
  .flex-services {padding: 110px 30px 60px 30px;}
  .info-container {padding: 60px 30px;}
  .media-container {padding: 60px 30px;}
  .review-section {padding: 60px 30px; gap: 50px;}	
  .blogg-container {padding: 60px 30px; }
  .flex-text {width: 80%;}
  .footer {display: grid; grid-template-columns: 1fr; gap: 30px; padding: 60px 30px; height: auto; width: 100%;}
  .guide {flex-direction: column; padding: 40px 30px;}
  .hero-container-page, .hero-container-post { padding: 60px 30px;}
  .hero-item-left {padding: 0px; width: 55%;}
  .hero-item-right {padding: 0px; width: 45%;}
  #cookie-banner {padding: 60px 30px;}
  .page-content {padding: 60px 30px;}
  .main-content {padding: 0; width: 55%;}
  .table-of-contents {flex: 1 1 30%}
  .form-container {padding: 25px;}
  .main-content ul, .main-content ol {font-size: 18px;}
  .sitemap-container {padding: 60px 30px;}
  .footer-menu {overflow: hidden; width: 100%; height: auto; align-items: flex-start; justify-content: center; text-align: start; }
  .footer-menu p {font-size: 18px;}
  .footer-menu a {font-size: 18px;}
  .flex-info { padding: 40px 30px; height: auto;}
  .faq-section {padding: 60px 30px;}
  .guide-item {width: 100%; }
  .steg {position: relative; top: 0; left: 0; margin: 0; border-right: none; padding-right: 0; border-bottom: solid 2px #f7f8fb; padding-bottom: 25px;}
  .review-container {padding: 20px;}
  .form-grid {grid-template-columns: 1fr 1fr;}
  .social-proof-text2 {display: none;}
  form {display: grid;gap: 20px;max-width: 100%;margin: 0;left: 0;}
}

@media (max-width: 992px) {
  body {padding-left: 0;padding-right: 0;margin: 0 auto;}
  h1 {font-size: 40px;}
  h2 {font-size: 35px;}
  h3 {font-size: 30px;}
  h4, h5, h6 {font-size: 27.5px;}
  p {font-size: 18px; margin-bottom: 25px;}
  .punkt {padding: 20px; gap: 10px;}
  .punkt-titel {font-size: 20px;}
  .checkbox-container {margin-bottom: 0;}
  .btn-link {font-size: 20px; padding: 25px;}
  .star-container-group {display: flex;flex-direction: row;gap: 5px; margin-bottom: 20px;}
  #action-btn {margin-right: 65px; font-size: 20px; padding: 10px 15px;}
  #action-btn2 {font-size: 20px; padding: 10px 15px;}
  .cta-button-hero { font-size: 20px; padding: 20px; border-radius: 8px; width: 400px;}
  .media-container {padding: 40px 30px;}
  .flex-text {width: 100%; p {width: 100%;}}
  .post-modified-date {font-size: 20px; margin-bottom: 25px;}
  .image-grid {grid-template-columns: 1fr;gap: 20px;}
  .image-grid img {height: 200px;}
  .hero-container-post {display: flex; flex-direction: column; gap: 20px;}
  .hero-image-item {width: 100%;}
  .cta-button-hero2 { font-size: 20px; padding: 20px; border-radius: 8px; width: 400px;}
  .review-section {display: flex;flex-direction: column; gap: 0px;}	
  .reviews {display: grid;gap: 20px;grid-template-columns: repeat(2, 1fr);}
  p.samarbete {display: none;}
  .breadcrumbs a, .breadcrumbs span { text-decoration: none; color: #151515; font-size: 18px; padding: 10px;}
  .header {justify-content: space-between; height: 100px; width: 100%; padding: 0 30px;}
  .header2 {justify-content: space-between; height: 100px; width: 100%; padding: 0 30px;}
  .bidrag {display: none;}
  .flex-text .cta-button-hero, .flex-text .cta-button-hero2 {width: 100%;}
  .menu, .menu2 { display: none;position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; height: 100vh; background-color: rgba(0, 0, 0, 0.2); backdrop-filter: blur(100px); -webkit-backdrop-filter: blur(100px); padding: 30px; border-right: 1px solid rgba(255, 255, 255, 0.3);}
  .menu ul, .menu2 ul {display: flex;flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; width: 100%;}
  .menu ul li, .menu2 ul li { width: 100%; height: auto; z-index: 1002;}
  .menu ul li a, .menu2 ul li a,
  .menu .submenu li a, .menu2 .submenu li a,
  .menu .has-submenu > a, .menu2 .has-submenu > a { position: relative; font-size: 18px; background-color: white; width: 100%; border: none; color: #222; padding: 12px 15px; border-radius: 4px;}
  .menu ul li a::after, .menu2 ul li a::after,
  .menu .submenu li a::after, .menu2 .submenu li a::after {content: '›'; position: absolute; right: 15px; top: 45%; transform: translateY(-50%); font-size: 16px; color: #222;}
  .menu .has-submenu > a::after, .menu2 .has-submenu > a::after {font-size: 18px;}
  .menu .has-submenu, .menu2 .has-submenu {display: flex;flex-direction: column;gap: 20px;width: 100%;height: auto;}
  .menu .submenu, .menu2 .submenu {display: flex;flex-direction: column;position: static;opacity: 1;visibility: visible;border: none;padding: 0;background-color: transparent;gap: 5px; width: 100%; max-width: 100%;}
  .menu .submenu li, .menu2 .submenu li {margin-bottom: 10px;width: 100%;padding-left: 15px;border-left: solid 2px white;}
  .menu2 .submenu li { border-left-width: 2.5px; }
  .menu li:hover .submenu, .menu2 li:hover .submenu {opacity: 1 !important;visibility: visible !important; width: 100%;}
  .menu-label, .menu2-label {display: flex;font-size: 25px;margin-bottom: 25px;padding-bottom: 25px;color: white;border-bottom: solid 2px white;width: auto;}
  .menu2-label { border-bottom-width: 2.5px; }
  #menu-toggle:checked + .menu,
  #menu2-toggle:checked + .menu2 {display: flex;}
  .menu-container {display: block;position: absolute;width: 100%;right: 0;top: 0;}
  .menu-icon, .menu2-icon {display: inline-block;right: 30px;top: 35px;}
  .menu-arrow, .menu2-arrow {display: none;}
  .step-grid {grid-template-columns: repeat(1, 4fr); gap: 20px; }
  .hero-container { flex-direction: column;  height: auto; padding: 120px 30px 80px 30px; p {width: 100%;}}
  .hero-container-page { flex-direction: column; gap: 10px;  height: auto; padding: 60px 30px; background-color: white; background-image: none;}
  .post-content-item {width: 100%;}
  .process-item {font-size: 18px;}
  .product-grid-item {font-size: 18px; padding: 10px;}
  .product-grid {width: 100%;}
  .info-container {flex-direction: column; padding: 60px 30px;}
  .blogg-container {flex-direction: column; padding: 60px 30px;}
  .page-content {flex-direction: column; gap: 25px;}
  .contact-info-logo { display: flex;flex-direction: column;width: 100%;justify-content: center; gap: 20px; align-items: flex-start;}
  .contact-logo-container {order: -1;}
  .table-of-contents {position: relative; top:0; left:0; border: none; width: 100%; order: 1; padding: 0; border-bottom: solid 1.5px #f7f8fb; padding-bottom: 30px; }
  .table-of-contents a {font-size: 18px; padding: 10px; }
  .table-of-contents ul {margin-top: 25px;}
  .faq-section {padding: 60px 30px;}
  .flex-services {flex-direction: column; gap: 0;}
  .faq-question {font-size: 18px;}
  .faq-answer {font-size: 18px;}
  .flex-info ul, .flex-info ol { font-size: 20px;}
  .flex-services ul, .flex-services ol { font-size: 20px;}
  .main-content ul, .main-content ol {font-size: 20px;}
  .main-content {order: 2; width: 100%;}
  .main-content-assistansbolag ul, .main-content-assistansbolag ol {font-size: 18px;}
  .main-content-assistansbolag { width: 100%;}
  .small-box, .large-box {justify-content: center;}
  .small-box img {max-height: calc(100% - 55px);}
  table th, table td {font-size: 16px;}
  .category-box ul a {padding: 15px 20px;font-size: 18px;}
  .category-box {h3 {margin-bottom: 20px;}}
  .category-box ul a {padding: 15px 20px;font-size: 18px;}
  .category-box {h3 {margin-bottom: 20px;}}
  .stars-container {margin: 0px 0 15px 0;}
  .stars-container span {font-size: 18px;}
  .star-box {width: 25px;height: 25px;}
  .star-box::before {width: 15px;height: 15px;}
  .feature-list li {font-size: 18px;}
  .visual-checkbox {width: 30px;height: 30px;}
  .visual-checkbox::before {width: 6px;height: 10px;}
  .form-grid {grid-template-columns: 1fr;}
  .form-container {padding: 0px; background-color: transparent; backdrop-filter: none; box-shadow: none; h2 {font-size: 35px;}}
  .social-proof-text p { font-size: 18px;}
  .social-proof-text i { font-size: 18px;}
  .social-proof-item p {font-size: 18px;}
  p.form-p {font-size: 18px;}
  .checkbox-grid label.custom-checkbox {font-size: 18px;}
  input[type="checkbox"][id^="Checkbox"] + label { font-size: 18px; height: 125px;}
  .checkbox-group input[type="checkbox"] + label {font-size: 18px;}
  input[type="text"] {padding: 25px; font-size: 18px;}
  button[type="submit"] {padding: 25px; font-size: 20px;}
  form input[type="submit"] {font-weight: 400px; padding: 25px;font-size: 20px; margin-top:20px;}
  p.social-proof-text3 {font-size: 18px; font-weight: 500; padding: 25px;}
  .customer-container {padding: 25px;}
  .article-wrapper {grid-template-columns: repeat(2, 2fr);}
  .form-container .checkbox-grid .custom-checkbox {background-color: #f7f8fb;}
  .form-container .checkbox-grid .custom-checkbox:hover {background-color: #e5e7ea; box-shadow: none;}
  .hero-container-page .form-container {background-color: transparent; border: none;}
  .footer {grid-template-columns: 1fr; height: auto; padding: 60px 30px;}
  .footer-menu {height: auto; padding-left: 25px; align-items: flex-start; justify-content: center; text-align: start;}
  .footer-menu a {font-size: 18px; padding: 10px;}
  .footer-menu p {font-size: 18px;}
  .cta-container {padding: 20px;}
  .cta-container h3 {font-size: 30px;}
  .cta-container p {font-size: 18px;}
  .cta-button {font-size: 20px;}
  form {gap: 0px;}
}

@media (max-width: 768px) {
  h1 {font-size: 40px;}
  h2 {font-size: 35px;}
  h3 {font-size: 30px;}
  h4, h5, h6 {font-size: 20px;}
  p {font-size: 18px; margin-bottom: 20px;}
  .punkt {padding: 15px; gap: 0;}
  p.social-proof-text3 {padding: 15px;}
  .btn-link {font-size: 20px; padding: 25px;}
  .breadcrumbs a, .breadcrumbs span { font-size: 18px;}
  .post-modified-date {font-size: 18px;}
  .main-content-assistansbolag ul, .main-content-assistansbolag ol {font-size: 18px;}
  .header {padding: 0 25px;}
  .header2 {padding: 0 25px;}
  table th, table td {font-size: 14px;}
  #action-btn {margin-right: 70px; font-size: 20px; padding: 10px 15px;}
  #action-btn2 {font-size: 20px; padding: 10px 15px;}
  .cta-button-hero {font-size: 20px; width: 400px;}
  .cta-button-hero2 {font-size: 20px; width: 400px;}
  .hero-container {padding: 110px 25px 60px 25px;}
  .flex-services {padding: 110px 25px 60px 25px;}
  .media-container {padding: 40px 25px;}
  .hero-container-page {padding: 110px 25px 60px 25px;}
  .review-section {padding: 60px 25px;}	
  .menu-icon {right: 30px; top: 35px;}
  .menu2-icon {right: 30px; top: 35px;}
  .menu { padding: 25px;}
  .menu ul li a {font-size: 18px;}
  .menu2 { padding: 25px;}
  .menu2 ul li a {font-size: 18px;}
  .info-container {padding: 40px 25px;}
  .blogg-container {padding: 40px 25px;}
  #cookie-banner {padding: 40px 25px;}
  .page-content { padding: 40px 25px;}
  .table-of-contents a {font-size: 18px; padding: 10px;}
  .assistansbolag-container {padding: 60px 25px;}
  .main-content ul, .main-content ol { font-size: 18px;}
  .small-box img {max-height: calc(100% - 50px);}
  .sitemap-container {padding: 60px 25px;}
  .category-box ul a { padding: 20px; font-size: 20px;}
  .product-grid {font-size: 18px;}
  .category-box ul a { padding: 20px; font-size: 18px;}
  .stars-container span {font-size: 18px;}
  .star-box {width: 25px;height: 25px;}
  .star-box::before {width: 15px;height: 15px;}
  .feature-list li {font-size: 18px;}
  .visual-checkbox {width: 28px;height: 28px;}
  .visual-checkbox::before {width: 5px;height: 8px;}
  .footer {padding: 60px 25px; grid-template-columns: 1fr; height: auto;}
  .footer-menu { padding-left: 20px; }
  .footer-menu p {font-size: 18px;}
  .footer-menu a {font-size: 18px;}
  .guide {padding: 30px 25px; gap: 25px;}
  .social-proof-text p {font-size: 18px;}
  .social-proof-text i {font-size: 18px;}
  .social-proof-item p {font-size: 18px;}
  p.form-p {font-size: 18px;}
  input[type="checkbox"][id^="Checkbox"] + label {font-size:  18px; height: 90px;}
  .flex-info {padding: 40px 25px;}
  .faq-section {padding: 40px 25px;}
  .faq-question {font-size: 18px;}
  .faq-answer {font-size: 18px;}
}

@media (max-width: 576px) {
  h1 {font-size: 27.5px;}
  h2 {font-size: 25px;}
  h3 {font-size: 22.5px;}
  h4, h5, h6 {font-size: 20px;}
  p {font-size: 15px;}
  hr {margin: 30px 0;}
  .logo {width: 150px;}
  .flex-text .cta-button-hero, .flex-text .cta-button-hero2 {width: 100%;}
  .review-form form input[type="text"], .review-form form input[type="email"], .review-form form textarea {font-size: 14px;}
  .main-content-assistansbolag ul, .main-content-assistansbolag ol {font-size: 14px;}
  .breadcrumbs a, .breadcrumbs span { font-size: 14px; padding: 8px 10px;}
  #action-btn {margin-right: 55px; font-size: 18px; padding: 10px 15px;}
  #action-btn2 {font-size: 18px; padding: 10px 15px;}
  .btn-link {font-size: 16px; padding: 20px;}
  .cta-button {font-size: 16px;}
  .cta-button-hero {font-size: 16px; padding: 17.5px; width: 300px;}
  .cta-button-hero2 {font-size: 16px; padding: 17.5px; width: 300px;}
  .product-grid-item {font-size: 14px; padding: 8px 10px;}
  .header {padding: 0 25px; height: 85px;}
  .header2 {padding: 0 25px; height: 85px}
  .menu-icon {right: 25px; top: 30px;}
  .menu2-icon {right: 25px; top: 30px;}
  .menu { padding: 25px;}
  .menu2 { padding: 25px;}
  .menu ul li a {font-size: 15px;}
  .menu .submenu li a { font-size: 15px; }
  .menu .has-submenu > a {font-size: 15px; }
  .menu .submenu li {margin-bottom: 5px;}
  .menu-label { font-size: 20px; padding-bottom: 20px; margin-bottom: 20px;}
  .menu2 ul li a {font-size: 15px;}
  .menu2 .submenu li a { font-size: 15px;}
  .menu2 .submenu li {margin-bottom: 5px;}
  .menu2 .has-submenu > a {font-size: 15px; }

  .menu2-label { font-size: 20px; padding-bottom: 20px; margin-bottom: 20px;}
  .footer-menu li { list-style: none; font-size: 15px; color: white; }
  .percentage-list {font-size: 15px;}
  .hero-container { padding: 100px 25px 40px 25px;}
  .flex-services {padding: 100px 25px 40px 25px;}
  .reviews {display: grid;gap: 15px;grid-template-columns: repeat(1, 1fr);}
  .hero-container-page, .hero-container-post {padding: 100px 25px 40px 25px;}
  .post-content-item ul {font-size: 15px;}
  .form-grid {grid-template-columns: 1fr; gap: 20px;}
  .post-item {height: 425px}
  .process-item {font-size: 15px;}
  .info-container {padding: 30px 25px;}
  .review-form {padding: 20px;}
  .blogg-container {padding: 40px 25px;}
  .media-container {padding: 40px 25px;}
  .page-content {padding: 40px 25px;}
  .main-content {padding: 0px;}
  .page-content .main-content p {font-size: 14px;}
  table th, table td {font-size: 12px;}
  .table-of-contents {padding-bottom: 20px;}
  .table-of-contents a {font-size: 14px; padding: 8px 10px;}
  .table-of-contents ul li {margin-left: 0px;}
  .table-of-contents ul {margin-bottom: 10px;}
  .table-of-contents h2 {margin-bottom: 15px;}
  .main-content ul, .main-content ol {font-size: 15px;}
  .flex-info ul, .flex-info ol {font-size: 15px;}
  .flex-services .page-content ul, .page-content .flex-services ol {font-size: 15px;}
  .small-box img {max-height: calc(100% - 45px);}
  .sitemap-container {padding: 40px 25px;}
  .category-box ul a {padding: 10px 15px;font-size: 15px;}
  .category-box { h3 {margin-bottom: 10px;}}
  .footer {padding: 40px 25px; gap: 25px; height: auto; grid-template-columns: 1fr;}
  .footer-menu {height: auto;}
  .footer-menu p {font-size: 14px;}
  .footer-menu a {font-size: 14px; padding: 8px 10px;}
  .samarbeten {display: none;}
  .article-wrapper { grid-template-columns: repeat(1, 1fr); grid-gap: 20px; }
  .stars-container {margin: 0px 0 15px 0;}
  .stars-container span {font-size: 15px;}
  .star-box {width: 20px;height: 20px;}
  .star-box::before {width: 12.5px;height: 12.5px;}
  .feature-list li {font-size: 16px;}
  .visual-checkbox {width: 23px;height: 23px;}
  .visual-checkbox::before {width: 5px;height: 8px;}
  .flex-info {padding: 40px 25px;}
  .faq-section {padding: 40px 25px;}
  .review-section {padding: 40px 25px;}	
  .faq-question {font-size: 15px;}
  .faq-answer {font-size: 15px;}
  .guide {padding: 30px 25px; gap: 25px; }
  .innehall {flex: 1; p {font-size: 12px; margin: 0;}}
  .nummer {font-size: 18px;text-align: center;}
  .form-container .checkbox-grid .custom-checkbox {border-radius: 5px;}
  p.form-p {font-size: 15px;}
  .checkbox-grid label.custom-checkbox {font-size: 15px;}
  .form-container h2 {margin-bottom: 15px; font-size: 25px;}
  input[type="checkbox"][id^="Checkbox"] + label { font-size: 15px; height: 85px;}
  button[type="submit"] {padding: 22px; font-size: 16px; margin-top: 10px;}
  form input[type="submit"] {font-weight: 400px; font-size: 16px;}
  .checkbox-group input[type="checkbox"] + label {font-size: 15px; padding: 22px 10px;}
  input[type="text"] {padding: 22px; font-size: 15px; }
  .form-section1, .form-section2, .form-section3, .form-section4 {padding: 0; border: none;}
  p.social-proof-text3 {font-size: 15px; font-weight: 500; padding: 15px; margin: 0; border-radius: 6px;}
  .customer-container {padding: 15px; border-radius: 6px;}
  .steg { padding-bottom: 30px;  }
  .punkt {border-radius: 6px; padding: 10px 15px}
  .punkt-titel {font-size: 15px;}
  .post-modified-date {font-size: 15px;}
  .cta-container h3 {font-size: 25px;}
  .cta-container p {font-size: 15px;}
  .step p {font-size: 15px;}
}