/* Typo Import */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Bold.woff2') format('woff2'),
        url('../fonts/Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Book.woff2') format('woff2'),
        url('../fonts/Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Light.woff2') format('woff2'),
        url('../fonts/Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NewYork';
    src: url('../fonts/NewYork.woff2') format('woff2'),
        url('../fonts/NewYork.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Liana';
    src: url('../fonts/Liana.woff2') format('woff2'),
        url('../fonts/Liana.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





/*Common css*/
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

:root {
	--black: #171717;
	--cream: #f4eeea;
	--peach: #f4eeea
	;
	--brown: #3c231f;
	--white: #fff;
	--grey: #808080;
	--transition: 0.5s all ease-in-out;
	--primary-font: 'Montserrat', sans-serif;
	--secondary-font: 'NewYork', sans-serif;
	--normal: normal;
	--light: 300;
	--bold: bold;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: var(--light-black);
	scroll-behavior: smooth;
}

body {
	font-family: var(--primary-font) !important;
	margin: 0;
	font-size: 1.1rem;
	font-weight: var(--normal);
	line-height: 1.5;
	color: var(--brown);
	font-style: normal;
	/*overflow-x: clip;*/
}

img {
	max-width: 100%;
	width: 100%;
}

a {
	color: var(--black);
	text-decoration: none;
	background-color: transparent;
	transition: var(--transition);
}

a:hover {
	text-decoration: underline;
	text-underline-offset: .5rem;
	color: var(--black);
	transition: var(--transition);
}


h1, h2, h3 ,h4{
	font-family: var(--secondary-font);
	color: var(--brown);
}

h1 {
	font-size: 5.4rem;
	line-height: 1.2em;

}

h2 {
	font-size: 4.4rem;
	line-height: 1.2em;
}

h3 {
	font-size: 1.6rem;
	line-height: 1.2em;
}

h4 {
	font-size: 1.3em;
	font-weight: 400;
}

h6{
	font-size: 1.2rem;
	font-weight: 400;
}


/* Font Classes */
.primary-font{
	font-family: var(--primary-font);
}
.secondary-font{
	font-family: var(--secondary-font);
}
.bold-text{
	font-weight: var(--bold);
}
.light-text{
	font-weight: var(--light);
}
.normal-text{
	font-weight: var(--normal);
}
.mixed-font {
	font-size: 3.5rem;
}
.mixed-font span{
	font-family: 'Liana';
}
.sup-text span {
	font-size: 1rem;
	position: relative;
	top: -0.4em;
}

/* Color Classes */
.white-text {
	color: var(--white) !important;
}

.white-bg {
	background-color: var(--white);
}
.black-bg {
	background-color: var(--black);
}
.grey-text {
	color: var(--grey);
}
.grey-bg {
	background-color: var(--grey);
}
.peach-bg{
	background-color: var(--peach);
}
.cream-bg{
	background-color: var(--cream);
}




/* Buttons */
.custom-button {
	color: var(--white);
	text-decoration: none;
	padding: 1.7rem 3.65rem;
	line-height: 1rem;
	display: inline-flex;
	letter-spacing: 1px;
	background-image: url('../../../../wp-content/uploads/2023/09/button.svg');
	font-size: 2rem;
	margin-top: 1rem;
	border-radius: 3px;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
	transform: var(--transition);
	font-family: var(--secondary-font);
}

.custom-button:hover {
	color: var(--white);
	text-decoration: none;
	filter: drop-shadow(0px 10px 10px #0000005e);
	transform: var(--transition);
}

/* Presets Classes */
.container {
	max-width: 1300px;
}

.p-top {
	padding-top: 6rem;
}

.p-bottom {
	padding-bottom: 6rem;
}



/* Common Blocks */


/*Header CSS*/
/* Logo */
.custom-logo {
	width: auto;
	height: auto;
	position: relative;
	bottom: 0rem;
	max-width: 200px;
}

/* Header */
.header-style {
	position: relative;
	width: 100%;
	background-color: var(--white);
	padding: 1em 0em;
	z-index: 6;
}
.navbar {
	justify-content: center;
}
#navbar-list {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--cream);
	transition: 0.3s all ease-in-out;
	transform: translateY(-100%);
}
#navbar-list.show {
	transform: translateY(0%);
	transition: 0.3s all ease-in-out;
}
.navbar-toggler {
	position: absolute;
	right: 1rem;
	z-index: 1;
	cursor: pointer;
	outline: none !important;
	border: 0px;
	display: flex;
	align-items: center;
	gap: 0.3em;
}
.navbar-toggler:focus {
	box-shadow: none;
}
.main_menu_container #menu-main-menu {
	display: flex;
	list-style-type: none;
	gap: 2.5rem;
	justify-content: right;
	align-items: center;
	margin-bottom: 0rem;
	flex-direction: column;
	padding: 0em;
}
.main_menu_container {
	width: 100%;
}
.main_menu_container #menu-main-menu a {
	font-size: 1.9rem;
	color: var(--brown);
	font-family: var(--secondary-font);
	text-transform: uppercase;
}

