.form-group{
    display: flex;
    gap: 10px;
    padding: 10px 0px;
}
.form-group label {
    padding: 5px 0px;
    font-size: 16px;
    font-weight: 600;
}
.required::before {
  content: "*";
  color: red;
  font-size: 16px;
  margin: 0 5px;
}


.radio-custom{
    display: flex;
    gap: 20px;
}

.radio-custom input[type="radio"] {
  display: none;
}

.radio-custom label {
  display: inline-block;
  position: relative;
  padding-right: 24px;
  margin-right: 10px;
  cursor: pointer;
}

.radio-custom label:after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ccc;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.radio-custom label:after {
  background-color: #ffffff;
  box-shadow: inset 0 0 0 4px #fff;
}

.radio-custom input[type="radio"]:checked + label:after {
  border-color: #B09664;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 8px #B09664;
}

.radio-custom label:hover:after {
  border-color: #666;
}


.form-select {
    /* background-color: var(--bg-control) !important; */
    color: var(--color-main) !important;
    border: 1px solid #D2D6DB33;
}

.custom-select {
  /* appearance: none;  */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5031 1.1294C1.60467 1.26388 1.90793 1.66534 2.08853 1.89676C2.45026 2.36027 2.94452 2.97618 3.47769 3.59026C4.01356 4.20744 4.57648 4.80852 5.07658 5.25039C5.32734 5.47195 5.54762 5.64031 5.72939 5.74989C5.90035 5.85296 6.00134 5.87439 6.00134 5.87439C6.00134 5.87439 6.09936 5.85295 6.27031 5.7499C6.45209 5.64032 6.67237 5.47196 6.92313 5.25039C7.42322 4.80852 7.98615 4.20744 8.52201 3.59025C9.05518 2.97616 9.54944 2.36025 9.91117 1.89673C10.0918 1.66531 10.3946 1.26442 10.4962 1.12994C10.7009 0.852004 11.0925 0.792058 11.3705 0.996751C11.6484 1.20145 11.7078 1.59269 11.5031 1.87063L11.5015 1.87273C11.395 2.01376 11.0809 2.42963 10.8966 2.66577C10.5267 3.13975 10.018 3.77384 9.46589 4.40976C8.91646 5.04257 8.31173 5.69149 7.7508 6.18712C7.47105 6.4343 7.18747 6.65656 6.91567 6.82042C6.66102 6.97393 6.33861 7.125 5.99985 7.125C5.66109 7.125 5.33868 6.97393 5.08404 6.82041C4.81223 6.65656 4.52866 6.4343 4.24891 6.18712C3.68798 5.69149 3.08325 5.04258 2.53382 4.40977C1.98169 3.77386 1.473 3.13978 1.1031 2.6658C0.918709 2.42953 0.60464 2.01371 0.4983 1.87292L0.4969 1.87107C0.292204 1.59313 0.351284 1.20149 0.629218 0.996793C0.907143 0.792105 1.2984 0.851493 1.5031 1.1294Z' fill='%23666666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-inline-end: 2rem;
  border-radius: var(--bs-border-radius);
}


html[lang="ar"] .custom-select {
  background-position: left 10px center;
}

/* [lang="ar"] .input2-group,
[lang="ur"] .input2-group,
[dir="rtl"] .input2-group {
  flex-direction: row;
} */

.alert {
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  font-weight: bold;
}

.alert-danger {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  color: #ff0000;
  border: 1px solid #f5c2c7;
}

 html[data-theme="dark"] .custom-select {
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5031 1.1294C1.60467 1.26388 1.90793 1.66534 2.08853 1.89676C2.45026 2.36027 2.94452 2.97618 3.47769 3.59026C4.01356 4.20744 4.57648 4.80852 5.07658 5.25039C5.32734 5.47195 5.54762 5.64031 5.72939 5.74989C5.90035 5.85296 6.00134 5.87439 6.00134 5.87439C6.00134 5.87439 6.09936 5.85295 6.27031 5.7499C6.45209 5.64032 6.67237 5.47196 6.92313 5.25039C7.42322 4.80852 7.98615 4.20744 8.52201 3.59025C9.05518 2.97616 9.54944 2.36025 9.91117 1.89673C10.0918 1.66531 10.3946 1.26442 10.4962 1.12994C10.7009 0.852004 11.0925 0.792058 11.3705 0.996751C11.6484 1.20145 11.7078 1.59269 11.5031 1.87063L11.5015 1.87273C11.395 2.01376 11.0809 2.42963 10.8966 2.66577C10.5267 3.13975 10.018 3.77384 9.46589 4.40976C8.91646 5.04257 8.31173 5.69149 7.7508 6.18712C7.47105 6.4343 7.18747 6.65656 6.91567 6.82042C6.66102 6.97393 6.33861 7.125 5.99985 7.125C5.66109 7.125 5.33868 6.97393 5.08404 6.82041C4.81223 6.65656 4.52866 6.4343 4.24891 6.18712C3.68798 5.69149 3.08325 5.04258 2.53382 4.40977C1.98169 3.77386 1.473 3.13978 1.1031 2.6658C0.918709 2.42953 0.60464 2.01371 0.4983 1.87292L0.4969 1.87107C0.292204 1.59313 0.351284 1.20149 0.629218 0.996793C0.907143 0.792105 1.2984 0.851493 1.5031 1.1294Z' fill='white'/%3E%3C/svg%3E")  !important;
} 

