.section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: var(--section-padding-top) var(--main-padding-right) var(--section-padding-bottom) var(--main-padding-left);
    background: white;
}

.blue-radient-bg {
    background: linear-gradient(180deg, #2163A0 0%, #00417A 100%);
}

.lightgrey-bg {
    background-color: var(--color-bg-lightgrey) !important;
}

.white-bg {
    background-color: var(--color-bg-white);
}

.max-width1440 {
    max-width: 1440px;
}

.brick-layer-left {
    position: absolute;
    top: 0;
    left: 0;
}

.brick-layer-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.above-fold {
    overflow: hidden;
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 40px;
}

.above-fold-gap120 {
    overflow: hidden;
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 120px;
}

.section-gap20 {
    overflow: hidden;
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

.section-gap48 {
    overflow: hidden;
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px;
}

.section-gap64 {
    overflow: hidden;
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 64px;
}

.section-gap80 {
    overflow: hidden;
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 80px;
}

.section-gap100 {
    overflow: hidden;
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 100px;
}

.gap120 {
    gap: 120px;
}

section {
    z-index: 1;
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-column: span 6;
}

.section-content-gap56 {
    display: flex;
    flex-direction: column;
    gap: 56px;
    grid-column: span 6;
}

.section-content-gap40 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    grid-column: span 6;
}

.section-content-gap32 {
    display: flex;
    flex-direction: column;
    gap: 32px;
    grid-column: span 6;
}

.section-content-gap24 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-column: span 6;
}

.section-content-gap20 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-column: span 6;
}

.section-content-row-gap24 {
    display: flex;
    align-items: center;
    gap: 24px;
    grid-column: span 12;
}

.section-content-row-gap20 {
    display: flex;
    align-items: center;
    gap: 24px;
    grid-column: span 12;
}

.section-video {
    width: 100%;
    object-fit: cover;
}

.subheadline {
    color: var(--color-font-white);
    font-weight: 800;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0%;
}

.subheadline-neg {
    color: var(--color-font-blue);
    font-weight: 800;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0%;
}

.contact-btn {
    padding: 8px 36px;
    background-color: var(--color-font-white);
}

.outlined-btn-white {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 17px;
    border: 1px solid var(--color-font-white);
}

.buttons-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
    white-space: nowrap;
    margin: 12px 0;
}

.video-home-wrapper {
    position: relative;
    position: relative;
    height: fit-content;
    width: fit-content;
}

.video-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 40px;
    bottom: 35px;
    height: 65px;
    width: 65px;
    backdrop-filter: blur(4px);
    background: #FFFFFFB2;
    border-radius: 30px;
}

/*----ICON TEXT CARDS-----*/
.icon-text-card {
    box-sizing: border-box;
    height: 232px;
    width: 342px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background-color: var(--color-font-white);
}

.icon-text-card-img {
    width: 48px;
    height: 48px;
}

/*----ICON TEXT CARDS END-----*/



/*-----PIC TEXT CARDS----*/

.services-headline {
    min-width: 770px;
    grid-column: span 7;
}

.pic-text-card {
    transition: all 225ms ease-in-out;

}

