@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=WindSong:wght@400;500&display=swap');
@font-face {
    font-family: 'Cinzel'; /* Name your font family */
    src: url('../fonts/Cinzel/Cinzel-VariableFont_wght.ttf'); /* Locate the .ttf file within your directory*/
    font-family: 'Cinzel-Decorative'; /* Name your font family */
    src: url('../fonts/Cinzel_Decorative/Cinzel_Decorative/CinzelDecorative-Regular.ttf'); /* Locate the .ttf file within your directory*/}

.windsong-regular {
    font-family: "Cinzel", Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .windsong-medium {
    font-family: "Cinzel", Arial, sans-serif;
    font-weight: 500;
    font-style: normal;
  }

 h2 {

    font-family: "Cinzel-Decorative" !important;
    font-weight: 500;
    font-style: normal;

}
h4 {

    font-family: "Cinzel-Decorative" !important;
    font-weight: 400;
    font-style: normal;

}
h1, h2, h3, h4, h5 {
    color: #663399;
    font-family: "Cinzel-Decorative" !important;
   
  }

.fs-1 {
    font-family: "Cinzel-Decorative" !important;
font-weight: 500;
font-size: 5em !important;
padding-top: 0.5em;
}
.fs-2 {
    font-family: "Cinzel-Decorative" !important;
    font-weight: 500;
    font-size: 3em !important;
    padding-top: 0.5em;
    }
 .fs-3 {
    font-family: "Cinzel" !important;
    font-weight: 400;
    font-size: 2em !important;
    padding-top: 0.6em;
    padding-bottom: 0.6em;;
        }

 .fs-4 {
    font-family: "Cinzel" !important;
     font-weight: 400;
     font-size: 1.5em !important;
     padding-top: 0.5em;
            }       


.rsvp {
    font-family: "Cinzel" !important;
  display: block; 
  width: 10rem; 
  padding: 0.5rem;
  margin-top: 2rem;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #9966cc;
  color: rgba(233,233,231,1.00);
  border-radius: 5px;
}

body {
   
   font-family: "Cinzel", Arial, sans-serif;
   color:#000;
   line-height: 1.5;
   font-weight: 500;
   background-color: #ffffff

}
.body-background

{position: relative;
 background-image: url("../images/back-1.webp");
 background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* Optional: parallax effect */
    min-height: 100vh;

 z-index: -9999;

}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100% !important;
  padding-right: var(--bs-gutter-x, 1rem);
  padding-left: var(--bs-gutter-x, 1rem);

}
.center {
align-content: center;
margin-left: auto!important;
margin-right: auto!important;
}



    .photo {
position: fixed !important; 
top: 0%;
left: 0%;
background-image: url("../images/BW-9098.webp");
background-position: -30% 50%;
background-repeat: no-repeat;
background-size: cover;
width: 52%;	
height: 100%;
z-index: -1;

}

.floral {

    }

    @media (min-width: 1199.98px) and (max-width:1400) {
        .row {
           --bs-gutter-x: 0!important;
            --bs-gutter-y: 0!important;
            padding-right: calc(var(--bs-gutter-x)* 0)!important;
            padding-left: calc(var(--bs-gutter-x)* 0)!important;
            } 
        
        .photo {
            position: absolute!important; 
            top: 0;
            left: -10;
            background-image: url("../images/BW-9098.jpg");
            background-position: -50% 50%;
            background-repeat: no-repeat;
            background-size: cover;
            width: 50% !important;	
            height: 100vh;
            z-index: -1;
            
            }
        .floral {
            position: fixed !important;
            background-size: 100%;
            margin: 0px !important;	
            z-index: -1
            } 
            #rsvp-form {
               
                 max-width: 50% !important;
                
             }
        }

@media (min-width: 992.98px) and (max-width:1199.98) {
    .row {
       --bs-gutter-x: 0!important;
        --bs-gutter-y: 0!important;
        padding-right: calc(var(--bs-gutter-x)* 0)!important;
        padding-left: calc(var(--bs-gutter-x)* 0)!important;
        } 
    
    .photo {
        position: fixed!important; 
        top: 0%;
        left: -10%;
        background-image: url("../images/BW-9098.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 50% !important;	
        height: 100vh;
        z-index: -1;
        
        }
    .floral {

        } 
        #rsvp-form {
           
             max-width: 80% !important;
            }
            .rsvp {

                display: block; 
                width: 6rem !important; 
                padding: 0.5rem;
                margin-top: 1rem;
                margin-left: auto !important;
                margin-right: auto !important;
                
              }
        
            .fs-1 {
        
                font-size: 4em !important;
                margin-bottom: 0.35em;
                }  
                .fs-3 {
                    font-family: "Roboto" !important;
                    font-weight: 300;
                    font-size: 1.8em !important;
                    padding-top: 0.5em;
                    padding-bottom: 0.5em;;
                }     
    }

