/* Global Styles */
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
  background-image: url("/images/sl_0210121_40570_43.jpg");
  background-size: cover;
  display: flex;
  flex-direction: column;
  background-color: #000000e0; /* Light background color */
  justify-content: center; /* Horizontally center the container */
  align-items: center; /* Vertically center the container */
  overflow: scroll; /* Prevents content overflow */
  padding: 0 10px;
}

.container {
 background: rgba(255, 255, 255, 0.1);        /* Transparent white layer */
backdrop-filter: blur(12px);                 /* Blur effect */
border: 1px solid rgba(255, 255, 255, 0.2);   /* Soft inner border */
  width: 100%;
  max-width: 600px;
  padding: 30px;
  border-radius: 35px; /* Rounded corners for all edges */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow around the container */
  text-align: center; /* Center the content inside the container */
  box-sizing: border-box;
  margin:0 auto 50px auto; /* Adding some margin to ensure no clipping */
  position: relative; /* Enables absolutely positioned elements inside */
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.scan-title {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 20px;
  text-align: center; /* Center the title */
}

.profile_form{
  
  display: flex;
  flex-wrap: wrap;
  gap:0 20px;
}
.profile_form div{
  width: 48%;
  
  color: #ffffff;
}
.profile_form div input{
  margin: 0;
}


h1 {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 16px;
  color: #ffffff;
  margin: 10px 0 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="phone"],
input[type="url"],
input[type="tel"] {
  width: 100%; /* Ensure all fields span the full width */
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 50px; /* Rounded input fields */
  box-sizing: border-box;
  
}
input[type="file"]{
  color: #ffff;
}

.iti.iti--allow-dropdown {
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="phone"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus {
  border-color: #50C878; /* Emerald green border on focus */
  outline: none; 
}

button, 
.btn {
  margin-bottom: 20px;
  background-color: #ffffff; /* Emerald green background */
  color: rgb(0, 0, 0);
  font-size: 16px;
  padding: 12px 20px;
  border: none;
  border-radius: 50px; /* Rounded button */
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
}
.bgyello{
  
  background-color: #ffd400 !important;
}

i{
  color:#ffd400 ;
  margin-right:20px ;
}
/* button:hover {
transform: translateY(-4px) translateX(-2px);
box-shadow: 2px 5px 0 0 rgb(161, 161, 161);
};

button:active {
transform: translateY(2px) translateX(1px);
box-shadow: 0 0 0 0 rgb(161, 161, 161);
}; */



/* Message styles */
.message {
  margin-top: 20px;
  padding: 10px;
  background-color: #d4edda; /* Success message background */
  color: #155724; /* Success message text */
  border: 1px solid #c3e6cb; /* Success message border */
  border-radius: 5px;
  text-align: center;
  position: absolute; /* Positioned at the bottom of the container */
 top: -20px;
}

/* Error message styles */
.error-message {
  font-size: 14px;
  color: red;
  margin-top: 10px;
}
label{
  color: #fff;
}
a {
  color: #FFD400; /* Emerald green links */
  /*text-decoration: none;*/
}

a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* start retrieve page */
img.pro-img {
  padding: 4px;
  border: 2px #ffd400 solid;
}

img.pro-img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}


.info-block {
  color: #fff !important;
  /* display: flex;
flex-direction: column; */
  align-items: flex-start;
  width: fit-content;
  
}

.info-block p {
 margin-bottom: 30px !important;
}
.socials-block{
  margin-bottom: 20px;
}


.socials-block a > i{
  font-size: 30px !important;
  margin-bottom: 20px;
}

/* button */
.downloadbtn a{
  color: #000;
}
.downloadbtn a i{
  color: #000;
}
.editpro , .downloadbtn{
  font-weight: bold;
  margin: 20px ;
  background-color: #ffffff; /* Emerald green background */
  color: rgb(0, 0, 0) !important;
  font-size: 16px;
  padding: 12px 20px;
  border: none;
  border-radius: 50px; /* Rounded button */
  cursor: pointer;
  width: 100%;
}

/* Stepper styles */
.stepper {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
width: 100%;
max-width: 600px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
position: relative;
}
.step .circle {
width: 32px;
height: 32px;
border-radius: 50%;
background: #fff;
border: 2px solid #ffd400;
color: #ffd400;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
margin-bottom: 8px;
z-index: 2;
}
.step.active .circle,
.step.completed .circle {
background: #ffd400;
color: #000;
border: 2px solid #ffd400;
}
.step .label {
color: #fff;
font-size: 14px;
font-weight: bold;
}
.step.completed .label,
.step.active .label {
color: #ffd400;
}
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 16px;
right: -50%;
left: auto;
width: 100%;
height: 4px;
background: #fff;
z-index: 1;
}
[dir="rtl"] .step:not(:last-child)::after {
right: auto;
left: -50%;
}
.step.completed:not(:last-child)::after,
.step.active:not(:last-child)::after {
background: #ffd400;
}

/* Drag and drop upload area */
.drop-area {
border: 2px dashed #ffd400;
border-radius: 16px;
padding: 30px 10px;
background: rgba(255,255,255,0.05);
text-align: center;
color: #fff;
margin-bottom: 20px;
cursor: pointer;
transition: border-color 0.2s;
}
.drop-area.dragover {
border-color: #50C878;
background: rgba(255,255,255,0.15);
}
.drop-area i {
font-size: 36px;
color: #ffd400;
margin-bottom: 10px;
}
.drop-area .upload-text {
color: #ffd400;
font-weight: bold;
font-size: 16px;
display: block;
margin-bottom: 5px;
}
.drop-area small {
color: #fff;
font-size: 13px;
}

@media only screen and (max-width: 600px) {
.profile_form div{
  width: 100%;
}

.container {
  margin: auto 20px;
}
}

/* RTL Styles */
html[lang="ar"] .info-block {
  direction: rtl;
}

.password-wrapper {
  max-width: unset !important;
}

form {
  width: 100%;
}