/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/



@font-face {
    font-family: 'new_icon_serifregular';
    src: url('fonts/new_icon-webfont.woff2') format('woff2'),
         url(fonts/'new_icon-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'luxurious_scriptbook';
    src: url('fonts/luxurious_script-webfont.woff2') format('woff2'),
         url('fonts/luxurious_script-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


:root {
	--cnvs-themecolor: #646633;
	--cnvs-themecolor-rgb: 100, 102, 51;
	
	--cnvs-heading-color: #000000; 
	
	--cnvs-primary-menu-active-color: var(--cnvs-themecolor);
	--cnvs-primary-menu-hover-color: var(--cnvs-themecolor);
	
	
	/* Font Families */
	--cnvs-body-font: "Roboto", sans-serif;
	--cnvs-primary-font: "Roboto", sans-serif;
	--cnvs-secondary-font: "new_icon_serifregular";	
	
	/* h */ 
	--cnvs-font-size-h1: 3.5rem;
	--cnvs-font-size-h2: 2.5rem;
	--cnvs-font-size-h3: 2rem;
	--cnvs-font-size-h4: 1.5rem;
	--cnvs-font-size-h5: 1.3rem;
	--cnvs-font-size-h6: 1rem;	
	
	--cnvs-headings-font-weight:	500;

	--cnvs-section-padding-double: calc(var(--cnvs-section-padding) * 2);

}

:root,
[data-bs-theme=light] {
	--bs-body-color: #000;
  	--bs-body-color-rgb: 0, 0, 0;
}


.heading-block {
  	--cnvs-heading-block-font-size-h1: 8rem;
  	--cnvs-heading-block-font-size-h2: 6rem;
  	--cnvs-heading-block-font-size-h3: 4rem;
  	--cnvs-heading-block-font-size-h4: 2rem;
}

.heading-block h1, 
.heading-block .h1,
.heading-block h2,
.heading-block .h2,
.heading-block h3,
.heading-block .h3,
.heading-block h4,
.heading-block .h4 {
  margin-bottom: 0;
  font-weight: 500;
  text-transform: var(--cnvs-heading-block-font-transform);
  letter-spacing: var(--cnvs-heading-block-font-spacing);
  color: var(--cnvs-heading-block-font-color);
  font-family: "new_icon_serifregular";
}

.heading-block > span:not(.before-heading) {
	color: #000;
}

.heading-block::after {
	display: none;
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	color: var(--cnvs-heading-color);
	line-height: 1.2;
}

h1, .h1, h2, .h2 {
	font-family: "new_icon_serifregular";
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-family: var(--cnvs-primary-font);
}


.heading-block h1, 
.heading-block .h1,
.heading-block h2,
.heading-block .h2,
.heading-block h3,
.heading-block .h3,
.heading-block h4,
.heading-block .h4 {
  	letter-spacing: 2px;
}

.heading-block h3,
.heading-block .h3 {
	font-size: 4rem;
	line-height: 1.1;
	margin-top: -30px;
}


p {
	font-family: var(--cnvs-body-font);
}


b, strong {
	font-weight: 700;
}

.secondary-font {
	font-family:  "new_icon_serifregular" !important;
}

.tertiary-font {
	font-family: 'luxurious_scriptbook' !important;
}
	
.white {
	color: #ffffff !important;
}

.black {
	color: #000000 !important;
}

.red {
	color: rgb(180, 26, 40) !important;
}

.green {
	color: #646633 !important;
}


a.black:hover {
	color: var(--cnvs-themecolor) !important;
}

/* HEADER */

#header:not(.sticky-header):hover #header-wrap {
    background-color: rgba(0,0,0, 0.5) !important;
}

/* FOOTER */

#footer {
	background-color: #646633;
	
}

/* CONTENT */

#content {
	background-color: #eae4cc;
}


.heading-block.center > span, .heading-block.text-center > span, .center .heading-block > span, .text-center .heading-block > span {
	max-width: 1000px;
}

