/*!
 * © Evite You 2024 All Rights Reserved.
 */

body {
    text-align:center;
    justify-content:center;
}

html, body {
    margin:0;
    padding:0;
	scroll-behavior: smooth;
}

.btn:disabled{
    opacity:0.7;
    cursor:not-allowed;
}

input[type="text"],
input[type="email"],
select, label, textarea {
	border-radius: 0px;
	border: 1px solid;
	border-bottom: 0px;
	height: 40px;
	border-color: rgba(0, 0, 0, 0.3);
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	background-color: rgba(0,0,0,0);
	color: #000;
	font-family: 'Cormorant Garamond', 'Helvetica Neue', sans-serif;
	font-size: 14px;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
}

.input {
	/* Arrow */
	appearance: none;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
    background-size: 12px auto;
}

.bottom-border {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3); /* Border at the bottom */
}

::placeholder {
	color: #000;
	white-space: pre-line;
}

input.special-height {
	height: 80px; /* Change the height as needed */
}

.btn {
	Font-family: 'Cormorant Garamond', 'Helvetica Neue', sans-serif;
	border: 1px solid;
	padding: 18px 52px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: inline-block;
	font-size: 12px;
	cursor: pointer;
	margin:0 auto;
	color: #fff;
	background-color: rgba(0, 0, 0, 1);
	border-radius: 38px;
	letter-spacing: 1px;
	font-weight: 600;
}

.top-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6%;
    box-sizing: border-box;
    z-index: 1000;
    background: transparent; /* change if needed */
}

.header-logo {
    width: 80px;
    height: auto;
}

.burger-icon {
    width: 40px;
    height: auto;
    cursor: pointer;
}

.text {
	color: #000;
	font-family: 'Cormorant Garamond', 'Helvetica Neue', sans-serif;
	font-size: 18px;
	line-height: 1.5;
	max-width: 800px;
	margin: 0 auto;
	padding: 0px 20px 0px 20px;
}	

.page-background {
    background-color:#f7f4f0;
    width:100%;
    min-height:100vh;
    padding-top:80px;
	padding-bottom:60px;
}

.logo-padding {
	padding-bottom:60px;
	padding-top:100px;
}

.container-10 {
    width:83.333333%;
    margin:auto;
    padding:5%;
    box-sizing:border-box;
    background:#fff;
}

.form-item select,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;

    padding-right: 45px; /* Makes room for the arrow */
    cursor: pointer;
}

.form-container {
    display:flex;
    flex-wrap:wrap;
    gap:0;
}

.form-item {
    flex:1 1 45%;
}

.form-item input,
.form-item select {
    width:100%;
}

.form-section {
    margin-bottom:25px;
}

.section-title {
    font-family:'Cinzel', serif;
    font-size:22px;
    margin:35px 0 20px;
	font-weight:bold;
}

.hidden-section {
    display:none;
}

textarea {
    width:100%;
}

#wedding-date,
#email,
#images,
#rsvpformat,
#envelope,
#wrap,
#placecards,
#qrcode,
#welcomeboard,
#logo {
	border-left: none;
}

#invite-type,
#amount,
#envelope,
#details,
#how-did-you-hear-about-us,
#intro,
#generic,
#address,
#images-upload,
#ceremony {
	border-bottom: 1px solid #b2b2b2;
}

.site-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:45px 6%;
    background:#f7f4f0;
    color:#000;
    font-family:'Cormorant Garamond', serif;
    font-size:14px;
    box-sizing:border-box;
}

.footer-logo img {
    width:60px;
    height:auto;
}

.footer-text {
    text-align:center;
    flex:1;
}

.footer-icons {
    display:flex;
    gap:20px;
    justify-content:flex-end;
}

.footer-icons a {
    color:#000;
    font-size:14px;
    text-decoration:none;
    transition:opacity .3s ease;
}

.footer-icons a:hover {
    opacity:.6;
}

.upload-section{
    margin:0px 0;
    width:100%;
}

#images-upload{
    display:none;
}

.upload-box{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:15px;
    width:100%;
    min-height:45px;
    padding:8px 12px;
    border:1px solid #b2b2b2;
    box-sizing:border-box;
    cursor:pointer;
    font-family:'Cormorant Garamond', serif;
    font-size:14px;
}

.upload-label{
    white-space:nowrap;
    color:#000;
}

.upload-btn{
    padding:5px 12px;
    border:1px solid #b2b2b2;
    background:#f7f4f0;
    white-space:nowrap;
    color:#000;
}

.upload-text{
    color:#777;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.codes-box {
    display:flex;
    align-items:center;
    width:100%;
    border:1px solid #b2b2b2;
	border-bottom:none;
    box-sizing:border-box;
}

.codes-box input {
    flex:1;
    border:none;
}

.codes-btn {
    padding:5px 12px;
    margin-left:8px;
	margin-right:8px;
    border:1px solid #b2b2b2;
    background:#f7f4f0;
    color:#000;
    text-decoration:none;
    white-space:nowrap;
    font-family:'Cormorant Garamond', serif;
    font-size:14px;
}

.codes-btn:hover {
    background:#fff;
}



@media (max-width: 768px) {

.container-10 {
    width:100%;
}

.form-item {
    flex:1 1 100%;
}

.section-title {
    font-size:16px;
}

.logo {
	height: auto;
	max-width: 40%;
}

.logo-padding {
	padding-bottom:60px;
	padding-top:30px;
}

#wedding-date,
#email,
#design,
#images,
#rsvpformat,
#envelope,
#wrap,
#placecards,
#qrcode,
#welcomeboard,
#logo {
	border-left: 1px solid #b2b2b2;
}

#rsvp,
#amount {
	border-bottom: none;
}

#address,
#images-upload {
	border-bottom: 1px solid #b2b2b2;
}
	
.site-footer {
    padding: 0px 0px 80px 0px;
}

.btn-pad {
    padding: 0px 0px 30px 0px;
}

.upload-section{
	flex-direction:column;
	align-items:flex-start;
}

.upload-box{
	width:100%;
}

.top-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6%;
    box-sizing: border-box;
    z-index: 1000;
    background: transparent; /* change if needed */
}

.header-logo {
    width: 80px;
    height: auto;
}

.burger-icon {
    width: 40px;
    height: auto;
    cursor: pointer;
}

.top-header {
	height: 100px;
	padding: 0 20px;
}

.header-logo {
	width: 55px;
}

.burger-icon {
	width: 32px;
}

.site-footer {
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:25px;
	text-align:center;
}

.footer-logo {
	order:1;
}

.footer-icons {
	order:2;
	justify-content:center;
}

.footer-text {
	order:3;
}

.btn {
	padding: 14px 30px;
	font-size: 11px;
	font-weight: 500;
}

}