/* ---------- Vision section ---------- */

*{

    font-family: 'Poppins', sans-serif;
    
}

.vision-editorial {
    position: relative;
    overflow: hidden;

    padding: 30px  20px;

    background:
        linear-gradient(
            115deg,
            #4a0b0f 0%,
            #68171b 25%,
            #500d11 200%
        );

    color: #fff8ed;
}


/* subtle background texture */

.vision-editorial::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.08;

    background-image:
        radial-gradient(
            circle at 20% 30%,
            #e6ad45 1px,
            transparent 1px
        );

    background-size: 70px 70px;
}


/* decorative glow */

.vision-editorial::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -250px;
    right: -200px;

    border-radius: 50%;

    background: rgba(230, 173, 69, 0.07);

    filter: blur(90px);

    pointer-events: none;
}


/* =====================================================
   MAIN GRID
===================================================== */

.vision-editorial-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap: 100px;

    align-items: center;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.vision-editorial-intro {
    max-width: 470px;
}


.vision-label {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: #e4ad48;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.vision-label::before {

    content: "";

    width: 32px;

    height: 1px;

    background: #e4ad48;
}


.vision-editorial-intro h2 {

    margin: 0;

    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 42px;   
    color:#fff8ed;
    line-height: 1.1;

    letter-spacing: -2px;
}


.vision-editorial-intro h2 em {

    color: #e5ad47;

    
}


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

.vision-divider {

    width: 70px;

    height: 2px;

    margin: 35px 0 28px;

    background:
        linear-gradient(
            90deg,
            #e5ad47,
            transparent
        );
}


.vision-editorial-intro p {

    max-width: 440px;

    margin: 0;

    color:
        rgba(
            255,
            248,
            237,
            0.68
        );

    font-size: 14px;

    line-height: 1.9;
}


/* =====================================================
   LINK
===================================================== */

.vision-link {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 35px;

    padding-bottom: 8px;

    border-bottom:
        1px solid
        rgba(229, 173, 71, 0.5);

    color: #e8b34d;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-decoration: none;

    text-transform: uppercase;

    transition: 0.35s ease;
}


.vision-link i {

    transition: 0.35s ease;
}


.vision-link:hover {

    color: #fff5dd;

    border-color: #e8b34d;
}


.vision-link:hover i {

    transform:
        translateX(7px);
}


/* =====================================================
   RIGHT LIST
===================================================== */

.vision-list {

    position: relative;
}


/* vertical line */

.vision-list::before {

    content: "";

    position: absolute;

    left: 38px;

    top: 35px;

    bottom: 35px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(229, 173, 71, 0.3),
            rgba(229, 173, 71, 0.3),
            transparent
        );
}


/* =====================================================
   ROW
===================================================== */

.vision-row {

    position: relative;

    display: grid;

    grid-template-columns:
        78px 1fr 45px;

    gap: 25px;

    align-items: center;

    min-height: 150px;

    padding: 25px 15px 25px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);

    transition:
        transform 0.45s ease,
        padding 0.45s ease;
}


.vision-row:first-child {

    border-top:
        1px solid
        rgba(255,255,255,0.08);
}


.vision-row:hover {

    transform:
        translateX(10px);

    padding-left: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(229,173,71,0.04),
            transparent
        );
}


/* =====================================================
   ICON
===================================================== */

.vision-row-icon {

    position: relative;

    z-index: 2;

    width: 76px;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        1px solid
        rgba(229,173,71,0.3);

    background:
        #641519;

    color: #e7af49;

    font-size: 22px;

    transition:
        transform 0.5s ease,
        background 0.4s ease,
        color 0.4s ease;
}


.vision-row-icon::after {

    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    border:
        1px solid
        rgba(229,173,71,0.08);

    transition:
        transform 0.6s ease;
}


.vision-row:hover
.vision-row-icon {

    transform:
        scale(1.08);

    background:
        #e5ad47;

    color:
        #581014;

    box-shadow:
        0 10px 35px
        rgba(229,173,71,0.15);
}


