/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-856 {
    /* centers button */
    text-align: center;
    /* 116px - 164px top */
    /* 60px - 100px  bottom */
    padding: clamp(7.25rem, 16.82vw, 10.25rem) 1rem
      clamp(3.75rem, 7.82vw, 6.25rem);
    background-color: #f7f7f7;
    /* clips the svg wave from overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-856 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3rem;
  }
  #hero-856 .cs-content {
    max-width: 39.375rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #hero-856 .cs-topper {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #hero-856 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: center;
    /* 23 characters including spaces wide */
    max-width: 23ch;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  #hero-856 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    max-width: 33.1875rem;
    /* 28px - 40px */
    color: var(--bodyTextColor);
    padding-bottom: 1.75rem;
  }
  #hero-856 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #hero-856 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #hero-856 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-856 .cs-picture {
    width: 100%;
    max-width: 35.625rem;
    /* 400px - 712px */
    height: clamp(25rem, 95vw, 44.5rem);
    /* 100px - 200px */
    border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0
      clamp(6.25rem, 17vw, 12.5rem);
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #hero-856 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    /* ensures the top of the images is at the top of the container, no heads getting cut off */
    object-position: top;
  }
  #hero-856 .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 320%;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-856 {
    text-align: left;
    padding: 13rem 1rem 3rem;
  }
  #hero-856 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #hero-856 .cs-content {
    width: 40vw;
    /* prevents flex-box from squishing it */
    flex: none;
    align-items: flex-start;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #hero-856 .cs-title,
  #hero-856 .cs-text {
    text-align: left;
  }
  #hero-856 .cs-picture {
    /* 623px - 814px */
    height: clamp(22rem, 35vw, 30rem);
  }
  #hero-856 .cs-wave {
    width: 100%;
    left: 0;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
}

/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #stats-7 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #stats-7 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #stats-7 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #stats-7 .cs-stats-group {
    width: 100%;
    max-width: 31.25rem;
    padding: 0 1.25rem;
    /* 40px - 68px */
    padding-top: clamp(2.5rem, 5.7vw, 4.25rem);
    /* 48px - 80px */
    padding-bottom: clamp(3rem, 6.5vw, 5rem);
    margin: 0;
    background: #fff;
    border-top: 8px solid var(--primaryLight);
    border-radius: 0.3125rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.4375em;
    box-shadow: 0 1.25rem 2.5rem 0 rgba(0, 0, 0, 0.05);
    /* prevents padding from adding to the width of the container */
    box-sizing: border-box;
  }
  #stats-7 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
  }
  #stats-7 .cs-item .cs-number {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 4.7vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    /* 4px - 8px */
    margin-bottom: clamp(0.25rem, 0.78vw, 0.5rem);
    color: var(--primary);
    display: block;
  }
  #stats-7 .cs-item .cs-stat-text {
    /* 16px - 25px */
    font-size: clamp(1rem, 2vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
  }
  #stats-7 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #stats-7 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #stats-7 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* In-between - 500px */