.section.padding-double {
	padding: var(--cnvs-section-padding-double) 0;
}

.section {
	position: relative;
	width: 100%;
	margin: var(--cnvs-section-margin) 0;
	padding: var(--cnvs-section-padding) 0;
	background-color: var(--cnvs-section-bg);
	overflow: hidden;
}


/* INTRO */ 

#slider {
	height: 100vh; /* fullscreen in altezza */
    aspect-ratio: auto; /* opzionale, disattiva il rapporto */
}

#slider .vertical-middle {
	justify-content: flex-end;
}

/*
.wedding-head {
	font-size: 60px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
	font-family: var(--cnvs-secondary-font);
}

.wedding-head .first-name,
.wedding-head .last-name{
	font-weight: normal;
}

.wedding-head .first-name span,
.wedding-head .last-name span{
	font-family: var(--cnvs-primary-font);
	font-size: 30px;
	font-style: normal;
}


.wedding-head .and {
	font-weight: normal;
	font-size: 100px;
}
*/



.section-divider {
	height: 60px;
	background: linear-gradient(
		to bottom,
		#eae4cc 0%,
		rgba(200, 200, 200, 0.3) 50%,
		#eae4cc 100%
	);
}



/* THE VENUE */

#section-venue {
	background-color: #eae4cc;
	margin-top: 0px;
	margin-bottom: 0px;
}

.matrimony-images {
	margin-top: -25%;
	margin-bottom: 10%;
}


#section-wedding {
	background-color: #eae4cc;
	margin-top: 0px;
	margin-bottom: 0px;
}

.venue-images {
	margin-bottom: 10%;
}



/* EVENT SCHEDULE */

#section-event {
	background-color: #eae4cc;
	margin-top: 0px;
	margin-bottom: 0px;
}



/* RSVP FORM */

#section-rsvp {
	background-color: #eae4cc;
}

input[type="radio"].error {
  outline: 1px solid red;
  outline-offset: 1px;
}


.form-select.error {
	border-color: var(--cnvs-form-label-error);
}

.form-select-lg {
  	border-radius: 0;
  	font-size: 1rem;
}

textarea.form-control-lg {
	font-size: 1rem;
}
	

.form-control {
	border-radius: 0;
}


/* GUEST INFORMATION */

#section-guest {
	background-color: #646633;
}


/* TRAVEL TIPS */

#section-travel {
	background-color: #eae4cc;
}


/* PLACES TO STAY */

#section-place {
	background-color: #eae4cc;
}


/* MESSAGE FOR THE COUPLE */

#section-message {
	background-color: #eae4cc;
}

.scroll-container {
	max-width: 700px; 
	height: 620px;
	overflow-y: auto;
	  
	margin: 0 auto;
  	padding: 0 15px;

  	/* Per Firefox */
  	scrollbar-width: thin; /* "thin" rende la scrollbar sottile */
  	scrollbar-color: black transparent; /* colore thumb e colore track */
}

/* Per Chrome, Edge, Safari */
.scroll-container::-webkit-scrollbar {
  	width: 4px; /* sottile */
}

.scroll-container::-webkit-scrollbar-track {
  	background: transparent; /* traccia trasparente */
}

.scroll-container::-webkit-scrollbar-thumb {
  	background-color: black; /* thumb nero */
  	border-radius: 2px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  	background-color: #333; /* hover un po' pił chiaro */
}

/* SEZIONE CHIUSURA CON GALLERIA */

#section-close {
	background-color: #eae4cc;
	margin-bottom: 0px;
}


#gallery-section .portfolio-image img:hover {
	opacity: 0.8;
}


/* xxl */
@media (max-width: 1599.98px) {
	
	.cascading-image .container-img-1,
	.cascading-image .container-img-2,
	.cascading-image .container-img-3 {
		max-width: 80% !important;
		margin: 0 auto !important;
	}

}


