/*==================================================
MATZE WIRD 60
Version 7
==================================================*/

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

/*==================================================
ROOT
==================================================*/

:root{

--bg:#0b0f18;
--section:#141b28;
--card:#1d2536;

--pink:#ff2e92;
--cyan:#17e8ff;
--yellow:#ffd447;

--white:#ffffff;
--text:#d9dce4;

--radius:24px;

}

/*==================================================
RESET
==================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Poppins",sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

}

img{

display:block;

width:100%;

}

a{

text-decoration:none;

color:inherit;

}

section{

padding:120px 7%;

}

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

.hero{

position:relative;

min-height:110vh;

padding:40px 7%;

overflow:hidden;

background:

linear-gradient(
rgba(8,10,18,.72),
rgba(8,10,18,.88)
),

url("assets/images/einladung.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}

.hero::after{

content:"";

position:absolute;

left:-180px;

bottom:-250px;

width:700px;

height:700px;

background:

radial-gradient(circle,
rgba(255,46,146,.22),
transparent 70%);

filter:blur(80px);

pointer-events:none;

}

.hero-lights{

position:absolute;

top:45px;          /* tiefer */

left:0;

width:100%;

display:flex;

justify-content:center;

pointer-events:none;

z-index:2;         /* hinter dem Inhalt */

opacity:.65;       /* dezenter */

}

.hero-lights img{

width:100%;

height:90px;          /* Höhe der Lichterkette */

object-fit:cover;     /* gesamte Breite, aber flacher */

object-position:top;  /* oberen Teil des Bildes zeigen */

display:block;

filter:drop-shadow(0 0 12px rgba(255,210,80,.35));

}

.hero-light{

position:absolute;

right:-150px;

top:-80px;

width:500px;

height:500px;

background:

radial-gradient(circle,
rgba(23,232,255,.18),
transparent 70%);

filter:blur(90px);

pointer-events:none;

}

/* große Hintergrund 60 */

.hero::before{

content:"60";

z-index:0;

position:absolute;

right:-150px;

top:-100px;

font-family:"Bebas Neue";

font-size:45rem;

font-weight:bold;

color:white;

opacity:.04;

pointer-events:none;

}

.hero-text{

max-width:620px;

position:relative;

z-index:10;

}


.hero-wave{

position:absolute;

bottom:0;

left:0;

width:100%;

height:120px;

background:

linear-gradient(
180deg,
transparent,
#0b0f18);

}


/*==================================================
NAVIGATION
==================================================*/

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:80px;

position:relative;

z-index:20;

padding:18px 32px;

background:rgba(12,16,24,.65);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

box-shadow:0 15px 35px rgba(0,0,0,.30);

}

.logo{

font-family:"Bebas Neue";

font-size:3.5rem;

letter-spacing:3px;

color:white;

text-shadow:
0 0 12px rgba(23,232,255,.20);

cursor:pointer;

transition:.35s;

}

.logo:hover{

transform:scale(1.04);

}

.logo span{

color:var(--yellow);

}

.logo span{

color:var(--cyan);

}

.navbar ul{

display:flex;

gap:45px;

list-style:none;

align-items:center;

}

.navbar a{

position:relative;

font-size:1.05rem;

font-weight:600;

letter-spacing:.5px;

padding:10px 0;

color:white;

transition:.35s;

}

.logo:hover{

transform:scale(1.03);

transition:.35s;

}



.navbar a:hover{

color:var(--pink);

}

.navbar a::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:0;

height:3px;

background:linear-gradient(
90deg,
var(--pink),
var(--cyan));

transition:.35s;

border-radius:5px;

}

.navbar a:hover::after{

width:100%;

}
/*==================================================
HERO GRID
==================================================*/

