/* ====== plus and close icon ====== */

    :root {
        --btn-round-size: clamp(24px, 5vw, 32.5px);
        --btn-round-rotate: 135deg;
        /* background / icon color pairs */
        --btn-bg-default: #ffffff;
        /* default button background (white) */
        --btn-icon-default: #8138E0;
        /* default icon (plus) color */
        --btn-bg-active: #8138E0;
        /* active button background */
        --btn-icon-active: #ffffff;
        /* active icon (close) color */
        /* legacy aliases used by existing keyframes */
        --btn-default-color: var(--btn-bg-default);
        --btn-close-color: var(--btn-bg-active);
        --Champion: #5A287D;
        --sand: #FFEAE6;

        /* Animation timing variables */
        --anim-duration: 0.8s;
        --anim-gap: 0.5s;
        --anim-initial-delay: 1s;
        --anim-easing: linear;
        --anim-item1-delay: calc(var(--anim-initial-delay));
        --anim-item2-delay: calc(var(--anim-initial-delay) + var(--anim-gap));
        --anim-item3-delay: calc(var(--anim-initial-delay) + 2 * var(--anim-gap));
        --anim-total-end-time: calc(var(--anim-initial-delay) + 3 * var(--anim-gap));
        --anim-title-duration: var(--anim-duration);
        --anim-middle-duration: calc(var(--anim-total-end-time) - var(--anim-initial-delay));
        --anim-bottom-duration: var(--anim-duration);
        --anim-bottom-delay: calc(var(--anim-total-end-time) - var(--anim-bottom-duration));
    }

    .sr-btn-round {
        width: var(--btn-round-size);
        height: var(--btn-round-size);
        border-radius: var(--btn-round-size);
        background-color: var(--btn-bg-default);
        border: 2px solid var(--btn-icon-default);
        /* margin: auto; */
        margin-top: clamp(6px, 1.2vw, 10px);
        transition: background-color 0.28s ease, border-color 0.28s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        /* color: var(--btn-icon-default); */
    }

    .sr-btn-round:hover {
        background-color: var(--btn-bg-active);
        border-color: var(--btn-bg-default);
    }

    .sr-btn-round-animation {
        animation: fadeInUp 0.6s ease forwards;
    }

    .btn-square {
        width: var(--btn-round-size);
        height: var(--btn-round-size);
        background-color: var(--btn-default-color);
    }

    .sr-close-icon {
        position: relative;
        display: inline-block;
        width: calc(var(--btn-round-size) / 2);
        height: calc(var(--btn-round-size) / 2);
        overflow: hidden;
    }

    .sr-close-icon::before,
    .sr-close-icon::after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -1px;
        background: var(--btn-icon-default);
        transition: transform 0.28s ease, background-color 0.28s ease;
    }

    .sr-btn-round:hover .sr-close-icon::before,
    .sr-btn-round:hover .sr-close-icon::after {
        background: var(--btn-icon-active);
    }

    .sr-close-icon::before {
        transform: rotate(0deg);
    }

    .sr-close-icon::after {
        transform: rotate(90deg);
    }

    .sr-btn-round.closeButton .sr-close-icon::before,
    .sr-btn-round.closeButton .sr-close-icon::after {
        background: var(--btn-icon-active);
    }

    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    @keyframes plusButton {
        from {
            transform-origin: center;
            transform: rotate3d(0, 0, 1, var(--btn-round-rotate));
            background-color: var(--btn-close-color);
        }

        to {
            transform-origin: center;
            transform: none;
            background-color: var(--btn-default-color);
        }
    }

    .plusButton {
        animation: plusButton 1s !important;
        opacity: 1 !important;
    }

    @keyframes closeButton {
        from {
            transform-origin: center;
            transform: none;
            background-color: var(--btn-default-color);
        }

        to {
            transform-origin: center;
            transform: rotate3d(0, 0, 1, var(--btn-round-rotate));
            background-color: var(--btn-close-color);
        }
    }

    .closeButton {
        animation: closeButton 1s forwards !important;
        background-color: var(--btn-bg-active);
        border-color: var(--btn-icon-active);
        opacity: 1 !important;
    }

    @keyframes circleShape {
        from {
            transform-origin: center;
            background-color: var(--btn-default-color);
        }


        to {
            transform-origin: center;
            transform: rotate3d(0, 0, 1, var(--btn-round-rotate));
            background-color: var(--btn-close-color);
            border-radius: var(--btn-round-size);
        }
    }

    .circleShape {
        animation-name: circleShape;
    }

    @keyframes squareShape {
        from {
            transform-origin: center;
            transform: rotate3d(0, 0, 1, var(--btn-round-rotate));
            background-color: var(--btn-close-color);
            border-radius: var(--btn-round-size);
        }

        to {
            transform-origin: center;
            background-color: var(--btn-default-color);
            border-radius: 0;
        }
    }

    .squareShape {
        animation-name: squareShape;
    }

    /* Clsoe and Pluse button style End */
    :root {
        --divWidthAnimation: width 400ms linear;
    }

    #sustainability-hexagon {
        background-color: var(--sand);
        color: var(--Champion);
    }

    .hexagon-container {
        max-height: 699.47px;
        display: flex;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .left-div-container {
        width: 36.887%;
        background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/left-more.svg') no-repeat right;
        /* background-size: contain; */
        /* overflow: hidden; */
        /* display: flex; */
        transition: var(--divWidthAnimation);
        border-radius: 10px 0px 0px 10px;
    }

    .left-div-container.left-expanded {
        /* background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/left-more.svg') no-repeat right; */
        /* background-size: contain; */
        width: 49.076% !important;
    }

    .left-div-container.left-shrunk {
        width: 25.645% !important;
    }

    .left-div-container.left-shrunk .left-div-content {
        opacity: 0;
    }

    .right-div-container {
        width: 36.887%;
        background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/right-more.svg') no-repeat left;
        /* background-size: contain; */
        overflow: hidden;
        transition: var(--divWidthAnimation);
        border-radius: 0px 10px 10px 0px;
    }

    .right-div-container.right-shrunk {
        /* background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/right-more.svg') no-repeat left; */
        width: 25.645% !important;
        /* background-size: cover; */
    }

    .right-div-container.right-shrunk .right-div-content {
        opacity: 0;
    }

    .middle-div-container {
        width: 26.226%;
    }

    .middle-div-background {
        aspect-ratio: 1.124;
        /* clip-path: shape(from 19.99% 100%,curve to 12.07% 94.86% with 16.73% 100%/13.7% 98.03%,line to 1.22% 73.75%,curve to 1.22% 63.47% with -0.41% 70.58%/-0.41% 66.64%,line to 6.66% 52.9%,line to 29.07% 9.35%,line to 31.23% 5.14%,curve to 39.15% 0% with 32.85% 1.97%/35.89% 0%,hline to 60.84%,curve to 68.76% 5.14% with 64.1% 0%/67.13% 1.97%,line to 72.49% 12.4%,line to 92.81% 51.85%,line to 98.78% 63.48%,curve to 98.78% 73.76% with 100.41% 66.65%/100.41% 70.59%,line to 87.93% 94.86%,curve to 80.01% 100% with 86.31% 98.03%/83.27% 100%,hline to 29.5%,vline to 100%,hline to 19.99%,line to 19.99% 100%,close); */
        background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/middle-div.svg') no-repeat center;
        /* border: 1px solid black; */
        width: 232%;
        position: relative;
        /* z-index: 1000; */
        /* top: 29px; */
        left: -208px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* animated open/close for panels (replaces display:none) */
    .left-open-div,
    .right-open-div,
    .middle-open-div {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform-origin: top;
        transition: max-height 400ms ease, opacity 300ms ease, transform 300ms ease;
        margin-top: 30px;
    }

    .left-open-div.open,
    .right-open-div.open,
    .middle-open-div.open {
        max-height: 1000px;
        opacity: 1;
        transform: none;
    }

    .left-div-content {
        /* width: 56.31%; */
        width: clamp(240px, 85vw, 304px);
        margin-left: clamp(9px, 1.1vw, 20px);
        margin-top: 33%;
        transform: translateY(0);
        transition: transform 500ms ease;
    }

    .right-div-content {
        /* width: 56.31%; */
        width: clamp(240px, 85vw, 304px);
        margin-right: clamp(9px, 1.1vw, 20px);
        float: right;
        text-align: right;
        margin-top: 33%;
        transform: translateY(0);
        transition: transform 500ms ease;
    }

    .content-container {
        width: 60%;
    }

    .content-container h3 {
        color: #000000;
    }

    .sr-hex[data-target="center"] {
        background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/center_background.svg');
        z-index: 10;
        transform: translateY(12%);
        align-items: center;
        /* position: absolute; */
    }

    .sr-hex[data-target="Upper"] {
        background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/growth_background-cut.svg');
        transform: translate(0%, -38%);
        align-items: flex-start;
        /* top: 0px; */
    }

    .sr-hex[data-target="lower-left"] {
        background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/sr_risk_background.svg');
        transform: translate(-38%, 37%);
    }

    .sr-hex[data-target="lower-right"] {
        background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/simplification_background.svg');
        transform: translate(37.5%, 36%);
    }

    .sr-hex {
        width: 374px;
        /* height: 330px; */
        aspect-ratio: 374 / 330;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: absolute;
    }

    .sr-hex img {
        width: clamp(32px, 5vw, 55px) !important;
        height: auto;
    }

    .middle-div-content h2 {
        color: #ffffff;
        font-size: clamp(1rem, 3.5vw, 1.625rem);
        line-height: clamp(1.2rem, 4vw, 1.875rem);
        font-family: 'knilebold';
        text-align: center;
        gap: 10px;
        /* padding: clamp(6px, 1.2vw, 10px) clamp(16px, 3.5vw, 30px); */
        width: 68%;
        letter-spacing: -1%;
    }

    .middle-open-div {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform-origin: top;
        transition: max-height 400ms ease, opacity 300ms ease, transform 300ms ease;
        /* font-size: 1.125rem; */
        line-height: clamp(1rem, 1.8vw, 1.25rem);
        letter-spacing: -1%;
        font-size: clamp(0.5rem, 3.4vw, 1.25rem) !important;
    }

    .middle-open-div.open {
        max-height: 1000px;
        opacity: 1;
        transform: none;
    }

    .middle-div-bottom {
        position: absolute;
        text-align: center;
        display: flex;
        flex-direction: column;
        left: 32%;
        width: 34%;
    }

    .middle-div-bottom h4 {
        background: var(--sand);
        /* font-size: clamp(1rem, 2vw, 1.375rem); */
        /* font-size: 1.375rem; */
        /* line-height: clamp(1.125rem, 2.2vw, 1.5rem); */
        line-height: 1.5rem;
        color: var(--Champion);
        letter-spacing: -1%;
        font-size: clamp(1rem, 4.1vw, 1.375rem) !important;
    }

    .middle-div-bottom .sr-btn-round {
        margin: auto;
    }

    .hexagon-image {
        display: flex;
        align-items: center;
        gap: clamp(6px, 1.2vw, 10px);
        margin: clamp(8px, 1.5vw, 12.5px) 0px;
    }

    .middle-div-content {
        color: #ffffff;
        font-weight: 400;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        font-size: 1rem;
        padding: 4px 12px;
    }

    .middle-div-content p {
        text-align: center;
        margin: 0px;
        max-height: 0px;
        opacity: 0;
        transition: max-height 400ms ease, opacity 300ms ease, transform 300ms ease;
        font-size: clamp(0.875rem, 1.6vw, 1.125rem);
        line-height: clamp(0.875rem, 1.8vw, 1rem);
        width: 70%;
        letter-spacing: -1%;
    }

    .middle-div-content.open p {
        max-height: 1000px;
        opacity: 1;
    }

    .left-open-div {
        width: clamp(240px, 85vw, 263px);
    }

    .left-div-content.open {
        transform: translateY(-17%);
        /* tune % to match desired move-up visually */
    }

    .left-div-content.open .left-open-div {
        max-height: 1000px;
        opacity: 1;
        transform: none;
    }

    .left-div-title {
        font-size: clamp(1.25rem, 3.5vw, 2rem);
        line-height: clamp(1.5rem, 4vw, 2.125rem);
        font-family: 'knilebold';
    }

    /* Hexagon container transformation when left is expanded */
    .hexagon-container.left-expanded {
        transition: all 500ms ease;
    }

    .hexagon-container.left-expanded .middle-div-container {
        /* transform: translateX(49%); */
        transition: transform 500ms ease;
    }

    /* Hexagon container transformation when right is expanded (mirror of left) */
    .hexagon-container.right-expanded {
        transition: all 500ms ease;
    }

    .hexagon-container.right-expanded .middle-div-container {
        /* transform: translateX(-45%); */
        transition: transform 500ms ease;
    }

    .right-div-container.right-expanded {
        /* background: url('/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/right-more.svg') no-repeat left; */
        width: 49.076% !important;
    }

    .right-div-content.open {
        transform: translateY(-17%);
    }

    .right-div-content.open .right-open-div {
        max-height: 1000px;
        opacity: 1;
        transform: none;
    }

    .right-open-div {
        width: clamp(240px, 85vw, 304px);
        float: right;
        align-items: flex-end;
    }

    .ar25-sr-hexagon-module {
        background-color: var(--sand);
    }

    .sr-paragraph-container {
        width: clamp(90%, 92vw, 80%);
    }

    .sr-paragraph-container>*:not(:first-child) {
        margin-top: clamp(1rem, 2.5vw, 1.75rem);
    }

    .sr-paragraph-container>* {
        font-size: clamp(1rem, 2.2vw, 1.625rem);
        line-height: clamp(1.125rem, 2.5vw, 1.75rem);
    }

    .left-img-cap {
        font-size: clamp(1rem, 2vw, 1.375rem);
        line-height: clamp(1.125rem, 2.2vw, 1.5rem);
        color: var(--Champion);
        font-family: 'RNHouseSansW01Bold';
        letter-spacing: -1%;
    }

    .right-div-title {
        font-size: clamp(1.25rem, 3.5vw, 2rem);
        line-height: clamp(1.5rem, 4vw, 2.125rem);
        font-family: 'knilebold';
    }

    .right-containt-wrapper>* {
        font-size: 1.375rem;
        line-height: 1.5rem;
        color: var(--Champion);
        font-family: 'RNHouseSansW01Bold';
        margin: clamp(12px, 2vw, 20px) 0px;
    }

    .container-margin-bottom {
        margin-bottom: 100px;
    }

    .noJsSRhexagon {

        .left-open-div,
        .right-open-div,
        .middle-open-div {
            max-height: 1000px;
            opacity: 1;
            transform: none;
            display: flex;
            flex-direction: column;
        }

        .left-div-container {
            width: 38.5%;
            background: url(/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/left-div-NoAnimation.svg) no-repeat right;
            /* aspect-ratio: 0.669; */
            /* clip-path: shape(from 46.95% 74.89%, curve to 46.95% 63.78% with 44% 71.46% / 44% 67.21%, curve to 99.64% 2.69% with 46.95% 63.78% / 89.16% 14.82%, curve to 97.32% 0% with 100.67% 1.5% / 99.38% 0%, line to 2.21% 0%, curve to 0% 1.48% with 0.99% 0% / 0% 0.66%, vline to 98.52%, curve to 2.21% 100% with 0% 99.34% / 0.99% 100%, hline to 64.37%, curve to 66.66% 97.28% with 66.46% 100% / 67.74% 98.47%, curve to 46.95% 74.89% with 60.77% 90.77% / 46.95% 74.89%, close); */
            /* background: white; */
        }

        .right-div-container {
            width: 38.5%;
            background: url(/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/right-div-NoAnimation.svg) no-repeat left;
            /* aspect-ratio: 0.669; */
            /* clip-path: shape(from 53.05% 74.89%, curve to 53.05% 63.78% with 56% 71.46%/56% 67.21%, curve to 0.36% 2.69% with 53.05% 63.78%/10.84% 14.82%, curve to 2.68% 0% with -0.67% 1.5%/0.62% 0%, hline to 97.79%, curve to 100% 1.48% with 99.01% 0%/100% 0.66%, vline to 98.52%, curve to 97.79% 100% with 100% 99.34%/99.01% 100%, hline to 35.63%, curve to 33.34% 97.28% with 33.54% 100%/32.26% 98.47%, curve to 53.04% 74.89% with 39.23% 90.77%/53.04% 74.89%); */
            /* background: white; */
        }

        .middle-div-background {
            background: url(/~/media/Images/R/RBS-IR-V2/annual-report/ar-2025/strategic-hexagon/SR-Hexagon/middle-div-NoAnimation.svg) no-repeat;
            background-position-y: top;
            background-position-x: center;
            background-size: contain;
            max-width: 598px;
            /* max-height: 533px; */
            aspect-ratio: 598 / 533;
            left: -60%;
            /* margin: auto; */
        }

        .sr-hex {
            width: 52%;
        }

        .left-div-content,
        .right-div-content {
            margin-top: 10%;
        }

        .sr-btn-round {
            display: none;
        }

        .right-div-title,
        .left-div-title {
            font-size: 1.625rem;
            line-height: 1.75rem;
            color: white;
            font-family: 'knilesemibold';
            letter-spacing: -1%;
        }

        .right-div-content,
        .left-div-content {
            width: auto;
        }

        .sr-div-Title {
            width: clamp(180px, 73%, 320px);
            background-color: var(--Champion);
            color: white;
            border-radius: 6px;
            padding: 8px;
        }

        .hexagon-image {
            width: 229px;
            height: 76px;
            border: 1px dashed var(--Champion);
            padding: 8px;
            border-radius: 6px;
        }

        .left-img-cap {
            /* font-size: 0.875rem; */
            font-size: clamp(0.5rem, 3.3vw, 0.875rem);
            line-height: 1rem;
        }

        .middle-div-container {
            width: 23%;
        }

        .right-content-border {
            border: 1px dashed var(--Champion);
            padding: clamp(6px, 1.5vw, 8px);
            border-radius: 6px;
            width: clamp(180px, 18vw, 229px);
            float: right;
            position: relative;
            margin: clamp(10px, 1.5vw, 12.5px) 0px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .right-containt-wrapper {
            background-color: var(--sand);
            border-radius: 6px;
            padding: clamp(6px, 1.5vw, 8px);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .right-containt-wrapper>* {
            font-size: 0.875rem;
            font-family: 'RNHouseSansW01Bold';
            line-height: 1rem;
            margin: 0px;
        }

        .middle-div-content p {
            max-height: 1000px;
            opacity: 1;
            /* font-size: 0.875rem; */
            font-size: clamp(0.5rem, 2.3vw, 0.875rem);
            line-height: normal;
            width: 70%;
        }

        .middle-div-content h2 {
            /* font-size: 1.625rem; */
            font-family: 'knilesemibold';
        }

        #right-hangingLine::before {
            content: '';
            position: absolute;
            width: 2px;
            height: clamp(20px, 3vw, 25px);
            border-left: 2px dotted var(--Champion);
            /* top: -25px; */
            top: calc(-1 * clamp(20px, 3vw, 25px));
            left: 50%;
        }

        #right-hangingLine::after {
            content: '';
            position: absolute;
            /* bottom: -25px; */
            bottom: calc(-1 * clamp(20px, 3vw, 25px));
            /* left: -50%; */
            left: 50%;
            /* transform: translateX(-50%); */
            width: 2px;
            height: clamp(20px, 3vw, 25px);
            border-left: 2px dotted var(--Champion);
        }

        .sr-div-Title.sr-left-fade {
            opacity: 0;
            /* transform: translateX(-50px); */
        }

        .sr-div-Title.sr-right-fade {
            opacity: 0;
        }
    }

    .scroll-animated .sr-div-Title.sr-left-fade {
        animation: fadeInLeft var(--anim-title-duration) var(--anim-easing) var(--anim-initial-delay) forwards;
    }

    .scroll-animated .sr-div-Title.sr-right-fade {
        animation: fadeInRight var(--anim-title-duration) var(--anim-easing) var(--anim-initial-delay) forwards;
    }

    /* Animation for middle-div-content (center) */
    .scroll-animated .middle-div-content.sr-center-fade {
        opacity: 0;
        animation: fadeInOpacity var(--anim-middle-duration) var(--anim-easing) var(--anim-initial-delay) forwards;
    }

    /* Animation for middle-div-bottom (fade in from bottom) */
    .scroll-animated .middle-div-bottom.sr-bottom-fade {
        opacity: 0;
        animation: fadeInUp var(--anim-bottom-duration) var(--anim-easing) var(--anim-bottom-delay) forwards;
    }

    /* Staggered animation for middle-div sr-hex images (zoom fade) */
    .scroll-animated .middle-div-background .sr-hex:not([data-target="center"])>div>img {
        opacity: 0;
        animation: fadeInZoom var(--anim-middle-duration) var(--anim-easing) var(--anim-initial-delay) forwards;
    }

    /* Staggered animation for left-open-div children */
    .scroll-animated .left-open-div .hexagon-image {
        opacity: 0;
        animation: fadeInLeft var(--anim-duration) var(--anim-easing) forwards;
    }

    .scroll-animated .left-open-div .hexagon-image:nth-child(1) {
        animation-delay: var(--anim-item1-delay);
    }

    .scroll-animated .left-open-div .hexagon-image:nth-child(2) {
        animation-delay: var(--anim-item2-delay);
    }

    .scroll-animated .left-open-div .hexagon-image:nth-child(3) {
        animation-delay: var(--anim-item3-delay);
    }

    /* Staggered animation for right-open-div children */
    .scroll-animated .right-open-div .right-content-border {
        opacity: 0;
        animation: fadeInRight var(--anim-duration) var(--anim-easing) forwards;
    }

    .scroll-animated .right-open-div .right-content-border:nth-child(1) {
        animation-delay: var(--anim-item1-delay);
    }

    .scroll-animated .right-open-div .right-content-border:nth-child(2) {
        animation-delay: var(--anim-item2-delay);
    }

    .scroll-animated .right-open-div .right-content-border:nth-child(3) {
        animation-delay: var(--anim-item3-delay);
    }

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-100px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(100px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes fadeInZoom {
        from {
            opacity: 0;
            scale: 0.5;
        }

        to {
            opacity: 1;
            scale: 1;
        }
    }

    @keyframes fadeInOpacity {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10rem);
        }

        to {
            opacity: 1;
            transform: translateY(-1rem);
        }
    }

    .right-div-container .sr-div-Title {
        float: right;
    }

    @media (max-width: 405px) {
        .sr-hex[data-target="center"] {
            width: 60%;
        }

        .middle-div-bottom {
            width: 60% !important;
            left: 20% !important;
            transform: translateY(-10px) !important;
        }
    }

    /* ====== Responsive Design - Tablet (max-width: 991px) ====== */
    @media (max-width: 991px) {
        .hexagon-container {
            flex-direction: row;
            flex-wrap: wrap;
            height: auto;
            max-height: none;
            margin-top: 30px;
            margin-bottom: 30px;
            gap: 2%;
            align-items: stretch;
        }

        .left-div-container {
            width: 100% !important;
            border-radius: 10px;
            order: 1;
            background: white !important;
        }

        .left-div-container.left-expanded {
            width: 50% !important;
        }

        .left-div-container.left-shrunk {
            width: 50% !important;
        }

        .middle-div-container {
            width: 100% !important;
            margin-bottom: 20px;
            margin-top: 20px;
            order: 2;
        }

        .middle-div-background {
            width: 100%;
            left: 0;
            left: 0px !important;
            margin: auto;
        }

        .right-div-container {
            width: 100% !important;
            border-radius: 10px;
            order: 3;
            background: white !important;
        }

        .right-div-container.right-expanded {
            width: 50% !important;
        }

        .right-div-container.right-shrunk {
            width: 50% !important;
        }

        .left-div-content,
        .right-div-content {
            margin-top: 20px;
            width: 100%;
            float: none;
            margin: 10px !important;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .left-open-div,
        .right-open-div {
            width: 100%;
            max-width: none;
            margin-top: 10px;
        }

        .sr-btn-round {
            width: 30px;
            height: 30px;
            --btn-round-size: 30px;
            margin-top: 15px;
        }

        .sr-close-icon {
            width: calc(var(--btn-round-size) / 2.2);
            height: calc(var(--btn-round-size) / 2.2);
        }

        .middle-div-content h2 {
            /* font-size: 1.5rem; */
            /* line-height: 1.75rem; */
            width: 70%;
            padding: 0px;
            line-height: normal;
            width: 70%;
        }

        .left-div-title,
        .right-div-title {
            font-size: 1.5rem;
            line-height: 1.75rem;
        }

        .sr-paragraph-container {
            width: 100%;
        }

        .sr-hex {
            width: 200px;
            aspect-ratio: 374 / 330;
        }

        .middle-div-content p {
            width: 100%;
            line-height: normal;
        }

        .noJsSRhexagon.hexagon-container {
            height: auto;
        }

        .middle-div-bottom {
            width: 55%;
            left: 23%;
            position: relative;
        }

        .sr-div-Title {
            width: auto !important;
            text-align: center;
        }

        .left-open-div {
            justify-content: center;
            flex-direction: row !important;
            gap: 10px;
            align-items: stretch !important;
        }

        .hexagon-image {
            flex-direction: column;
            height: auto !important;
            text-align: center;
        }

        .right-content-border {
            width: 100% !important;
        }

        .right-containt-wrapper {
            width: 100%;
        }

        .sr-hex img {
            width: clamp(32px, 8vw, 55px) !important;
        }

        .middle-open-div {
            margin-top: 10px;
            line-height: normal;
        }

        .container-margin-bottom {
            margin-bottom: 0px;
        }
    }

    /* ====== Responsive Design - Mobile (max-width: 768px) ====== */
    @media (max-width: 480px) {
        .hexagon-container {
            flex-direction: column;
            height: auto;
            max-height: none;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .left-div-container {
            width: 100% !important;
            border-radius: 10px;
            margin-bottom: 20px;
            order: 1;
        }

        .left-div-container.left-expanded {
            width: 100% !important;
        }

        .left-div-container.left-shrunk {
            width: 100% !important;
        }

        .middle-div-container {
            width: 100% !important;
            margin-bottom: 20px;
            order: 2;
        }

        .right-div-container {
            width: 100% !important;
            border-radius: 10px;
            order: 3;
        }

        .right-div-container.right-expanded {
            width: 100% !important;
        }

        .right-div-container.right-shrunk {
            width: 100% !important;
        }

        .sr-btn-round {
            width: 28px;
            height: 28px;
            --btn-round-size: 28px;
            margin-top: 15px;
        }

        .noJsSRhexagon.hexagon-container {
            height: auto;
        }

        .sr-div-Title {
            float: none !important;
            margin: auto;
        }

        .right-open-div {
            align-items: center;
        }

        .left-open-div {
            align-items: center;
        }
    }

    @media all and (min-width:992px) and (max-width:1212px) {

        .right-div-title,
        .left-div-title {
            font-size: 1.225rem !important;
        }

        .left-open-div {
            width: 60%;
        }

        .hexagon-image {
            width: 73% !important;
        }

        .left-div-container {
            background-position: 63% 82% !important;
        }

        .right-div-container {
            background-position: 17% 83% !important;
        }

        .sr-hex[data-target="center"] {
            min-width: 310px;
        }

        .left-open-div,
        .right-open-div,
        .middle-open-div {
            margin-top: 10px;
        }

        .right-content-border {
            margin: 7px 0 !important;
        }
    }