:root {
     --primary-gold: #FFDCDC;
     --primary-rose: #FFE8CD;
     --primary-purple: #FFF2EB;
     --primary-teal: #FFD6BA;
     --gradient-sunset: linear-gradient(135deg,
             #FFDCDC,
             #FFF2EB,
             #FFD6BA);
     --gradient-ocean: linear-gradient(135deg, #FFE8CD, #FFD6BA);
     --gradient-royal: linear-gradient(135deg, #FFDCDC, #FFF2EB);
     --text-dark: #2c3e50;
     --text-light: #ffffff;
     --shadow-glow: 0 0 30px rgba(255, 107, 107, 0.3);
     --shadow-elegant: 0 15px 35px rgba(0, 0, 0, 0.1);
 }


 .italianno-regular {
     font-family: "Italianno", cursive;
     font-weight: 400;
     font-style: normal;
 }

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

 body {
     font-family: "Poppins", sans-serif;
     line-height: 1.6;
     color: var(--text-dark);
     overflow-x: hidden;
     scroll-behavior: smooth;
 }

 /* home-banner Section */
 .home-banner {
     height: 650px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: var(--text-light);
     position: relative;
     backdrop-filter: blur(0px);
     background: linear-gradient(180deg, #ffffff00 30%, #ffffffbf) 30%, url(/bg-3.png) no-repeat center center / cover;
 }

 .home-banner-content {
     padding: 2rem;
     border-radius: 30px;
     background: none !important;
 }

 .home-banner h1 {
     /* font-family: "Great Vibes", cursive; */
     font-family: "Cookie", cursive;
     font-size: 4rem;
     color: darkolivegreen;
     margin-bottom: 1rem;
 }

 .date i {
     position: relative;
     bottom: 10px;
     font-size: 20px;
     opacity: 00.62;
 }

 p.start {
     position: absolute;
     top: 18px;
     color: #c66a37;
     font-size: 15px;
     font-weight: 600;
     background: #efeee9;
 }

 .About-invite-inn {
     text-align: center;
     line-height: 30px;
     padding: 0 15px;
 }

 .date i:last-child {
     left: 16px;
     bottom: 0;
 }

 .About-invite-inn p {
     font-size: 18px;
     font-style: italic;
     font-weight: 400;
     font-family: "poppins", cursive;
 }

 @keyframes textGlow {
     0% {
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
     }

     100% {
         text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
     }
 }

 .home-banner .ampersand {
     font-size: 2rem;
     color: #c55d1f;
     font-family: 'Carattere';
     margin: 5px 0rem 0px 0rem;
     /* animation: pulse 9s ease-in-out infinite; */
 }


 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.2);
     }
 }

 .home-banner .date {
     font-family: "poppins", cursive;
     font-size: 2rem;
     font-weight: 500;
     padding: 1rem 2rem;
     /* background: var(--gradient-sunset); */
     border-radius: 50px;
     display: inline-block;
     /* box-shadow: var(--shadow-elegant); */
 }

 /* Countdown Section */
 .countdown {
     padding: 30px 0;
     background: #f5f5f5;
     /* backdrop-filter: blur(10px); */
     text-align: center;
 }

 .countdown h2 {
     font-family: "Cookie", cursive;
     font-size: 2.25rem;
     margin-bottom: 3rem;
     background: darkolivegreen;
     background-clip: text;
 }

 .countdown-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 2rem;
     max-width: 800px;
     margin: 0 auto;
 }

 .countdown-item {
     padding: 2rem;
     border-radius: 20px;
     color: #c75f28;
     font-family: 'Poppins';
     box-shadow: var(--shadow-elegant);
     transition: transform 0.3s ease;
     animation: countdownPulse 2s ease-in-out infinite;
 }

 .event-time span {
     color: darkolivegreen;
 }

 .countdown-item:hover {
     transform: translateY(-10px) scale(1.05);
 }

 @keyframes countdownPulse {

     0%,
     100% {
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     }

     50% {
         box-shadow: 0 25px 45px rgba(102, 126, 234, 0.3);
     }
 }

 .countdown-number {
     font-size: 3rem;
     font-weight: 700;
     display: block;
     margin-bottom: 0.5rem;
 }

 .countdown-label {
     font-size: 1.2rem;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 /* Events Section */
 .events {
     padding: 30px 0 ;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
 }

 .events h2 {
     font-family: "Cookie", cursive;
     font-size: 2rem;
     text-align: center;
     margin-bottom: 2rem;
     /* background: var(--gradient-sunset); */
     /* -webkit-background-clip: text; */
     /* -webkit-text-fill-color: transparent; */
     /* background-clip: text; */
 }

 .event-card {
     background: white;
     border-radius: 25px;
     overflow: hidden;
     box-shadow: var(--shadow-elegant);
     transition: all 0.3s ease;
     margin-bottom: 2rem;
     position: relative;
 }

 .event-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 5px;
     background: var(--gradient-sunset);
 }

 .event-card:hover {
     transform: translateY(-15px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
 }

 .event-image {
     height: 350px;
     background-size: cover;
     background-position: center;
     position: relative;
     overflow: hidden;
 }

 .event-image::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* background: var(--gradient-royal); */
     opacity: 0.7;
 }

 .event-content {
     padding: 1.42rem;
     position: relative;
     z-index: 2;
 }

 .event-date {
     font-weight: 600;
     color: #c75f28;
     font-size: 1.08rem;
     margin-bottom: 1rem;
 }

 .event-title {
     font-family: "Playfair Display", serif;
     font-size: 1.6rem;
     font-weight: 600;
     margin-bottom: 1rem;
     color: var(--text-dark);
 }

 .event-time {
     font-size: 1rem;
     color: #c75f28;
     margin-bottom: 1rem;
     font-weight: 500;
 }

 /* RSVP Section */

 /* Footer */
 .footer {
     padding: 2rem 0;
     background: rgba(44, 62, 80, 0.9);
     color: white;
     text-align: center;
     backdrop-filter: blur(10px);
 }

 .footer .heart {
     color: var(--primary-rose);
     animation: heartbeat 2s ease-in-out infinite;
 }

 @keyframes heartbeat {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.3);
     }
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .home-banner h1 {
         font-size: 2.5rem;
         display: flex;
         flex-direction: column;
         letter-spacing: 2.4px;
     }

     .home-banner .date {
         font-size: 16px;
         color: #c55d1f;
         font-style: oblique;
     }

     .countdown h2,
     .events h2,
     .rsvp h2 {
         font-size: 2.25rem;
         color: darkolivegreen;
     }

     .countdown-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .countdown-number {
         font-size: 2rem;
     }

     .home-banner-content {
         padding: 2rem;
         margin: 1rem;
         width: 90%;
     }
 }

 /* Loading Animation */
 .loading {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity 0.3s ease;
 }

 .loading.hidden {
     opacity: 0;
     pointer-events: none;
 }

 .loading-content {
     text-align: center;
     color: darkslategrey;
 }

 .loading-hearts {
     font-size: 3rem;
     margin-bottom: 2rem;
 }

 .loading-heart {
     display: inline-block;
     margin: 0 0.5rem;
     animation: loadingPulse 1.5s ease-in-out infinite;
 }

 .loading-heart:nth-child(1) {
     animation-delay: 0s;
 }

 .loading-heart:nth-child(2) {
     animation-delay: 0s;
 }

 .loading-heart:nth-child(3) {
     animation-delay: 0.6s;
 }

 @keyframes loadingPulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 0.5;
     }

     50% {
         transform: scale(1.2);
         opacity: 1;
     }
 }

 /* Scroll Animations */
 /* .animate-on-scroll {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
      } */

 /* .animate-on-scroll.animated {
        opacity: 1;
        transform: translateY(0);
      } */

 .About-invite-inn {
     text-align: center;
     line-height: 30px;
 }

 section.About-invite {
     padding: 30px 15px 25px;
     background: #f5f5f5;
 }

 .About-invite-inn h4 {
     font-family: "Cookie", cursive;
     text-transform: capitalize;
     font-size: 2rem;
     font-weight: 500;
     letter-spacing: .4px;
     color: #c75f28;
     padding-bottom: 8px;
 }

 .carattere-regular {
     font-family: "Carattere", cursive;
     font-weight: 400;
     font-style: normal;
 }

 .About-invite-inn h6 {
     font-family: "Carattere", cursive;
     font-size: 25px;
     font-weight: 500;
 }


 /* ============= */
 .vkey-pic {
     /* position: absolute; */

 }

 .soori-pic {
     /* position: absolute; */

 }


 .vkey-pic img {
     width: 26%;
     position: absolute;
     bottom: 0;
     left: 0;
     padding-left: 10px;
 }


 .soori-pic img {
     width: 28%;
     position: absolute;
     bottom: 0;
     right: 0;
     padding-right: 10px;
 }

 /* ============= */


 .scan-for img {
     width: 50%;
 }

 .scan-for {
     text-align: center;
 }

 .scan-for p {
     padding-left: 0;
 }

 p.start {
     position: absolute;
     top: 18px;
     color: #c66a37;
     font-size: 12px;
     font-weight: 600;
     background: #efeee9;
 }

 footer.footer p {
     margin: 0 !important;
 }

 .event-date span {
     font-size: 14px !important;
     font-weight: 400;
 }

 .loading-content,
 .loading-content h2 {
     font-family: "Cookie", cursive;
     font-weight: 500;
     letter-spacing: .4px;
     color: #c75f28;
 }

 /* da */



 .family-invite {
     padding: 3rem 1rem;
     background: #fff8f9;
 }

 .invite-container {
     max-width: 1100px;
     margin: auto;
     display: flex;
     gap: 2rem;
     flex-wrap: wrap;
     align-items: flex-start;
 }

 .invite-image {
     flex: 1 1 250px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.1);
     background: #eee;
 }

 .invite-image img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
 }

 .invite-content {
     flex: 2 1 500px;
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .invite-title {
     font-family: "Cookie", cursive;
     font-size: 2rem;
     margin-bottom: 0rem;
     color: #c46130;
     letter-spacing: .5px;
 }

 .invite-text {
     font-size: 1rem;
     line-height: 1.6;
     color: #555;
 }
 p.invite-text strong {
    color: darkolivegreen;
}

 .family-names {
     display: flex;
     gap: 1.5rem;
     flex-wrap: wrap;
     margin-top: 0.5rem;
 }

 .family-block {
     /* flex: 1 1 200px; */
     background: #fff;
     padding: 1rem;
     border-radius: 12px;
     box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.06);
 }

 .family-block h3 {
     margin-bottom: 0.5rem;
     font-size: 1.05rem;
     color: #c75f28;
 }

 .family-block p {
     margin: 2px 0;
     font-size: 0.92rem;
     color: #666;
 }



 @media (max-width: 768px) {
     .invite-container {
         flex-direction: column;
     }



     .family-names {
         flex-direction: column;
     }

     .invite-title {
         font-family: "Cookie", cursive;
         font-size: 2rem;
         margin-bottom: 0rem;
         color: #c46130;
     }
 }