.main_menu_container #menu-main-menu a:hover {
	text-decoration: underline;
	color: var(--brown);
}


/*Footer CSS*/
.footer{
	background-color: var(--brown);
}
.whatsapp-contact {
	width: 50px;
	position: fixed;
	bottom: 5em;
	right: 3em;
}


/* Home Page */
.intro .overlay-content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}
.our-story p {
	font-size: 1.1rem;
	line-height: 1.7em;
	font-family: 'Montserrat', sans-serif;


}
.our-story .col-sm-7 {
	padding-left: 4em;
}
.blend-multiply{
	mix-blend-mode: multiply;
}

.timeline {
	width: 100%;
	padding: 15px 0 0px;
	position: relative;
	overflow: hidden;
	display: flex;
	margin: 40px 0px 0px 0em;
	flex-direction: column;
}

.timeline::before {
	content: '';
	position: absolute;
	margin: 0px auto;
	z-index: 1;
	border: 2px dotted var(--brown);
	top: 5%;
	left: 3%;
	width: 2px;
	height: 75%;
	transform: none;
}
.timeline-block {
	flex: 1 1 25%;
	position: relative;
	text-align: left;
	max-width: 100%;
	margin-top: 0em;
	margin-left: 3em;
	margin-bottom: 2em;
}


.marker {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--peach);
	z-index: 1;
	position: absolute;
	margin-top: 0;
	left: -45px;
	transform: none;
	top: 5px;
	border: 3px solid var(--brown);
}
.timeline-content {
	margin-top: -11px;
}
.timeline-content h3 {
	font-size: 1.5rem;
	margin-bottom: 0rem;
	text-transform: capitalize;
}
.timeline-content p {
	color: var(--brown);
	font-size: 1.2rem;
}
.our-journey h4 {
	font-size: 1.4rem;
}
.save-the-date h2 {
	/* text-align: right; */
}
.save-the-date h6 {
	padding-left: 4em;
}
.our-journey h2 {
	font-size: 2.9rem;
}

.celebration-begins h3 {
	font-size: 2.5rem;
}


