body {
  background: linear-gradient(135deg, #a2c2e8 0%, #f7f7f7 100%);
  }

.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: linear-gradient(135deg, #a2c2e8 0%, #f7f7f7 100%);; /* Change background on hover */
    color: #ffffff; /* Change text color on hover */
  }

  .submenu {
    padding-left: 20px; /* Indent submenu */
  }

  a.text-white.mb-2 {
    display: block; /* Ensure each menu item appears on a new line */
  }
 
  .center-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
  }

  .center-image img {
    border-radius: 50%;
    width: 150px;
  }

  .center-image h4 {
    margin-top: 10px;
   
  }
  html[lang="ar"] .back-to-top {
    right: auto;
    left: 20px;  /* Place on the left for RTL languages */
  }
/* .responsive-img {
  width: 100%;  
  height: auto;
  max-width: 150px; 
} */

.special-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the container while cropping overflow */
}

.special-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  margin: auto;
}

@media (max-width: 768px) {
  .special-image {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 576px) {
  .special-image {
    width: 100px;
    height: 100px;
  }
}

.image-glow-border {
  --glow-color-light: #6fc3d5; /* A bright cyan */
  --glow-color-dark: #17a2b8;  /* A deeper cyan/teal */
  --border-thickness: 5px;

  /* Apply the full border and initial glow */
  border: var(--border-thickness) solid var(--glow-color-dark);
  box-shadow: 0 0 10px rgba(23, 162, 184, 0.5);
  transition: all 0.3s ease-in-out;
  
  /* The smooth on-off animation that affects the entire border/shadow */
  animation: pulse-glow 2s infinite alternate ease-in-out forwards; 
}

/* Define the glow on-off animation */
@keyframes pulse-glow {
  0% {
    /* Subtle initial state */
    box-shadow: 0 0 5px rgba(23, 162, 184, 0.5);
    border-color: var(--glow-color-dark);
    transform: scale(1);
  }
  100% {
    /* Maximum glow state (the "on" part) */
    /* Increased shadow size for a more 'fascinating' look */
    box-shadow: 0 0 25px var(--glow-color-light), 
                0 0 40px rgba(111, 195, 213, 0.5),
                inset 0 0 10px var(--glow-color-dark);
    border-color: var(--glow-color-light);
    transform: scale(1.03); /* Subtle scale adds intrigue */
  }
}

/* Ensure no rogue pseudo-elements conflict from previous attempts */
.image-glow-border::before,
.image-glow-border::after {
    content: none !important;
}

/* .glow-teacher {
   --glow-color-light: #ffc107;
}

.glow-abatherapist {
   --glow-color-light: #6610f2;
}

.glow-director {
  --glow-color-light: #00bfa5; 
}

.glow-hr-manager {
  --glow-color-light: #20c997; 
}

.glow-supervisor {
  --glow-color-light: #17a2b8; 
} */
/* For tablets (up to 768px) */
@media (max-width: 768px) {
  /* .responsive-img {
    max-width: 120px;  
  } */
}

/* For mobile screens (up to 576px) */
@media (max-width: 576px) {
  /* .responsive-img {
    max-width: 100px;  
  } */
}

  .background-title {
    min-height: 400px;
  }

  /* Smaller screens (max-width: 768px) */
  @media (max-width: 768px) {
    .background-title {
      min-height: 300px;
    }
  }

  /* Very small screens (max-width: 480px) */
  @media (max-width: 480px) {
    .background-title {
      min-height: 200px;
    }
    /* h2, .h2 {
      font-size: calc(1rem + 0.875vw); 
  } */
  }
  .email-link {
text-decoration: none;
color:#fff;
}
.email-link:hover {
text-decoration: underline;
color: #fff;
}
.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 */
}

.teacher-box {
    width: 150px;
    min-height: 250px;
}

.teacher-box img {
  display: block;
  margin: 0 auto;
}

@media (max-width: 992px) {
    .aba-therapist {
        flex: 0 0 100% !important; /* Take full width on small screens */
        max-width: 100% !important;
    }
}


