/* =========================================
   KLIMAATIMPACT & SCENARIO'S
========================================= */

.impact-title{

    text-align:center;

    color:#0098a8;

    font-size:2.4rem;

    margin-bottom:40px;

    text-shadow:
        0 0 10px rgba(0,220,255,.4),
        0 0 25px rgba(0,220,255,.25);
}

.impact-icons{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:80px;

    margin:60px 0;

    text-align:center;
}

.impact-icon-box{

    width:220px;

    transition:.35s ease;

    cursor:pointer;
}

.impact-icon{

    font-size:6rem;

    transition:.35s ease;
}

.impact-icon-box h3{

    color:#0098a8;

    margin:15px 0 10px;

    transition:.35s ease;
}

.impact-icon-box p{

    color:#555;

    font-size:15px;

    transition:.35s ease;
}

.impact-icon-box:hover{

    transform:
        translateY(-10px);
}

.impact-icon-box:hover .impact-icon{

    transform:scale(1.15);

    text-shadow:
        0 0 25px rgba(
            0,
            220,
            255,
            .9
        );
}

.impact-icon-box:hover h3{

    text-shadow:
        0 0 15px rgba(
            0,
            220,
            255,
            .8
        );
}

.impact-icon-box:hover p{

    color:#0098a8;
}
/* =========================================
   INSTRUCTIETEKST
========================================= */

.impact-message{

    color:#ff3b3b;

    font-size:1.2rem;

    font-weight:700;

    text-align:center;

    text-shadow:
        0 0 8px rgba(255,0,0,.7),
        0 0 18px rgba(255,0,0,.5),
        0 0 30px rgba(255,0,0,.3);

    animation:
        redGlow 2s infinite;
}

@keyframes redGlow{

    0%{

        text-shadow:
            0 0 8px rgba(255,0,0,.7),
            0 0 18px rgba(255,0,0,.5);

    }

    50%{

        text-shadow:
            0 0 15px rgba(255,0,0,1),
            0 0 35px rgba(255,0,0,.8),
            0 0 50px rgba(255,0,0,.5);

    }

    100%{

        text-shadow:
            0 0 8px rgba(255,0,0,.7),
            0 0 18px rgba(255,0,0,.5);

    }

}
.pdf-popup{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
        rgba(
            0,
            0,
            0,
            .75
        );

    z-index:99999;
}
/* =========================================
   PDF POPUP
========================================= */

.pdf-popup{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
        rgba(0,0,0,.80);

    backdrop-filter:blur(8px);

    z-index:99999;

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

.pdf-popup-content{

    width:90%;
    max-width:1200px;

    height:95%;

    background:
        linear-gradient(
            180deg,
            #0b1924,
            #12293b
        );

    border:2px solid #00dfff;

    border-radius:25px;

    padding:20px;

    box-shadow:
        0 0 30px rgba(0,223,255,.4);

    position:relative;
}

.close-pdf-btn{

    position:fixed;

    top:20px;

    right:20px;

    z-index:100000;

    background:#ff4444;

    color:white;

    border:none;

    width:45px;

    height:45px;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;
}  

.close-pdf-btn:hover{

    transform:scale(1.1);

    box-shadow:
        0 0 15px rgba(255,0,0,.6);
}

.pdf-popup-content h2{

    text-align:center;

    color:#00dfff;

    margin-bottom:15px;
}

#pdfViewer{

    width:100%;

    height:95%;

    border:none;

    border-radius:15px;

    background:white;
}

.pdf-buttons{

    text-align:center;

    margin-top:15px;
}

.pdf-download-btn{

    display:inline-block;

    padding:12px 25px;

    background:#00dfff;

    color:#00131d;

    font-weight:bold;

    text-decoration:none;

    border-radius:12px;

    transition:.3s;
}

.pdf-download-btn:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 15px rgba(0,223,255,.6);
}
#impactImage{

    width:85vw;

    max-width:1600px;

    max-height:80vh;

    height:auto;

    object-fit:contain;

    display:block;

    margin:60px auto 0 auto;

    border-radius:20px;

    box-shadow:
        0 0 40px rgba(
            0,
            223,
            255,
            .4
        );
}
#imagePopup{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
        rgba(
            0,
            0,
            0,
            .92
        );

    backdrop-filter:
        blur(8px);

    z-index:99999;

    justify-content:center;
    align-items:center;
}
#imagePopup .pdf-popup-content{

    width:auto;

    height:auto;

    max-width:90vw;

    max-height:85vh;

    background:transparent;

    border:none;

    box-shadow:none;

    padding:70px;
}

#scenarioImage{

    width:85vw;

    max-width:1600px;

    max-height:90vh;

    height:auto;

    display:block;

    margin:auto;

    object-fit:contain;

    border-radius:20px;

    box-shadow:
        0 0 40px rgba(
            0,
            223,
            255,
            .4
        );
}
.impact-title{

    width:100%;

    text-align:center;
}

.impact-icons{

    width:100%;

    display:flex;

    justify-content:center !important;

    align-items:center;

    gap:80px;

    margin:60px auto;

    text-align:center;
}

.impact-icon-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;
}
.impact-icon-box{

    width:220px;

    transition:.35s ease;

    cursor:pointer;

    opacity:0;

    animation:

        impactReveal

        1.2s

        ease-out

        forwards;

}
.impact-icon-box:nth-child(1){

    animation-delay:.4s;

}

.impact-icon-box:nth-child(2){

    animation-delay:1.2s;

}

.impact-icon-box:nth-child(3){

    animation-delay:2s;

}

/* =========================================
   MOBIEL
========================================= */

@media (max-width:768px){

    .impact-icons{

        flex-direction:column;

        align-items:center;

        gap:40px;
    }

    .impact-icon{

        font-size:4.5rem;
    }

    .impact-icon-box{

        width:90%;
        max-width:300px;
    }

    .impact-title{

        font-size:1.8rem;
    }

    .impact-message{

        font-size:1rem;
        padding:0 15px;
    }

    #impactImage,
    #scenarioImage{

        width:98vw;

        max-height:85vh;
    }

    .pdf-popup-content{

        width:95%;
        height:95%;
    }

}
@keyframes impactReveal{

    0%{

        opacity:0;

        transform:

            translateY(50px)

            scale(.8);

    }

    100%{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}
.impact-message{

    opacity:0;

    animation:

        impactMessageReveal

        1s

        ease-out

        2.8s

        forwards;

}
@keyframes impactMessageReveal{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}