/* ------------------------------
   PREMIUM FOOTER DESIGN + ANIMATED WAVE
   Career Adda Hub | Admission Expert
   UPDATED: link colors set to white (default + hover)
----------------------------------- */

.footer-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #001b33 0%, #002b5b 100%);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  padding: 60px 0 20px;
}

/* Animated gradient waves background */
.footer-section::before,
.footer-section::after {
  content: "";
  position: absolute;
  left: 0;
  width: 200%;
  height: 200%;
  top: 0;
  z-index: 0;
  background: radial-gradient(circle at 20% 20%, rgba(0, 188, 212, 0.15), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(33, 150, 243, 0.15), transparent 40%);
  animation: footerWaves 12s linear infinite alternate;
}

.footer-section::after {
  animation-delay: 6s;
  opacity: 0.8;
}

@keyframes footerWaves {
  0% {
    transform: translate(-10%, -10%) rotate(0deg);
  }
  100% {
    transform: translate(10%, 10%) rotate(360deg);
  }
}

/* Layer protection for content */
.footer-section * {
  position: relative;
  z-index: 2;
}

/* About section */
.footer-about {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.footer-about h5 {
  font-size: 20px;
  color: #00bcd4;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 12px;
  position: relative;
  display: inline-block;
}

.footer-about h5::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #00bcd4, #2196f3);
  margin: 10px auto 0;
  border-radius: 10px;
  box-shadow: 0 0 10px #00bcd4;
}

.footer-about p {
  color: #d0d0d0;
  font-size: 15px;
  line-height: 1.8;
  margin-top: 10px;
  font-weight: 400;
}

/* Footer column headings */
.footer-title {
  display: flex;
  align-items: center;
  color: #00bcd4;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.footer-title-b {
  align-items: center;
  color: #00bcd4;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  text-align: center;
}

.footer-title i {
  color: #00bcd4;
  margin-right: 8px;
  font-size: 16px;
}

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

/* === IMPORTANT CHANGE: Make list text white by default and on hover ===
   This ensures links shown in your screenshot (e.g. "M.B.A") are white always.
*/
.footer-list li {
  position: relative;
  color: #fff;                 /* default text color: WHITE */
  font-size: 14px;
  line-height: 1.8;
  padding-left: 22px;          /* space for icon */
  transition: all 0.3s ease;   /* smooth transition */
  cursor: pointer;
}

/* If list items contain anchors, ensure anchors inherit white color */
.footer-list li a,
.footer-list li a:link,
.footer-list li a:visited,
.footer-list li a:hover,
.footer-list li a:active {
  color: #fff !important;      /* force white for anchors in footer lists */
  text-decoration: none;
}

/* Keep arrow color teal by default (you can change if you want it white too) */
.footer-list li::before {
  content: "\f285"; /* Bootstrap icon: arrow-right-short */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  color: #00bcd4;
  font-size: 16px;
  transition: all 0.3s ease;
}

/* Hover state: maintain white text, optionally change icon color or keep teal */
.footer-list li:hover {
  color: #fff;                 /* keep white on hover */
  transform: translateX(5px);  /* slight slide */
}

/* Hover icon color: by default you had it change to white; keep that or keep teal.
   Here we keep it white on hover to match strong contrast, but you can comment this if you want teal. */
.footer-list li:hover::before {
  color: #fff;
  transform: translateX(5px);
}

/* Contact section */
.footer-contact {
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
}

.qr-map-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.qr-code {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: 8px;
  border: 2px solid #00bcd4;
  transition: all 0.3s ease;
}


.qr-code:hover {
  box-shadow: 0 0 15px rgba(0, 188, 212, 0.7);
  transform: scale(1.05);
}

.map-frame {
  width: 100%;
  height: 150px;
  border: 0;
  border-radius: 8px;
}

