:root {
    --orange: #DEA254;
    --blue: #7393b3cf;
    --text-color: white;
    --background-cream: #fffbef;
    --background-secondry: #fffbef;
    --banner-colour:#eff7ff;
    --theme-blue:#7393b3;
    --theme-orange:#DEA254;
    --theme-yellow:#fffb8c;
    --theme-peach:#F8D3A2;
} 

body{background-color: var(--background-cream);}


/*HEADER*/
.nav-container{	height: 50px;	width: 100%;	background-color: var(--blue);	color: white;	font-size: 24px;}
a{color: inherit;text-decoration: none;}
nav {position: sticky; top: 0; left: 0; width: 100%; z-index: 99999; background: transparent;transition: all 1s ease; border-bottom: 3px solid var(--orange);}
nav.scrolled {background-color: var(--blue) ;box-shadow: 0 2px 15px rgba(0,0,0,0.08);backdrop-filter: blur(8px); border-bottom: 0}
nav.scrolled ul a {color: white}
nav.scrolled .menu-toggle{color: white;}
nav ul {list-style: none;display: flex; justify-content: center; margin-bottom: 0}
nav ul li a{margin-right: 0; text-decoration: none; color: black;}
nav ul li {	text-decoration: none;	font-weight: bold;	transition: background 0.3s, color 0.3s; font-size: 18px; padding: 10px 20px 10px 20px;}
nav ul li:hover {background-color: #587088;   border-radius: 4px;}

.menu-toggle{display: none}
#menu-checkbox{display: none}
.top-spacer{padding: 25px;} 

.top-banner{text-align: center; border-bottom: 1px solid var(--orange); line-height: 25px; padding-top: 25px;}
.top-banner-p1{font-family: "Corinthia", cursive; font-weight: 400; font-style: normal; font-size: 60px;}
.top-banner-p2{font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 25px;}

/*HEADER MOBILE */
@media (max-width: 768px) {
    nav ul {display: none; flex-direction: column; }
    .menu-toggle {display: block; padding: 10px 20px; cursor: pointer; user-select: none; font-size: 20px;}
    nav.scrolled .menu-toggle{color: white;}
    #menu-checkbox {display: none;}
    #menu-checkbox:checked + ul {display: block; padding: 12px;}
    nav:has(#menu-checkbox:checked) {background-color: var(--blue); box-shadow: 0 2px 15px rgba(0,0,0,0.08); backdrop-filter: blur(8px); border-bottom: 0}
    nav:has(#menu-checkbox:checked) ul a {color: white}
    nav:has(#menu-checkbox:checked) label {color: white}
    nav ul li a{display: block; border-top: 1px solid #444; padding: 8px;}
    nav ul li{padding: 0}
    nav ul li a:hover {background-color: #587088;   border-radius: 4px;}
    nav ul li:hover {background-color: #ffffff00;   border-radius: 4px;}

}

/*FOOTER*/
.footer {background-color: var(--blue);}
.footer-text {color: #fff; font-size: 1.2rem; text-align: center;}

/*BANNER*/
.banner-container {overflow: hidden;background: var(--background-cream) ;padding: 10px 0; min-height: fit-content;}
.banner-track {	display: flex;	width: max-content;	animation: scroll 40s linear infinite;}
.banner-track img {	width: 50%;	object-fit: cover;	margin-right: 20px;	border-radius: 10px;}
@keyframes scroll {	from {transform: translateX(0);}to {transform: translateX(-50%);}}
.banner-container:hover .banner-track {animation-play-state: paused;}


/* MISC */
.spacer{margin-top: 15px; height: 1px} 
.wildflowers{background-image: url(/images/wildflowers.png); background-size: contain; background-repeat: repeat-x;}

.banner-color{background-color: var(--banner-colour);}
.hrorange {border-top: 2px solid var(--orange) !important; width: 50% ; margin: 20px auto; opacity: 1;}
.hrtitle {border-top: 2px solid var(--blue) !important; width: 20% ; margin: 5px auto 30px auto; opacity: 1;}
.sub-title{font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; font-size: 28px}
.story{width: 50%}
@media (max-width: 768px) { .story{width: 100%}}
.py-5t{padding-top: 3rem}
.theme-blue{background-color:var(--theme-blue); color: white;}
.theme-orange{background-color:var(--theme-orange); color: white;}
.theme-yellow{background-color:var(--theme-yellow); color: black;}
.theme-peach{background-color:var(--theme-peach); color: black;}
.theme-dresses{max-height: 300px; width: 100%}
.theme-suits{width: 100%}

.grid-border{border: 1px #dea2544d solid}
.trans-logo{height: 7rem;}
.trans-logo img{height: 75%; width: auto; margin: auto; padding-bottom: 15px}


/* TIMELINE */
.timeline {position: relative; max-width: 800px; margin: auto; padding-top: 3rem; padding-bottom: 3rem;}
.timeline::before {content: '';position: absolute;left: 50%;top: 0;width: 4px;height: 100%;background: #dee2e6;transform: translateX(-50%);}
.timeline-item {position: relative;margin-bottom: 50px;width: 50%;padding: 0 40px;}
.timeline-item.left {left: 0;text-align: right;}
.timeline-item.right {left: 50%;}
.timeline-content {background: white;padding: 20px;border-radius: 12px;box-shadow: 0 4px 12px rgba(0,0,0,0.08);}
.timeline-dot {position: absolute;top: 20px;width: 20px;height: 20px;background: #0d6efd;border-radius: 50%;z-index: 10;}
.timeline-item.left .timeline-dot {right: -10px;}
.timeline-item.right .timeline-dot {left: -10px;}
.timeline-date {font-size: 0.9rem;color: #6c757d;margin-bottom: 10px;}
@media (max-width: 768px) {
.timeline::before {left: 20px;}
.timeline-item {width: 100%;padding-left: 60px;padding-right: 20px;margin-bottom: 30px;}
.timeline-item.left, .timeline-item.right {left: 0;text-align: left;}
.timeline-dot {left: 10px !important;}
}




/* FONTS */
.corinthia-regular {font-family: "Corinthia", cursive; font-weight: 400; font-style: normal; font-size: 60px; line-height: 45px;}
.cormorant-garamond-regular {font-family: "Cormorant Garamond", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}





/* Invite */
.invite-wrap {min-height: calc(100vh - 120px); display: flex; justify-content: center; align-items: center;}
.invitation {width: min(95vw, 1200px); aspect-ratio: 3568 / 2481; position: relative; perspective: 4000px; cursor: pointer;}
.invite-centre {position: absolute;left: 25%; width: 50%; height: 100%; z-index: 1;}
.invite-centre img { width: 100%; height: 100%; object-fit: cover; display: block;}
.invite-flap {position: absolute; top: 0; width: 25%; height: 100%; transform-style: preserve-3d; transition: transform 1.4s cubic-bezier(.65,.05,.36,1); z-index: 5;}
.invite-left {left: 0; transform-origin: right center; transform: rotateY(180deg);}
.invite-right {left: 75%; transform-origin: left center; transform: rotateY(-180deg);}
.invite-face {position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;}
.invite-face img {width: 100%; height: 100%; object-fit: cover; display: block;}
.invite-back {transform: rotateY(180deg);}
.invitation.open .invite-left {transform: rotateY(0deg);}
.invitation.open .invite-right {transform: rotateY(0deg);}