/* =========================================
   KLIMAAT VAN SURINAME
========================================= */

.klimaat-title{

    text-align:center;

    color:#0098a8;

    font-size:2.4rem;

    margin-bottom:25px;

    text-shadow:

        0 0 10px rgba(
            0,
            220,
            255,
            .4
        ),

        0 0 25px rgba(
            0,
            220,
            255,
            .25
        );

}

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

.klimaat-container{

    width:92%;

    max-width:1200px;

    margin:auto;

    padding:30px;

    border-radius:30px;

    background:

        linear-gradient(
            180deg,
            #f7ffff,
            #dcffff
        );

    box-shadow:

        0 0 30px rgba(
            0,
            210,
            255,
            .18
        );

}

/* =========================================
   HERO CARD
========================================= */

.hero-card{

    background:#ffffff;

    border-radius:25px;

    padding:30px;

    margin-bottom:30px;

    border:2px solid #b9f8ff;

    box-shadow:

        0 0 15px rgba(
            0,
            210,
            255,
            .15
        );

    transition:.35s ease;

    animation:
        cardReveal .8s ease-out .1s both;

}

.hero-card:hover{

    transform:

        translateY(-8px)

        scale(1.02);

    box-shadow:

        0 0 35px rgba(
            0,
            220,
            255,
            .35
        ),

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

}

.hero-card h3{

    color:#0098a8;

    font-size:1.7rem;

    margin-bottom:15px;

}

.hero-card p{

    color:#333;

    line-height:1.9;

}

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

.info-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                250px,
                1fr
            )
        );

    gap:20px;

    margin-bottom:35px;

}

.climate-card{

    background:#ffffff;

    border-radius:25px;

    padding:25px;

    border:2px solid #b9f8ff;

    text-align:center;

    box-shadow:

        0 0 12px rgba(
            0,
            210,
            255,
            .12
        );

    transition:.35s ease;

    min-height:500px;

    height:auto;

    overflow:visible;

}

.climate-card:hover{

    transform:

        translateY(-12px)

        scale(1.04);

    box-shadow:

        0 0 35px rgba(
            0,
            220,
            255,
            .35
        );

}

.climate-card h3{

    color:#0098a8;

    margin-bottom:10px;

}

.climate-card:hover h3{

    text-shadow:

        0 0 12px rgba(
            0,
            220,
            255,
            .7
        );

}
/* =========================================
   GETALLEN
========================================= */

.number{

    font-size:2rem;

    color:#00b2c5;

    font-weight:bold;

    margin:15px 0 20px;

    transition:.35s ease;

}

.number:hover{

    cursor:pointer;

    animation:pulseNumber .6s ease;

}

.climate-card:hover .number{

    transform:

        scale(1.15);

    text-shadow:

        0 0 15px rgba(
            0,
            220,
            255,
            .75
        );

}

@keyframes pulseNumber{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* =========================================
   CARD TEKST
========================================= */

.card-text{

    display:block;

    color:#333;

    line-height:1.8;

    font-size:15px;

    text-align:center;

    visibility:visible;

    opacity:1;

    overflow:visible;

    height:auto;

}

.card-text strong{

    color:#008a9a;

    font-weight:700;

}

/* =========================================
   SEIZOENEN
========================================= */

.season-section{

    margin-top:10px;

}

.season-section h3{

    color:#008a9a;

    margin-bottom:20px;

}

.season-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                250px,
                1fr
            )
        );

    gap:20px;

}

.season-card{

    color:white;

    border-radius:25px;

    padding:25px;

    text-align:center;

    transition:.25s ease;

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

}

/* =========================================
   SEASON SHAKE
========================================= */

.season-card:hover{

    animation:

        seasonShake .6s ease;

    box-shadow:

        0 0 30px rgba(
            255,
            255,
            255,
            .45
        ),

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

}

@keyframes seasonShake{

    0%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    15%{

        transform:
            translateY(-8px)
            rotate(-4deg);

    }

    30%{

        transform:
            translateY(-8px)
            rotate(4deg);

    }

    45%{

        transform:
            translateY(-8px)
            rotate(-4deg);

    }

    60%{

        transform:
            translateY(-8px)
            rotate(4deg);

    }

    75%{

        transform:
            translateY(-8px)
            rotate(-2deg);

    }

    90%{

        transform:
            translateY(-8px)
            rotate(2deg);

    }

    100%{

        transform:
            translateY(0)
            rotate(0deg);

    }

}

.rain{

    background:

        linear-gradient(
            135deg,
            #00b9d6,
            #0090a5
        );

}

.dry{

    background:

        linear-gradient(
            135deg,
            #ffb84d,
            #f57c00
        );

}

/* =========================================
   ANIMATIES
========================================= */

.climate-card:nth-child(1){

    animation:
        cardReveal .8s ease-out .15s both;

}

.climate-card:nth-child(2){

    animation:
        cardReveal .8s ease-out .30s both;

}

.climate-card:nth-child(3){

    animation:
        cardReveal .8s ease-out .45s both;

}

.climate-card:nth-child(4){

    animation:
        cardReveal .8s ease-out .60s both;

}

.season-card:nth-child(1){

    animation:
        cardReveal .8s ease-out .75s both;

}

.season-card:nth-child(2){

    animation:
        cardReveal .8s ease-out .90s both;

}

.season-card:nth-child(3){

    animation:
        cardReveal .8s ease-out 1.05s both;

}

.season-card:nth-child(4){

    animation:
        cardReveal .8s ease-out 1.20s both;

}

@keyframes cardReveal{

    from{

        opacity:0;

        transform:

            translateY(30px)

            scale(.96);

    }

    to{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}

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

@media (max-width:768px){

    .klimaat-container{

        width:96%;

        padding:20px;

    }

    .klimaat-title{

        font-size:1.8rem;

    }

    .hero-card{

        padding:20px;

    }

    .climate-card{

        min-height:auto;

    }

    .number{

        font-size:1.5rem;

    }

    .card-text{

        font-size:14px;

    }

    .climate-card:hover,
    .season-card:hover{

        transform:

            scale(1.02);

    }

}