/* awards-tools.css */

.aws {
	--aws-ttl-dsp: block; /* {friendly: 'Awards Title Display'} */
	--aws-cnt-dsp: block; /* {friendly: 'Awards Description Display'} */
	
	li {
		.fnt_t-itm {
			display: var(--aws-ttl-dsp);
		}
		
		.cnt-stl {
			display: var(--aws-cnt-dsp);
		}
		
		img {
			max-width: var(--awd-mx-wd-clc);
			max-height: var(--awd-mx-ht-clc);
		}
	}
}

.cms-content .aws {
	li {
		.fnt_t-itm, .cnt-stl {
			display: none;
		}
	}
}

/* faq-tools.css */
.faq {

    details {
      interpolate-size: allow-keywords;

      .tb-arw {
        transition: rotate 0.3s ease;
      }

      &[open] .tb-arw {
        rotate: 180deg;
      }

      &::details-content {
        height: 0;
        overflow: clip;
        transition: height 0.3s ease, content-visibility 0.3s ease allow-discrete;
      }

      &[open]::details-content {
        height: auto;
      }
    }
  }
/* banner-v2.css */
.bnr.v2 {
  --bnr-tls-pd-v-tp: 165; 
  --bnr-tls-pd-v-tp-mbl: 75; 
  --bnr-tls-pd-v-bt: 197; 
  --bnr-tls-pd-v-bt-mbl: 75; 
  --bnr-img-bg-o: 0.4;
  --fnt-t-k-ls: 0.61rem;
  
  
  picture.wave-deco {
      position: absolute;
      bottom: 0;
      width: 100%;
  }

  .bg img {
    object-fit: cover !important;
  }

}

