.feedIcon{
    margin-bottom: 20px;
    width: 80px;
}
.externalBox{
    border-radius: 15px;
    padding: 20px;
    height: 100%;
    box-shadow:0 0 10px 0px #ccccccad;
}
.aboutImg{
    box-shadow:0 0 10px 0px #ccccccad;
    border-radius: 15px;
    img{
        width: 100%;
    }
}
.vtsBox{
    height: 100%;
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    .vtsIcon{
        margin-bottom: 20px;
        img{
            height: 60px;
        }
    }
}
.lineCont{
    border-bottom: 1px solid #414142;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.centerIcon{
    margin: 0 auto;
}
.imgCont{
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
}

/* --------------------------------------------------------------------------------
   An Iconic Brand - responsive
   .imgCont floats the copy over the banner. The banner is a fixed 1.67 ratio, so its
   height falls away faster than the copy shrinks; below lg the copy no longer fits
   inside it and the overlay has to unstack.
-------------------------------------------------------------------------------- */

/* wider copy block = fewer lines = more clearance, while staying left of the
   "Aquaguard / FORBES" lockup baked into the banner at ~69% across */
@media (max-width: 1199px){
    .imgCont .textWrap.wid_50{
        width: 62%;
    }
}

@media (max-width: 991px){
    .imgCont{
        position: static;
        padding-top: 40px;
    }
    .imgCont .textWrap.wid_50{
        width: 100%;
    }
    .about-eureka{
        .section_1{
            .row{
                flex-direction: column-reverse;
                .aboutImg{
                    margin-bottom: 20px;
                }
            }
        }
    }
}

@media (max-width: 575px){
    .imgCont{
        padding-top: 30px;
    }
    .imgCont .subText p{
        font-size: 20px;
    }
}

/* Diversified Product Portfolio */
.portfolioStage{
    position: relative;
}
.portfolioFig{
    position: relative;
    display: block;
    width: 100%;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 0 10px 0px #ccccccad;
    margin: 0 auto;
    img{
        width: 100%;
        height: auto;
        display: block;
    }
}
/* full-screen image on desktop: full width, one viewport tall, cover-cropped.
   JS remaps the hotspots so they stay glued to the products despite the crop */