@media (min-width: 768px) and (max-width: 991.98px) { 
    .row {
        display: flex;
        --bs-gutter-x: 0!important;
        --bs-gutter-y: 0!important;
        padding-right: calc(var(--bs-gutter-x)* 0)!important;
        padding-left: calc(var(--bs-gutter-x)* 0)!important;
        }   
.photo {
    position: relative!important; 
    top: 0;
    left: -5%;
margin: 0px !important;
background-size: cover;
background-position: -50% 25%;
width: 110%;
min-height: 50vh;
overflow-y: hidden;		
z-index: 0
} 
.floral {

    } 
    .rsvp {

        display: block; 
        width: 8rem; 
        padding: 0.5rem;
        margin-top: 1rem;
        margin-left: auto !important;
        margin-right: auto !important;
        
      }

    .fs-1 {

        font-size: 5em !important;
        margin-bottom: 0.35em;
        }  
        .fs-3 {
            font-family: "Roboto" !important;
            font-weight: 300;
            font-size: 1.8em !important;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
        }     
            
}
@media (min-width: 575.98px) and (max-width: 767.98px) { 
    .row {
        display: flex;
        --bs-gutter-x: 0!important;
        --bs-gutter-y: 0!important;
        padding-right: calc(var(--bs-gutter-x)* 0)!important;
        padding-left: calc(var(--bs-gutter-x)* 0)!important;
        }   
.photo {
    position: relative!important; 
    top: 0;
    left: -5%;
margin: 0px !important;
background-size: cover;
background-position: -60% 25%;
width: 110%;
min-height: 100vh;
overflow-y: hidden;		
z-index: 0
} 
.floral {

    } 
    .rsvp {

        display: block; 
        width: 8rem; 
        padding: 0.5rem;
        margin-top: 1rem;
        margin-left: auto !important;
        margin-right: auto !important;
        
      }

    .fs-1 {

        font-size: 4em !important;
        margin-bottom: 0.35em;
        }  
        .fs-3 {
            font-family: "Roboto" !important;
            font-weight: 300;
            font-size: 1.8em !important;
            padding-top: 0.5em;
            padding-bottom: 0.5em;;
        }     
            
}
@media (max-width: 575.98px) { 
    .row {
        --bs-gutter-x: 0!important;
        --bs-gutter-y: 0!important;
        padding-right: calc(var(--bs-gutter-x)* 0)!important;
        padding-left: calc(var(--bs-gutter-x)* 0)!important;
        }   
	.photo {
position: relative!important; 
top: 0%;
left: -5%;
background-position: center;
background-size: 100% auto;
margin: 0px !important;
min-width: 110%;
height: 450px!important;		
z-index: 0
} 
.floral {

    } 
    #rsvp-form {
           
        max-width: 95% !important;
       }

    .rsvp {

        display: block; 
        width: 6rem; 
        padding: 0.5rem;
        margin-top: 1rem;
        margin-left: auto !important;
        margin-right: auto !important;
        
      }

      
    .fs-1 {

        font-size: 3em !important;
        }  
        .fs-3 {
            font-family: "Cinzel" !important;
            font-weight: 400;
            font-size: 1.5em !important;
            padding-top: 0.5em;
            padding-bottom: 0.5em;;
        }     

 .form-check-label {

font-size: 0.85em !important;

 }
                 
}

.form-select {

    font-size: 0.9em !important;
    font-weight: 500 !important;
    
     } 

     .form-select:not(:-internal-list-box):not([multiple]) option  {

        font-size: 1em !important;
        font-weight: 500 !important;
        
         }     

#rsvp-form {
   background-color: rgba(255, 255, 255, 0.6);;
    max-width: 80%;
    margin-top: 1rem;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 2.5rem;
    padding: 2.3rem;
    box-shadow: 0px 6px 18px rgb(0 0 0 / 9%);
    border-radius: 12px;
    border-width: thin;
    border-color: #663399;
    border-style: solid;
	z-index: 99;
}
#rsvp-form .rsvp-background {

}

#rsvp-form .form-header {
    gap: 5px;
    text-align: center;
    font-size: .9em;
    line-height: 1.2;
}

#rsvp-form .form-header .stepIndicator {
    position: relative;
    flex: 1;
    padding-bottom: 30px;
}

#rsvp-form .form-header .stepIndicator.active {
    font-weight: 600;
}

#rsvp-form .form-header .stepIndicator.finish {
    font-weight: 600;
    color: #000000;
}

#rsvp-form .form-header .stepIndicator::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 50%;
    border: 3px solid #ffffff;
}

#rsvp-form .form-header .stepIndicator.active::before {
    background-color: #9966cc;
    border: 3px solid #ffffff;
}

#rsvp-form .form-header .stepIndicator.finish::before {
    background-color: #9966cc;
    border: 3px solid #ffffff;
}