.hero-wrapper{

position:relative;

z-index:1;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.badge{

display:inline-block;

padding:16px 38px;

background:#ff2e92;

color:white;

font-family:"Permanent Marker";

font-size:1rem;

letter-spacing:1px;

transform:rotate(-3deg);

border-radius:6px;

box-shadow:

0 18px 35px rgba(255,46,146,.25);

}

.hero h1{

font-family:"Bebas Neue";

font-size:8.8rem;

line-height:.78;

letter-spacing:4px;

margin-bottom:10px;

text-transform:uppercase;

text-shadow:

0 8px 30px rgba(0,0,0,.35);

}

.hero h1 span{

display:block;

color:var(--cyan);

}

.hero h2{

margin-top:20px;

font-size:2rem;

font-weight:400;

}

.hero h2 strong{

font-family:"Bebas Neue";

font-size:8rem;

line-height:.8;

color:var(--yellow);

text-shadow:

0 0 20px rgba(255,212,71,.20);

}

.datum{

margin-top:30px;

font-size:1.6rem;

font-weight:700;

letter-spacing:2px;

color:var(--yellow);

}

.intro{

margin-top:30px;

max-width:620px;

font-size:1.85rem;      /* größer */

line-height:2;          /* luftiger */

font-weight:500;

color:#f3f3f3;

letter-spacing:.3px;

text-shadow:
0 2px 8px rgba(0,0,0,.35);

}

/*==================================================
BUTTONS
==================================================*/

.hero-buttons{

display:flex;

gap:20px;

margin:45px 0;

flex-wrap:wrap;

}

.btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 36px;

border-radius:50px;

font-weight:700;

transition:.35s;

}

.btn.primary{

background:linear-gradient(
135deg,
var(--pink),
var(--yellow));

color:white;

box-shadow:
0 15px 35px rgba(255,46,146,.25);

}

.btn.secondary{

border:2px solid var(--cyan);

color:var(--cyan);

}

.btn:hover{

transform:translateY(-5px);

}

.btn.primary:hover{

box-shadow:
0 20px 40px rgba(255,46,146,.35);

}

.btn.secondary:hover{

background:var(--cyan);

color:#111;

}

/*==================================================
COUNTDOWN
==================================================*/

.countdown{

display:flex;

justify-content:center;   /* oder flex-start, wenn linksbündig */

align-items:center;

gap:25px;

margin:60px auto;

flex-wrap:nowrap;         /* ALLES in einer Zeile */

width:100%;

}

.countdown div{

width:140px;
height:140px;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

border-radius:28px;

background:
linear-gradient(
145deg,
rgba(45,55,80,.95),
rgba(20,25,40,.95));

border:2px solid rgba(255,255,255,.08);

box-shadow:

0 25px 45px rgba(0,0,0,.45),

0 0 20px rgba(23,232,255,.15),

inset 0 2px 2px rgba(255,255,255,.18),

inset 0 -6px 14px rgba(0,0,0,.45);

transition:.35s;

overflow:hidden;

position:relative;

}

.countdown div::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;

height:3px;

background:linear-gradient(
90deg,
transparent,
var(--cyan),
transparent);

opacity:.9;

}


.countdown div:hover{

transform:
translateY(-8px)
scale(1.05);

box-shadow:

0 35px 60px rgba(0,0,0,.55),

0 0 35px rgba(23,232,255,.45),

0 0 60px rgba(255,46,146,.25);

}

.countdown span{

font-family:"Bebas Neue";

font-size:5rem;

color:var(--yellow);

text-shadow:

0 0 10px rgba(255,212,71,.6),

0 0 20px rgba(255,212,71,.45),

0 0 35px rgba(255,212,71,.25);

}

.countdown small{

margin-top:10px;

font-size:.8rem;

letter-spacing:2px;

text-transform:uppercase;

color:var(--text);

}

/*==================================================
HERO FOTO
==================================================*/

.hero-image img{

position:relative;

}



.hero-image img:hover{

transform:rotate(0deg) scale(1.04);

}

.hero-image img{

max-width:620px;

padding:14px;

background:white;

border-radius:6px;

border:1px solid #ddd;

transform:rotate(-5deg);

box-shadow:

0 45px 80px rgba(0,0,0,.45);

}

.hero-image img:hover{

transform:rotate(0deg) scale(1.03);

}

/*==================================================
SECTION
==================================================*/

.section{

padding:160px 8%;

}

.section-header{

text-align:center;

margin-bottom:70px;

}