/* RSVP */
.intro.rsvp-step-one {
	display: flex;
	align-items: center;
	justify-content: center;
	/* background-image: url('../../../../wp-content/uploads/2023/09/intro.jpg');
	background-size: cover; */
	position: relative;
	min-height: 90vh;
	padding: 5em 0em;
}
.intro.rsvp-step-one::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--cream);
	opacity: .7;
	z-index: 0;
}
.form-one {
	margin: 0px auto;
	position: relative;
}
.form-one > .wpcf7{
	width: 60%;
	margin: 0px auto;
	position: relative;
}
.form-one > h3 {
	font-size: 2.7rem;
}
.form-one > p {
	width: 80%;
	margin: 0px auto;
}
.form-one .wpcf7-form {
	margin-top: 5em;
}
.form-one .wpcf7-form-control-wrap {
	display: block;
}
.form-one label {
	margin-bottom: 2rem;
	color: var(--brown);
	width: 100%;
}
.form-one label input {
	padding: 0.5em 1em;
	width: 100%;
	font-family: Verdana;
	color: var(--brown);
	caret-color: var(--brown);
}
.form-one label input::-webkit-input-placeholder {
	line-height:normal!important;
	transform:translate3d(0,-4px,0);
}
.form-one label input:focus {
	outline: var(--brown);
}
.form-one label textarea {
	width: 100%;
	color: var(--brown);
	padding: 0.5em 1em;
	height: 8rem;
}
.form-one label textarea:focus {
	outline: var(--brown);
}
.form-one .wpcf7-list-item label {
	display: flex;
	gap: .5rem;
	align-items: center;
}
.form-one .wpcf7-submit {
	background-image: url('../../../../wp-content/uploads/2023/09/button.svg');
	background-color: transparent;
	border: 0px;
	margin: 0px auto;
	display: inherit;
	color: var(--white);
	padding: .8em 2.5em;
	background-repeat: no-repeat;
	font-size: 1.2rem;
	transform: var(--transition);
	font-family: var(--secondary-font);
	text-transform: uppercase;
}
.form-one .wpcf7-submit:hover {
	filter: drop-shadow(0px 10px 10px #0000005e);
	transform: var(--transition);
}
.rsvp-submit {
	text-transform: uppercase;
	font-size: 1.2rem;
	padding: 1.15rem 2rem 1.15rem 2.2rem;
	margin: 0px auto;
	position: relative;
	opacity: 0.7;
    pointer-events: none;
    cursor: not-allowed;
}
.rsvp-submit .spinner-border {
	position: absolute;
	display: none;
	margin-left: -1em;
}
.form-one .wpcf7-form-control-wrap[data-name="attending"] input {
	width: 25px;
}
.form-one .wpcf7-form-control-wrap[data-name="attending"] label {
	margin-top: 1em;
}
.form-one .wpcf7-form-control-wrap[data-name="coming_status"] .wpcf7-list-item {
	/* width: 100%; */
}
.form-one .wpcf7-form-control-wrap[data-name="coming_status"] .wpcf7-list-item input {
	height: 25px;
  	width: 25px;
}
.form-one .wpcf7-form-control-wrap[data-name="coming_status"] .wpcf7-list-item-label {
	width: 100%;
	font-family: Verdana;
}
.submit-button .wpcf7-spinner{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 15em;
}
.guest-name-details {
	color: var(--brown);
}
.wpcf7 form.sent .wpcf7-response-output {
	text-align: center;
}
.form-one .wpcf7-form-control-wrap[data-name="coming_status"] .wpcf7-list-item input[type="checkbox"]:checked {
	accent-color: var(--brown);
}
.wpcf7-list-item-label::before, .wpcf7-list-item-label::after {
	display: none;
}

/* Coming Soon Pages */
.coming-soon-sub-header img {
	opacity: 1;
}
.coming-soon-sub-header::before {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	top: 0;
	height: 100%;
	background-color: var(--cream);
	opacity: .7;
	z-index: 0;
}
.coming-soon-sub-header{
	position: relative;
}
.coming-soon-sub-header h1 {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	transform: translateX(-50%) translateY(-50%);
	color: var(--brown);
	text-align: center;
	line-height: 0.8em;
}
.coming-soon-sub-header h1 span {
	font-size: 2.7rem;
}
.coming-soon {
	min-height: 80vh;
}
.coming-soon h2 {
	font-size: 3rem;
}


/* Wedding */
.wedding .col-sm-3 h3 {
	font-size: 2.1rem;
}
.wedding {
	min-height: 80vh;
}

/* Thank You */
.thankyou img {
	width: 100%;
}
.thankyou {
	background-image: url('../../../../wp-content/uploads/2023/09/thankyou.jpg');
	min-height: 80vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* FAQ */
.faq-item h3 {
	font-size: 1.9rem;
}
.faq .row {
	--bs-gutter-x: 8.5rem;
}


/*Responsive code*/
@media only screen and (min-width:1600px) and (max-width:1920px) {
	.timeline {
		margin: 50px 0px 0px -4em;
	}
}

@media only screen and (max-width:1400px) {}

@media only screen and (min-width:1024px) and (max-width:1200px) {}

@media only screen and (max-width:1000px) {}

@media only screen and (min-width: 768px) and (max-width: 1023px) {

	/* FAQ */
	.faq .row {
		--bs-gutter-x: 3.5rem;
	}

}

@media only screen and (max-width:1023px) {

	/* Header */
	h1 {
		font-size: 2.8rem;
	}
	h2 {
		font-size: 2.8rem;
	}
	h3 {
		font-size: 1.1rem;
	}


	/* Home Page */
	.timeline {
		margin: 50px 0px 50px 0em;
		display: flex;
		flex-direction: column;
	}
	.timeline::before {
		top: 5%;
		left: 3%;
		width: 2px;
		height: 76%;
		transform: none;
	}
	.timeline-content{
		margin-top: 0px;
	}
	.timeline-content h3 {
		font-size: 1.3rem;
	}
	.timeline-block {
		text-align: left;
		max-width: 100%;
		margin-top: 0em;
		margin-left: 3em;
	}
	.marker {
		margin-top: 0;
		left: -43px;
		transform: none;
		top: 6px;
	}
	.celebration-begins h3 {
		font-size: 1.9rem;
	}
	.our-journey h4 {
		font-size: 1.5rem;
	}
	.our-journey h2 {
		font-size: 2.5rem;
	}

	/* Coming Soon */
	.coming-soon-sub-header h1 {
		z-index: 0;
		text-align: center;
	}


	/* FAQ */
	.faq-item h3 {
		font-size: 1.9rem;
	}

	/* Wedding */
	.wedding .col-sm-3 {
		margin-bottom: 2em;
	}

	/* RSVP */
	.form-one {
		width: 90%;
	}
	.form-one > h3 {
		font-size: 1.7rem;
	}
	.form-one label {
		margin-bottom: 1rem;
	}


}

@media only screen and (max-width:767px) {

	.mixed-font {
		font-size: 2.7rem;
	}

	/*Header*/
	.custom-logo {
		max-width: 100px;
	}
	.navbar-toggler span:first-child {
		display: none;
	}

	/* Footer */
	.whatsapp-contact {
		bottom: 2em;
		right: 2em;
	}



	/* Homepage */
	.boys-heart {
		text-align: center;
	}
	.our-journey {
		text-align: center;
	}
	.marker {
		left: -52px;
	}
	.our-story .col-sm-7 {
		text-align: center;
		margin-top: 1em;
		padding-left: 0em;
	}
	.save-the-date {
		text-align: center;
	}
	.our-journey h4 {
		font-size: 1.3rem;
	}
	.save-the-date h2 {
		text-align: center;
	}
	.save-the-date h6 {
		padding-left: 0em;
	}
	.form-one > .wpcf7 {
		width: 100%;
	}
	.form-one .wpcf7-form-control-wrap[data-name="coming_status"] .wpcf7-list-item {
		width: 80%;
	}
	.pre-guest-name-details h3 {
		font-size: 1.6rem;
	}
	.form-one > p {
		width: 100%;
	}




	/* Coming Soon */
	.coming-soon-sub-header h1 {
		font-size: 2.3rem;
		line-height: 1.2em;
	}
	.coming-soon h2 {
		font-size: 1.7rem;
	}

}

@media (min-width: 320px) and (max-width: 415px) {}