/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

html, body {
    overflow-x: hidden;
    width: 100%;
}

/* SECTION */

.values-section{
   /* padding:20px 8%;*/
}

/* HERO */

.hero{
    text-align:center;
    margin-bottom:80px;
    animation:fadeDown 1s ease;
}

.hero h1{
    font-size:60px;
    font-weight:700;

    background:linear-gradient(
    135deg,
    #5cdb95 0%,
    #379683 50%,
    #05386b 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero p{
    max-width:700px;
    margin:20px auto;
    color:#666;
    font-size:18px;
}

/* GRID */

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(520px,1fr));
    gap:30px;
}

/* CARD */

.card{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(10px);

    border-radius:25px;
    padding:40px;

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

    transition:.4s ease;

    position:relative;
    overflow:hidden;
}

.card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;

    background:linear-gradient(
    90deg,
    #5cdb95,
    #379683,
    #05386b
    );
}

.card:hover{
    transform:translateY(-12px);

    box-shadow:
    0 25px 50px rgba(5,56,107,.15);
}

/* ICON */

.icon{
    font-size:50px;
  
    animation:float 4s infinite ease-in-out;
}

/* TITLE */

.card h2{
   

    background:linear-gradient(
    135deg,
    #5cdb95,
    #05386b
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    font-size:30px;
}

/* TEXT */

.card p{
    color:#555;
    line-height:1.8;
    text-align:justify;
}

/* REVEAL ANIMATION */

.reveal{
    opacity:0;
    transform:translateY(60px);
    animation:reveal 1s forwards;
}

.reveal:nth-child(1){animation-delay:.2s;}
.reveal:nth-child(2){animation-delay:.4s;}
.reveal:nth-child(3){animation-delay:.6s;}
.reveal:nth-child(4){animation-delay:.8s;}

/* KEYFRAMES */

@keyframes reveal{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

/* MOBILE */

@media(max-width:768px){
    
}

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:16px;
}

.card{
    padding:9px;
}

}