html,
body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:auto;
background:#04142d;
font-family:Georgia,serif;
}
html{
scroll-behavior:smooth;
}
section{
min-height:100vh;
position:relative;
}
#hero{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}
.heroContainer{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:1100px;
max-width:95vw;
display:flex;
justify-content:center;
align-items:center;
gap:80px;
z-index:20;
}
/*********************************
PORTRAIT SECTION
*********************************/
#portraitSection{
position:relative;
min-height:100vh;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
background:
radial-gradient(circle at top,
rgba(120,90,255,.08),
transparent 45%),
linear-gradient(
180deg,
#031126,
#061a39);
}
.portraitWrap{
position:relative;
z-index:20;
}
#portrait{
width:min(520px,90vw);
border-radius:24px;
border:4px solid #dcb34c;
opacity:1;
transform:scale(1);
box-shadow:
0 0 0 rgba(255,220,120,0);
}
.portraitGlow{
box-shadow:
0 0 20px rgba(255,223,120,.35),
0 0 60px rgba(255,223,120,.25),
0 0 110px rgba(255,223,120,.18);
}
#portraitStars{
position:absolute;
inset:0;
}
#portraitStars .star{
position:absolute;
opacity:.35;
animation:
twinkle
3s
infinite
ease-in-out;
}
@media (max-width:768px){
/*********************************
PORTRAIT SECTION (MOBILE)
*********************************/
#portraitSection{
min-height:100vh;
padding:70px 18px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
}
/*********************************
PORTRAIT WRAPPER
*********************************/
.portraitWrap{
width:100%;
display:flex;
justify-content:center;
align-items:center;
z-index:20;
}
/*********************************
PORTRAIT
*********************************/
#portrait{
width:min(90vw,360px);
border:3px solid #dcb34c;
border-radius:20px;
opacity:1;
transform:scale(1);
box-shadow:
0 0 0 rgba(255,220,120,0);
}
/*********************************
GLOW
*********************************/
.portraitGlow{
box-shadow:
0 0 12px rgba(255,223,120,.35),
0 0 30px rgba(255,223,120,.22),
0 0 60px rgba(255,223,120,.15);
}
/*********************************
STARS
*********************************/
#portraitStars{
position:absolute;
inset:0;
overflow:hidden;
pointer-events:none;
}
#portraitStars .star{
position:absolute;
opacity:.30;
animation:
twinkle
3.5s
ease-in-out
infinite;
}
}
.shootingStar{
position:absolute;
width:180px;
height:3px;
background:
linear-gradient(
to left,
rgba(255,255,255,1),
rgba(255,255,255,0)
);
transform:
rotate(35deg);
border-radius:999px;
box-shadow:
0 0 8px white,
0 0 15px white;
z-index:2000;
pointer-events:none;
}
#eventCard{
position:relative;
padding:80px 20px;
background:#071733;
}
.eventCardInner{
max-width:850px;
margin:auto;
padding:60px 50px;
border:3px solid #d9b45c;
border-radius:30px;
backgrounds:
radial-gradient(
circle at top,
rgba(255,220,120,.08),
transparent 40%
),
#081c3f;
box-shadow:
0 0 30px rgba(255,220,120,.15);
position:relative;
max-width:850px;
margin:auto;
overflow:hidden;
}
.eventMoon{
position:absolute;
top:30px;
right:25px;
width:140px;
z-index:5;
pointer-events:none;
filter:
drop-shadow(0 0 10px rgba(255,230,150,.7))
drop-shadow(0 0 25px rgba(255,220,120,.5))
drop-shadow(0 0 50px rgba(255,220,120,.35));
}
.eventMoon{
animation:moonFloat 8s ease-in-out infinite;
}
@keyframes moonFloat{
0%,100%{
transform:
translateY(0);
}
50%{
transform:
translateY(-8px);
}
}
.eventFlower{
position:absolute;
pointer-events:none;
z-index:1;
opacity: .5;
}
.eventFlowerLeft{
left:-70px;
bottom:-50px;
width:800px;
}
.eventFlowerRight{
right:-50px;
bottom:-100px;
width:450px;
}
.eventMoon{
z-index:5;
}
.eventStars{
text-align:center;
color:#d8c8a0;
font-size:20px;
margin-bottom:20px;
}
.eventTitle{
text-align:center;
font-family:'Great Vibes',cursive;
font-size:90px;
line-height:1;
background:
linear-gradient(
180deg,
#fff7d8,
#d8c8a0,
#b89c62
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 0 12px rgba(255,220,120,.6);
}
.eventHeart{
text-align:center;
color:#d8c8a0;
font-size:36px;
margin:10px 0 25px;
}
.eventSubtitle{
text-align:center;
color:#d8c8a0;
letter-spacing:3px;
font-size:20px;
margin-bottom:25px;
}
.eventNames{
text-align:center;
font-family:'Great Vibes',cursive;
font-size:80px;
color:#d8c8a0;
margin-bottom:50px;
}
.eventGrid{
display:grid;
grid-template-columns:90px 1fr;
gap:25px 30px;
}
.eventIcon{
display:flex;
justify-content:center;
align-items:flex-start;
font-size:48px;
color:#d8c8a0;
text-shadow:
0 0 8px rgba(255,220,120,.5);
}
.eventIcon i{
background:
linear-gradient(
180deg,
#fff7d8,
#d8c8a0,
#b89c62
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
filter:
drop-shadow(0 0 6px rgba(255,220,120,.4));
}
.eventText{
font-size:30px;
line-height:1.5;
background:linear-gradient(
180deg,
#efe7ff,
#d2bbff,
#ffffff
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:300;
}
.eventText strong{
background:linear-gradient(
180deg,
#efe7ff,
#d2bbff,
#ffffff
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.eventDivider{
width:80%;
height:1px;
margin:50px auto;
background:
linear-gradient(
to right,
transparent,
#b89c62,
transparent
);
}
.eventRSVP{
text-align:center;
font-size:32px;
line-height:1.7;
margin-bottom:40px;
font-weight:300;
background:linear-gradient(
180deg,
#efe7ff,
#d2bbff,
#ffffff
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.purple-white{
background:linear-gradient(
180deg,
#efe7ff,
#d2bbff,
#ffffff
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.eventContacts{
text-align:center;
background:linear-gradient(
180deg,
#efe7ff,
#d2bbff,
#ffffff
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-size:28px;
line-height:2;
z-index: 2000;
}
.eventText,
.eventRSVP,
.eventContacts{
font-weight:300;
}
@media(max-width:768px){
.eventCardInner{
padding:40px 25px;
}
.eventTitle{
font-size:54px;
}
.eventMoon{
width:80px;
top:10px;
right:15px;
}
.eventNames{
font-size:48px;
}
.eventGrid{
grid-template-columns:60px 1fr;
gap:18px;
}
.eventIcon{
font-size:30px;
}
.eventText{
font-size:20px;
}
.eventRSVP{
font-size:22px;
}
.eventContacts{
font-size:18px;
}
}
@media(max-width:768px){
.eventFlowerLeft{
width:400px;
left:-60px;
bottom:-60px;
}
.eventFlowerRight{
width:200px;
right:-30px;
bottom:-60px;
}
}
.eventFlower{
filter:
drop-shadow(0 0 8px rgba(255,220,120,.4))
drop-shadow(0 0 20px rgba(255,220,120,.25));
}
.featureGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
width:min(700px,90vw);
margin:40px auto 25px;
}
.featureBtn{
min-height:180px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-decoration:none;
border:2px solid
rgba(255,220,120,.15);
border-radius:28px;
background:
rgba(255,255,255,.04);
backdrop-filter:blur(10px);
}
.featureBtn i{
font-size:48px;
margin-bottom:15px;
color:#f6d98a;
}
.featureBtn span{
font-size:24px;
letter-spacing:2px;
color:#f6d98a;
}
.calendarBtn{
margin-top:20px;
min-height:110px;
width:100%;
display:flex;
justify-content:center;
align-items:center;
gap:15px;
text-decoration:none;
border-radius:28px;
border:2px solid
rgba(255,220,120,.15);
background:
rgba(255,255,255,.04);
backdrop-filter:blur(10px);
}
.calendarBtn i{
font-size:40px;
color:#f6d98a;
}
.calendarBtn span{
color:#f6d98a;
font-size:24px;
letter-spacing:2px;
}
#countdown{
position:relative;
overflow:hidden;
padding:120px 20px;
background:
radial-gradient(
circle at top,
rgba(130,90,255,.10),
transparent 40%
),
linear-gradient(
180deg,
#031126,
#071b42,
#031126
);
}
#countdown{
position:relative;
overflow:hidden;
}
#countdownStars{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
}
#countdown .pageContent{
position:relative;
z-index:10;
}
.countdownContent{
position:relative;
z-index:10;
text-align:center;
}
.countdownTitle{
color:#f8f5ff;
text-shadow:
0 0 12px rgba(255,255,255,.4),
0 0 25px rgba(210,190,255,.25);
font-size:42px;
letter-spacing:10px;
font-weight:700;
}
#countdownBoxes{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
flex-wrap:wrap;
margin:0 auto;
}
.timeBox{
min-width:140px;
padding:20px;
backgroundd:white;
border:2px solid #d4af37;
border-radius:20px;
box-shadow:
0 5px 20px rgba(0,0,0,.08);
}
.timeBox span{
display:block;
font-size:88px;
font-weight:600;
line-height:1;
background-size:300% 100%;
color:#d7c6ff;
text-shadow:
0 0 12px rgba(215,198,255,.6),
0 0 25px rgba(180,140,255,.35);
}
.timeBox label{
display:block;
margin-top:12px;
font-size:18px;
letter-spacing:3px;
font-weight:600;
text-transform:uppercase;
color:#ffffff;
text-shadow:
0 0 8px rgba(255,255,255,.25);
}
.timeBox{
position:relative;
}
.timeBox::before{
content:"✦";
position:absolute;
top:-10px;
right:8px;
font-size:10px;
color:#fff3b0;
opacity:.25;
animation:
sparkle 2.5s ease-in-out infinite;
}
@keyframes sparkle{
0%,100%{
opacity:.15;
transform:scale(.8);
}
50%{
opacity:1;
transform:scale(1.4);
}
}
.goldStars{
color:#d4af37;
font-size:22px;
margin-bottom:10px;
}
.goldDivider{
width:180px;
height:2px;
background:#d4af37;
margin:20px auto 35px auto;
}
.countdownWrapper{
width:100%;
display:flex;
justify-content:center;
}
#countdown .pageContent{
width:90%;
margin:0 auto;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
}
@media (max-width:768px){
#countdown{
padding:50px 0;
}
.countdownTitle{
font-size:32px;
letter-spacing:2px;
margin-bottom:25px;
}
.goldStars{
font-size:18px;
}
.goldDivider{
width:120px;
margin:15px auto 25px auto;
}
#countdown .pageContent{
width:95%;
}
#countdownBoxes{
display:flex;
flex-wrap:nowrap;
gap:8px;
justify-content:center;
width:100%;
}
.timeBox{
flex:1;
min-width:0;
width:auto;
padding:12px 5px;
border-radius:12px;
}
.timeBox span{
font-size:36px;
}
.timeBox label{
font-size:11px;
letter-spacing:1px;
margin-top:4px;
}
}
#musicSection{
width:min(700px,95vw);
margin:40px auto;
padding:30px;
border-radius:30px;
backdrop-filter:blur(8px);
text-align:center;
background:
linear-gradient(
180deg,
rgba(70,60,120,.45),
rgba(25,35,80,.75)
);
border:2px solid
rgba(215,198,255,.18);
box-shadow:
0 0 20px rgba(160,130,255,.08);
}
.musicTitle{
font-size:34px;
letter-spacing:4px;
margin-bottom:15px;
font-weight:bold;
color:#ffffff;
text-shadow:
0 0 10px rgba(255,255,255,.4);
}
.musicSong{
color:#e8e0ff;
text-shadow:
0 0 8px rgba(215,198,255,.25);
font-size:20px;
margin-bottom:25px;
}
.musicPlayer{
display:flex;
align-items:center;
gap:15px;
}
#currentTime,
#totalTime{
color:#ffffff;
min-width:50px;
font-size:18px;
}
.musicProgressWrap{
position:relative;
flex:1;
height:6px;
}
#musicProgress{
position:absolute;
width:100%;
height:6px;
background: rgba(255,255,255,.15);
border-radius:20px;
}
#musicProgressFill{
position:absolute;
width:0;
height:6px;
background:#d7c6ff;
box-shadow:
0 0 10px rgba(215,198,255,.5);
border-radius:20px;
}
#musicKnob{
position:absolute;
width:16px;
height:16px;
border-radius:50%;
background:#d7c6ff;
box-shadow:
0 0 15px rgba(215,198,255,.7),
0 0 25px rgba(180,140,255,.35);
top:-5px;
left:0;
}
#musicToggle{
margin-top:25px;
width:90px;
height:90px;
border-radius:50%;
border:none;
font-size:42px;
cursor:pointer;
background:
linear-gradient(
180deg,
#ece3ff,
#c8b0ff
);
color:#1b2755;
box-shadow:
0 0 20px rgba(215,198,255,.45),
0 0 40px rgba(180,140,255,.25);
}
#musicToggle:hover{
transform:scale(1.05);
box-shadow:
0 0 30px rgba(215,198,255,.65),
0 0 50px rgba(180,140,255,.35);
}
.featureBtn i,
.featureBtn span,
.calendarBtn i,
.calendarBtn span{
color:#d7c6ff;
text-shadow:
0 0 10px rgba(215,198,255,.45);
}
.featureBtn,
.calendarBtn{
background:
linear-gradient(
180deg,
rgba(60,55,110,.55),
rgba(30,40,90,.75)
);
border:2px solid
rgba(215,198,255,.15);
}
.timeBox{
border:2px solid
rgba(215,198,255,.25);
}
@media(max-width:768px){
#musicSection{
padding:20px;
}
.musicTitle{
font-size:26px;
}
.musicSong{
font-size:16px;
}
#musicToggle{
width:70px;
height:70px;
font-size:30px;
}
}
#rsvpSection{
position:relative;
overflow:hidden;
padding:120px 20px;
background:
radial-gradient(
circle at top,
rgba(120,90,255,.12),
transparent 45%),
linear-gradient(
180deg,
#071836,
#091f48);
display:flex;
justify-content:center;
}
.rsvpCard{
width:min(800px,95vw);
margin:auto;
position:relative;
z-index:20;
width:min(800px,95vw);
max-width:800px;
box-sizing:border-box;
margin:auto;
padding:60px;
background:
linear-gradient(
180deg,
rgba(70,55,120,.40),
rgba(40,35,80,.75)
);
border:2px solid
rgba(220,200,255,.12);
box-shadow:
0 0 30px rgba(160,120,255,.08);
overflow:hidden;
border-radius:35px;
}
.rsvpTitle{
text-align:center;
font-size:82px;
margin-bottom:10px;
font-family:
"Great Vibes",
cursive;
color:#efe7ff;
text-shadow:
0 0 15px rgba(255,255,255,.25),
0 0 25px rgba(220,200,255,.15);
}
.rsvpDeadline{
text-align:center;
font-size:26px;
letter-spacing:4px;
margin-bottom:50px;
color:#f4ecff;
letter-spacing:4px;
text-shadow:
0 0 8px rgba(255,255,255,.15);
}
#rsvpForm{
display:flex;
flex-direction:column;
gap:25px;
}
#rsvpForm input,
#rsvpForm select,
#rsvpForm textarea{
width:100%;
padding:22px 25px;
border-radius:20px;
background:
rgba(20,20,50,.45);
border:2px solid
rgba(220,200,255,.10);
color:#ffffff;
font-size:20px;
outline:none;
}
#rsvpForm input::placeholder,
#rsvpForm textarea::placeholder{
color:
rgba(255,255,255,.70);
}
#rsvpForm textarea{
height:130px;
resize:none;
}
.rsvpButton{
margin-top:15px;
height:80px;
border:none;
border-radius:40px;
cursor:pointer;
font-size:26px;
letter-spacing:2px;
font-weight:bold;
background:
linear-gradient(
180deg,
#6b5a97,
#51437f
);
color:#f6f0ff;
border:2px solid
rgba(220,200,255,.20);
box-shadow:
0 0 15px rgba(180,140,255,.18);
justify-content:center;
}
.rsvpButton:hover{
background:
linear-gradient(
180deg,
#7b68aa,
#5d4b93
);
}
.rsvpMoon{
position:absolute;
right:80px;
top:70px;
width:120px;
opacity:.65;
filter:
drop-shadow(
0 0 15px
rgba(255,255,255,.15));
}
.rsvpFlowerLeft{
position:absolute;
left:-10px;
bottom:-10px;
width:260px;
z-index:1;
pointer-events:none;
}
.rsvpFlowerRight{
position:absolute;
z-index:5;
right:-10px;
bottom:-10px;
width:180px;
z-index:1;
pointer-events:none;
}
#rsvpForm select{
color:#ffffff;
}
.rsvpTitle,
.rsvpDeadline,
#rsvpForm,
.rsvpMoon{
position:relative;
z-index:20;
}
@media(max-width:768px){
.rsvpCard{
padding:30px 20px;
margin: auto;
}
.rsvpTitle{
font-size:48px;
}
.rsvpDeadline{
font-size:18px;
}
#rsvpForm input,
#rsvpForm select,
#rsvpForm textarea{
font-size:16px;
padding:18px;
box-sizing:border-box;
}
.rsvpMoon{
width:100px;
top:0px;
right:-200px;
}
.rsvpFlowerLeft{
width:320px;
bottom: -50px;
left: -50px;
opacity: .5;
}
.rsvpFlowerRight{
width:320px;
bottom: -80px;
right: -50px;
opacity: .5;
}
}
#locationSection{
display:flex;
justify-content:center;
padding:120px 20px;
background:
linear-gradient(
180deg,
#071836,
#091f48);
}
.locationCard{
width:min(900px,95vw);
margin:auto;
padding:35px;
border-radius:35px;
background:
rgba(12,26,60,.55);
border:2px solid
rgba(230,190,70,.45);
box-shadow:
0 0 40px rgba(0,0,0,.25);
}
.locationTitle{
text-align:center;
color:#f5d56a;
letter-spacing:5px;
font-size:42px;
margin-bottom:30px;
}
.locationBtn .fa-location-arrow{
transform:rotate(-15deg);
}
.mapContainer{
overflow:hidden;
border-radius:25px;
border:2px solid
rgba(255,255,255,.15);
}
.mapContainer iframe{
width:100%;
height:450px;
border:none;
}
.locationButtons{
display:flex;
gap:20px;
margin-top:30px;
}
.locationBtn{
flex:1;
min-height:90px;
display:flex;
align-items:center;
justify-content:center;
gap:20px;
text-decoration:none;
border-radius:25px;
background:
linear-gradient(
180deg,
rgba(22,38,78,.95),
rgba(15,28,60,.95));
border:2px solid
rgba(255,215,90,.18);
color:#ece4ff;
letter-spacing:2px;
font-weight:600;
letter-spacing:2px;
transition:.3s;
}
.locationBtn:hover{
border-color:#f5d56a;
box-shadow:
0 0 20px rgba(245,213,106,.25);
}
.locationBtn i{
color:#d8c6ff;
font-size:38px;
min-width:50px;
text-align:center;
}
.btnIcon{
font-size:34px;
}
.venuePhotos{
display:flex;
gap:15px;
justify-content:center;
margin:25px 0;
}
.venuePhotos img{
width:48%;
height:180px;
object-fit:cover;
border-radius:20px;
border:2px solid #d8b45a;
box-shadow:
0 0 20px rgba(255,215,120,.25);
}
.venueAddress{
text-align:center;
color:white;
margin-bottom:25px;
}
.venueAddress h3{
color:#d8b45a;
font-size:28px;
letter-spacing:2px;
}
.venueAddress p{
line-height:1.6;
font-size:16px;
}
@media(max-width:600px){
.venuePhotos{
flex-direction:column;
}
.venuePhotos img{
width:100%;
height:220px;
}
}
@media(max-width:768px){
.locationCard{
padding:20px;
}
.locationTitle{
font-size:30px;
}
.mapContainer iframe{
height:280px;
}
.locationButtons{
flex-direction:column;
}
.locationBtn{
min-height:75px;
font-size:18px;
}
}
#thankYouSection{
position:relative;
overflow:hidden;
padding:120px 20px;
background:
linear-gradient(
180deg,
#071836,
#091f48);
display:flex;
}
.thankYouCard{
position:relative;
width:min(900px,95vw);
margin:auto;
padding:100px 40px 120px;
text-align:center;
border:2px solid
rgba(220,180,90,.35);
border-radius:35px;
overflow:hidden;
background:
radial-gradient(
circle at center,
rgba(255,215,120,.05),
transparent 60%);
}
.thankHeader{
color:#f6efe1;
font-size:40px;
line-height:1.5;
letter-spacing:3px;
margin-bottom:40px;
text-shadow:
0 0 10px rgba(255,255,255,.15);
}
.thankNames{
font-family:
"Great Vibes",
cursive;
font-size:120px;
font-weight:normal;
margin:0 0 50px;
background:
linear-gradient(
180deg,
#fff6d7 0%,
#f7d978 35%,
#d8a73c 60%,
#fff2b5 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 0 15px rgba(255,215,120,.25);
}
.thankMessage{
color:#f6efe1;
font-size:34px;
line-height:1.8;
letter-spacing:2px;
text-shadow:
0 0 10px rgba(255,255,255,.10);
}
.thankHeart{
margin-top:50px;
font-size:60px;
color:#f6d978;
text-shadow:
0 0 20px rgba(255,215,120,.35);
}
.fireworkParticle{
position:absolute;
width:4px;
height:4px;
border-radius:50%;
background:#ffd76a;
box-shadow:
0 0 8px #ffd76a,
0 0 15px #ffd76a;
pointer-events:none;
}
.thankClouds{
position:absolute;
left:0;
bottom:0;
width:100%;
opacity:.9;
-webkit-mask-image:
linear-gradient(
to top,
rgba(0,0,0,1) 60%,
rgba(0,0,0,.8) 75%,
rgba(0,0,0,0) 100%
);
mask-image:
linear-gradient(
to top,
rgba(0,0,0,1) 60%,
rgba(0,0,0,.8) 75%,
rgba(0,0,0,0) 100%
);
filter:
drop-shadow(
0 0 15px
rgba(180,140,255,.25))
drop-shadow(
0 0 40px
rgba(255,220,120,.10));
}
@keyframes cloudFloat{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
100%{
transform:translateY(0);
}
}
.thankClouds{
animation:
cloudFloat 8s ease-in-out infinite;
}
.thankHeader,
.thankNames,
.thankMessage,
.thankHeart{
position:relative;
z-index:20;
}
@media(max-width:768px){
.thankYouCard{
padding:70px 20px 90px;
}
.thankHeader{
font-size:22px;
}
.thankNames{
font-size:60px;
}
.thankMessage{
font-size:22px;
}
.thankHeart{
font-size:45px;
}
}
#rsvpResult{
sdisplay:none;
margin-top:20px;
color:#d8c6ff;
text-align:center;
font-size:20px;
}
#contactSection{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:80px 20px;
background:
radial-gradient(
circle at top,
rgba(255,215,0,.08),
transparent 40%
),
#071733;
text-align:center;
}
.sectionInner{
max-width:700px;
width:100%;
}
.sectionIcon{
font-size:2rem;
color:#d9b45c;
margin-bottom:20px;
}
#contactSection h2{
color:#d9b45c;
font-size:clamp(2rem,4vw,3rem);
margin-bottom:20px;
letter-spacing:2px;
}
#contactSection p{
color:#e6e6e6;
line-height:1.8;
margin-bottom:40px;
font-size:1.1rem;
}
.contactCard{
padding:35px;
border:2px solid #d9b45c;
border-radius:25px;
background:
rgba(255,255,255,.03);
backdrop-filter:blur(8px);
}
.contactLabel{
color:#d9b45c;
letter-spacing:4px;
font-size:.9rem;
margin-bottom:15px;
}
.contactEmail{
color:white;
text-decoration:none;
font-size:1.3rem;
font-weight:600;
transition:.3s;
}
.contactEmail:hover{
color:#ffd97a;
}
@media(max-width:768px){
.contactEmail{
font-size:1.1rem;
}
}