/* --- PEOPLE PAGE FIXES --- */ .btn-circle { width:44px; height:44px; border-radius:9999px; border:1px solid #e5e7eb; background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } .btn-circle svg { width:18px; height:18px; color:#4b5563; } .full-width-hero { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; margin-top: -30px !important; padding-top: 50px !important; background-size: cover; background-position: center; } #apar-people .covid { background:#fff9f4; padding:48px 0; position:relative; overflow:hidden; } .covid-swiper { width: 100%; padding-bottom: 50px; overflow: hidden; max-width: 1100px; margin: 0 auto; } .covid-story { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 30px; opacity: 0; transition: opacity 0.3s; width: 100%; } .covid-story.swiper-slide-active { opacity: 1; } .covid-story > div:first-child { flex: 1; } .story-img-wrapper { flex: 0 0 50%; max-width: 50%; } .story-image { width:100%; height:350px; object-fit:cover; border-radius:8px; display:block; } #apar-people .covid h3 { color:#f7941d; font-size:1.5rem; margin:0 0 8px 0; font-weight:600; } #apar-people .covid h4 { margin:0 0 12px 0; color:#111827; font-size:1rem; font-weight:600; } .story-title { font-size:1.125rem; font-weight:700; color:#111827; margin:0 0 10px 0; } .story-desc { color:#374151; white-space:pre-line; } .covid-nav-controls { display: flex; justify-content: center; gap: 20px; margin-top: 20px; z-index: 10; position: relative; padding-bottom: 20px; } .covid-btn { width: 40px; height: 40px; background: #f7941d; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; user-select: none; } @media (max-width: 768px) { .covid-story { flex-direction: column; } .story-img-wrapper { flex: 0 0 100%; max-width: 100%; } .story-image { height: 250px; } } #apar-people .people { padding:48px 0; background:#fff; text-align:center; } .people-grid { display:grid; grid-template-columns:1fr; gap:20px; max-width: 1200px; margin: 0 auto; } @media(min-width:640px){ .people-grid { grid-template-columns:repeat(2, 1fr); } } @media(min-width:1024px){ .people-grid { grid-template-columns:repeat(3, 1fr); } } .person-card { background:#ffffff; border:1px solid #f3f4f6; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; text-align:left; } .person-card img { width:100%; height:360px; object-fit:cover; display:block; } .person-card .meta { background:#f7941d; color:#fff; padding:12px 16px; } .person-card .quote { padding:16px; color:#374151; font-style:italic; white-space:pre-line; } .life-carousel { overflow: hidden; margin-top: 24px; padding: 18px 0; background: #fffaf6; } .life-carousel .swiper-wrapper { transition-timing-function: linear !important; display: flex; } .life-carousel .swiper-slide { width: 300px !important; flex-shrink: 0; margin-right: 20px; } .life-carousel img { width: 100%; height: 160px; object-fit: cover; border-radius: 8px; display: block; } Skip to main content

POWEROIL PETROLEUM JELLY BROCHURE

Overview of petroleum jelly products.