.footer-whatsapp {
  display: flex; /* Center the image */
  justify-content: center; /* Center the content */
  align-items: center; /* Align items vertically */
  background-color: #25D366; /* WhatsApp green background */
  border-radius: 50%; /* Circular button */
  width: 60px; /* Fixed width */
  height: 60px; /* Fixed height */
  transition: background-color 0.3s; /* Smooth transition for hover effect */
 
}

/* Image styling */
.footer-whatsapp img {
  width: 30px; /* Set image width */
  height: auto; /* Maintain aspect ratio */
}

/* Hover effect */
.footer-whatsapp:hover {
  background-color: #128C7E; /* Darker green on hover */
}

/* Footer styling */
footer {
  display: flex;
  justify-content: center; /* Center the content */
  align-items: center; /* Align items vertically */
  background-color: #f1f1f1; /* Light gray footer background */
  padding: 20px; /* Padding for the footer */
}

.dropdown-menu {
  background-color: #ffffff; /* Background color for dropdown */
  border: none; /* Remove border */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.dropdown-item {
  font-weight: bold; /* Make text bold */
  font-size: 1.1rem; /* Slightly larger font size */
  color: #333333; /* Text color */
  padding: 10px 20px; /* Increased padding for a better click area */
  transition: background-color 0.3s, color 0.3s; /* Smooth transitions */
}

.dropdown-item:hover {
  background-color: #17a2b8; /* Change background on hover */
  color: #ffffff; /* Change text color on hover */
}

.background-title {
  min-height: clamp(300px, 40vh, 400px); 
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
@media (max-width: 1024px) {
  .background-title {
    min-height: clamp(250px, 35vh, 350px); 
  }
}
/* Smaller screens (max-width: 768px) */
@media (max-width: 768px) {
  .background-title {
    min-height: clamp(200px, 30vh, 300px);
  }
}

/* Very small screens (max-width: 480px) */
@media (max-width: 480px) {
  .background-title {
    min-height: clamp(150px, 25vh, 250px);
  }
}
a.text-white.mb-2 {
  display: block; /* Ensure each menu item appears on a new line */
}
.email-link {
  text-decoration: none;
  color: #fff;
}
.email-link:hover {
  text-decoration: underline;
  color: #fff;
}

/* .responsive-btn {
  font-size: 1.2rem; 
} */

@media (max-width: 768px) { /* Tablet and smaller screens */
  .responsive-btn {
      font-size: 1rem; /* Reduce font size */
      padding: 0.5rem 1.5rem; /* Adjust padding for smaller button */
  }
}

@media (max-width: 576px) { /* Mobile screens */
  .responsive-btn {
      font-size: 0.8rem; /* Further reduce font size */
      padding: 0.4rem 1rem; /* Compact padding for mobile */
  }
}

/* Default styling for placeholders */
input::placeholder, textarea::placeholder {
  font-size: 1rem; /* Adjust default size */
  color: #aaa;     /* Slightly lighter color for placeholder text */
}

/* Ensures inputs and textareas are responsive */
input, textarea {
  width: 100%;  /* Makes the fields responsive */
  /* padding: 10px; */
  font-size: 1rem;  /* Ensures readable text */
  border-radius: 5px;
}

html[lang="ar"] .back-to-top {
  right: auto;
  left: 20px;  /* Place on the left for RTL languages */
}

#phone:lang(ar)::placeholder {
  direction: rtl;
  text-align: right;
}
/* Adjusting placeholder size and field padding on smaller screens */
@media (max-width: 768px) {
  input::placeholder, textarea::placeholder {
    font-size: 0.9rem;  /* Slightly smaller font size on smaller screens */
  }
  
  .contact-form input,
  .contact-form textarea {
    padding: 8px;  /* Less padding on smaller screens */
  }
}

/* Further adjustment on very small screens */
@media (max-width: 480px) {
  input::placeholder, textarea::placeholder {
    font-size: 0.85rem;  /* Make the placeholder smaller on very small screens */
  }
  
  .contact-form input,
  .contact-form textarea {
    padding: 6px;  /* Smaller padding */
  }
}

.control-group {
  margin-bottom: 1.5rem; /* Adjust the value for the desired gap */
}

.options .option:hover {
  background-color: #17a2b8;  /* Change the background color on hover */
  color: white;  /* Change the text color to white */
}

.selected-box {
  position: relative;
}

.selected-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 7.5px;
  cursor: pointer;
  background: white;
  overflow: hidden;
  position: relative;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .selected-option {
    flex-wrap: nowrap; /* Stack elements vertically on smaller screens */ 
  }

  .selected-option div {
    text-align: left;
    width: 100%; /* Adjust to full width */
  }

  .options {
    max-height: 150px;
  }
}