.section-tag{

display:inline-block;

padding:16px 36px;

background:linear-gradient(
90deg,
var(--pink),
var(--yellow));

font-family:"Permanent Marker";

font-size:1rem;

transform:rotate(-2deg);

border-radius:6px;

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

}

.section-header h2{

font-family:"Bebas Neue";

font-size:4rem;

letter-spacing:2px;

}

/*==================================================
EINLADUNG
==================================================*/

.invitation{

position:relative;

overflow:hidden;

background:

linear-gradient(
rgba(10,14,22,.82),
rgba(10,14,22,.88)
),

url("assets/images/party1.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}

.invitation-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

}

.invitation-text p{

margin-bottom:24px;

line-height:1.9;

color:var(--text);

}

blockquote{

margin-top:35px;

padding-left:25px;

border-left:4px solid var(--yellow);

font-style:italic;

font-size:1.2rem;

}

.invitation-photo img{

border-radius:20px;

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

transition:.35s;

}

.invitation-photo img:hover{

transform:scale(1.03);

}

/*==================================================
HIGHLIGHTS
==================================================*/

.highlights{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

background:var(--bg);

}

.card{

position:relative;

overflow:visible;

}

.card::before{

content:"";

position:absolute;

width:70px;

height:18px;

background:#efe7b8;

top:-8px;

left:50%;

transform:translateX(-50%) rotate(-5deg);

border-radius:3px;

opacity:.85;

}

.card:hover{

transform:translateY(-10px);

box-shadow:
0 20px 45px rgba(255,46,146,.20);

}

.icon{

font-size:3rem;

margin-bottom:20px;

}

.card h3{

font-family:"Bebas Neue";

font-size:2rem;

margin-bottom:18px;

}

.card p{

color:var(--text);

line-height:1.7;

}

/*==================================================
TIMELINE
==================================================*/

.timeline{

max-width:900px;

margin:auto;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:58px;

top:0;

bottom:0;

width:4px;

background:linear-gradient(
var(--cyan),
var(--pink));

border-radius:10px;

}

.timeline-item{

display:grid;

grid-template-columns:120px 1fr;

gap:35px;

margin-bottom:40px;

position:relative;

}

.time{

font-family:"Bebas Neue";

font-size:2rem;

color:var(--yellow);

z-index:2;

position:relative;

}

.content{

background:#1f2738;

padding:30px;

border-left:6px solid var(--pink);

border-radius:18px;

transition:.35s;

}

.content:hover{

transform:translateX(8px);

box-shadow:
0 20px 45px rgba(23,232,255,.15);

}

.content h3{

font-family:"Bebas Neue";

font-size:2rem;

margin-bottom:10px;

}

.content p{

color:var(--text);

line-height:1.8;

}

/*==================================================
LOCATION
==================================================*/

.location{

background:var(--section);

}

.location-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.location-image img{

border-radius:22px;

box-shadow:
0 35px 70px rgba(0,0,0,.45);

transition:.4s;

}

.location-image img:hover{

transform:scale(1.03);

}

.location-info h3{

margin-bottom:15px;

font-size:1.4rem;

}

.location-info p{

margin:25px 0;

line-height:1.9;

color:var(--text);

}

.location-info ul{

margin:30px 0;

padding-left:20px;

line-height:2;

}

/*==================================================
ANMELDUNG
==================================================*/

.anmeldung{

background:var(--bg);

}

.kontakt{

max-width:720px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}

.kontakt input,
.kontakt textarea,
.kontakt select{

padding:18px;

background:var(--card);

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

color:white;

font-size:1rem;

outline:none;

transition:.3s;

}

.kontakt input:focus,
.kontakt textarea:focus,
.kontakt select:focus{

border-color:var(--cyan);

box-shadow:
0 0 0 3px rgba(23,232,255,.15);

}

.kontakt textarea{

resize:vertical;

min-height:160px;

}

/*==================================================
FOOTER
==================================================*/

footer{

padding:80px 20px;

background:#080b12;

text-align:center;

border-top:1px solid rgba(255,255,255,.08);

}

.footer-logo{

font-family:"Bebas Neue";

font-size:4rem;

letter-spacing:4px;

margin-bottom:20px;

}

.footer-logo span{

color:var(--cyan);

}

.footer-icons{

font-size:2rem;

margin:25px 0;

letter-spacing:10px;

}

/*==================================================
TOP BUTTON
==================================================*/

#topButton{

position:fixed;

right:25px;

bottom:25px;

width:58px;

height:58px;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(
135deg,
var(--pink),
var(--yellow));

border-radius:50%;

cursor:pointer;

font-size:1.4rem;

opacity:0;

pointer-events:none;

transition:.35s;

z-index:999;

}

