.opulent-container {
background-color: #ffffff;
padding: 30px;
border: 2px solid #DFDFDF;
border-radius: 25px;


}
.payment-container {
    padding: 30px;
}

@media (max-width: 2800.98px) {
    .fix-width-container {
      width: 800px;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
  }

.opulent-form {
font-family: 'Noto Sans', "Helvetica Neue" , Helvetica, Arial, sans-serif;
color: black;

}

.opulent-heading {
color: black;
font-size: 36px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
}

.opulent-form-group label {
font-family: 'Noto Sans', "Helvetica Neue" , Helvetica, Arial, sans-serif;
color: black;
font-size: 16px;
padding-top: 25px;
padding-bottom: 10px;
}

.opulent-input {
    border: 2px solid #DFDFDF;
    border-radius: 5px;
    padding: 6px;
    font-size: 16px;
    color: #46260A;
    position: relative; /* Add relative positioning */
}

.opulent-input:focus  {
    outline: none;
    border-color: #c3c1c1;
    box-shadow: 0 0 5px #DFDFDF;
}



.opulent-error {
font-size: 14px;
color: #FF0000;
margin-top: 5px;
}

.opulent-checkbox {
/* Customize the checkbox appearance */
/* Example styles: */
border: 2px solid  #DFDFDF;
border-radius: 4px;
background-color: #fff;
width: 18px;
height: 18px;
margin-right: 5px;
/* Add more styles as desired */
}

.opulent-checkbox:checked {
background-color: #194536;
border: 1px solid  #DFDFDF;
}

.opulent-label {
/* Customize the label appearance */
/* Example styles: */
font-size: 18px;
color: #000000;
/* Add more styles as desired */
}


.opulent-button {
/* Customize the button appearance */
/* Example styles: */
background-color: #194536;
border: 1px solid  #DFDFDF;
color: #ffffff;
padding: 8px 16px;
font-size: 16px;
border-radius: 15px;
/* Add more styles as desired */
}
.opulent-icon-button {
    background-color: #194536;
border: 1px solid  #DFDFDF;
color: #ffffff;
padding: 8px 16px;
font-size: 16px;

}
.opulent-icon-button:hover {
    background-color: #ffffff;
color: #194536;
}
.opulent-button:hover {
background-color: #ffffff;
color: #194536;

}

.opulent-button-icon {
/* Customize the button appearance */
/* Example styles: */
background-color: #194536;
border: 1px solid  #DFDFDF;
color: #ffffff;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
/* Add more styles as desired */
}

.opulent-button-icon:hover {
background-color: #ffffff;
color: #194536;

}




.opulent-button:focus {
outline: none;
box-shadow: none;
}

.opulent-button:active {
background-color: #dfe4e9;
}
.tooltip-text {
display: none;
position: absolute;
top: 50%;
left: calc(100% + 10px);
transform: translateY(-50%);
background-color: #fff;
color: #000;
padding: 6px 10px;
border-radius: 4px;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
font-size: 14px;
}

.input-group:hover .tooltip-text {
display: inline-block;
}

.tooltip-text::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #fff transparent transparent;

}


.tooltip-text-confirm-password {
display: none;
position: absolute;
top: 50%;
left: calc(100% + 10px);
transform: translateY(-50%);
background-color:#fff;
color:  #333;
padding: 6px 8px;
border-radius: 4px;
white-space: nowrap;
box-shadow: 0 0 5px #DFDFDF;
}

.input-group:hover .tooltip-text-confirm-password {
display: inline-block;
}

.tooltip-text-confirm-password::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #fff transparent transparent;

}



.form-wrapper {
background-image: url(https://myopulence.com/templates/public/1/_opulence/images/FormWatermark.png);
background-repeat: no-repeat;
background-position:  bottom right  ;

}

.select-placeholder {
color: #999;
}

.toggle-switch {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 50px !important;
    height: 24px;
    background-color: #ccc;
    border-radius: 12px;
    position: relative;
    outline: none;
    cursor: pointer;
}

.toggle-switch:checked {
    background-color: #66bb6a;
}

.toggle-switch:checked::before {
    transform: translateX(24px);
}



 /* Media query for smaller screens */
 @media (max-width: 768px) {

    .banner-image img {
        width: 100%;
        height: 300px;
     
        /* Add any desired styles for the image */
    }
}

/* Media query for even smaller screens */
@media (max-width: 576px) {

    .banner-image img {
        width: 100%;
        height: 250px;
        /* Add any desired styles for the image */
    }
}