/* ====================================================
   Top Contact Bar Styles
==================================================== */
.top-contact-bar {
  background-color: #01070e;
  color: #ffffff;
  font-size: 1rem;
  padding: 0.5rem;
  width: 100vw;       /* span full viewport width */
  margin: 0 !important;
}

.top-contact-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;        /* take full width */
  max-width: none;    /* remove restrictions */
  margin: 0;          /* reset margin */
  padding: 0 4rem;    /* breathing space inside */
  flex-wrap: nowrap;   /* 🔥 Prevent wrapping into new line */
  overflow: hidden;    /* clip any overflow just in case */
}


.top-contact-link,
.top-contact-phone {
  color: #ffffff;
  text-decoration: none;
  flex-shrink: 1;   /* ✅ allow links themselves to shrink */
  min-width: 0;     /* ✅ allow proper shrinking */
  overflow: hidden; /* ✅ enable clipping */
  text-overflow: ellipsis; /* ✅ add "..." if text too long */
  white-space: nowrap;     /* ✅ keep text in one line */
}



.top-contact-details {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: 0.3rem;
  font-size: clamp(0.65rem, 2vw, 1.1rem);  /* 🔥 scales text size with screen */
  transition: transform 0.3s ease, color 0.3s ease;
  flex-shrink: 1;   /* ✅ allow the container to shrink */
  min-width: 0;     /* ✅ critical for text ellipsis/shrinking */
}


.top-contact-details i {
  margin-right: 0.3rem;
  font-size: 1.1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.top-contact-details .email-icon {
  color: #ea4335;
}

.top-contact-details .email-icon:hover {
  transform: scale(1.2);
}

.top-contact-details .phone-icon {
  color: #34b7f1;
}

.top-contact-details .phone-icon:hover {
  transform: scale(1.2);
}

.top-contact-link,
.top-contact-phone {
  color: #ffffff;
  text-decoration: none;
}

.top-contact-link:hover,
.top-contact-phone:hover {
  color: #2d065a;
}

.top-social-links {
  display: flex;
  gap: 1rem;
  flex-shrink: 1;   /* ✅ let icons shrink when needed */
  min-width: 0;     /* ✅ allow shrinking beyond content’s natural width */
}

/* Social Icon Styles */
.top-social-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  flex-shrink: 1;  /* ✅ allow icons to shrink */
}

.top-social-icon:hover i {
  transform: scale(1.2);
}

/* WhatsApp */
.top-social-icon[href*="wa.me"] i { color: #25d366; }

/* YouTube */
.top-social-icon.youtube i { color: #ff0000; }

/* Twitter */
.top-social-icon[href*="twitter.com"] i { color: #1da1f2; }

/* Facebook */
.top-social-icon[href*="facebook.com"] i { color: #1877f2; }

/* Instagram */
.top-social-icon[href*="instagram.com"] i { color: #e4405f; }

/* LinkedIn */
.top-social-icon[href*="linkedin.com"] i { color: #0077b5; }

/* Telegram */
.top-social-icon[href*="t.me"] i { color: #229ed9; }

/* TikTok */
.top-social-icon[href*="tiktok.com"] i { color: #010101; }



/* Responsive */
@media (max-width: 768px) {
  .top-contact-container {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
   
    flex-wrap: nowrap;
    overflow: hidden;    /* clip any extra overflow */
  }



  .top-contact-details,
  .top-social-links {
    flex-shrink: 1;           /* ✅ allow both sides to shrink */
    font-size: clamp(0.6rem, 3vw, 0.9rem); /* smaller scaling range for mobile */
  }


  .top-contact-details i,
  .top-social-icon {
    font-size: 0.85rem;        /* icons shrink */
  }

  .top-social-links {
    gap: 0.3rem;              /* tighter spacing */
  }
}