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

body{

display:flex;

justify-content:center;

align-items:center;

padding:40px;

font-family:Arial;

background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.75)
),

url("https://images.unsplash.com/photo-1547347298-4074fc3086f0");

background-size:cover;

background-position:center;

min-height:100vh;

}

#banner{

width:1200px;

max-width:100%;

height:1700px;

overflow:hidden;

position:relative;

border-radius:40px;

padding:70px;

background:

linear-gradient(
rgba(5,10,20,.70),
rgba(5,10,20,.75)
),

url("https://images.unsplash.com/photo-1579952363873-27f3bade9f55");

background-size:cover;

background-position:center;

}

/* LOGO */

.logo-grafica{

display:flex;

justify-content:center;

margin-bottom:60px;

}

.logo-grafica img{

width:260px;

height:260px;

object-fit:contain;

border-radius:30px;

padding:10px;

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

}

/* TITULO */

.titulo{

color:white;

font-size:80px;

font-weight:900;

text-align:center;

line-height:1.1;

text-shadow:

0 0 15px #00bfff,
0 0 40px #00bfff,
0 0 90px #0099ff,
0 0 120px #008cff;

}

.sub{

margin-top:60px;

font-size:42px;

text-align:center;

color:white;

}

.linha1{

margin-bottom:50px;

}

.sub span{

display:inline-block;

background:#FFD700;

color:black;

padding:18px 40px;

border-radius:20px;

font-size:60px;

font-weight:bold;

box-shadow:

0 0 30px gold;

}

.linha2{

margin-top:50px;

}

.cards{

position:relative;

height:900px;

margin-top:90px;

}

.card{

position:absolute;

width:300px;

height:400px;

overflow:hidden;

border-radius:30px;

border:5px solid white;

background:white;

box-shadow:

0 0 30px rgba(255,255,255,.4);

animation:

flutuar 4s infinite ease-in-out;

}

.card img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

.c1{
left:20px;
top:60px;
transform:rotate(-10deg);
}

.c2{
left:320px;
top:210px;
transform:rotate(9deg);
}

.c3{
left:650px;
top:70px;
transform:rotate(-8deg);
}

.c4{
left:850px;
top:230px;
transform:rotate(12deg);
}

@keyframes flutuar{

0%{
translate:0 0;
}

50%{
translate:0 -18px;
}

100%{
translate:0 0;
}

}

/* TABLET */

@media(max-width:1024px){

body{
padding:15px;
}

#banner{

height:auto;

padding:40px;

}

.logo-grafica img{

width:190px;

height:190px;

}

.titulo{

font-size:52px;

}

.sub{

font-size:30px;

}

.sub span{

font-size:42px;

}

.cards{

height:820px;

}

.card{

width:210px;

height:290px;

}

.c1{
left:0;
}

.c2{
left:180px;
}

.c3{
left:380px;
}

.c4{
left:560px;
}

}

/* CELULAR */

@media(max-width:768px){

body{

padding:10px;

}

#banner{

width:100%;

height:auto;

padding:30px;

border-radius:25px;

}

.logo-grafica{

margin-bottom:40px;

}

.logo-grafica img{

width:140px;

height:140px;

}

.titulo{

font-size:34px;

}

.sub{

font-size:22px;

}

.linha1{

margin-bottom:30px;

}

.sub span{

font-size:36px;

padding:14px 26px;

}

.linha2{

margin-top:30px;

}

.cards{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:25px;

height:auto;

margin-top:60px;

}

.card{

position:relative;

width:150px;

height:220px;

}

.c1,
.c2,
.c3,
.c4{

left:auto;
top:auto;

}

.c1{

transform:rotate(-6deg);

}

.c2{

transform:rotate(6deg);

}

.c3{

transform:rotate(-5deg);

}

.c4{

transform:rotate(5deg);

}

}