@media (max-width: 480px) {
  .selected-option {
    padding: 5px; /* Reduce padding for smaller devices */
  }

  .selected-box .options {
    font-size: 0.75rem; /* Smaller font for narrow screens */
  }
}

.selected-option div {
  position: relative;
  width: 6rem;
  padding: 0 .5rem 0 .5rem;
  text-align: center;
  cursor: pointer;
}

/* .selected-option div::after {
  position: absolute;
  content: "";
  right: 2rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: .8rem;
  height: .8rem;
  border-right: .12rem solid black;
  border-bottom: .12rem solid black;
} */

.selected-option input {
  border: none;
  outline: none;
  flex-grow: 1;
  margin-left: 10px;
}

.selected-option .selected-flag {
  display: flex;
  align-items: center;
}

.selected-option strong {
  margin-left: 5px;
}


.selected-box .options {
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  display: block;
}

.selected-box .options::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
}

.selected-box ol {
  list-style: none;
  overflow: overlay;
}

.selected-box ol li {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-box ol li:hover {
  background-color: #17a2b8;
  color: white;
}

.options.hidden {
  display: none;
}

.options input.search-box {
  width: 100%;
  padding: 8px;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  box-sizing: border-box;
}

.options ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.options .option div {
  display: flex;
  align-items: center;
  gap: 8px; /* space between flag and country name */
}

.options .option strong {
  margin-left: auto; /* keep the code on the right side */
}

.options .option {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.options .option:hover {
  background: #17a2b8;
  color: white;
}
.hidden-code {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s ease-in-out;
}

.show-code {
  visibility: visible;
  opacity: 1;
}

.selected-option .dropdown-arrow {
 
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  transform: rotate(45deg);
  transition: transform 0.3s ease-in-out;
}

.selected-option[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(-135deg); /* Rotates arrow upwards */
}

html[dir="rtl"] .selected-option .dropdown-arrow {
  left: 10px; /* Position to the left in RTL */
  right: auto; /* Remove the right property */
  transform: rotate(225deg); /* Rotate the arrow in the opposite direction for RTL */
}

/* When aria-expanded is true in RTL layout */
html[dir="rtl"] .selected-option[aria-expanded="true"] .dropdown-arrow {
  transform: rotate(45deg); /* Rotate the arrow upwards in RTL */
}


/* Ensures the message is visible and takes full width when needed */
.help-block {
  width: 100%; /* Make sure it takes full width */
  font-size: 1rem; /* Increased font size */
  line-height: 1.5; /* Ensure proper spacing */
}

@media (max-width: 767px) {
  .help-block {
    font-size: 0.9rem; /* Adjust font size for small devices */
   
  }
}

@media (max-width: 576px) {
  .help-block {
    font-size: 0.85rem; /* Slightly reduced font size on extra small devices */
  }
}

.error {
  color: red;
  font-size: clamp(14px, 1.2vw, 16px); /* Responsive font size */
  min-height: 18px;
  display: block;
  margin-top: 5px;
}

.rounded-circle {
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    line-height: 45px;
    text-align: center;
}

.phone-section {
  text-align: right;      /* aligns all content to the right */
  direction: ltr;         /* left-to-right for phone numbers */
  unicode-bidi: plaintext; /* ensures proper rendering of mixed text */
}


/* .selected-box {
  position: relative;
}

.selected-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 7.5px;
  cursor: pointer;
  background: white;
  overflow: hidden;
}

.selected-option div {
  position: relative;
  width: 8rem;
  padding: 0 2.8rem 0 .5rem;
  text-align:center;
  cursor:pointer;
}

.selected-option div::after {
  position: absolute;
  content: "";
  right: .8rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: .8rem;
  height: .8rem;
  border-right: .12rem solid black;
  border-bottom: .12rem solid black;

}

.selected-option input {
  border: none;
  outline: none;
  flex-grow: 1;
  margin-left: 10px;
}

.selected-option .selected-flag {
  display: flex;
  align-items: center;
}

.selected-option strong {
  margin-left: 5px;
}

.selected-box .options {
  position: absolute;
  top: 100%;
  width: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  display: block;
}

.selected-box .options::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
}

.selected-box ol {
  list-style: none;
  
  overflow: overlay;
}

.selected-box ol li:hover {
  background-color: blue;
}

.options.hidden {
  display: none;
}

.options input.search-box {
  width: 100%;
  padding: 8px;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  box-sizing: border-box;
}

.options ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.options .option {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.options .option:hover {
  background: #f0f0f0;
} */