#topButton.show{

opacity:1;

pointer-events:auto;

}

/*==================================================
SCROLL ANIMATION
==================================================*/

.hidden{

opacity:0;

transform:translateY(50px);

transition:.8s;

}

.visible{

opacity:1;

transform:translateY(0);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1000px){

.hero-wrapper,
.invitation-grid,
.location-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-image{

position:relative;

}

.hero-image::after{

content:"";

position:absolute;

width:120px;

height:120px;

background:var(--yellow);

border-radius:50%;

right:-20px;

bottom:-20px;

opacity:.25;

filter:blur(40px);

}

.highlights{

grid-template-columns:1fr;

}

.hero-buttons,
.countdown{

justify-content:center;

}

}

@media(max-width:768px){

.navbar{

flex-direction:column;

gap:20px;

}

.navbar ul{

flex-wrap:wrap;

justify-content:center;

gap:20px;

}

.hero h1{

font-family:"Bebas Neue";

font-size:8.5rem;

line-height:.80;

letter-spacing:4px;

margin-bottom:10px;

}

.hero h1 span{

display:block;

color:var(--cyan);

text-shadow:

0 0 18px rgba(23,232,255,.25);

}

.hero h2 strong{

display:block;

font-family:"Bebas Neue";

font-size:9rem;

line-height:.78;

color:var(--yellow);

text-shadow:

0 0 25px rgba(255,212,71,.25);

}

.timeline::before{

display:none;

}

.timeline-item{

grid-template-columns:1fr;

}

.time{

margin-bottom:10px;

}

.countdown{

justify-content:center;

}

.countdown div{

width:120px;

height:120px;

border-radius:24px;

.countdown div{

background:#1b2334;

border:2px solid rgba(255,255,255,.08);

}

.countdown span{

color:var(--yellow);

}

.countdown small{

font-weight:600;

}

}

.section-header h2{

font-family:"Bebas Neue";

font-size:5rem;

letter-spacing:3px;

}

}

@media(max-width:500px){

.hero{

padding-top:30px;

}

.btn{

padding:22px 46px;

font-size:1rem;

letter-spacing:1px;

}

.hero-buttons{

flex-direction:column;

}

.footer-logo{

font-size:3rem;

}

}

/*==================================================
HERO INFO BOXEN
==================================================*/

.hero-info{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:60px;

}

.info-box{

padding:30px;

border-radius:20px;

background:var(--card);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}


.info-box{

background:#1d2433;

border-radius:20px;

box-shadow:

0 25px 40px rgba(0,0,0,.35);

padding:40px;

transition:.4s;

}

.info-box:hover{

transform:

translateY(-12px)

scale(1.04)

rotate(0deg);

}

.info-box h3{

font-family:"Bebas Neue";

font-size:2rem;

margin-bottom:15px;

}

