.elementor-2677 .elementor-element.elementor-element-8e9842e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2677 .elementor-element.elementor-element-d084b69{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2677 .elementor-element.elementor-element-b0df46b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-2677 .elementor-element.elementor-element-d137664{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2677 .elementor-element.elementor-element-baa46bd{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2677 .elementor-element.elementor-element-c4f40ae{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2677 .elementor-element.elementor-element-c23a005{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2677 .elementor-element.elementor-element-3ed3e50{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2677 .elementor-element.elementor-element-e414e6a{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-b0df46b *//*==================================
REPVE+ HERO
==================================*/

.repveplus-hero{

    position:relative;
    display:flex;
    align-items:center;

    min-height:100vh;

    padding:120px 0 80px;

    overflow:hidden;

    background:#081F52;

}

/*=============================
VIDEO
=============================*/

.repveplus-video{

    position:absolute;
    inset:0;

    overflow:hidden;

}

.repveplus-video video,
.repveplus-video iframe{

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.05);

    filter:
    brightness(.88)
    contrast(1.08)
    saturate(1.08);

}

/*=============================
OVERLAY
=============================*/

.repveplus-overlay{

    position:absolute;
    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(8,31,82,.70) 0%,
        rgba(8,31,82,.48) 42%,
        rgba(8,31,82,.15) 100%
    ),

    linear-gradient(
        180deg,
        rgba(0,0,0,.08),
        rgba(0,0,0,.18)
    );

}

/*=============================
BACKGROUND PARTICLE
=============================*/

.repveplus-hero:before{

    content:"";

    position:absolute;
    inset:0;

    background-image:
    radial-gradient(rgba(255,255,255,.18) 1px,transparent 1px);

    background-size:120px 120px;

    opacity:.16;

    animation:particleMove 30s linear infinite;

}

/*=============================
CONTAINER
=============================*/

.repveplus-container{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1320px;

    margin:auto;

    padding:0 40px;

}

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

.repveplus-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    gap:70px;

    align-items:center;

}

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

.repveplus-content{

    position:relative;

    z-index:10;

}

/*=============================
BADGE
=============================*/

.repveplus-badge{

    display:inline-flex;

    align-items:center;

    padding:12px 26px;

    border-radius:999px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    color:#FFD45A;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;

    animation:fadeUp .8s ease forwards;

}

/*=============================
TITLE
=============================*/

.repveplus-content h1{

    font-size:68px;

    line-height:1.05;

    font-weight:800;

    color:#fff;

    margin:0;

    opacity:0;

    animation:fadeUp .9s .15s forwards;

}

.repveplus-content h1 span{

    display:block;

    margin-top:10px;

    font-size:42px;

    font-weight:700;

    color:#6BD3FF;

}

/*=============================
SUBTITLE
=============================*/

.repveplus-content h2{

    margin-top:38px;

    margin-bottom:0;

    font-size:34px;

    line-height:1.45;

    font-weight:700;

    color:#FFD45A;

    max-width:650px;

    opacity:0;

    animation:fadeUp .9s .35s forwards;

}

/*=============================
BUTTON
=============================*/

.repveplus-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

    flex-wrap:wrap;

    opacity:0;

    animation:fadeUp .9s .55s forwards;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:999px;

    background:#FFC107;

    color:#081F52;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:

    0 18px 35px rgba(255,193,7,.35);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border-radius:999px;

    border:2px solid rgba(255,255,255,.28);

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:#081F52;

    transform:translateY(-6px);

}

/*=============================
COUNTER
=============================*/

.repveplus-counter{

    display:flex;

    gap:55px;

    flex-wrap:wrap;

    margin-top:55px;

    opacity:0;

    animation:fadeUp .9s .75s forwards;

}

.repveplus-counter div{

    animation:counterFloat 6s ease-in-out infinite;

}

.repveplus-counter div:nth-child(2){

    animation-delay:.3s;

}

.repveplus-counter div:nth-child(3){

    animation-delay:.6s;

}

.repveplus-counter strong{

    display:block;

    font-size:44px;

    line-height:1;

    color:#FFD45A;

    font-weight:800;
    
    text-shadow:

    0 8px 30px rgba(255,212,90,.35);

}

.repveplus-counter span{

    display:block;

    margin-top:8px;

    color:#fff;

    font-size:16px;

}

/*=============================
ANIMATION
=============================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes counterFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes particleMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120px);

    }

}

/*==================================
VISUAL
==================================*/

.repveplus-visual{

    position:relative;

    width:100%;
    height:640px;

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

    margin-top:-40px;
    
    transform:translateX(-20px);

    animation:fadeVisual 1.2s ease;

}

/*==================================
SVG
==================================*/

.eco-lines{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    z-index:1;

    overflow:visible;

}

.eco-lines line{

    stroke:rgba(255,255,255,.18);

    stroke-width:2;

    stroke-linecap:round;

    stroke-dasharray:10 10;

    animation:lineMove 8s linear infinite;

}

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

.ecosystem-circle{

    position:absolute;

    width:240px;
    height:240px;

    border-radius:50%;

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

    text-align:center;

    color:#fff;

    font-size:56px;
    font-weight:800;

    background:

    linear-gradient(
        135deg,
        #24C5FF,
        #0A79F5
    );

    box-shadow:

0 0 0 16px rgba(36,197,255,.10),

0 0 0 38px rgba(36,197,255,.06),

0 0 120px rgba(36,197,255,.20),

0 40px 90px rgba(0,130,255,.30);

    z-index:5;

    animation:

    pulseCircle 5s ease-in-out infinite;

}

/*==================================
NODE
==================================*/

.eco-node{

    position:absolute;

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

    min-width:165px;

    padding:17px 28px;

    border-radius:999px;

    background:#fff;

    color:#0A2F73;

    font-size:17px;
    font-weight:700;

    box-shadow:

    0 12px 35px rgba(0,0,0,.15);

    transition:

    .35s ease;

    z-index:10;

}

/*==================================
NODE HOVER
==================================*/

.eco-node:hover{

    background:#FFD54D;

    color:#0A2F73;

    box-shadow:

    0 18px 45px rgba(255,213,77,.35);

}

.n1:hover,
.n6:hover{

    transform:

    translateX(-50%)

    translateY(-6px)

    scale(1.05);

}

.n2:hover,
.n3:hover,
.n4:hover,
.n5:hover{

    transform:

    translateY(-6px)

    scale(1.05);

}

/*==================================
POSITION
==================================*/

.n1{

    top:70px;

    left:50%;

    transform:translateX(-50%);

}

.n2{

    left:15px;

    top:195px;

}

.n3{

    right:15px;

    top:195px;

}

.n4{

    left:10px;

    bottom:165px;

}

.n5{

    right:10px;

    bottom:165px;

}

.n6{

    left:50%;

    bottom:55px;

    transform:translateX(-50%);

    min-width:220px;

}

/*==================================
ANIMATION
==================================*/

@keyframes lineMove{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-120;

    }

}

@keyframes pulseCircle{

    0%{

        transform:scale(1);

        box-shadow:

        0 0 0 14px rgba(36,197,255,.10),

        0 0 0 32px rgba(36,197,255,.05),

        0 30px 80px rgba(0,130,255,.20);

    }

    50%{

        transform:scale(1.05);

        box-shadow:

        0 0 0 18px rgba(36,197,255,.15),

        0 0 0 42px rgba(36,197,255,.08),

        0 40px 100px rgba(0,130,255,.35);

    }

    100%{

        transform:scale(1);

        box-shadow:

        0 0 0 14px rgba(36,197,255,.10),

        0 0 0 32px rgba(36,197,255,.05),

        0 30px 80px rgba(0,130,255,.20);

    }

}

@keyframes fadeVisual{

    from{

        opacity:0;

        transform:

        translateX(60px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==================================
FLOATING
==================================*/

.n1{

    animation:float1 5s ease-in-out infinite;

}

.n2{

    animation:float2 6s ease-in-out infinite;

}

.n3{

    animation:float3 5.5s ease-in-out infinite;

}

.n4{

    animation:float4 6.5s ease-in-out infinite;

}

.n5{

    animation:float5 5.8s ease-in-out infinite;

}

.n6{

    animation:float6 6.2s ease-in-out infinite;

}

@keyframes float1{

    50%{

        margin-top:-10px;

    }

}

@keyframes float2{

    50%{

        margin-top:8px;

    }

}

@keyframes float3{

    50%{

        margin-top:-12px;

    }

}

@keyframes float4{

    50%{

        margin-top:10px;

    }

}

@keyframes float5{

    50%{

        margin-top:-8px;

    }

}

@keyframes float6{

    50%{

        margin-top:8px;

    }

}

/*==================================
RESPONSIVE
==================================*/

@media (max-width:1024px){

.repveplus-hero{

    min-height:auto;
    padding:130px 0 70px;

}

.repveplus-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.repveplus-content{

    text-align:center;

}

.repveplus-content p{

    margin:auto;

}

.repveplus-buttons{

    justify-content:center;

}

.repveplus-counter{

    justify-content:center;

}

.repveplus-visual{

    transform:scale(.82);

    height:500px;

    margin-top:-20px;

}

}

@media(max-width:768px){

.repveplus-hero{

    min-height:auto;

    padding:90px 0 60px;

}

.repveplus-container{

    padding:0 25px;

}

.repveplus-grid{

    grid-template-columns:1fr;

}

.repveplus-visual{

    display:none;

}

/* BADGE */

.repveplus-badge{

    margin-top:0;

    margin-bottom:20px;

    padding:10px 20px;

    font-size:11px;

    letter-spacing:3px;

}

/* TITLE */

.repveplus-content{

    text-align:center;

}

.repveplus-content h1{

    font-size:54px;

    line-height:1.1;

}

.repveplus-content h1 span{

    font-size:28px;

    margin-top:12px;

}

/* SUBTITLE */

.repveplus-content h2{

    font-size:22px;

    line-height:1.45;

    margin-top:20px;

}

/* BUTTON */

.repveplus-buttons{

    justify-content:center;

    margin-top:35px;

}

.btn-primary,
.btn-outline{

    width:100%;

}

/* COUNTER */

.repveplus-counter{

    justify-content:center;

    gap:35px;

    margin-top:45px;

}

.repveplus-counter strong{

    font-size:42px;

}

.repveplus-counter span{

    font-size:15px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3642432 *//*====================================================
SECTION - REPVE+ ABOUT
====================================================*/

.repveplus-about{

    position:relative;

    padding:130px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #F7FAFD 100%
    );

    overflow:hidden;

}

.repveplus-about:before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    top:-320px;
    right:-260px;

    background:
    radial-gradient(
        rgba(41,157,255,.08),
        transparent 70%
    );

}

/*==============================
HEADER
==============================*/

.repveplus-about-head{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.section-badge{

    display:inline-flex;

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

    padding:12px 30px;

    border-radius:999px;

    background:#EAF3FF;

    color:#0A66E8;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;

}

.repveplus-about-head h2{

    font-size:60px;

    line-height:1.15;

    color:#082B63;

    margin-bottom:25px;

}

.repveplus-about-head h2 span{

    display:block;

    color:#2B9CFF;

}

.repveplus-about-head p{

    font-size:20px;

    line-height:1.9;

    color:#64748B;

}

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

.repveplus-about-grid{

    display:grid;

    grid-template-columns:420px minmax(0,1fr);

    gap:60px;

    align-items:start;

}

/*=========================================
ROADMAP EVOLUTION
=========================================*/

.repveplus-about-visual{

    position:sticky;

    top:140px;

}

.repve-road{

    position:relative;

    padding-left:70px;

}

/* GARIS */

.road-line{

    position:absolute;

    left:16px;

    top:15px;

    bottom:15px;

    width:4px;

    border-radius:50px;

    background:linear-gradient(
        180deg,
        #22C55E 0%,
        #2563EB 30%,
        #06B6D4 60%,
        #7C3AED 82%,
        #F2B500 100%
    );

}

/* ITEM */

.road-item{

    position:relative;

    display:flex;

    align-items:center;

    gap:26px;

    margin-bottom:65px;

    transition:.35s;

}

.road-item:last-child{

    margin-bottom:0;

}

/* DOT */

.road-dot{

    width:34px;

    height:34px;

    border-radius:50%;

    border:6px solid #fff;

    flex-shrink:0;

    z-index:2;

    box-shadow:

    0 0 0 6px rgba(255,255,255,.95),

    0 12px 25px rgba(0,0,0,.15);

}

.kave{

    background:#22C55E;

}

.rtve{

    background:#2563EB;

}

.cpve{

    background:#06B6D4;

}

.repve{

    background:#7C3AED;

}

.repveplus{

    background:#F2B500;

    animation:pulseRoad 2.5s infinite;

}

/* TEXT */

.road-content{

    background:#fff;

    padding:22px 26px;

    border-radius:22px;

    flex:1;

    box-shadow:

    0 20px 50px rgba(18,40,90,.08);

    transition:.35s;

}

.road-item:hover .road-content{

    transform:translateX(10px);

    box-shadow:

    0 30px 60px rgba(18,40,90,.12);

}

.road-content h4{

    margin:0;

    font-size:28px;

    color:#082B63;

    font-weight:800;

}

.road-content span{

    display:block;

    margin-top:8px;

    font-size:17px;

    line-height:1.8;

    color:#64748B;

}

/* ACTIVE */

.road-item.active .road-content{

    background:

    linear-gradient(
        135deg,
        #0A84FF,
        #0057B8
    );

}

.road-item.active h4,

.road-item.active span{

    color:#fff;

}

/* ANIMATION */

@keyframes pulseRoad{

0%{

transform:scale(1);

box-shadow:

0 0 0 6px rgba(255,255,255,.95),

0 0 0 0 rgba(242,180,0,.35);

}

70%{

transform:scale(1.15);

box-shadow:

0 0 0 6px rgba(255,255,255,.95),

0 0 0 18px rgba(242,180,0,0);

}

100%{

transform:scale(1);

box-shadow:

0 0 0 6px rgba(255,255,255,.95),

0 0 0 0 rgba(242,180,0,0);

}

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1024px){

.repveplus-about-grid{

grid-template-columns:1fr;

gap:70px;

}

.repveplus-about-visual{

position:relative;

top:auto;

}

.repve-road{

padding-left:45px;

max-width:600px;

margin:auto;

}

}

@media(max-width:768px){

.repve-road{

padding-left:30px;

}

.road-line{

left:15px;

}

.road-item{

gap:18px;

margin-bottom:45px;

}

.road-dot{

width:28px;

height:28px;

border:5px solid #fff;

}

.road-content{

padding:18px;

}

.road-content h4{

font-size:22px;

}

.road-content span{

font-size:15px;

line-height:1.6;

}

}

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

.repveplus-about-content h3{

font-size:54px;

line-height:1.15;

margin-bottom:45px;

}

.repveplus-about-content p{

    font-size:20px;

    line-height:2;

    color:#5F6B7A;

    margin-bottom:35px;

}

.repveplus-about-content strong{

    color:#0A66E8;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-10ecace *//*====================================================
REPVE+
HEADER FINAL
====================================================*/

.repve-section{

    position:relative;

    padding:120px 0;

    background:#F7FAFD;

    overflow:hidden;

}

.repve-container{

    width:100%;

    max-width:1440px;

    margin:0 auto;

    padding:0 35px;

}


/*=========================================
HEADER
=========================================*/

.repve-header{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.repve-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    margin-bottom:22px;

}

.repve-badge span{

    width:42px;

    height:3px;

    background:#F2B20D;

    border-radius:20px;

}

.repve-badge label{

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#1A4E98;

}

.repve-header h2{

    margin:0;

    font-size:68px;

    line-height:1.08;

    font-weight:800;

    color:#0B2E69;

}

.repve-header h2 strong{

    color:#2A7DFF;

}

.repve-header p{

    max-width:760px;

    margin:24px auto 0;

    font-size:20px;

    line-height:1.85;

    color:#6B7D94;

}


/*=========================================
RESPONSIVE HEADER
=========================================*/

@media(max-width:1100px){

.repve-header h2{

font-size:56px;

}

.repve-header p{

font-size:18px;

}

}

@media(max-width:768px){

.repve-section{

padding:80px 0;

}

.repve-container{

padding:0 22px;

}

.repve-header{

margin-bottom:50px;

}

.repve-header h2{

font-size:42px;

line-height:1.2;

}

.repve-header p{

font-size:16px;

line-height:1.8;

}

}

@media(max-width:480px){

.repve-header h2{

font-size:34px;

}

.repve-badge label{

font-size:12px;

letter-spacing:2px;

}

.repve-header p{

font-size:15px;

}

}

/*====================================================
REPVE+
PANEL FINAL
(REPLACE SEMUA CSS PANEL LAMA)
====================================================*/


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

.repve-panels{

    display:flex;

    flex-direction:column;

    gap:26px;

}

.repve-panel{

    position:relative;

    display:grid;

    grid-template-columns:90px 1fr 390px;

    align-items:center;

    gap:34px;

    min-height:240px;

    padding:22px 24px;

    background:#FFFFFF;

    border-radius:28px;

    border:none;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(15,42,88,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.repve-panel:hover{

    transform:translateY(-6px);

    box-shadow:
        0 22px 55px rgba(15,42,88,.09);

}


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

.panel-icon{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    height:100%;

    padding-top:6px;

}

.icon-circle{

    width:78px;

    height:78px;

    border-radius:22px;

    background:#F8FBFF;

    border:1px solid #E8EEF5;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.repve-panel:hover .icon-circle{

    transform:translateY(-3px);

    box-shadow:
        0 12px 28px rgba(18,43,90,.08);

}

.pillar-icon{

    width:42px;

    height:42px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.green .pillar-icon{

    color:#39C66B;

}

.blue .pillar-icon{

    color:#2A7DFF;

}

.orange .pillar-icon{

    color:#F3B20D;

}

.cyan .pillar-icon{

    color:#12BCD8;

}


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

.panel-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.panel-title{

    margin-bottom:16px;

}

.panel-title h3{

    margin:0;

    font-size:32px;

    line-height:1.15;

    font-weight:800;

    color:#14396E;

}

.panel-content p{

    margin:0;

    font-size:17px;

    line-height:1.85;

    color:#6C7D92;

}


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

.panel-image{

    position:relative;

    width:100%;

    height:240px;

    overflow:hidden;

    border-radius:22px;

    box-shadow:
        0 18px 35px rgba(15,42,88,.08);

}

.panel-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    border-radius:22px;

    transition:transform .45s ease;

}

.repve-panel:hover .panel-image img{

    transform:scale(1.04);

}

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

@media (max-width:1100px) and (min-width:769px){

.repve-panel{

    grid-template-columns:80px 1fr 300px;

    gap:22px;

    padding:20px;

    min-height:200px;

}

.panel-icon{

    justify-content:center;

    align-items:flex-start;

    padding-top:6px;

}

.panel-content{

    padding-right:8px;

}

.panel-title h3{

    font-size:26px;

}

.panel-content p{

    font-size:15px;

    line-height:1.75;

}

.panel-image{

    width:300px;

    height:240px;

    margin:0;

    border-radius:18px;

    overflow:hidden;

}

.panel-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    border-radius:18px;

}

}


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

@media (max-width:768px){

.repve-panels{
    gap:18px;
}

.repve-panel{

    display:flex;
    flex-direction:column;

    align-items:flex-start;

    gap:22px;

    padding:26px;

    border-radius:22px;

    min-height:auto;

}

.panel-icon{

    width:100%;

    display:flex;

    justify-content:flex-start;

    margin:0;

    padding:0;

}

.icon-circle{

    width:68px;

    height:68px;

    border-radius:18px;

}

.pillar-icon{

    width:36px;

    height:36px;

}

.panel-content{

    width:100%;

    padding:0;

}

.panel-title{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:12px;

    flex-wrap:nowrap;

}

.panel-title h3{

    margin:0;

    font-size:25px;

    line-height:1.2;

}

.panel-content p{

    font-size:15px;

    line-height:1.75;

}

.panel-image{

    width:100%;

    margin:0;

}

.panel-image img{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    height:auto;

    object-fit:cover;

    object-position:center;

    border-radius:18px;

}

}


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

@media (max-width:480px){

.repve-panel{

    padding:22px;

    gap:18px;

}

.icon-circle{

    width:62px;

    height:62px;

}

.pillar-icon{

    width:32px;

    height:32px;

}

.panel-title{

    gap:10px;

}

.panel-title h3{

    font-size:22px;

}

.panel-content p{

    font-size:14px;

    line-height:1.7;

}

.panel-image img{

    border-radius:16px;

}

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c790764 *//* ===================================
TIMELINE RTVE
=================================== */

.rtve-timeline{
    position:relative;
    padding:120px 20px;
    background:#F5F7FB;
    overflow:hidden;
}

.rtve-container{
    max-width:1400px;
    margin:auto;
    position:relative;
}

/* GARIS DASAR */

.timeline-line{
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:3px;
    background:#D8E1F2;
    transform:translateX(-50%);
    z-index:1;
}

/* GARIS AKTIF */

.timeline-progress{

    position:absolute;
    left:50%;
    top:0;
    width:4px;
    height:0;

    background:linear-gradient(
        180deg,
        #1f57c3,
        #4D8BFF
    );

    transform:translateX(-50%);
    z-index:5;

}

/* =====================================
MOVING DOT
===================================== */

.timeline-scroll-dot{

    position:absolute;

    left:50%;

    top:0;

    width:22px;

    height:22px;

    background:#1f57c3;

    border-radius:50%;

    transform:translateX(-50%);

    z-index:20;

    box-shadow:
    0 0 0 12px rgba(31,87,195,.15),
    0 0 0 24px rgba(31,87,195,.08);

    transition:top .08s linear;

}

/* ITEM */

.timeline-item{
    display:grid;
    grid-template-columns:1fr 120px 1fr;
    align-items:flex-start;
    position:relative;
    margin-bottom:140px;
}

.timeline-left{
    padding-right:40px;
}

.timeline-right{
    padding-left:40px;
}



/* CARD */

.timeline-card{
    background:#fff;
    padding:45px;
    border-radius:28px;
    box-shadow:
        0 20px 60px rgba(0,0,0,.08);

    height:100%;
    transition:.35s ease;
}

.timeline-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 30px 70px rgba(0,0,0,.12);
}

/* =========================
TITLE
========================= */

.timeline-card h2,
.timeline-card h3{

    font-size:26px;
    line-height:1.4;
    font-weight:700;
    color:var(--rv-primary);

    margin-bottom:20px;

}

/* Jika ada judul yang memakai <strong> */

.timeline-card p strong{

    color:var(--rv-primary);
    font-weight:700;

}

/* PARAGRAPH */

.timeline-card p{

    font-size:18px;
    line-height:1.9;
    color:#4B5563;

}

/* IMAGE */

.timeline-image + .timeline-image{
    margin-top:25px;
}

.timeline-image img{
    width:100%;
    border-radius:18px;
    display:block;
    object-fit:cover;
}

.rtve-caption{
    text-align:center;
    margin-top:18px;
    font-size:15px;
    color:#64748B;
    font-style:italic;
}

.timeline-video{
    margin-top:20px;
    border-radius:18px;
    overflow:hidden;
}

.timeline-video video{
    width:100%;
    display:block;
    border-radius:18px;
}

.timeline-date{

    font-size:42px;

    font-weight:800;

    line-height:1;

    color:var(--rv-primary);

    margin-bottom:22px;

}

/* =========================
TIMELINE BADGE
========================= */

.timeline-left,
.timeline-right{

    display:flex;
    flex-direction:column;

}

.timeline-badge{

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

    width:max-content;

    padding:10px 22px;

    border-radius:999px;

    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

    margin-bottom:18px;

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);

    transition:.3s ease;

}

.timeline-badge:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(0,0,0,.12);

}

/* Posisi badge */

.timeline-left .timeline-badge,
.timeline-right .timeline-badge{

    align-self:flex-start;

}

/* ===================================
BADGE COLORS
=================================== */

.badge-blue{

    background:#EEF4FF !important;
    color:#0A2F73 !important;

}

.badge-green{

    background:#ECFDF5 !important;
    color:#15803D !important;

}

.badge-gold{

    background:#FFF8E1 !important;
    color:#B7791F !important;

}

.badge-purple{

    background:#F3E8FF !important;
    color:#7C3AED !important;

}

.badge-red{

    background:#FEF2F2 !important;
    color:#DC2626 !important;

}

/* RESPONSIVE */

@media(max-width:991px){

.timeline-line,
.timeline-progress{
    left:36px;
}

.timeline-scroll-dot{
    left:36px;
    transform:translateX(-50%);
}

.timeline-item{

    display:grid;

    grid-template-columns:72px 1fr;

    gap:24px;

    margin-bottom:90px;

}

.timeline-left,
.timeline-right{

    grid-column:2;

    width:100%;

    max-width:100%;

    padding:0;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

}

@media(max-width:768px){

.timeline-date{
    font-size:34px;
}

.timeline-card p{
    font-size:18px;
}

}

/* =========================
SLIDE 18 - MILESTONE
========================= */

.cpve-badge{
    width:280px;
    height:280px;
    border-radius:50%;
    margin:0 auto 30px;
    background:linear-gradient(
        135deg,
        #18B9F3,
        #0095D9
    );
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:72px;
    font-weight:800;
}

.milestone-year{
    font-size:72px;
    font-weight:800;
    color:#6B3FB5;
    line-height:1;
    margin-bottom:25px;
}

.milestone-card h3{
    color:#6B3FB5;
}

.milestone-quote{
    margin-top:40px;
    padding:40px;
    text-align:center;
    font-size:34px;
    line-height:1.4;
    font-weight:700;
    color:#F2B500;
    border-top:8px solid #F2B500;
    border-bottom:8px solid #F2B500;
}

.timeline-video iframe{
    width:100%;
    aspect-ratio:16/9;
    border:none;
    border-radius:16px;
    display:block;
}

/*====================================================
QUOTE CARD PREMIUM
====================================================*/

.quote-card{

    position:relative;

    background:#FFFDF8;

    border:1px solid #F2DEAA;

    border-radius:30px;

    min-height:340px;

    padding:60px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    box-shadow:
        0 18px 45px rgba(18,43,90,.06);

}

.quote-line{

    width:90px;

    height:4px;

    background:#D89A06;

    border-radius:30px;

    margin:24px auto;

}

.timeline-quote{

    max-width:620px;

    font-size:40px;

    line-height:1.55;

    font-weight:700;

    color:#D89A06;

}

.quote-icon{

    position:absolute;

    color:#F6E9C5;

    font-size:62px;

    line-height:1;

    pointer-events:none;

}

.quote-top{

    top:28px;

    left:35px;

}

.quote-bottom{

    right:35px;

    bottom:28px;

}

@media(max-width:991px){

.quote-card{

    min-height:auto;

    padding:45px 30px;

}

.timeline-quote{

    font-size:28px;

}

.quote-icon{

    font-size:48px;

}

.quote-line{

    width:70px;

}

}

@media(max-width:768px){

.timeline-quote{

    font-size:22px;

    line-height:1.7;

}

.quote-card{

    padding:35px 25px;

}

.quote-icon{

    font-size:36px;

}

}

.timeline-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:28px;

    width:100%;

    height:58px;

    border-radius:18px;

    background:linear-gradient(135deg,#0F4DB8,#296BFF);

    color:#fff;

    font-size:17px;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(20,70,180,.20);

}

.timeline-btn:hover{

    transform:translateY(-3px);

    color:#fff;

    box-shadow:

    0 20px 40px rgba(20,70,180,.28);

}

.timeline-btn i{

    transition:.3s;

}

.timeline-btn:hover i{

    transform:translateX(6px);

}

/*====================================================
REPVE+ BUBBLE
====================================================*/

.repveplus-bubble{

    width:340px;

    height:180px;

    background:linear-gradient(135deg,#0FB4FF,#00A2E8);

    border-radius:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    margin-bottom:30px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.repveplus-bubble span{

    font-size:68px;

    font-weight:800;

    color:#fff;

    line-height:1;

}

.repveplus-bubble:after{

content:'';

position:absolute;

right:-120px;

top:50%;

transform:translateY(-50%);

border-top:24px solid transparent;
border-bottom:24px solid transparent;

border-left:130px solid #00A2E8;

}



@media (max-width:768px){

.timeline-card{

    padding:28px 24px;

}

.timeline-card h2{

    font-size:40px;

    line-height:1;

    margin-bottom:20px;

}

.timeline-card h3{

    font-size:20px;

    line-height:1.35;

}

.timeline-card p{

    font-size:16px;

    line-height:1.8;

}

.repveplus-bubble{

    width:250px;

    height:135px;

    margin-bottom:24px;

}

.repveplus-bubble span{

    font-size:48px;

}

.repveplus-bubble:after{

    right:-58px;

    border-left:68px solid #00A2E8;

    border-top:16px solid transparent;

    border-bottom:16px solid transparent;

}

}/* End custom CSS */