/* *{
  overflow-x: hidden;
} */
.breadcrumbs {
  background-image: url(../img/7.png);
  background-size: cover;
}
button {
  padding: 17px 40px;
  border-radius: 50px;
  cursor: pointer;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 15px;
  transition: all 0.5s ease;
}

button:hover {
  letter-spacing: 3px;
  background-color: hsl(130, 80%, 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(24, 220, 34) 0px 7px 29px 0px;
}

button:active {
  letter-spacing: 3px;
  background-color: hsl(261deg 80% 80%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(24, 220, 34) 0px 0px 0px 0px;
  transform: translateY(10px);
  transition: 100ms;
}


.active{
  background-color: green !important;
  color: white !important;
  border-radius: 25px;
  align-items: center;
}


/* Styles for WhatsApp icon */
#whatsapp .whatsapp {
  position: fixed;
  /* Fixed positioning */
  transform: all .5s ease;
  /* Transformation */
  background-color: #25d366;
  /* Background color */
  display: block;
  /* Display type */
  text-align: center;
  /* Text alignment */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0, 0.15);
  /* Box shadow */
  border-radius: 50px;
  /* Border radius */
  border-right: none;
  /* Right border */
  color: #fff;
  /* Text color */
  font-weight: 700;
  /* Font weight */
  font-size: 37px;
  /* Font size */
  bottom: 10%;
  /* Bottom position */
  left: 1.5%;
  /* Left position */
  border: 0;
  /* Border */
  z-index: 9999;
  /* Z-index */
  width: 50px;
  /* Width */
  height: 50px;
  /* Height */
  line-height: 50px;
  /* Line height */
  /* justify-content: center !important; */
}


/* Styles for WhatsApp icon's pseudo-element */
#whatsapp .whatsapp::before {
  content: "";
  /* Empty content */
  position: absolute;
  /* Absolute positioning */
  z-index: -1;
  /* Z-index */
  left: 50%;
  /* Left position */
  top: 50%;
  /* Top position */
  transform: translateX(-50%) translateY(-50%);
  /* Transformation */
  display: block;
  /* Display type */
  width: 60px;
  /* Width */
  height: 60px;
  /* Height */
  background-color: #25d366;
  /* Background color */
  border-radius: 50%;
  /* Border radius */
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  /* Animation */
  animation: pulse-border 1500ms ease-out infinite;
  /* Animation */
}

/* Focus styles for WhatsApp icon */
#whatsapp .whatsapp:focus {
  border: none;
  /* No border */
  outline: none;
  /* No outline */
}

/* Keyframe animation for pulse-border */
@keyframes pulse-border {
  0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      /* Transformation */
      opacity: 1;
      /* Opacity */
  }

  100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1).5;
      /* Transformation */
      opacity: 0;
      /* Opacity */
  }
}

/* Styles for Gmail icon */
#gmail .gmail {
  position: fixed;
  /* Fixed positioning */
  transform: all .5s ease;
  /* Transformation */
  background-color: #B23121;
  /* Background color */
  display: block;
  /* Display type */
  text-align: center;
  /* Text alignment */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0, 0.15);
  /* Box shadow */
  border-radius: 50px;
  /* Border radius */
  border-right: none;
  /* Right border */
  color: white;
  /* Text color */
  font-weight: 700;
  /* Font weight */
  font-size: 30px;
  /* Font size */
  bottom: 20%;
  /* Bottom position */
  left: 1.5%;
  /* Left position */
  border: 0;
  /* Border */
  z-index: 9999;
  /* Z-index */
  width: 50px;
  /* Width */
  height: 50px;
  /* Height */
  line-height: 50px;
  /* Line height */
}

/* Styles for Gmail icon's pseudo-element */
#gmail .gmail::before {
  content: "";
  /* Empty content */
  position: absolute;
  /* Absolute positioning */
  z-index: -1;
  /* Z-index */
  left: 50%;
  /* Left position */
  top: 50%;
  /* Top position */
  transform: translateX(-50%) translateY(-50%);
  /* Transformation */
  display: block;
  /* Display type */
  width: 60px;
  /* Width */
  height: 60px;
  /* Height */
  background-color: #B23121;
  /* Background color */
  border-radius: 50%;
  /* Border radius */
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  /* Animation */
  animation: pulse-border 1500ms ease-out infinite;
  /* Animation */
}

/* Focus styles for Gmail icon */
#gmail .gmail:focus {
  border: none;
  /* No border */
  outline: none;
  /* No outline */
}