@media only screen and (min-width: 31.25em) {
  #stats-7:before {
    height: 37.5%;
  }
  #stats-7 .cs-stats-group {
    width: 68vw;
    max-width: 100%;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
    column-gap: 2.1875rem;
  }
  #stats-7 .cs-item {
    /* reset width */
    width: auto;
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1354 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
  }
  #services-1354 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1354 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #services-1354 .cs-topper {
    color: #767676;
  }
  #services-1354 .cs-title {
    max-width: 25ch;
    margin: 0;
  }
  #services-1354 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services-1354 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    height: 19.0625rem;
    margin: 0;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px); /* Lite suddig effekt för mjukare look */
    z-index: 1;

    border-radius: 1.5rem;
    /* clips background image corners */
    overflow: hidden;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
  }

  #services-1354 .cs-background {
    position: relative;
    display: block;
  }

  #services-1354 .cs-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1;
    border-radius: 1.5rem;
  }

  #services-1354 .cs-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
  }
  #services-1354 .cs-item:hover .cs-background:before {
    background-color: var(--primary);
    opacity: 0.84;
  }
  #services-1354 .cs-item:hover .cs-background img {
    transform: scale(1.2);
  }
  #services-1354 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and widht of the link */
    padding: 1.5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #services-1354 .cs-h3 {
    font-size: 1.5625rem;
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
  }
  #services-1354 .cs-span {
    /* forces the h3 to alwasy be two lines */
    display: block;
  }
  #services-1354 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1354 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.4;
    top: 0;
    left: 0;
    z-index: 1;
    transition: background-color 0.3s, opacity 0.3s;
  }
  #services-1354 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    transition: transform 0.6s;
  }
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
  #services-1354 .cs-item {
    grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1354 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #services-1354 .cs-item {
    grid-column: span 3;
  }
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-861 {
    padding: var(--sectionPadding);
  }
  #pricing-861 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 31.25rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-861 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }

  #pricing-861 .cs-title {
    max-width: 25ch;
  }
  #pricing-861 .cs-text {
    max-width: 56.25rem;
  }
  #pricing-861 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
  }
  #pricing-861 .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    /* 20px - 32px left & right */
    /* 20px - 32px bottom */
    padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
    /* prevent padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #f4f4f4;
    /* clips corners */
    overflow: hidden;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column: span 12;
  }
  #pricing-861 .cs-item.cs-popular .cs-background {
    background-color: #1a1a1a;
  }
  #pricing-861 .cs-item.cs-popular .cs-background img {
    opacity: 1;
  }
  #pricing-861 .cs-item.cs-popular .cs-package {
    color: #1f9bf4;
  }
  #pricing-861 .cs-item.cs-popular .cs-price,
  #pricing-861 .cs-item.cs-popular .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  #pricing-861 .cs-item.cs-popular .cs-desc {
    opacity: 0.8;
  }
  #pricing-861 .cs-top {
    padding: 2.5rem 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 1;
  }
  #pricing-861 .cs-background {
    background-color: #fef7f4;
    position: absolute;
    top: 0;
    bottom: 0;
    /* same as cs-item padding left and right */
    left: -2rem;
    right: -2rem;
    z-index: -1;
  }
  #pricing-861 .cs-background img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0;
  }
  #pricing-861 .cs-package {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: #767676;
    display: block;
  }
  #pricing-861 .cs-price {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 5vw, 3.0625rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 900;
    margin: 0;
    color: var(--headerColor);
    display: block;
    /* so it's even with the bottom of the cs-desc */
    transform: translateY(0.5625rem);
  }
  #pricing-861 .cs-desc {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: center;
    margin: 0 0 0 0.5rem;
    color: var(--bodyTextColor);
    opacity: 0.8;
    display: block;
  }
  #pricing-861 .cs-ul {
    /* 24px - 40px */
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 2rem 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #pricing-861 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.2em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: space-between;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 1rem;
  }
  #pricing-861 .cs-li.cs-disabled {
    opacity: 0.4;
    filter: grayscale(1);
  }
  #pricing-861 .cs-icon {
    width: 1.125rem;
    height: auto;
    display: block;
  }
  #pricing-861 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-861 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #pricing-861 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-861 .cs-price-button {
    /* pushes up against the cs-ul so if there's loess li's in the list, the button always pushes itself to the bottom */
    margin-top: auto;
    width: 100%;
    border-radius: 0;
  }
  #pricing-861 .cs-price-button:before {
    border-radius: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-861 .cs-container {
    max-width: 80rem;
  }
  #pricing-861 .cs-item {
    grid-column: span 6;
  }
  #pricing-861 .cs-item.cs-popular {
    grid-column: span 12;
    order: -1;
  }
}
/* Tablet - 900px */
@media only screen and (min-width: 59.375rem) {
  #pricing-861 .cs-item {
    grid-column: span 4;
  }
  #pricing-861 .cs-item.cs-popular {
    grid-column: span 4;
    order: initial;
  }
}

.cs-button-4 {
    text-align: center;
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 8vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    min-width: 10.875rem;
    margin: auto;
    color: #fff;
    padding: 0 1.5rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #f15a24;
    box-shadow: 4px 4px 0px 0px #1a1a1a;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition:
        background-color 0.3s,
        box-shadow 0.3s;
}
.cs-button-4:hover {
  background-color: #1a1a1a;
  box-shadow: 0px 0px 0px 0px var(--primary);
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-323 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #contact-323 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.25rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3.25rem;
  }
  #contact-323 .cs-content {
    text-align: left;
  }

  #contact-323 .cs-text {
    /* 24px - 32px */
    margin-bottom: clamp(1.5rem, 5vw, 2rem);
  }
  #contact-323 .cs-form {
    /* 20px - 48px top and bottom */
    /* 20px - 32px left and right */
    padding: clamp(1.25rem, 4.18vw, 3rem) clamp(1.25rem, 4.18vw, 2rem);
    background-color: #f7f7f7;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  #contact-323 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    width: 100%;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #contact-323 .cs-input {
    font-size: 1rem;
    width: 100%;
    height: 3.5rem;
    padding: 0;
    padding-left: 1.5rem;
    border-radius: 0.5rem;
    color: var(--headerColor);
    background-color: #fff;
    border: none;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #contact-323 .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #contact-323 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #contact-323 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #contact-323 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #contact-323 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-323 .cs-submit {
    text-transform: uppercase;
    width: 17.6875rem;
    background-color: var(--secondaryLight);
    color: var(--headerColor);
    border: none;
    transition: color 0.3s;
  }
  #contact-323 .cs-submit:hover {
    cursor: pointer;
    color: #fff;
  }
  #contact-323 .cs-map {
    width: 100%;
    max-width: 39.375rem;
    /* 328px - 425px */
    height: clamp(20.5rem, 63.4vw, 26.5625rem);
    border-radius: 1.5rem;
    /* clips the corners of the img tag */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #contact-323 .cs-map img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-323 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3.25rem;
  }
  #contact-323 .cs-content {
    max-width: 35.4375rem;
  }
  #contact-323 .cs-title,
  #contact-323 .cs-topper,
  #contact-323 .cs-text {
    text-align: left;
    margin-left: 0;
  }
  #contact-323 .cs-title {
    max-width: 32.625rem;
  }
  #contact-323 .cs-email,
  #contact-323 .cs-phone {
    width: 47%;
  }
  #contact-323 .cs-button-solid {
    margin-left: 0;
  }
  #contact-323 .cs-map {
    height: auto;
    aspect-ratio: 0.89871612;
  }
}
.cs-map {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* Ger rätt höjd proportionellt */
  border-radius: 1rem;
  display: block;
}