.section-block.card-contact {
    background-color: rgba(249, 250, 251, 1);
    margin:0px auto;
    padding: 20px !important;
}

html[data-theme="dark"] .section-block.card-contact {
    background-color: rgba(56, 66, 80, 1);
    margin:0px auto;
    padding: 20px !important;
}

.btn-submit{
    background: rgba(188, 150, 97, 1);
    width: 100px;
    height: 40px;
    opacity: 1;
    color: white;
    border-radius: 4px;
    border-end-start-radius: 16px;
    margin: 20px 0px;
}

.btn-submit:hover{
  background: rgba(188, 150, 97, 1);
}


.btn-contact{
    background: rgba(188, 150, 97, 1);
    max-width: fit-content;
    height: 40px;
    opacity: 1;
    color: white;
    border-radius: 4px;
}

.btn-contact:hover{
  background: rgba(188, 150, 97, 1);
}

.form-control:focus
{
    background-color: white !important;
    border-bottom: 1px solid #333 !important;
    color: #333 !important;
    box-shadow: none;
}

html[data-theme="dark"] .form-control:focus
{
        border-bottom: 2px solid #333 !important;

}

.form-control:focus::placeholder {
  color: #000000 !important;
}


.contact-card{
    display: flex;
    width: 30%;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    margin: 10px;
    border: 1px solid #D2D6DB33;
    /* background-image: url(../../assets/services/pattren.svg); */
    background-position: bottom left;
    background-repeat: no-repeat;
    box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
}

.card-content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-content p{
  margin: 0;
  padding: 0;
}
.contact-card .featured-icon {
    width: 54px;
    height: 54px;
    border-radius: 100%;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #BB9661;
    border:none;
    background-color: rgba(249, 250, 251, 1) ;
}

html[data-theme="dark"] .contact-card .featured-icon{
  background-color:rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}


.contact-card-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-content-items{
  padding: 10px 0px;
}

.input2-group{
  display: flex;
  /* border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important; */
  /* border: 1px solid #D2D6DB33;
  border-radius: var(--bs-border-radius); */
}

.input2-group select{
  background-color: var(--bg-control) !important;
  border-end-end-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border: 1px solid #D2D6DB33;
}
.input2-group img{
  background-color: var(--bg-control) !important;
  border-radius: var(--bs-border-radius);
  border-end-end-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border: 1px solid #D2D6DB33;
}
.input2-group input{
  background-color: var(--bg-control) !important;
  border-end-start-radius: 0 !important;
  border-start-start-radius: 0 !important;
  border: 1px solid #D2D6DB33;
}

.input-group .form-control{
  border:none;
  border-radius:0;
  border-bottom : none;
} 

.input2-group:focus
{
   background-color: rgba(249, 250, 251, 1) !important ;
    border-bottom: 1px solid #333 !important;
    box-shadow: none;
}

.input2-group img{
  height: 40px !important;
  width: 100px;
}
.select-code{
  max-width: fit-content;
}


@media screen and (max-width: 768px) {
  .contact-card{
    min-width: 100% !important;
  }
}

/* fot alhya page  */


.content-section{
  padding: 20px 10px;
}


.mix-section{
  display: flex;
  align-items: center;
  padding: 0px 40px 0px 80px;
}
.mix-photos {
  /* background-image: url('./../../images/contact/mixbackground.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
  position: relative;
  /* aspect-ratio: 1 / 1;
  width: 80%; */
}

.mainmix-photo{
  position: relative;
  aspect-ratio: 1 / 1;
}

.mix-photo {
  position: absolute;
  aspect-ratio: 1 / 1;
  top: -20%;
  right: -10%;
  z-index: 3;
  max-width: 60%;
  /* transform: translate(-50%, -50%);  */
  transition: transform 0.3s ease;
}
.mix-photo2 {
  position: absolute;
  aspect-ratio: 1 / 1;
  bottom: 0;
  left: -30%;
  z-index: 2;
  max-width: 90%;
  /* transform: translate(-50%, -50%);  */
  transition: transform 0.3s ease;
}

.contact-decor-1 {
    position: absolute;
    width: 50% !important;
    inset-inline-end: 0;
    top: -50%;
}
.contact-decor-2 {
    position: absolute;
    width: 60% !important;
    inset-inline-start: -30%;
    bottom: 0;
}

@media screen and (max-width: 768px) {
  .mix-section{
  display: flex;
  align-items: center;
  padding: 0px 20px 0px 40px;
}
}

/* .groub-image{

} */