/*==================================================
NEXPLORE | APRESENTAÇÃO DIGITAL
==================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial,Helvetica,sans-serif;

    background:
        radial-gradient(circle at top,
        #ffffff 0%,
        #faf6ef 18%,
        #efe5d3 55%,
        #e8dcc9 100%);

    color:#222;

    overflow-x:hidden;

}

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

.container{

    width:min(1920px,98%);
    margin:auto;

}

/*==================================================
TOPO
==================================================*/

.hero{

    padding:45px 0 70px;

}

.hero h1{

    text-align:center;

    font-size:48px;

    font-weight:800;

    color:#1845a5;

    letter-spacing:-1px;

    margin-bottom:15px;

}

.hero p{

    max-width:820px;

    margin:auto;

    text-align:center;

    color:#666;

    font-size:19px;

    line-height:1.7;

    margin-bottom:55px;

}

/*==================================================
GALERIA
==================================================*/

.galeria{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:28px;

    flex-wrap:wrap;

}

.galeria::before{

    content:"";

    position:absolute;

    width:1400px;
    height:900px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    background:

    radial-gradient(circle,

    rgba(255,220,170,.25),

    transparent 72%);

    z-index:-1;

}

/*==================================================
CARDS
==================================================*/

.card{

    width:330px;

    overflow:hidden;

    border-radius:32px;

    background:transparent;

    box-shadow:

        0 20px 45px rgba(0,0,0,.12),

        0 35px 80px rgba(0,0,0,.10);

    transition:

        transform .45s,

        box-shadow .45s,

        opacity .45s;

}

/*==================================================
IMAGEM
==================================================*/

.card img{

    width:106%;

    margin-left:-3%;

    margin-top:-3%;

    display:block;

    border-radius:28px;

    transition:

        transform .45s,

        filter .45s;

}

/*==================================================
EFEITOS
==================================================*/

.galeria:hover .card{

    opacity:.45;

    filter:blur(1px);

    transform:scale(.95);

}

.galeria .card:hover{

    opacity:1;

    filter:none;

    transform:

        translateY(-18px)

        scale(1.08);

    z-index:50;

    box-shadow:

        0 35px 80px rgba(0,0,0,.22),

        0 60px 120px rgba(0,0,0,.18);

}

.card:hover img{

    transform:scale(1.02);

}

/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:1800px){

.card{

width:300px;

}

}

@media(max-width:1550px){

.card{

width:270px;

}

}

@media(max-width:1300px){

.galeria{

gap:24px;

}

.card{

width:300px;

}

}

@media(max-width:950px){

.hero{

padding:40px 0 60px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:17px;

margin-bottom:40px;

}

.card{

width:320px;

}

}

@media(max-width:600px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

padding:0 15px;

}

.card{

width:100%;
max-width:340px;

}

}