.info-box h3{

display:inline-block;

padding:12px 24px;

background:linear-gradient(
90deg,
#ff2e92,
#ff6fb7);

color:white;

transform:rotate(-3deg);

border-radius:6px;

font-family:"Permanent Marker";

}


.info-box p{

line-height:1.7;

color:var(--text);

}

.info-box.pink{

border-top:6px solid var(--pink);

}

.info-box.yellow{

border-top:6px solid var(--yellow);

}

.info-box.cyan{

border-top:6px solid var(--cyan);

}

@media(max-width:900px){

.hero-info{

grid-template-columns:1fr;

}

}


.info-box:nth-child(1){

transform:rotate(-2deg);

border-top:8px solid #ff2e92;

}

.info-box:nth-child(2){

transform:rotate(1deg);

border-top:8px solid #ffd447;

}

.info-box:nth-child(3){

transform:rotate(-1deg);

border-top:8px solid #17e8ff;

}


.info-icon{

font-size:4rem;

margin-bottom:20px;

}


.info-box::before{

content:"";

position:absolute;

width:70px;

height:18px;

background:#efe5a9;

top:-8px;

left:50%;

transform:translateX(-50%) rotate(-4deg);

border-radius:3px;

}


/*=====================================
BACKGROUND DEKO
=====================================*/

.bg-decoration{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:0;

}

.brush{

position:absolute;

width:380px;

height:380px;

border-radius:50%;

filter:blur(120px);

opacity:.12;

}

.brush-pink{

top:-120px;

left:-120px;

background:#ff2e92;

}

.brush-cyan{

bottom:-100px;

right:-120px;

background:#17e8ff;

}

.brush-yellow{

top:45%;

left:45%;

background:#ffd447;

opacity:.08;

}

.card:nth-child(1){

transform:rotate(-2deg);

}

.card:nth-child(2){

transform:rotate(1deg);

}

.card:nth-child(3){

transform:rotate(-1deg);

}

.card:hover{

transform:translateY(-10px) rotate(0deg);


}


.card:nth-child(1){

transform:rotate(-2deg);

}

.card:nth-child(2){

transform:rotate(1deg);

}

.card:nth-child(3){

transform:rotate(-1deg);

}

.card:hover{

transform:translateY(-10px) rotate(0deg);

}


/*===========================
DOODLES
===========================*/

.doodles{

position:fixed;

inset:0;

pointer-events:none;

z-index:1;

}

.star,
.heart,
.arrow{

position:absolute;

font-family:"Permanent Marker";

opacity:.12;

}

.star{

font-size:2rem;

color:var(--yellow);

}

.star1{

left:8%;

top:18%;

transform:rotate(-18deg);

}

.star2{

right:12%;

top:35%;

font-size:1.6rem;

color:var(--pink);

}

.star3{

left:15%;

bottom:22%;

color:var(--cyan);

}

.heart{

right:18%;

top:14%;

font-size:2.6rem;

color:var(--pink);

transform:rotate(18deg);

}

.arrow{

left:58%;

top:42%;

font-size:3rem;

color:var(--yellow);

transform:rotate(-18deg);

}

.hero::after{

content:"";

position:absolute;

width:900px;

height:900px;

left:-350px;

bottom:-450px;

background:

radial-gradient(circle,
rgba(255,46,146,.18),
transparent 70%);

filter:blur(80px);

pointer-events:none;

}


/*=====================================
HERO DEKO
=====================================*/

.hero-deco{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:1;

}

.paint{

position:absolute;

border-radius:50%;

filter:blur(100px);

opacity:.12;

}

.paint1{

width:420px;

height:420px;

background:#ff2e92;

top:-180px;

left:-120px;

}

.paint2{

width:380px;

height:380px;

background:#17e8ff;

right:-120px;

top:220px;

}

.paint3{

width:260px;

height:260px;

background:#ffd447;

left:45%;

bottom:-80px;

}

.ring{

position:absolute;

border:2px solid rgba(255,255,255,.05);

border-radius:50%;

}

.ring1{

width:500px;

height:500px;

right:-180px;

top:-80px;

}

.ring2{

width:320px;

height:320px;

left:-120px;

bottom:-120px;

}


/*==================================================
POLAROID
==================================================*/

.polaroid{

position:relative;

display:inline-block;

padding:16px 16px 60px;

background:#fff;

border-radius:8px;

box-shadow:
0 40px 90px rgba(0,0,0,.45);

transform:rotate(-4deg);

transition:.4s;

}

.polaroid:hover{

transform:rotate(0deg) scale(1.03);

}

.polaroid img{

display:block;

width:100%;

border-radius:4px;

}

.tape{

position:absolute;

width:90px;

height:22px;

background:#efe5a9;

opacity:.9;

border-radius:3px;

box-shadow:
0 2px 4px rgba(0,0,0,.15);

}

.tape-left{

top:-10px;

left:35px;

transform:rotate(-18deg);

}

.tape-right{

top:-10px;

right:35px;

transform:rotate(18deg);

}


/*=====================================
ICH WERDE 60
=====================================*/

.hero-age{

margin:35px 0 25px;

}

.age-small{

display:block;

font-family:"Bebas Neue";

font-size:3.5rem;

letter-spacing:4px;

color:white;

transform:rotate(-2deg);

text-shadow:
0 4px 10px rgba(0,0,0,.4);

}



.hero-age{

margin:30px 0;

}

.hero60{

display:block;

width:420px;

max-width:100%;

margin-top:10px;

filter:drop-shadow(0 15px 30px rgba(0,0,0,.45));

transform:rotate(-3deg);

transition:.4s;

}

.hero60:hover{

transform:rotate(0deg) scale(1.05);

}


/*==================================================
PARTY INFOS
==================================================*/

.party-info{

background:#101722;

padding:140px 8%;

}

.party-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

margin-top:70px;

}

