/* 
 * Vendors Page Styles
 * Extracted from templates/vendors/vendors.html
 * Date: 2026-01-13
 */

/* ========================================
   FONT FAMILY OVERRIDE
   ======================================== */
/* Comfortaa for this whole section */
#vendors,
#vendors h1,
#vendors h4,
#vendors h5,
#vendors p,
#vendors a {
  font-family: 'Comfortaa', sans-serif !important;
}

/* ========================================
   PAGE LAYOUT
   ======================================== */
#vendors {
  margin-top: 105px;
  min-height: 80vh;
  margin-bottom: 50px;
}

/* ========================================
   HEADING STYLES
   ======================================== */
#vendors h1 {
  margin-top: 140px;
  margin-bottom: 65px;
  margin-left: 8%;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
}

#vendors h5 {
  max-width: 325px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 700;
}

/* ========================================
   INTRO SECTION
   ======================================== */
.vendors-intro {
  margin-left: 8%;
  margin-bottom: 40px;
}

.vendors-intro h4,
.vendors-intro p {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
}

/* ========================================
   VENDOR CARDS
   ======================================== */
.vendors-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.vendors-card {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pdf-icon-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 125px auto 30px;
}

.pdf-icon {
  width: 60px;
  height: auto;
}

.june {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.63;
  letter-spacing: normal;
}

/* ========================================
   DOWNLOAD BUTTON
   ======================================== */
.download-btn {
  width: 220px;
  height: 56px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  border: 1px solid #1D52E1;
  background-color: #ffffff;
  margin: 0 auto;
  color: #1D52E1;
  text-decoration: none;
}

.download-btn:hover {
  background-color: #1D52E1;
  text-decoration: none;
  color: #ffffff;
}

/* ========================================
   COMPLIANCE SECTION
   ======================================== */
.compliance-copy {
  margin-top: 100px;
  text-align: center;
}

.compliance-copy p {
  margin-top: 25px;
  font-size: 16px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Mobile - 768px and below (Tailwind md) */
@media (max-width: 768px) {
  #vendors h1 {
    font-size: 30px;
    margin-bottom: 30px;
    margin-left: 5%;
  }
  
  .vendors-intro {
    margin-left: 5%;
    margin-right: 5%;
  }
  
  #vendors h5 {
    font-size: 16px;
  }
  
  #vendors p {
    font-size: 14px;
  }
  
  .june {
    font-size: 12px;
    margin-top: 18px;
  }
  
  .downlaod-btn {
    width: 160px;
    height: 40px;
  }
}