.pic-text-card:hover .pic-text-card-body {
    background-image: linear-gradient(180deg, #2163A0 0%, #00417A 100%);
    color: var(--color-font-white);
}

.pic-text-card:hover .pic-text-card-body div p {
    color: var(--color-font-white);
}

.pic-text-card:hover .pic-text-card-body div h3 {
    color: var(--color-font-white);
}

.pic-text-card:hover .card-brick-layer {
    opacity: 1;
}

.card-brick-layer {
    transition: opacity 225ms ease-in-out;
    opacity: 0;
    bottom: 0px;
    right: -481px;
}

.pic-text-card-img {
    width: 345px;
    min-width: 345px;
    height: 235px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pic-text-card-img img {
    object-fit: contain;
    position: relative;

}

.pic-text-card-img img:first-child {
    transform: scale(0.7);
}

.pic-text-card-body {
    transition: all 225ms ease-in-out;
    overflow: hidden;
    position: relative;
    background-color: var(--color-bg-lightgrey);
    padding: 24px 32px 40px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 345px;
    height: 275px;
    box-sizing: border-box;
}

.pic-text-card-body div {
    z-index: 1;
}

.pic-text-card-body a {
    z-index: 1;
}

/*-----PIC TEXT CARDS END----*/

/*---PIC SLIDER---*/
.comparison-pics-wrapper {
    transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.comparison-pics {
    scroll-snap-align: left;
    display: flex;
    align-items: center;
    gap: 2px;
}

.comparison-pic-1 {
    /* width: 170px;
    height: 439px; */
}

.comparison-pic-2 {
    /* width: 170px;
    height: 439px; */
}

.blue-dot-inactive {
    z-index: 1;
    display: flex;
    height: 10px;
    width: 10px;
    background-color: var(--color-lighter-blue);
    border-radius: 30px;
}

.blue-dot-active {
    background-color: var(--color-blue);
}

.btn-slide {
    z-index: 1;
    display: flex;
    cursor: pointer;
    padding: 16px;
    background-color: var(--color-blue);
}


/*---PIC SLIDER END---*/

/* GOOGLE REVIEW CARD */
.google-review-card {
    z-index: 1;
    background-color: var(--color-bg-white);
    box-sizing: border-box;
    width: 563px;
    /* max-height: 381px; */
    min-width: 563px;
    padding: 40px;
    box-shadow: 0px 4px 14px 0px #1F588A29;
}

.brick-layer-right-reviews {
    position: absolute;
    bottom: 58px;
    right: 0;
}

/* GOOGLE REVIEW CARD END */

/* CONTACT SECTION */
.contact-form {
    max-width: 700px;
    padding: 40px;
}

.contact-option {
    padding: 12px;
    width: 100%;
    white-space: nowrap;
}

.icon-blue-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: #005096;
}

select {
    appearance: none;
    /* Für moderne Browser */
    -webkit-appearance: none;
    /* Für Chrome/Safari */
    -moz-appearance: none;
    /* Für Firefox */
}

select:open {
    background-image: url('../icons/arrow_up.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center right 19px;
    font-size: 18px;

    /* background-color: blue; */
    appearance: none;
    /* Für moderne Browser */
    -webkit-appearance: none;
    /* Für Chrome/Safari */
    -moz-appearance: none;
    /* Für Firefox */
}

.services-dropdown {
    background-image: url('../icons/icon_arrow_down.svg');
    background-repeat: no-repeat;
    background-position: center right 19px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 19px;
    background-color: #FFFFFF;
    border: 1px solid #BAC9D6;
    font-size: 18px;
    line-height: 28px;
}

.services-dropdown:after {
    content: unset;
}

.field {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.field label {
    margin-top: 2px;
    color: var(--color-dark-blue);
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0%;
}

.field input {
    font-size: 18px;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: 0%;
    padding: 11px 19px;
    border: 1px solid #BAC9D6;
    background-color: #FFFFFF;
    color: var(--color-font-darkblue-alt2);
}

.field input:focus {
    border: 1px solid #000000;
    box-shadow: 0px 0px 0px 3px #4CA6E4;
}

.field input::placeholder,
textarea::placeholder {
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0%;
    color: #8D95A5;
}

.field textarea {
    height: 174px;
    padding-top: 16px;
    padding-right: 19px;
    padding-bottom: 16px;
    padding-left: 19px;
    border: 1px solid #BAC9D6;
    background: #FFFFFF;
}

.field textarea::placeholder {
    font-size: 18px;
    line-height: 160%;
    letter-spacing: 0%;
    color: #8D95A5;
}

/* CONTACT SECTION END*/

/* Q&A SECTION */
.q-and-a-accordion-wrapper {
    box-sizing: border-box;
    padding: 8px;
    /* max-height: 584px; */
}

.accordion {
    transition: all 225ms ease-in-out;
    cursor: pointer;
    padding: 24px;
    background: var(--color-bg-white);
    box-shadow: 0px 4px 14px 0px #1F588A29;
}

.btn-accordion {
    pointer-events: none;
    min-width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.open {
    background: var(--color-bg-white);
    box-shadow: 0px 4px 14px 0px #1F588A29;
}

.accordion:not(.open):hover {
    background: #F2F6FA;
    box-shadow: 8px 8px 0px 0px var(--color-blue);
}

.accordion:focus {
    background: var(--color-bg-white);
    box-shadow: 0px 0px 0px 3px #4CA6E4;
}

.accordion.open>.text-accordion {
    pointer-events: all;
    height: 116px;
    opacity: 1;
    margin-top: 20px;
}

.accordion.open>button>img {
    transform: rotate(180deg);
}

.accordion>button>img {
    transition: transform 225ms ease-in-out;
}

.text-accordion {
    overflow-y: auto;
    transition: all 225ms ease-in-out;
    pointer-events: none;
    height: 0;
    opacity: 0;
    margin-top: 0px;
}

/* Q&A SECTION END */

/*----FOOTER----*/
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 64px;
    padding-right: 32px;
    padding-left: 32px;
    box-sizing: border-box;
    gap: 40px;
}

.footer>div:first-child {
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.hr-line {
    width: 100%;
    border: 1px solid #F2F6FA;
    max-width: 1440px;
}

.footer-bottom {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 12px;
    padding-right: 32px;
    padding-bottom: 12px;
    padding-left: 32px;
    width: 100%;
    background-color: #FFFFFF;
}

.footer-bottom>div {
    width: 1440px;
    max-width: 1440px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/*----FOOTER END----*/

/*------- STONE_CEANING ABOVE FOLD -------*/
.comparison-slider-figure {
    position: relative;
    height: 569px;
    width: 680px;
}

.comparison-slider-figure>img {
    position: absolute;
}

.comparison-slider-before {
    overflow: hidden;
    z-index: 1;
    position: absolute;
    width: 100%;
}

.spacer-line {
    background-color: white;
    width: 4px;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    z-index: 1;
}

.draggable-button {
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 35px;
    height: 72px;
    width: 69px;
    min-width: 69px;
    background-color: var(--color-bg-white);
}

/*------- STONE_CEANING ABOVE FOLD END-------*/

/*---------WHY STONE CLEANING----------*/

/*---------WHY STONE CLEANING END----------*/

.big-number {
    height: fit-content;
    font-size: 64px;
    line-height: 40px;
}

.procedure-spacer {
    width: 100%;
    border: 1px solid #00000024
}

.extended-section {
    background-color: var(--color-bg-white);
    padding: 40px;
}

.big-number-card {
    flex: 1;
    padding: 40px;
}

.certificate-card {
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 48px 24px;
}

.video-thumbnail-layer {
    transition: all 225ms ease-in-out;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
        linear-gradient(0deg, rgba(0, 65, 122, 0.67), rgba(0, 65, 122, 0.67));
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.video-wrapper {
    position: relative;
    max-width: 710px;
    max-height: 400px;
    width: 710px;
}

.video-wrapper:hover .video-with-thumbnail {
    opacity: 1;
}

.video-wrapper:hover .video-thumbnail-layer {
    pointer-events: none;
    opacity: 0;
}

.video-with-thumbnail {
    transition: all 225ms ease-in-out;
    width: 100%;
    opacity: 0;
}

.video-poster-layer {
    transition: all 225ms ease-in-out;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.show-video {
    opacity: 1;
}

.hide-layer {
    pointer-events: none;
    opacity: 0;
}

.location-card {
    width: 708px;
    padding: 24px
}

.certified-icons-wrapper img {
    width: 156px;
}

.services-pic {
    width: 680px;
    height: 500px;
}

.services-pic img {
    width: 120%;
}

.extended-section-img-wrapper img {
    width: 100%;
    height: 100%;
}

.newspaper-img {
    background-color: var(--color-bg-lightgrey);
    padding: 6px;
    box-sizing: border-box;
    width: 100%;
}

.newspaper-img img {
    width: 100%;
}