.image-content-block{
    background-color: #007e40;
    position: relative;
    overflow: hidden;
}

.image-content-block__main-title{
    font-size: clamp(40px, 6.25vw - 6px, 48px);
    color: var(--nikwax-blue);
    text-align: center;
}

/* Interactive dot field (assets/js/repel-dots.js). The dots fill HALF of the
   coloured content column, on the side chosen by the Dot Side field — e.g.
   "right" fills the image-side half of the column, "bottom" the lower half.
   Base = the whole content column (fallback for canvases without a side class,
   e.g. the category renderer). */
.image-content-block__dots{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Swapped layout puts the content on the right half of the block. */
.image-content-block__dots--swapped{
    left: auto;
    right: 0;
}

/* --- Confine to half the content column, non-swapped (content = left half) --- */
.image-content-block__dots--left{   left: 0;    width: 25%; top: 0; height: 100%; }
.image-content-block__dots--right{  left: 27%;  width: 25%; top: 0; height: 100%; }
.image-content-block__dots--top{    left: 0;    width: 50%; top: 0; height: 50%;  }
.image-content-block__dots--bottom{ left: 0;    width: 50%; top: auto; bottom: 0; height: 50%; }

/* --- Swapped (content = right half): re-anchor the halves to the right column --- */
.image-content-block__dots--swapped.image-content-block__dots--left{   left: 50%; right: auto; width: 25%; }
.image-content-block__dots--swapped.image-content-block__dots--right{  left: auto; right: 0;    width: 25%; }
.image-content-block__dots--swapped.image-content-block__dots--top{    left: auto; right: 0;    width: 50%; top: 0;    height: 50%; }
.image-content-block__dots--swapped.image-content-block__dots--bottom{ left: auto; right: 0;    width: 50%; top: auto; bottom: 0; height: 50%; }

.image-content-block .container{
    position: relative;
    z-index: 1;
}

.image-content-block .row{
    display: flex;
    flex-wrap: wrap;
}

.image-content-block .row__reverse{
    flex-direction: row-reverse;
}

.image-content-block .image-content-block__item{
    width: 50%;
}

.image-content-block .image-content-block__item--content{
    padding: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.image-content-block .image-content-block__item--content img{
    width: 20%;
    max-width: 110px;
}

.image-content-block .image-content-block__item--image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-content-block .image-content-block__item h2{
    font-size: clamp(40px, 6.25vw - 6px, 54px);
    margin-top: 0;
}

.image-content-block .image-content-block__item h3{
    font-size: clamp(18px, 6.25vw - 6px, 18px);
    margin: 0;
}

.image-content-block .image-content-block__item *{
    color: #fff;
}

.image-content-block .image-content-block__item .worldwide-contacts select,
.image-content-block .image-content-block__item .worldwide-contacts select option{
    color: #000;
}

.image-content-block .image-content-block__item .worldwide-contacts button{
    display: inline-block;
    width: fit-content;
    padding: 15px 30px 15px 30px;
    background-color: #007e40;
    margin-top: 20px;
    border-radius: 0;
    font-size: 16px;
}

.image-content-block .image-content-block__item p{
    margin: 0;
    margin-bottom: 10px;
}

.image-content-block .image-content-block__faqs .whyuse-qa{
    padding-bottom: 5px;
    border-bottom: 1px solid #fff;
    margin-bottom: 25px;
}

.image-content-block .image-content-block__faqs .whyuse-question{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.image-content-block .image-content-block__faqs .whyuse-question img{
    width: 20px;
    height: auto;
    margin-left: 1em;
    transition: all 0.3s ease;
    max-width: 100%;
    rotate: 180deg;
}

.image-content-block .image-content-block__faqs .whyuse-question.down img{
    rotate: 0deg;
}

.image-content-block .btn{
    display: inline-block;
    width: fit-content;
    padding: 1.25rem 2rem;
    background-color: #007e40;
    margin-top: 20px;
}

.image-content-block__icon-list{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.image-content-block__icon-list img{
    width: 55px !important;
    height: 55px;
}

.archive .image-content-block .image-content-block__item--image img {
    object-position: left center;
}

@media screen and (max-width: 992px) {
    .image-content-block .image-content-block__item{
        width: 100%;
    }

    /* Columns stack and the coloured area is now full width, so the halves
       become halves of the full width. Swap no longer repositions. */
    .image-content-block__dots,
    .image-content-block__dots--swapped{
        left: 0;
        right: auto;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .image-content-block__dots--left,
    .image-content-block__dots--swapped.image-content-block__dots--left{   left: 0;   right: auto; width: 50%; height: 100%; top: 0; }
    .image-content-block__dots--right,
    .image-content-block__dots--swapped.image-content-block__dots--right{  left: 50%; right: auto; width: 50%; height: 100%; top: 0; }
    .image-content-block__dots--top,
    .image-content-block__dots--swapped.image-content-block__dots--top{    left: 0;   right: auto; width: 100%; top: 0;    height: 50%; }
    .image-content-block__dots--bottom,
    .image-content-block__dots--swapped.image-content-block__dots--bottom{ left: 0;   right: auto; width: 100%; top: auto; bottom: 0; height: 50%; }
}

@media screen and (max-width: 768px) {
    .image-content-block .image-content-block__item--content{
        padding: 30px 15px;
    }
}