/* Divider */
.footer-section hr {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Bottom section */
.footer-bottom {
  border-top: 1px solid #184070;
  padding-top: 15px;
  color: #aaa;
  font-size: 13px;
  text-align: center;
}

/* Fade animation for entrance */
.footer-section {
  animation: fadeInFooter 1.2s ease forwards;
  opacity: 0;
}

@keyframes fadeInFooter {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Footer Styling */
@media (max-width: 768px) {

  .footer-section {
    text-align: left; /* keep lists left-aligned */
  }

  .footer-links .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .footer-list li {
    text-align: left;
    padding-left: 22px; /* align icon and text */
    transform: none;
    color: #fff; /* ensure mobile also white */
  }

  .footer-list li::before {
    left: 0;
  }

  .footer-list li:hover {
    transform: translateX(5px);
  }

  /* Adjust spacing */
  .footer-title {
    margin-top: 20px;
    text-align: left;
  }

  /* Center special sections like QR, contact, map */
  .qr-map-box {
    align-items: center;
  }

  .map-frame {
    width: 100%;
    height: 200px;
  }

  /* Keep icons & text consistent alignment */
  .footer-bottom {
    text-align: center;
  }
  
 .footer-bottom-bar .container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px; /* small spacing between lines */
  }

  .footer-bottom-bar p {
    text-align: center;
    margin: 0;
  }

  .footer-bottom-bar .developed {
    margin-top: 4px;
  }
}

/* Footer bottom bar */
.footer-bottom-bar {
  background: linear-gradient(90deg, #001f3f, #003366);
  color: #aaa;
  padding: 15px 0;
  border-top: 1px solid #184070;
}

.footer-bottom-bar a {
  color: #00bcd4;
  text-decoration: none;
  transition: 0.3s;
}

.footer-bottom-bar a:hover {
  color: #fff;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #00bcd4;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background: #00bcd4;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 0 10px rgba(0, 188, 212, 0.6);
}

/* Bottom bar text */
.footer-bottom-bar p {
  font-size: 13px;
}

.footer-bottom-bar .developed {
  color: #00bcd4;
  font-weight: 500;
}

/* Defensive: stop stray offcanvas/close-button leaking into footer */

/* Hide the close button by default */
.close-placeholder {
  display: none !important;
  pointer-events: none !important;
}

/* Show close button only when the mobile menu is open or offcanvas explicitly visible */
body.mobile-menu-open .close-placeholder,
#mobileOffcanvas[aria-hidden="false"] .close-placeholder {
  display: inline-flex !important;
  pointer-events: auto !important;
  align-items: center;
  justify-content: center;
}

/* Ensure offcanvas and overlay sit above footer (and are inert when closed) */
#mobileMenuOverlay {
  position: fixed !important;
  inset: 0;
  background: rgba(0,0,0,0.36) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
  z-index: 4995 !important;
}

body.mobile-menu-open #mobileMenuOverlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Force offcanvas fully out of viewport and non-interactive when closed */
#mobileOffcanvas {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  transform: translateX(110%) !important; /* >100% is safer for variable widths */
  right: -110vw !important;
  pointer-events: none !important;
  z-index: 5000 !important;
  transition: transform .34s cubic-bezier(.2,.9,.2,1), right .34s cubic-bezier(.2,.9,.2,1);
}

/* When open, bring it in and allow interaction */
body.mobile-menu-open #mobileOffcanvas {
  transform: translateX(0) !important;
  right: 0 !important;
  pointer-events: auto !important;
}

/* Ensure footer remains visually on top of normal content and below offcanvas */
footer, .site-footer {
  position: relative;
  z-index: 10;
}

/* Accessibility & reduced motion */
@media (prefers-reduced-motion: reduce) {
  .footer-section, .footer-section::before, .footer-section::after { animation: none !important; transition: none !important; }
}

/* Small debugging helper (optional)
body.footer-debug .footer-list li { outline: 1px dashed rgba(255,255,255,0.08); } */