/*==================================================
  NIHAR ❤️ DHVANI WEDDING WEBSITE
  style.css
  Common Styles
==================================================*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Great+Vibes&family=Poppins:wght@300;400;500;600&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    overflow-x:hidden;

    min-height:100vh;

    color:#ffffff;

    background:#140a18;

}

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

:root{

    --gold:#FFD700;

    --rose:#ff5c8a;

    --pink:#ffbfd3;

    --white:#ffffff;

    --glass:rgba(255,255,255,.12);

    --shadow:rgba(0,0,0,.35);

    --gradient1:#ff758c;

    --gradient2:#ff7eb3;

    --gradient3:#fad0c4;

    --gradient4:#ffd1ff;

}

/*=========================================
BODY BACKGROUND
=========================================*/

body{

background:

linear-gradient(-45deg,

#ff758c,

#ff7eb3,

#fad0c4,

#ffd1ff);

background-size:400% 400%;

animation:gradientMove 15s ease infinite;

position:relative;

}

/*=========================================
ANIMATED BACKGROUND
=========================================*/

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

/*=========================================
BACKGROUND GLOW
=========================================*/

body::before{

content:"";

position:fixed;

width:700px;

height:700px;

background:rgba(255,255,255,.08);

border-radius:50%;

filter:blur(120px);

top:-250px;

left:-250px;

animation:moveGlow1 15s infinite alternate;

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:600px;

height:600px;

background:rgba(255,182,193,.15);

border-radius:50%;

filter:blur(120px);

bottom:-220px;

right:-220px;

animation:moveGlow2 15s infinite alternate;

z-index:-2;

}

@keyframes moveGlow1{

to{

transform:translate(180px,180px);

}

}

@keyframes moveGlow2{

to{

transform:translate(-180px,-150px);

}

}

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

.container{

width:100%;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:30px;

}

/*=========================================
GLASS CARD
=========================================*/

.card{

width:100%;

max-width:560px;

padding:50px;

border-radius:30px;

background:var(--glass);

backdrop-filter:blur(18px);

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

box-shadow:

0 20px 60px rgba(0,0,0,.25),

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

text-align:center;

animation:cardFade 1.4s ease;

}

@keyframes cardFade{

0%{

opacity:0;

transform:translateY(50px) scale(.9);

}

100%{

opacity:1;

transform:translateY(0) scale(1);

}

}

/*=========================================
WELCOME TITLE
=========================================*/

.title{

font-family:'Great Vibes',cursive;

font-size:72px;

color:#fff;

text-shadow:

0 0 20px rgba(255,255,255,.4),

0 0 40px rgba(255,215,0,.3);

margin-bottom:10px;

animation:fadeDown 1.3s;

}

.subtitle{

font-size:20px;

font-weight:300;

letter-spacing:2px;

margin-bottom:40px;

color:#fff;

opacity:.9;

}

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

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

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

.btn{

display:block;

width:100%;

padding:18px;

margin:18px 0;

border-radius:60px;

text-decoration:none;

font-size:22px;

font-weight:600;

color:#fff;

transition:.35s;

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.8s;

}

.btn:hover::before{

left:100%;

}

.btn:hover{

transform:translateY(-5px) scale(1.03);

box-shadow:

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

}

.groom{

background:linear-gradient(135deg,#1565c0,#42a5f5);

}

.bride{

background:linear-gradient(135deg,#ff4f81,#ff85b5);

}

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

.footer{

margin-top:30px;

font-size:15px;

opacity:.8;

letter-spacing:1px;

}

/*=========================================
FLOATING HEART
=========================================*/

.heart{

position:fixed;

font-size:18px;

pointer-events:none;

animation:floatHeart linear forwards;

opacity:.7;

z-index:-1;

}

@keyframes floatHeart{

0%{

transform:translateY(100vh) scale(.4);

opacity:0;

}

20%{

opacity:.8;

}

100%{

transform:translateY(-20vh) scale(1.6);

opacity:0;

}

}

/*=========================================
GLOW TEXT
=========================================*/

.glow{

text-shadow:

0 0 8px rgba(255,255,255,.5),

0 0 20px rgba(255,215,0,.4),

0 0 40px rgba(255,215,0,.3);

}

/*=========================================
COMMON FADE
=========================================*/

.fade{

animation:fade 1s ease;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

/*=========================================
HIDDEN
=========================================*/

.hidden{

display:none;

}

/*==================================================
STYLE.CSS - PART 2
Premium Wedding Components
==================================================*/


/*=========================================
BUTTON RIPPLE EFFECT
=========================================*/

.btn{
    cursor:pointer;
}

.btn::after{

    content:"";

    position:absolute;

    width:20px;

    height:20px;

    background:rgba(255,255,255,.5);

    border-radius:50%;

    transform:scale(0);

    opacity:0;

}

.btn:active::after{

    animation:ripple .6s ease;

}

@keyframes ripple{

0%{

transform:scale(0);

opacity:.8;

}

100%{

transform:scale(18);

opacity:0;

}

}


/*=========================================
BUTTON ICON
=========================================*/

.btn span{

display:inline-block;

margin-right:10px;

font-size:26px;

animation:iconFloat 2s infinite ease-in-out;

}

@keyframes iconFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}


/*=========================================
GOLDEN BORDER
=========================================*/

.gold-border{

border:2px solid rgba(255,215,0,.45);

box-shadow:

0 0 10px rgba(255,215,0,.3),

0 0 25px rgba(255,215,0,.2);

}


/*=========================================
HEART BEAT
=========================================*/

.beat{

display:inline-block;

animation:heartbeat 1s infinite;

}

@keyframes heartbeat{

0%{

transform:scale(1);

}

20%{

transform:scale(1.25);

}

40%{

transform:scale(1);

}

60%{

transform:scale(1.22);

}

100%{

transform:scale(1);

}

}


/*=========================================
GLOWING TEXT
=========================================*/

.gold-text{

color:var(--gold);

text-shadow:

0 0 8px rgba(255,215,0,.6),

0 0 18px rgba(255,215,0,.4),

0 0 35px rgba(255,215,0,.2);

}


/*=========================================
CARD HOVER
=========================================*/

.card:hover{

transform:translateY(-8px);

transition:.5s;

box-shadow:

0 25px 70px rgba(0,0,0,.3),

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

}


/*=========================================
DIVIDER
=========================================*/

.divider{

width:180px;

height:2px;

margin:30px auto;

background:linear-gradient(

90deg,

transparent,

#FFD700,

transparent

);

}


/*=========================================
LOADER
=========================================*/

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#120912;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:99999;

transition:1s;

}

.loader h2{

font-family:'Cinzel',serif;

font-size:32px;

margin-top:25px;

letter-spacing:4px;

}

.loader-circle{

width:90px;

height:90px;

border-radius:50%;

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

border-top:4px solid gold;

animation:spin 1.2s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


/*=========================================
PAGE TRANSITION
=========================================*/

.page-transition{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

opacity:0;

pointer-events:none;

z-index:9999;

}

.page-transition.active{

animation:pageFade .8s forwards;

}

@keyframes pageFade{

0%{

opacity:0;

}

100%{

opacity:1;

}

}


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

.section{

padding:100px 20px;

}


/*=========================================
COMMON TITLE
=========================================*/

.section-title{

font-family:'Cinzel',serif;

font-size:48px;

margin-bottom:20px;

text-align:center;

color:#fff;

}


/*=========================================
COMMON PARAGRAPH
=========================================*/

.section-text{

max-width:850px;

margin:auto;

font-size:18px;

line-height:1.9;

text-align:center;

opacity:.95;

}


/*=========================================
GLOW CIRCLE
=========================================*/

.glow-circle{

position:absolute;

width:150px;

height:150px;

background:rgba(255,215,0,.18);

border-radius:50%;

filter:blur(70px);

animation:circleMove 8s infinite alternate;

}

@keyframes circleMove{

100%{

transform:

translate(80px,-60px)

scale(1.4);

}

}


/*=========================================
SPARKLE
=========================================*/

.sparkle{

position:absolute;

width:4px;

height:4px;

background:white;

border-radius:50%;

animation:sparkle 2s infinite;

}

@keyframes sparkle{

0%{

opacity:0;

transform:scale(.3);

}

50%{

opacity:1;

transform:scale(1.5);

}

100%{

opacity:0;

transform:scale(.3);

}

}


/*=========================================
COMMON IMAGE
=========================================*/

img{

max-width:100%;

display:block;

}


/*=========================================
BUTTON GROUP
=========================================*/

.button-group{

display:flex;

gap:20px;

justify-content:center;

flex-wrap:wrap;

}


/*=========================================
SHADOW
=========================================*/

.shadow{

box-shadow:

0 10px 30px rgba(0,0,0,.2);

}


/*=========================================
ROUNDED
=========================================*/

.round{

border-radius:20px;

}


/*=========================================
CENTER
=========================================*/

.center{

text-align:center;

}


/*=========================================
MARGIN UTILITIES
=========================================*/

.mt-20{

margin-top:20px;

}

.mt-40{

margin-top:40px;

}

.mt-60{

margin-top:60px;

}

.mb-20{

margin-bottom:20px;

}

.mb-40{

margin-bottom:40px;

}

.mb-60{

margin-bottom:60px;

}


/*=========================================
PADDING UTILITIES
=========================================*/

.p-20{

padding:20px;

}

.p-40{

padding:40px;

}


...
/* Existing CSS */


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

.countdown-section,
.bride-countdown-section{

    position:relative;

    min-height:100vh;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.countdown-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.25),

        rgba(0,0,0,.55)

    );

    z-index:1;

}

/*==============================
Luxury Masonry Gallery
==============================*/

/*=========================================
 PREMIUM COLLAGE GALLERY
=========================================*/

/*=========================================
Premium Gallery
=========================================*/

.groom-gallery-grid{

    display:grid;

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

    grid-template-rows:170px 170px 170px;

    gap:12px;

    margin-top:50px;

}

/* Layout */

.box1{

    grid-column:1;

    grid-row:1 / span 2;

}

.box2{

    grid-column:2;

    grid-row:1 / span 2;

}

.box3{

    grid-column:3;

    grid-row:1;

}

.box4{

    grid-column:3;

    grid-row:2;

}

.box5{

    grid-column:4;

    grid-row:1;

}

.box6{

    grid-column:4;

    grid-row:2;

}

.box7{

    grid-column:1;

    grid-row:3;

}

.box8{

    grid-column:2 / span 3;

    grid-row:3;

}

.gallery-box{

    overflow:hidden;

    border-radius:18px;

    position:relative;

    cursor:pointer;

    transition:.4s;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.gallery-box img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

    display:block;

}

.gallery-box:hover{

    transform:translateY(-8px);

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

}

.gallery-box:hover img{

    transform:scale(1.08);

}


/*=========================================
 END OF STYLE.CSS
=========================================*/