/* Base topbar */
.topbar { 
  background:#262626; 
  color:#fff; 
  font-size:14px; 
}
.topbar-inner {
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  padding:8px 12px; 
  gap:12px; 
  flex-wrap:wrap;
}

/* Lists */
.topbar ul { 
  list-style:none; 
  margin:0; 
  padding:0; 
  display:flex; 
  gap:12px; 
  flex-wrap:wrap;
}
.contact li, 
.social li { 
  display:flex; 
  align-items:center; 
  gap:8px; 
}
.txt { 
  white-space:nowrap; 
  color:#fff; 
  font-weight:600; 
  font-size:16px; 
}

/* Circle buttons */
.btn-circle {
  width:40px; 
  height:40px; 
  border-radius:50%; 
  background:#fff; 
  border:2px solid #fff;
  display:flex; 
  align-items:center; 
  justify-content:center; 
  position:relative; 
  overflow:hidden;
  text-decoration:none; 
  transition:all .3s ease-in-out;
}
.btn-circle i { 
  color:#262626; 
  font-size:18px; 
  z-index:2; 
  transition:.5s; 
}
.btn-circle::before {
  content:""; 
  position:absolute; 
  inset:0; 
  top:100%; 
  transition:.5s; 
  z-index:1;
}
.btn-circle:hover::before { top:0; }
.btn-circle:hover i { color:#fff; transform:rotateY(360deg); }

/* Contact hover colors */
.contact li:nth-child(1) .btn-circle::before { background:#0d72ff; }
.contact li:nth-child(2) .btn-circle::before { background:#eb493b; }

/* Social hover colors */
.social li:nth-child(1) .btn-circle::before { background:#3b5999; }
.social li:nth-child(2) .btn-circle::before { background:#2cd46d; }
.social li:nth-child(3) .btn-circle::before { background:#dd4b39; }

/* -------- Responsive -------- */

/* -------- Responsive -------- */

/* Screens below 992px (medium + small) */
@media (max-width: 991px) {
  .topbar-inner {
    flex-direction: column; /* stack contact + social row */
    align-items: center;
    gap: 4px;
  }

  /* Contact row: force one line */
  .contact {
    display: flex;
    flex-wrap: nowrap;   /* force one line */
    justify-content: center;
    gap: 4px;
    overflow-x: hidden;  /* prevent scroll */
  }

  .contact li {
    flex-shrink: 1;      /* allow shrinking */
    min-width: 0;        /* prevent wrapping */
  }

  .contact li .txt {
    font-size: 12px;
    white-space: nowrap;  /* no wrapping */
  }

  .btn-circle {
    width: 24px;
    height: 24px;
  }

  .btn-circle i {
    font-size: 12px;
  }

  /* Social icons on next line */
  .social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
  }
}

/* Extra small screens (iPhone XR ~414px) */
/* Extra small screens (iPhone XR and similar ~414-425px) */
@media (max-width: 425px) {
  .topbar-inner {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .contact {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1px;
    overflow-x: hidden;
  }

  .contact li {
    flex-shrink: 1;
    min-width: 0;
  }

  .contact li .txt {
    font-size: 9px;
    white-space: nowrap;
  }

  .btn-circle {
    width: 18px;
    height: 18px;
  }

  .btn-circle i {
    font-size: 9px;
  }

  .social {
    justify-content: center;
    gap: 2px;
    margin-top: 2px;
  }
}

/* iPhone 14 Pro Max (430px) and similar devices */
/* iPhone 14 Pro Max (430px) and similar */
@media (min-width: 426px) and (max-width: 480px) {
  .topbar-inner {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;              /* space between call & email */
    white-space: nowrap;   /* keep in one line */
  }

  .contact li {
    display: inline-flex;  /* keep li inline */
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .contact li .txt {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .btn-circle {
    width: 22px;
    height: 22px;
  }

  .btn-circle i {
    font-size: 11px;
  }

  .social {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 2px;
  }
}