/* awards-v1.css */
.aws.v1 {
    --awd-mx-wd: 200;
    --awd-mx-wd-mbl: 128;
    --awd-mx-wd-clc: calc((var(--awd-mx-wd-mbl) * 1px) + (var(--awd-mx-wd) - var(--awd-mx-wd-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));
}

/* content-v6.css */
.lt-bg + .lt-bg.cnt.v6,
.dk-bg + .dk-bg.cnt.v6 {
    .hex-dcr {
      
        &.tp {
            top: -4.444rem;
            left: calc(-1 * (var(--cnt-v6-hx-s-clc) * .45));
        }
    }
}

.cnt.v6 {
    --cnt-v6-arw-s: 0.5rem;
    --cnt-v6-hx-s: 268;
    --cnt-v6-hx-s-mbl:  16;
    --cnt-v6-hx-s-clc: calc((var(--cnt-v6-hx-s-mbl) * 1px) + (var(--cnt-v6-hx-s) - var(--cnt-v6-hx-s-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));

    .hex-dcr {
        position: absolute;
        width: var(--cnt-v6-hx-s-clc);
        height: var(--cnt-v6-hx-s-clc);
        z-index: 0;
        pointer-events: none;
        color: var(--fnt-t-1);

        svg {
            font-size: var(--cnt-v6-hx-s-clc);
        }

        &.tp {
            top: var(--pd-v);
            left: calc(-1 * (var(--cnt-v6-hx-s-clc) * .45));
        }

        &.bt {
            bottom: calc(-0.5 * (var(--cnt-v6-hx-s-clc) * .45));
            right: calc(-1 * (var(--cnt-v6-hx-s-clc) * .45));
        }
    }

    .lvl-1.active a {
        color: var(--link-alt);
    }

    /* Breadcrumb */
    .brdcrmb ol {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .brdcrmb li {
        gap: 0.5rem;
        font-weight: bold;
    }

    .brdcrmb li svg {
        width: 0.5rem;
        height: 0.5rem;
        rotate: -90deg;
        fill: currentColor;
        flex-shrink: 0;
    }

    .brdcrmb-cur {
        opacity: 0.6;
    }

    /* Feature list */
    .v6-feat {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .v6-feat li p {
        margin: 0;
    }

    .feat-icn {
        display: block;
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        border: 2px solid var(--bdr-clr);
        background-color: hsl(from var(--buttons) h s l / 0.15);
    }

    .lvl-2-arw {
        font-size: var(--cnt-v6-arw-s);
        flex-shrink: 0;
        color: var(--buttons);
    }
}

/* services-v7.css */
.srv.v7 {
    --v7-hover-base: var(--black);
    --v7-icn-path-1: var(--white);
    --v7-icn-path-2: var(--buttons);

    &[data-colors$="-light"] {
        --v7-hover-base: var(--white);
        --v7-icn-path-1: var(--buttons);
        --v7-icn-path-2: var(--white);
    }

    /* -- Column layout ------------------------------------- */

    .srv-v7-list {
        column-gap: var(--flx-gap);
        @container (width >= 50rem) {
            &.mx-2 {
                --itm-val: 47;
            }
        }
    }

    /* -- Service items ------------------------------------- */

    .srv-v7-item {
        padding: .22rem .44rem;
        text-decoration: none;
        color: var(--text-color);
        transition: background var(--g-trn-sp) var(--g-trn-tf);

        li:nth-child(n+3) > & {
            margin-top: .44rem;
        }

        strong {
            font-weight: 700;
        }

        svg:not(.srv-v7-dot) {
            font-size: 1.22rem;
            opacity: 0;
            transition-property: opacity;
            transition-duration: inherit;
            transition-timing-function: inherit;

            > path:first-child {
                fill: var(--v7-icn-path-1);
                opacity: 1;
            }

            > path:nth-child(2) {
                fill: var(--v7-icn-path-2);
            }
        }

        &:hover {
            background: hsl(from var(--v7-hover-base) h s l / 0.5);

            svg:not(.srv-v7-dot) {
                opacity: 1;
            }
        }
    }

    .srv-v7-dot {
        flex-shrink: 0;
        width: 1.0625rem;
        height: 0.9375rem;
        path {
            stroke: var(--buttons);
        }
    }
}

/* faqs-v3.css */
.faq.v3 {
    --faq-v3-hx-s: 268;
    --faq-v3-hx-s-mbl:  16;
    --faq-v3-hx-s-clc: calc((var(--faq-v3-hx-s-mbl) * 1px) + (var(--faq-v3-hx-s) - var(--faq-v3-hx-s-mbl)) * ((var(--vw_) - 320px) / (1920 - 320)));

    summary svg {
        font-size: 1.222rem;
        transition: rotate 0.3s ease;
        rotate: 90deg;

        > path:first-child {
            fill: var(--buttons) !important;
            opacity: 1;
        }
    }

    details[open] summary svg {
        rotate: 270deg;
    }

    .ans > * {
        overflow: hidden;
    }

    .faqs-v3-banner {
        display: grid;
        gap: 1.5rem;
        align-items: center;
        border-radius: var(--bdr-rds);

        @media screen and (min-width: 1280px) {
            grid-template-columns: auto 1fr;

            &.pd_h-30 {
                padding-inline: 2.22rem;
                
            }

            &.pd_v-30 {
                padding-block: 1.78rem;
            }
        }

    }

    @media screen and (min-width:1280px) {
        li {
            .pd_h-30 {
                padding-inline: 2.22rem;
                
            }

            .pd_v-30 {
                padding-block: 1.78rem;
            }
        }
    }

    .hex-dcr {
        position: absolute;
        z-index: 0;
        pointer-events: none;
        width: var(--faq-v3-hx-s-clc);
        height: var(--faq-v3-hx-s-clc);

        svg {
            font-size: var(--faq-v3-hx-s-clc);
        }
        

        &.tp {
            top: var(--pd-v);
            left: calc(-1 * (var(--faq-v3-hx-s-clc) * .45));

            svg {
                color: var(--buttons);
            }
        }

        &.bt {
            bottom: calc(var(--pd-v) * 2);
            right: calc(-1 * (var(--faq-v3-hx-s-clc) * .45));

            svg {
                color: var(--accent);
            }
        }
    }
}

/* reviews-v4-alt.css */
.rvw.v4-alt {
    --rvw-str-clr: var(--fnt-t-co);
    --rvw-str-s: 1.33rem;
    --flr-mrg-tp: 1.67rem;
    --fnt-pl-s: 1.33rem;

    .rvw-v4-bx {
        overflow: hidden;
    }

    .top-deco {
        position: absolute;
        top: 0;
    }
    
    .bottom-deco {
        position: absolute;
        bottom: 0;
    }

    .crd.bg-bx {
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }

    .bg img {
        opacity: 1;
        object-fit: cover !important;
    }

    .strs svg {
        color: var(--lt-callout);
    }

    [data-role="thumbList"] li button {
        border-radius: 50%;
    }

    .rvw-v4-list {
        display: flex;
    }

    [data-role="item"] {
        flex: 0 0 100%;
        width: 100%;
    }

    .svg-con {
        line-height: 1;
    }

    blockquote {
        width: 100%;
    }

    .g-icn {
        font-size: 1.33rem;
        flex-shrink: 0;
    }

    [data-role="thumbList"] {
        button {
            width: .78rem;
            height: .78rem;
        }
    }

    .crd button {
        background-color: lightblue;
    }

    /* Thumb dots: active = brand button color (ulk-bg acts as light context inside dk-bg) */
    .rvw-v4-bx [data-role="thumbList"] button {
        &:is(.s-active, :hover, :focus-visible) {
            --thmb-o: 1;
        }

        &.s-active {
            background-color: var(--buttons);
        }
    }
}

/* content-v8.css */
.cnt.v8 {

    .bg-bx {
        padding: 1.78rem 2.22rem;

        div.gp_sp-sml {
            gap: .44rem;
        }
            .btn.v2 {
            color: var(--primary);
            font-family: var(--fnt-t);
        }

        .btn-bx {
            margin-top: auto;
        }


    }



    .srv-grd {

        .bg-bx {
            padding: 1.78rem 2.22rem;
        }

        .btn-cnt {
            border-top: none;
            padding-top: 0;
            margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-20));
        }

        .bg-bx::after,
        .bg-bx::before {
            background: linear-gradient(264deg, #008BCA 2.16%, #076F9E 62.52%);
        }
    }

}