.vision-row:hover
.vision-row-icon::after {

    transform:
        rotate(90deg)
        scale(1.15);
}


/* =====================================================
   ROW CONTENT
===================================================== */

.vision-row-content span {

    display: block;

    margin-bottom: 7px;

    color:
        rgba(229,173,71,0.7);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 2.5px;
}


.vision-row-content h3 {

    margin: 0 0 8px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 32px;
    color:#ffffff;
    font-weight: 400;

    transition:
        color 0.3s ease;
}


.vision-row:hover
.vision-row-content h3 {

    color: #e8b34d;
}


.vision-row-content p {

    max-width: 450px;

    margin: 0;

    color:
        rgba(
            255,
            248,
            237,
            0.58
        );

    font-size: 12px;

    line-height: 1.7;
}


/* =====================================================
   ARROW
===================================================== */

.vision-row-arrow {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(229,173,71,0.18);

    border-radius: 50%;

    color:
        rgba(229,173,71,0.7);

    font-size: 11px;

    transition:
        0.4s ease;
}


.vision-row:hover
.vision-row-arrow {

    background: #e5ad47;

    color: #581014;

    transform:
        rotate(45deg);
}


/* =====================================================
   BOTTOM
===================================================== */

.vision-editorial-bottom {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 80px;
}


.vision-bottom-line {

    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229,173,71,0.25)
        );
}


.vision-bottom-line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(229,173,71,0.25),
            transparent
        );
}


.vision-bottom-text {

    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;

    color:
        rgba(
            255,
            248,
            237,
            0.5
        );

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.vision-bottom-text i,
.vision-bottom-text strong {

    color: #e5ad47;
}


/* =====================================================
   REVEAL
===================================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity 0.8s ease,
        transform 0.8s
        cubic-bezier(.2,.8,.2,1);
}


.reveal.active {

    opacity: 1;

    transform:
        translateY(0);
}


.vision-row:nth-child(1) {
    transition-delay: .1s;
}

.vision-row:nth-child(2) {
    transition-delay: .25s;
}

.vision-row:nth-child(3) {
    transition-delay: .4s;
}


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

@media (max-width: 900px) {

    .vision-editorial {

        padding: 90px 0 75px;
    }

    .vision-editorial-grid {

        grid-template-columns: 1fr;

        gap: 70px;
    }

    .vision-editorial-intro {

        max-width: 700px;

        text-align: center;

        margin: auto;
    }

    .vision-label {

        justify-content: center;
    }

    .vision-divider {

        margin-left: auto;
        margin-right: auto;
    }

    .vision-editorial-intro p {

        margin-left: auto;
        margin-right: auto;
    }
}


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

@media (max-width: 600px) {

    .vision-editorial {

        padding: 70px 0;
    }

    .vision-editorial-grid {

        gap: 55px;
    }

    .vision-editorial-intro h2 {

        font-size: 44px;

        letter-spacing: -1px;
    }

    .vision-editorial-intro p {

        font-size: 13px;

        line-height: 1.8;
    }

    .vision-list::before {

        left: 29px;
    }

    .vision-row {

        grid-template-columns:
            58px 1fr 32px;

        gap: 16px;

        min-height: 130px;

        padding: 20px 0;
    }

    .vision-row-icon {

        width: 58px;
        height: 58px;

        font-size: 17px;
    }

    .vision-row-content h3 {

        font-size: 25px;
    }

    .vision-row-content p {

        font-size: 12px;

        line-height: 1.6;
    }

    .vision-row-content span {

        font-size: 7px;

        letter-spacing: 1.5px;
    }

    .vision-row-arrow {

        width: 30px;
        height: 30px;

        font-size: 8px;
    }

    .vision-editorial-bottom {

        margin-top: 60px;

        gap: 10px;
    }

    .vision-bottom-text {

        font-size: 7px;

        gap: 6px;

        letter-spacing: 1px;
    }

    .vision-bottom-line {

        min-width: 15px;
    }
}