.party-row{

display:flex;

gap:25px;

padding:30px;

margin-bottom:28px;

border-radius:22px;

background:#1b2333;

box-shadow:0 18px 40px rgba(0,0,0,.35);

transition:.35s;

position:relative;

}

.party-row:hover{

transform:translateY(-8px);

}

.party-row::before{

content:"";

position:absolute;

top:-8px;

left:45px;

width:90px;

height:18px;

background:#efe5a9;

border-radius:4px;

transform:rotate(-6deg);

}

.party-icon{

font-size:3.5rem;

min-width:70px;

display:flex;

align-items:center;

justify-content:center;

}

.party-row h3{

font-family:"Bebas Neue";

font-size:2.2rem;

letter-spacing:1px;

margin-bottom:8px;

}

.party-row p{

line-height:1.8;

color:var(--text);

}

.party-row.pink{

border-left:8px solid var(--pink);

}

.party-row.yellow{

border-left:8px solid var(--yellow);

}

.party-row.cyan{

border-left:8px solid var(--cyan);

}

.party-rsvp{

margin-top:40px;

padding:35px;

background:linear-gradient(
135deg,
#ff2e92,
#ff8a00);

border-radius:24px;

text-align:center;

font-size:1.25rem;

font-weight:600;

box-shadow:0 20px 45px rgba(255,46,146,.25);

}

.party-rsvp .btn{

margin-top:25px;

}

.party-right{

display:flex;

justify-content:center;

}

.party-right .polaroid{

max-width:520px;

}

@media(max-width:1000px){

.party-grid{

grid-template-columns:1fr;

}

.party-right{

margin-top:50px;

}

}


/*=========================================
PARTY FEATURES
=========================================*/

.party-features{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:70px;

}

.feature-card{

position:relative;

background:#1b2333;

padding:35px 25px;

border-radius:24px;

box-shadow:0 20px 45px rgba(0,0,0,.35);

transition:.35s;

}

.feature-card:hover{

transform:
translateY(-10px)
rotate(0deg);

}

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

transform:rotate(-2deg);

}

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

transform:rotate(1deg);

}

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

transform:rotate(-1deg);

}

.feature-card::before{

content:"";

position:absolute;

top:-8px;

left:50%;

transform:
translateX(-50%)
rotate(-6deg);

width:90px;

height:18px;

background:#efe5a9;

border-radius:4px;

}

.feature-title{

display:inline-block;

padding:14px 28px;

margin-bottom:25px;

font-family:"Bebas Neue";

font-size:2rem;

letter-spacing:1px;

color:white;

border-radius:8px;

}

.feature-card.pink .feature-title{

background:#ff2e92;

}

.feature-card.yellow .feature-title{

background:#ffd447;

color:#111;

}

.feature-card.cyan .feature-title{

background:#17e8ff;

color:#111;

}

.feature-card p{

line-height:1.8;

color:var(--text);

}

@media(max-width:900px){

.party-features{

grid-template-columns:1fr;

}

}