/* Payment Header Styles */
.payment-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.payment-header .svg-c {
  width: 35px;
  height: 35px;
  background-color: #865ba6;
  border-radius: 8px;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.payment-header .svg-c i.fas,
.payment-header .svg-c i.fab {
  color: white;
  font-size: 16px;
}

.payment-header span {
  font-size: 1.2rem !important;
  color: #000;
  font-weight: 400;
}

.payment-header .span-border {
  color: #865ba6;
  font-size: 1.2rem !important;
  font-weight: 400;
}

/* Desktop styles */
@media (min-width: 501px) {
  #desktopContactContainer {
    position: relative;
    top: 100px;
  }
}

#pageContainer {
  width: 95%;
  max-width: 1700px;
  margin-inline: auto;
  margin-top: 40px;
}

.contactSection {
  margin-bottom: 20px;
}
.contactSection h4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #484d9d;
  color: #fff;
  font-size: 1rem;
  border-radius: 100px;
  min-width: 131px;
  height: 32px;
  padding: 25px;
}
.contactInfo {
  margin-top: 10px;
}
.contactInfo p {
  margin: 0px 0;
}
.contactLink {
  color: #6c63ff;
  font-weight: bold;
  text-decoration: none;
}
.contactLink:hover {
  text-decoration: underline;
}
.contact-space {
  margin-top: 20px !important;
}
.contactInfo ul {
    margin-left: 20px !important;
}

/* Mobile cards for contact, shipping and consumer pages */
.contact-card,
.shipping-card,
.consumer-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.contact-card h6,
.shipping-card h6,
.consumer-card h6 {
  color: #865ba6;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.contact-card p,
.shipping-card p,
.consumer-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin: 8px 0;
}

.contact-card ul,
.shipping-card ul,
.consumer-card ul {
  margin-left: 20px;
  margin-top: 10px;
}

.contact-card li,
.shipping-card li,
.consumer-card li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 8px;
}

.contact-card strong,
.shipping-card strong,
.consumer-card strong {
  color: #865ba6;
  font-weight: 600;
}

#mobileContainerSection h2 {
  text-align: center;
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 25px;
  font-weight: 400;
  padding: 0 10px;
}

/* Disable all hover effects below 1024px */
@media (max-width: 1023px) {
  .contactLink:hover {
    text-decoration: none;
  }
}

/* ===== DESKTOP VERSION STYLES (500px and above) ===== */
@media (min-width: 500px) {
  .mobile-container {
    display: none !important;
  }

  #body {
    background-color: #f5f5f5;
    min-height: 100vh;
  }

  /* Show all desktop containers */
  #desktopContactContainer,
  #desktopShippingContainer,
  #desktopConsumerContainer {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px;
    position: relative;
    top: 100px;
  }

  #desktopSecondHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
  }

  #desktopSecondHeader .svg-c {
    width: 45px;
    height: 45px;
    display: grid;
    place-content: center;
    background-color: #865ba6;
    border-radius: 10px;
  }

  #desktopSecondHeader span {
    color: #000;
    font-size: 2rem;
    font-weight: 300;
  }

  .desktopContactSection {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
  }

  .desktopContactSection h4 {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #865ba6 0%, #6d4985 100%);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 100px;
    min-width: 180px;
    padding: 15px 35px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(134, 91, 166, 0.3);
  }

  .desktopContactInfo {
    margin-top: 20px;
  }

  .desktopContactInfo p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin: 10px 0;
  }

  .desktopContactInfo ul {
    margin-left: 30px;
    margin-top: 15px;
  }

  .desktopContactInfo li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 10px;
  }

  .desktopContactLink {
    color: #865ba6;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s;
  }

  .desktopContactLink:hover {
    color: #6d4985;
    text-decoration: underline;
  }

  .desktop-contact-space {
    margin-top: 30px !important;
  }

  /* Desktop cards for contact, shipping and consumer pages */
  .desktop-contact-card,
  .desktop-shipping-card,
  .desktop-consumer-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  }

  .desktop-contact-card h6,
  .desktop-shipping-card h6,
  .desktop-consumer-card h6 {
    color: #865ba6;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .desktop-contact-card p,
  .desktop-shipping-card p,
  .desktop-consumer-card p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin: 10px 0;
  }

  .desktop-contact-card ul,
  .desktop-shipping-card ul,
  .desktop-consumer-card ul {
    margin-left: 30px;
    margin-top: 15px;
  }

  .desktop-contact-card li,
  .desktop-shipping-card li,
  .desktop-consumer-card li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 10px;
  }

  .desktop-contact-card strong,
  .desktop-shipping-card strong,
  .desktop-consumer-card strong {
    color: #865ba6;
    font-weight: 600;
  }

  /* Desktop sections */
  .desktop-contact-section,
  .desktop-shipping-section,
  .desktop-consumer-section {
    padding: 20px 0;
  }

  .desktop-contact-section h2,
  .desktop-shipping-section h2,
  .desktop-consumer-section h2 {
    text-align: center;
    font-size: 2rem;
    color: #333;
    margin-bottom: 40px;
    font-weight: 300;
  }
}