/* ============================================
   Quectel Official Footer Styles
   复制自官网 www.quectel.com
   ============================================ */

/* Footer container */
footer.footer {
  background-color: #000000;
  padding-top: 3rem;
  padding-bottom: 3rem;
  position: relative;
  width: 100%;
}

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

/* Footer logo */
.footer .logo {
  margin-bottom: 1.5rem;
}

.footer .logo a {
  display: block;
}

.footer .logo .hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Footer columns layout */
.footer__columns {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  row-gap: 3rem;
}

.footer__columns .nav__footer__item {
  width: 14.28%; /* 100% / 7 columns */
}

@media (max-width: 1280px) {
  .footer__columns .nav__footer__item {
    width: 25%; /* 4 columns */
  }
}

@media (max-width: 1024px) {
  .footer__columns .nav__footer__item {
    width: 33.33%; /* 3 columns */
  }
}

@media (max-width: 768px) {
  .footer__columns .nav__footer__item {
    width: 50%; /* 2 columns */
  }
}

/* Footer navigation items */
.nav__footer__item__heading {
  color: #A6A9A9 !important; /* Official Quectel footer heading color */
  margin: 0 0 24px !important; /* Official margin: 0px 0px 24px */
  font-size: 16px !important; /* Official font-size - override .text-sm */
  font-family: 'Stratos', sans-serif !important; /* Official font-family */
  font-weight: normal !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Footer social heading - white color variant */
.footer__social .nav__footer__item__heading {
  color: #ffffff;
  margin-bottom: 12px; /* mb-3 = 0.75rem = 12px */
}

.footer__columns li {
  margin-bottom: 0.75rem;
  margin-top: 0;
  padding-right: 1rem;
  list-style: none;
}

.footer__columns li a {
  color: #ffffff;
  display: inline-block;
  text-decoration: none;
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 100;
  transition: color 0.2s ease;
}

.footer__columns li a:hover {
  color: #e60000;
}

/* Footer social section */
.footer__social {
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid #333;
  margin-top: 2rem;
}

.nav__footer-social h6 {
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.footer__social ul {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__social li {
  height: 1.25rem;
  margin-left: 0;
  margin-right: 1rem;
  width: 1.25rem;
}

.footer__social li:last-child {
  margin-right: 0;
}

.footer__social li.icon__youtube-white {
  width: 30px;
}

.footer__social li a {
  display: block;
  width: 100%;
  height: 100%;
}

.footer__social li.icon__facebook-white a {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.footer__social li.icon__linkedin-white a {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.footer__social li.icon__twitter-white a {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.footer__social li.icon__youtube-white a {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Container utilities */
.width-container {
  max-width: 1400px; /* Container max-width: 1400px, minus padding (48px) = 1352px content width */
  margin-left: auto;
  margin-right: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-8 {
  margin-top: 2rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-white {
  color: #ffffff;
}

.text-lighterGrey {
  color: #a0a0a0;
}

.text-\[0\] {
  font-size: 0;
}

.bg-black {
  background-color: #000000;
}

.relative {
  position: relative;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-row {
  flex-direction: row;
}

.items-start {
  align-items: flex-start;
}

.alignfull {
  width: 100%;
  max-width: 100%;
}

.hidden {
  display: none;
}
