/* ===== Glassmorphism Card ===== */
.glass-card, .glass-card-primary {
    background: rgba(255,255,255,0.7);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.1 );
    backdrop-filter: blur(12px);
    border-radius: 1.7rem;
    border: 1.5px solid rgba(255,255,255,0.2);
    transition: box-shadow 0.3s, transform 0.3s;
}
.glass-card:hover, .glass-card-primary:hover {
    box-shadow: 0 12px 44px 0 rgba(31,38,135,0.13), 0 2px 4px 0 #ffb6b960;
    transform: translateY(-3px) scale(1.017);
}
.glass-card-primary {
    background: rgba(255,255,255,0.90);
    border: 2px solid #b7aedb80;
}

.rainbow-text {
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
    background-size: 400% 400%;
    color: transparent;
    /* background-clip for all browsers: */
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    /* text-fill for Safari and Chrome: */
    -webkit-text-fill-color: transparent;
    /* animation for rainbow shift: */
    animation: rainbowShift 5s ease-in-out infinite;
}

@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


.highlight-text {
    background: var(--gradient);
    padding: 0 0.6em;
    border-radius: 0.7em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.text-gradient {
    background: var(--gradient);
    -webkit-text-fill-color: transparent;
}

/* ====== Fun Section Styles ====== */
.animated-container {
    animation: fadeIn 1s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(25px);}
    to   { opacity: 1; transform: none;}
}


.slide-up {
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp 1s forwards;
}
.slide-up.delay-1 { animation-delay: 0.22s; }
.slide-up.delay-2 { animation-delay: 0.44s; }
.slide-up.delay-3 { animation-delay: 0.66s; }
.slide-up.delay-4 { animation-delay: 0.88s; }
.slide-up.delay-5 { animation-delay: 1.1s; }
.slide-up.delay-6 { animation-delay: 1.3s; }
.slide-up.delay-7 { animation-delay: 1.55s; }
@keyframes slideUp {
    to { opacity: 1; transform: none; }
}


/* ====== Floating Background Elements ====== */
.floating-elements {
    position: fixed;
    top:0; left:0; width:100vw; height:100vh;
    pointer-events: none;
    z-index: 0;
}
.floating-circle, .floating-heart, .floating-star {
    position: absolute;
    opacity: 0.22;
    z-index: 0;
    font-size: 2.5rem;
    filter: blur(0.5px);
}
.circle-1 { left: 4vw; top: 11vh; width: 65px; height: 65px; background: var(--pink); border-radius:50%;}
.circle-2 { right: 6vw; top: 19vh; width: 40px; height: 40px; background: var(--lavender); border-radius:50%;}
.circle-3 { left: 13vw; bottom: 7vh; width: 52px; height: 52px; background: var(--mint); border-radius:50%;}
.heart-1  { right: 13vw; bottom: 15vh; color: #ff9a8b; }
.heart-2  { left: 16vw; bottom: 22vh; color: #ffb6b9;}
.star-1   { left: 47vw; top: 12vh; color: #ffe484; font-size: 2.2rem;}
.star-2   { right: 12vw; top: 34vh; color: #b7aedb; font-size: 2.2rem;}

/* ====== Card Section Icons and Animations ====== */
.icon-float { box-shadow: 0 2px 10px 0 #ffb6b920; }
.icon-spin { animation: spin 5s linear infinite;}
@keyframes spin { 100% { transform: rotate(360deg);} }

.heartbeat { animation: heartbeat 1.8s infinite;}
@keyframes heartbeat {
    0%,100% { transform: scale(1);}
    10%,30% { transform: scale(1.18);}
    20%,40% { transform: scale(1.12);}
    50%,60% { transform: scale(1);}
}

.sparkle-trail {
    position: relative;
    left: 4px;
    top: -7px;
    opacity: 0;
    width: 24px;
    height: 24px;
    background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/2728.png') no-repeat center/cover;
    pointer-events: none;
    transition: opacity 0.35s, transform 0.35s;
}
.sparkle-overlay {
    position: absolute;
    right: 12px; top: 10px;
    width: 32px; height: 32px;
    background: url('https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/2728.png') no-repeat center/contain;
    opacity: 0.25;
}

.hover-float:hover { transform: translateY(-6px) scale(1.025); }
.hover-grow:hover  { transform: scale(1.03) rotate(-2deg);}
.shadow-soft { box-shadow: 0 6px 20px 0 #b7aedb33, 0 2px 4px 0 #b7aedb12; }



/* ====== Responsive Tweaks ====== */
@media (max-width: 800px) {
    .glass-card, .glass-card-primary { padding: 1.2rem 0.2rem !important; }
    .rainbow-text, .highlight-text { font-size: 1.22em; }
    .tiny-avatar { width: 32px; height: 32px; font-size: 1.2rem;}
}
@media (max-width: 600px) {
    .hero-section h1, .hero-section .lead { font-size: 1.25em !important; }
    .glass-card, .glass-card-primary { padding: 0.5rem 0.1rem !important; }
}

/* ====== Gradient Section for CTA ====== */
.bg-soft-gradient {
    background: linear-gradient(135deg, #ffb6b94b 0%, #b7aedb2b 100%);
    border-radius: 1.2em;
}

.card-body {
    font-size: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: left !important;   
    text-align: left !important;     
}

.glass-card,
.glass-card-primary {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Optional for spacing between cards: */
    margin-bottom: 2rem !important;
}

/* ====== Avatars and Details ====== */
.tiny-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 6px 0 #ccecff99;
    border: 2px solid #fff9;
    margin: 0 3px;
    transition: transform 0.3s;
}


.tiny-avatar:nth-child(1) { animation-delay: 0s; }
.tiny-avatar:nth-child(2) { animation-delay: 0.15s; }
.tiny-avatar:nth-child(3) { animation-delay: 0.30s; }
.tiny-avatar:nth-child(4) { animation-delay: 0.45s; }
.tiny-avatar:nth-child(5) { animation-delay: 0.60s; }

.bounce {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}

:root {
    --pink: #FFB6B9;
    --mint: #B5EAD7;
    --sunshine: #FFDAC1;
    --lavender: #B7AEDB;
    --sky: #A2D5F2;
    --coral: #FF9A8B;
    --primary: #84A9AC;
    --gradient: linear-gradient(90deg, #FFB6B9, #FFDAC1, #B5EAD7, #B7AEDB, #A2D5F2);
}

make-edges-round{
    border-radius:70px
}