#rsvp-form .form-header .stepIndicator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 100%;
    height: 3px;
    background-color: #ffffff;
}

#rsvp-form .form-header .stepIndicator.active::after {
    background-color: #9966cc;
}

#rsvp-form .form-header .stepIndicator.finish::after {
    background-color: #9966cc;
}

#rsvp-form .form-header .stepIndicator:last-child:after {
    display: none;
}

#rsvp-form input {
    padding: 15px 20px;
    width: 100%;
    font-size: 1em;
    font-weight: 400;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
}

#rsvp-form input:focus {
    border: 1px solid #9966cc;
    outline: 0;
}

#rsvp-form input.invalid {
    border: 1px solid #ffaba5;
}

#rsvp-form .step {
    display: none;
}

#rsvp-form .form-footer {
    overflow: auto;
    gap: 20px;
}

#rsvp-form .form-footer .button {
    background-color: #9966cc !important;
    border: 1px solid #9966cc !important;
    color: #ffffff;
    border: none;
    padding: 13px 30px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin: 5px;

}

#rsvp-form .form-footer .button:hover {
    opacity: 0.8;
}

#rsvp-form .form-footer #prevBtn {
    background-color: #ffffff !important;
    border: 1px solid #9966cc!important;
    color: #663399;
    border: none;
    padding: 13px 30px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
}

#rsvp-form .form-footer #nextBtn {
    background-color: #9966cc !important;
    border: 1px solid #9966cc !important;
    color: #ffffff;
    border: none;
    padding: 13px 30px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
}
@media (max-width: 576px){

    #rsvp-form .form-footer .button {
        background-color: #9966cc !important;
        border: 1px solid #9966cc !important;
        color: #ffffff;
        border: none;
        padding: 10px 15px !important;
        font-size: 1em;
        cursor: pointer;
        border-radius: 5px;
        margin: 5px;
    
    }
    
    #rsvp-form .form-footer .button:hover {
        opacity: 0.8;
    }
    
    #rsvp-form .form-footer #prevBtn {
        background-color: #ffffff !important;
        border: 1px solid #9966cc !important;
        color: #663399;
        border: none;
        padding: 10px 15px !important;
        font-size: 1em;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    #rsvp-form .form-footer #nextBtn {
        background-color: #9966cc !important;
        border: 1px solid #9966cc !important;
        color: #ffffff;
        border: none;
        padding: 10px 15px !important;
        font-size: 1em;
        cursor: pointer;
        border-radius: 5px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }

 }

.form-switch .form-check-input {
    width: 3em !important;
    height: 1,5em !important;
    margin-left: -3em;
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e);
    background-position: left center;
    border-radius: 4em !important;
    transition: background-position .15s ease-in-out;
    font-size: 1.2rem !important;
    font-weight: 500;
    margin-right: 1rem;
}

.form-check-input:checked {
    background-color: #9966cc;
    border-color: #9966cc;
}

input[type="radio"].toggle:checked+label {
    background-image: linear-gradient(to top, #969696, #727272) !important;
    box-shadow: inset 0 1px 6px rgba(41, 41, 41, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
    ;
    cursor: default;
    color: #E6E6E6 !important;
    ;
    border-color: transparent !important;
    ;
    text-shadow: 0 1px 1px rgba(40, 40, 40, 0.75) !important;
    ;
}

input[type="radio"].toggle+label {
    width: 3em !important;
    ;
}

input[type="radio"].toggle:checked+label.btn:hover {
    background-color: inherit !important;
    ;
    background-position: 0 0 !important;
    ;
    transition: none;
}

input[type="radio"].toggle-left+label {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

input[type="radio"].toggle-right+label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#rsvp-form .success {
	padding: 20px 0px;
	text-align: center;
	width: 100%;
	height: 28px;
	line-height: 20px;
	color: #4caf50 !important;
}
#rsvp-form .help-block.with-errors {
    left: 0px;
	z-index: 0;
	text-align: left;
	width: 100%;
	line-height: 20px;
	color: #FF0000;
	color: #ff5050;
    margin-top: 5px;
}
#rsvp-form .messages {
    z-index: 99999;
}
/*close forms*/
#rsvp-form
.close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  margin-top: auto;
  margin-bottom: auto;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}
#rsvp-form 
.close:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
#rsvp-form 
.close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}
#rsvp-form 
.close:disabled, .close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}
#rsvp-form
.ClassThatHides{
 visibility: hidden;
 display: none;
}

.g-recaptcha {
display: none;
 margin-left: auto !important;
 margin-right: auto !important;
 
}

.toggle.ios,
  .toggle-on.ios,
  .toggle-off.ios {
    border-radius: 20rem;
  }
   .toggle.ios .toggle-handle {
    border-radius: 20rem;
  }