/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.vision {

    position: relative;

    width: 100%;
    min-height: 600px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #f7f8fa;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.vision-bg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

    pointer-events: none;

    opacity: 0.98;
}


/* =========================================================
   LEFT PANEL
========================================================= */

.vision-left {

    position: relative;

    width: 31%;
    height: 560px;

    background: #232A76;

    overflow: hidden;

    z-index: 2;

    opacity: 0;

    transform: translateX(-100px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


/* =========================================================
   WHITE GEOMETRIC SHAPE
========================================================= */

.why-geometry {

    position: absolute;

    inset: 0;

    overflow: hidden;

    background: #232A76;
}


/*
   Main white geometric shape

   This creates the large white
   diamond / architectural shape
   from your reference.
*/

.why-geometry::before {

    content: "";

    position: absolute;

    width: 145%;

    height: 145%;

    left: -22.5%;
    top: -22.5%;

    background: #ffffff;

    clip-path: polygon(
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
    );

}


/* =========================================================
   OLIVE / GOLD OUTER ACCENT
========================================================= */

.why-geometry::after {

    content: "";

    position: absolute;

    width: 151%;
    height: 151%;

    left: -25.5%;
    top: -25.5%;

    background: #8b8f00;

    clip-path: polygon(
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
    );

    z-index: -1;
}


/* =========================================================
   INNER WHITE DIAMOND
========================================================= */

.why-inner {

    position: absolute;

    top: 9%;
    left: 9%;

    width: 82%;
    height: 82%;

    background: #ffffff;

    clip-path: polygon(
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
    );

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    text-align: center;

    z-index: 5;

    padding: 70px;
}


/* =========================================================
   INNER THIN BORDER
========================================================= */

.why-inner::before {

    content: "";

    position: absolute;

    inset: 13px;

    border: 1.5px solid #8b8f00;

    clip-path: polygon(
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
    );

    pointer-events: none;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.why-small {

    font-size: 20px;

    font-weight: 600;

    letter-spacing: 3px;

    color: #232A76;

    margin-bottom: 15px;

    position: relative;

    z-index: 5;
}


/* =========================================================
   HEADING
========================================================= */

.why-inner h1 {

    position: relative;

    z-index: 5;

    font-size: 49px;

    line-height: 1.05;

    font-weight: 400;

    color: #232A76;

    margin: 0;
}


.why-inner h1 strong {

    font-weight: 800;

    color: #232A76;
}


/* =========================================================
   CENTER DIVIDER
========================================================= */

.why-line {

    position: relative;

    z-index: 5;

    width: 110px;

    height: 2px;

    background: #8b8f00;

    margin: 24px 0 18px;
}


/* Small diamond on divider */

.why-line::before {

    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    background: #8b8f00;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(45deg);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.why-inner p {

    position: relative;

    z-index: 5;

    color: #232A76;

    font-size: 17px;

    line-height: 1.6;

    font-weight: 500;
}


/* =========================================================
   CENTER NAVIGATION
========================================================= */

.vision-center {

    width: 15%;

    height: 650px;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 5;

    opacity: 0;

    transform: translateY(100px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.line {

    position: absolute;

    width: 4px;

    height: 350px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #c9cdd3 10%,
            #c9cdd3 90%,
            transparent
        );

    z-index: 1;
}


/* =========================================================
   CIRCLES
========================================================= */

.circle {

    width: 88px;
    height: 88px;

    border-radius: 50%;

    background: #a8b0bb;

    color: #ffffff;

    font-size: 30px;

    font-weight: 700;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 25px;

    cursor: pointer;

    border: 6px solid #ffffff;

    position: relative;

    z-index: 10;

    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


.circle:hover {

    transform: scale(1.1);

    background: #232A76;

}


.circle.active {

    background: #232A76;

    transform: scale(1.15);

    box-shadow:
        0 12px 35px rgba(35, 42, 118, 0.35);
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.vision-right {

    width: 54%;

    height: 650px;

    position: relative;

    display: flex;

    align-items: center;

    padding-left: 40px;

    overflow: hidden;

    z-index: 3;

    opacity: 0;

    transform: translateX(100px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}


/* =========================================================
   CONTENT BOX
========================================================= */

.content {

    position: absolute;

    opacity: 0;

    transform: translateX(180px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.content.active {

    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   CONTENT HEADING
========================================================= */

.content h2 {

    font-size: 44px;

    margin-bottom: 22px;

    color: #232A76;

    font-weight: 700;
}


/* =========================================================
   CONTENT TEXT
========================================================= */

.content p {

    font-size: 20px;

    line-height: 1.8;

    width: 90%;

    color: #202020;

    max-width: 760px;
}


/* =========================================================
   SECTION SHOW ANIMATION
========================================================= */

.vision.show .vision-left {

    opacity: 1;

    transform: translateX(0);
}


.vision.show .vision-center {

    opacity: 1;

    transform: translateY(0);
}


.vision.show .vision-right {

    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   SUBTLE HOVER ON GEOMETRY
========================================================= */

.vision-left:hover .why-geometry::before {

    transform: scale(1.015);

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px) {

    .vision {

        min-height: 650px;
    }


    .vision-left {

        width: 34%;

        height: 520px;
    }


    .why-inner h1 {

        font-size: 34px;
    }


    .why-inner {

        padding: 50px;
    }


    .why-inner p {

        font-size: 15px;
    }


    .vision-center {

        width: 13%;
    }


    .vision-right {

        width: 53%;

        padding-left: 25px;
    }


    .content h2 {

        font-size: 36px;
    }


    .content p {

        font-size: 18px;

        line-height: 1.7;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:900px) {

    .vision {

        flex-direction: column;

        min-height: auto;

        padding: 60px 0;
    }


    .vision-left {

        width: 90%;

        height: 500px;

        margin-bottom: 20px;
    }


    .vision-center {

        width: 100%;

        height: 380px;

        flex-direction: row;
    }


    .line {

        width: 250px;

        height: 4px;

        background:
            linear-gradient(
                to right,
                transparent,
                #c9cdd3 10%,
                #c9cdd3 90%,
                transparent
            );
    }


    .circle {

        margin: 15px;
    }


    .vision-right {

        width: 90%;

        height: 400px;

        padding: 20px;

    }


    .content {

        width: 100%;
    }


    .content h2 {

        font-size: 32px;
    }


    .content p {

        width: 100%;

        font-size: 17px;

        line-height: 1.7;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:550px) {

    .vision-left {

        width: 94%;

        height: 430px;
    }


    .why-inner {

        padding: 40px;
    }


    .why-small {

        font-size: 9px;

        letter-spacing: 2px;
    }


    .why-inner h1 {

        font-size: 24px;
    }


    .why-inner p {

        font-size: 14px;
    }


    .why-line {

        width: 80px;
    }


    .vision-center {

        height: 300px;
    }


    .circle {

        width: 65px;
        height: 65px;

        font-size: 22px;

        margin: 10px;

        border-width: 4px;
    }


    .line {

        width: 210px;
    }


    .vision-right {

        height: 430px;
    }


    .content h2 {

        font-size: 28px;
    }


    .content p {

        font-size: 16px;

        line-height: 1.65;
    }
}