/* Styles for Phone icon */
#phn .phn {
  position: fixed;
  /* Fixed positioning */
  transform: all .5s ease;
  /* Transformation */
  background-color: blue;
  /* Background color */
  display: block;
  /* Display type */
  text-align: center;
  /* Text alignment */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0, 0.15);
  /* Box shadow */
  border-radius: 50px;
  /* Border radius */
  border-right: none;
  /* Right border */
  color: white;
  /* Text color */
  font-weight: 700;
  /* Font weight */
  font-size: 30px;
  /* Font size */
  bottom: 30%;
  /* Bottom position */
  left: 1.5%;
  /* Left position */
  border: 0;
  /* Border */
  z-index: 9999;
  /* Z-index */
  width: 50px;
  /* Width */
  height: 50px;
  /* Height */
  line-height: 50px;
  /* Line height */
}

/* Styles for Phone icon's pseudo-element */
#phn .phn::before {
  content: "";
  /* Empty content */
  position: absolute;
  /* Absolute positioning */
  z-index: -1;
  /* Z-index */
  left: 50%;
  /* Left position */
  top: 50%;
  /* Top position */
  transform: translateX(-50%) translateY(-50%);
  /* Transformation */
  display: block;
  /* Display type */
  width: 60px;
  /* Width */
  height: 60px;
  /* Height */
  background-color: blue;
  /* Background color */
  border-radius: 50%;
  /* Border radius */
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  /* Animation */
  animation: pulse-border 1500ms ease-out infinite;
  /* Animation */
}

/* Focus styles for Phone icon */
#phn .phn:focus {
  border: none;
  /* No border */
  outline: none;
  /* No outline */
}

/* Keyframe animation for pulse-border */
@keyframes pulse-border {
  0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      /* Transformation */
      opacity: 1;
      /* Opacity */
  }

  100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1).5;
      /* Transformation */
      opacity: 0;
      /* Opacity */
  }
}
/* Navbar Dropdown Fixes */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 10;
    left: 0;
    top: 100%;
    opacity: 0; /* Start with opacity 0 */
  visibility: hidden; /* Make it invisible initially */
  transition: opacity 0s ease, visibility 0s 0s; /* Apply transition with delay */
  }

  .dropdown-services:hover .dropdown-content,
  .dropdown-internship:hover .dropdown-content {
    display: block;
     opacity: 1; /* Fade in */
  visibility: visible; /* Make it visible */
  transition: opacity 0s ease, visibility 0s 0s; /* Remove delay when visible */
  }

  /* Ensure proper spacing */
  .navbar {
    z-index: 50;
  }
  .dropdown-content {
  display: none; /* Hide by default */
  position: absolute;
}

.dropdown:hover .dropdown-content,
.dropdown-services:hover .dropdown-content,
.dropdown-internship:hover .dropdown-content {
  display: block; /* Show on hover */
}

/* Ensure proper positioning for dropdowns */
.dropdown-services .dropdown-content {
  top: 100%;
  left: 0;
}

.dropdown-internship .dropdown-content {
  top: 100%; /* Position it below the Internship button */
  left: 0;
  margin-top: 5px; /* Add spacing to avoid overlap */
}

/* Ensure they don't overlap in mobile view */
@media (max-width: 1024px) {
  .dropdown-content {
    position: static;
    width: auto;
  }

  .dropdown-services .dropdown-content,
  .dropdown-internship .dropdown-content {
    position: relative;
    margin-top: 5px;
  }
}


@media (max-width: 1024px) {
  .dropdown-content {
    /* margin-left: 3rem; */
    position: static; /* Prevent floating over other elements */
    width: 50vw; /* Make it take full width */
    box-shadow: none; /* Remove any unwanted shadow */
     opacity: 0; /* Start with opacity 0 */
    visibility: hidden; /* Make it invisible initially */
    transition: opacity 0s ease, visibility 0s 0s; /* Add delay */
  }

  /* Fix nested dropdowns */
  .dropdown-content ul {
    /* padding-left: 1rem; Indent nested dropdowns */
    width: 60vw; /* Ensure full width */
  }

  .dropdown-content.hidden {
    display: none; /* Ensure dropdown stays hidden when needed */
  }
   .dropdown-services .dropdown-content,
  .dropdown-internship .dropdown-content {
    opacity: 1; /* Fade in when visible */
    visibility: visible; /* Make it visible */
    transition: opacity 0s ease, visibility 0s 0s; /* Remove delay when visible */
  }
}