/* xl */
@media (min-width: 1200px) and (max-width: 1599.98px) {
	
	.heading-block h2, .heading-block .h2 {
		font-size: 5rem !important;
	}
	
	
	.col-xl-custom-12 {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	.p-xl-custom-2 {
		padding: 0.5rem !important;
	}
	
}


@media (max-width: 1199.98px) {
	
	.content-col-1 {
		border: 0 !important;
	}

}


@media (max-width: 1023px) {
	
	#slider {
    	aspect-ratio: 16 / 9;
    	height: auto; 
    	max-height: 40vh; 
  	}
	
}


/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

	.is-expanded-menu .menu-link {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	/*
	#slider .vertical-middle {
		justify-content: center;
	}
	*/


	.heading-block h2, .heading-block .h2 {
		font-size: 4rem;
	}

	.list-group-item .fs-3 {
		font-size: 22px !important;
	}
	
	
	.section-guest-title-column.align-items-center {
		align-items: start !important;
	}
	


}

@media (max-width: 991.98px) {
	
	/*
	#slider .vertical-middle {
		justify-content: flex-start;
	}
	*/
	
	.heading-block h2, .heading-block .h2 {
		font-size: 3rem;
	}
	
}



@media (max-width: 991.98px) and (orientation: portrait) {
	
	#header {
		height: 40px;
	}
	
	/*
	#slider {
		height: 100vh;
	}
	*/
	
	.wedding-head .and {
		display: block;
		text-align: center;
	}

}


@media (min-width: 576px) and (max-width: 991.98px) {

	#header {
		height: 40px;
	}

	#header:not(.sticky-header):hover #header-wrap {
		background-color: #212529 !important;
	}
	
	/*
	#slider .slider-inner .slide {
		background-position: 90% bottom !important;	
	}
	*/
	
	.couple-images {
		margin-bottom: -100px;
	}
	
	.venue-images {
  		margin-bottom: 0px;
	}	
	

}

@media (max-width: 767.98px) and (orientation: portrait) {
	
	/*
	.wedding-head {
		font-size: 45px;
	}
	
	.wedding-head .and {
		display: block;
		text-align: center;
		font-size: 70px;
	}	
	*/
}



@media (min-width: 576px) and (max-width: 767.98px) {
	
	/*
	.wedding-head {
		font-size: 45px;
		margin-top: 50px;
	}
	
	.wedding-head .and {
		text-align: center;
		font-size: 80px;
	}
	*/
	
}


@media (max-width: 575.98px) {
	
	#header {
		height: 40px;
	}
	
	#header:not(.sticky-header):hover #header-wrap {
		background-color: #212529 !important;
	}
	
	/*
	.wedding-head .first-name,
	.wedding-head .last-name {
		margin: 0;
		text-align: center;
		display: block;
	}
	
	#slider .slider-inner .slide {
		background-position: 90% bottom !important;	
	}
	
	#slider .vertical-middle .lead {
		font-size: 1rem;
	}
	
	#slider .divider {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	*/
	
	.col-section {
		padding-bottom: 25px !important;
	}
	
	.couple-images {
		margin-bottom: -100px;
	}
	
	.venue-images {
  		margin-bottom: 0px;
	}
	
	.orderofevent {
		padding: 15px 0 15px 0;
		margin-bottom: 1rem !important;
	}
	
	#section-transportation h2 {
		/*font-size: 34px;*/
		word-break: break-all;
	}
	
	#section-transportation img.logo-transportation {
		max-width: 100px !important;
	}
	
	
	.content-wrap {
		padding: 2.5rem 0;
	}
	
	.section {
		margin: 2rem 0;
		padding: 2rem 0;
	}
	
	.heading-block {
		margin-bottom: 20px;
	}
	
	.heading-block h2, .heading-block .h2 {
		font-size: 3rem;
	}
	
	.heading-block h3, .heading-block .h3 {
		font-size: 2rem;
	}	
	
	.list-group-item .fs-3 {
		font-size: 18px !important;
	}
	
	.heading-block h3, .heading-block .h3 {
		margin-top: -10px;
	}

	
}