@media (min-width: 992px){
    .portfolioOverlay .portfolioFig{
        height: calc(100vh - 80px);
    }
    .portfolioOverlay .portfolioFig img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
/* blinking hotspot on each product inside the image */
.portfolioSpot{
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--teal);
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.3s ease, background-color 0.3s ease;
    &::after{
        content: '';
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid var(--teal);
        opacity: 0.7;
        animation: portfolioPulse 2s ease-out infinite;
    }
    &:hover,
    &:focus-visible,
    &.is-active{
        transform: scale(1.25);
        background-color: var(--blue);
    }
    &:focus-visible{
        outline: 2px solid var(--blue);
        outline-offset: 4px;
    }
}
@keyframes portfolioPulse{
    0%   { transform: scale(0.5); opacity: 0.9; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* thin line linking the active card to its hotspot (desktop overlay only) */
.portfolioLink{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
    display: none;
    .portfolioLinkPath{
        stroke: rgba(255, 255, 255, 0.85);
        stroke-width: 1.5;
        stroke-linecap: round;
    }
}

/* below lg every box is simply stacked and visible; the hovered-only reveal
   lives in the .portfolioOverlay desktop rules */
.portfolioDetail{
    position: relative;
    margin-top: 30px;
}
/* .portfolioOverlay variant (diversified-product-portfolio.html): cards float
   over the image, each anchored near its own hotspot, tied to it with the
   connector line - first two on the left, the rest on the right */
@media (min-width: 992px){
    .portfolioLink{
        display: block;
    }
    .portfolioOverlay .portfolioDetail{
        position: absolute;
        inset: 0;
        margin: 0;
        min-height: 0;
        z-index: 2;
        pointer-events: none;
    }
    .portfolioOverlay .portfolioDetail .portfolioBox,
    .portfolioOverlay .portfolioDetail .portfolioBox.is-active{
        position: absolute;
        width: min(340px, 42%);
        margin-bottom: 0;
        pointer-events: auto;
        padding: 22px 25px;
        p{
            font-size: 16px;
            margin-bottom: 12px;
        }
        .customList li{
            font-size: 16px;
        }
    }
    /* only the hovered / tapped hotspot's card shows on the overlay */
    .portfolioOverlay .portfolioDetail .portfolioBox{
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    }
    .portfolioOverlay .portfolioDetail .portfolioBox.is-active{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        box-shadow: 0 12px 30px -10px rgba(0, 108, 183, 0.35);
    }
    .portfolioDetail #pfBox1{ left: 2.5%; top: 26%; }
    .portfolioDetail #pfBox2{ left: 2.5%; top: auto; bottom: 5%; }
    .portfolioDetail #pfBox3{ left: auto; right: 2.5%; top: 4%; }
    .portfolioDetail #pfBox4{ left: auto; right: 2.5%; top: 30%; }
    .portfolioDetail #pfBox5{ left: auto; right: 2.5%; top: auto; bottom: 5%; }
}
@media (min-width: 1400px){
    .portfolioOverlay .portfolioDetail .portfolioBox,
    .portfolioOverlay .portfolioDetail .portfolioBox.is-active{
        width: 380px;
    }
}
.portfolioBox{
    position: relative;
    width: 100%;
    background-color: #fff;
    border-radius: 15px;
    padding: 25px 25px 25px 30px;
    box-shadow: 0 0 10px 0px #ccccccad;
    p{
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 15px;
    }
    &:not(:last-child){
        margin-bottom: 20px;
    }
}

@media (max-width: 767px){
    .portfolioSpot{
        width: 15px;
        height: 15px;
        margin: -8px 0 0 -8px;
        border-width: 2px;
        &::after{
            inset: -6px;
        }
    }
    .portfolioDetail{
        margin-top: 20px;
    }
}

@media (max-width: 575px){
    .portfolioBox{
        padding: 20px 20px 20px 25px;
    }
}

/* --------------------------------------------------------------------------------
   About Eureka Forbes - responsive
-------------------------------------------------------------------------------- */

/* the row gap alone spaces the values tiles - the heading's own margin would double it */
.about-eureka .iconBox h4{
    margin-bottom: 0;
}

/* six tiles across leaves little room, so the labels step down before the grid reflows */
@media (max-width: 1599px){
    .about-eureka .iconBox h4{
        font-size: 18px !important;
        line-height: 1.35;
    }
}

/* the intro image only has room to track the copy once the two sit side by side */
@media (max-width: 991px){
    .about-eureka .aboutImg.sticky{
        position: static !important;
    }
}

@media (max-width: 767px){
    .about-eureka .vtsBox{
        padding: 25px 20px;

        .vtsIcon{
            margin-bottom: 15px;
        }
    }
}

@media (max-width: 575px){
    .about-eureka .vtsBox{
        padding: 22px 18px;

        .vtsIcon img{
            height: 50px;
        }
        h4{
            font-size: 20px !important;
        }
    }

    /* the values tiles run two-up on a phone, so the icon and label come down a step */
    .about-eureka .externalIcon{
        width: 76px;
        height: 76px;
        padding: 12px;
        border-radius: 16px;
    }
    .about-eureka .iconBox h4{
        font-size: 16px !important;
        line-height: 1.35;
    }
}

/* --------------------------------------------------------------------------------
   About This Integrated Annual Report - responsive
-------------------------------------------------------------------------------- */

/* the section headings carry .fz_32, which never steps down on its own and ends up
   larger than the page title once common.css shrinks h2 */
@media (max-width: 991px){
    .about h3.fz_32{
        font-size: 26px !important;
    }
}

@media (max-width: 575px){
    .about h3.fz_32{
        font-size: 22px !important;
    }
    .about .subText p{
        font-size: 20px;
    }
    .about .feedBackBox{
        padding: 22px;
    }
    .about .externalBox{
        padding: 18px;
    }
    .about .externalIcon{
        width: 80px;
        height: 80px;
        padding: 12px;
    }
    .about .externalBox h4{
        font-size: 19px !important;
    }
}