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

:root {
    --hue-color: 144;
    --primary-color: hsl(var(--hue-color), 21.9%, 23.3%);
    --primary-color-lighter: hsl(var(--hue-color), 12%, 46%);
    --second-color: hsl(350, 43%, 43%);
    --title-color: hsl(var(--hue-color), 8%, 15%);
    --text-color: hsl(var(--hue-color), 8%, 45%);
    --body-color: hsl(var(--hue-color), 60%, 95%);
    --zindex: 1000;
    --noindex: 900;
}


.wrap {
	width: 100%;
	height: 94vh;
	/* background-image: url('../assets/images/bg.png'); */
	display: -webkit-flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	/* -webkit-align-items: center; */
	text-align: center;
    position: relative;
    z-index: 0;
    padding: 20px;
}

.wrap::before {
    content: "";
    background-image: -webkit-linear-gradient(-90deg, rgb(255, 235, 196) 0%, rgb(255, 248, 235) 100%)!important;
    position: absolute;
    inset: 0;
    z-index: -2; 
}

.corner-image {
    position: absolute;
    height: auto;
    z-index:-1;
    opacity: 0.9;
}

/* Corner positions */
.bottom-left-corner {
    position: absolute;
    bottom: 55px;
    left: 0;
    width: 180px; 
}


.bottom-right-corner {
    bottom: 55px;
    right: 0;
    width: 150px; /* Adjust size */
}

.top-left-corner {
    top: 0;
    left: 0;
    width: 150px; /* Adjust size */
}

.top-right-corner {
    top: 0;
    right: 0;
    width: 150px; /* Adjust size */
}

.title-section {
    text-align: center;
    background-size: 95%;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.name{
    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    /* font-family: 'Dancing Script', cursive ,serif; */
    font-family: 'Great Vibes', serif;
    margin: -0.5rem!important;
    width: 200px;
}

.and{
    font-size: 2rem;
    /* margin: -20px!important; */
}

/* .title h1 {
    font-family: 'Dancing Script', cursive;
    font-weight: bold;
    font-style: normal;
    font-size: 35px;
    color: var(--primary-color);
} */

.title h3 {
    font-weight: 300;
    font-family: 'Dancing Script', cursive ,serif;
    font-size: 30px;
    color: var(--primary-color);
    margin-top: 5px;
}

.title-label {
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.wrap-details {
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 14px !important;
}

.title h3 {
	font-weight: 300;
	font-family: 'Dancing Script', cursive ,serif;
	font-size: 30px;
	color: var(--primary-color);
	margin-top: 5px;
}

.title{
	color: var(--primary-color);
    /* font-weight: bolder; */
}

.main-date{
   border: 0px solid black;
   width: 140px;
}
.main-date p:first-child {
    border-bottom: 1px solid var(--primary-color); 
	padding: 0px;
}
.main-date p:nth-child(2){
	margin-top: -12px;
}
.wrap-location{
   width: 300px;
   text-align: center;
   font-family: Verdana, Geneva, Tahoma, sans-serif; 
}

.main{
    /* border: 2px solid red; */
    /* margin-top: -100px!important; */
}

.title-section {
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1; /* For stacking context */
}

.title-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../assets/images/center.png');
    background-size: 210px!important;
    filter: brightness(-10);
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5; /* Lower opacity */
    z-index: -1; /* Puts the background behind content */
}


.brideandgroom{
	color: var(--primary-color);
    background-image: -webkit-linear-gradient( 90deg, rgb(255, 235, 196) 0%, rgb(255, 248, 235) 100%);
	width: 100%;
	position: relative;
    overflow: hidden; 

}
.brideandgroom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/bg.png');
    background-size: cover;
    transform: rotate(180deg); 
    z-index: -1;
}
.venue-details{
	background-image: -webkit-linear-gradient( -90deg, rgb(255, 235, 196) 0%, rgb(255, 248, 235) 100%);
	padding: 10px;
	width: 100%;
	color: var(--primary-color);
}

.venueContainer{
	border: 1px solid var(--primary-color)!important;
}

.wedding-date{
    background-image: -webkit-linear-gradient( 90deg, rgb(255, 235, 196) 0%, rgb(255, 248, 235) 100%);
    color: var(--primary-color);
}
.welcome-page{
    background-image: -webkit-linear-gradient( 90deg, rgb(255, 235, 196) 0%, rgb(255, 248, 235) 100%);
    background-color: white;
    color: var(--primary-color);
}
.gallery{
    background-image: -webkit-linear-gradient( -90deg, rgb(255, 235, 196) 0%, rgb(255, 248, 235) 100%);
    color: var(--primary-color);
}
.end-section{
   background-image: -webkit-linear-gradient( 90deg, rgb(255, 235, 196) 0%, rgb(255, 248, 235) 100%);
    color: var(--primary-color);
}

.joinUs{
    font-size: 15px;
    margin-bottom: 0px!important;
}

.scroll-section{
	display: flex;
	align-items: center;
	justify-content: center;
}

.scroll-down {
	height: 30px;
	width: 10px;
	/* border: 2px solid black; */
	position: absolute;
	border-radius: 50px;
	cursor: pointer;
  }
  .scroll-down::before,
  .scroll-down::after {
	content: "";
	position: absolute;
	top: 20%;
	left: 50%;
	height: 10px;
	width: 10px;
	transform: translate(-50%, -100%) rotate(45deg);
	border: 2px solid rgb(135, 84, 102);
	border-top: transparent;
	border-left: transparent;
	animation: scroll-down 1s ease-in-out infinite;
  }
  .scroll-down::before {
	top: 30%;
	animation-delay: 0.3s;
	/* animation: scroll-down 1s ease-in-out infinite; */
  }
  
  @keyframes scroll-down {
	0% {
	  /* top:20%; */
	  opacity: 0;
	}
	30% {
	  opacity: 1;
	}
	60% {
	  opacity: 1;
	}
	100% {
	  top: 90%;
	  opacity: 0;
	}
  }