card
Page: Homepage


Snippet Code
<style>
.certifications-section {
background: #F9F8F7;
}
.home-section {
padding: 80px 133.344px;
}
.h-head {
text-align: center;
max-width: 760px;
margin: 0 auto 48px;
}
.rv {
animation: fadeUp .6s ease both;
}
.h-head h2 {
font-family: 'Fraunces', Georgia, serif;
font-size: 44.8px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.896px;
color: #0F0A0A;
}
.h-head p {
font-size: 16px;
color: #6B5B5B;
line-height: 1.7;
margin-top: 16px;
}
.cert-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1000px;
margin: 32px auto 0;
}
.cert-card {
background: #fff;
border: 1px solid #E8E0DC;
border-radius: 16px;
padding: 32px 24px 28px;
text-align: center;
position: relative;
overflow: hidden;
transition: transform .25s, box-shadow .25s;
}
.cert-card:hover {
/* transform: translateY(-4px); */
box-shadow: 0 16px 40px #00000014;
}
.cert-card-top {
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 3px;
background: #AC0000;
border-radius: 0 0 3px 3px;
}
.cert-name {
font-family: 'Fraunces', serif;
font-size: 18.4px;
font-weight: 800;
color: #0F0A0A;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid #FFD97D;
display: inline-block;
min-width: 189px;
}
.cert-logo {
height: 140px;
display: flex;
align-items: center;
justify-content: center;
margin: 8px 0 12px;
padding: 8px;
}
.cert-logo img {
max-height: 124px;
object-fit: contain;
}
@media (max-width: 768px) {
section {
padding: 40px 20px !important;
}
.cert-grid {
grid-template-columns: 1fr;
}
}
</style>
<div id="shopify-section-template--19999282462897__certifications" class="shopify-section">
<section class="home-section certifications-section">
<div class="h-head rv on">
<h2>Premium Spices Backed By Clean Standards</h2>
<p>Made with clean processes, verified quality, and ingredients you can genuinely trust.</p>
</div>
<div class="cert-grid">
<div class="cert-card rv on">
<div class="cert-card-top"></div>
<div class="cert-name">India Organic</div>
<div class="cert-logo">
<img src="//themasalya.com/cdn/shop/files/India_organic.jpg?v=1779084891&width=280" alt="India Organic"
srcset="//themasalya.com/cdn/shop/files/India_organic.jpg?v=1779084891&width=280 280w" width="280"
height="235" loading="lazy">
</div>
</div>
<div class="cert-card rv on">
<div class="cert-card-top"></div>
<div class="cert-name">USDA Organic</div>
<div class="cert-logo">
<img src="//themasalya.com/cdn/shop/files/images.jpg?v=1779084890&width=280" alt="USDA Organic"
srcset="//themasalya.com/cdn/shop/files/images.jpg?v=1779084890&width=280 280w" width="280" height="280"
loading="lazy">
</div>
</div>
<div class="cert-card rv on">
<div class="cert-card-top"></div>
<div class="cert-name">EU Organic</div>
<div class="cert-logo">
<img src="//themasalya.com/cdn/shop/files/Organic-Logo_svg.png?v=1779084891&width=280" alt="EU Organic"
srcset="//themasalya.com/cdn/shop/files/Organic-Logo_svg.png?v=1779084891&width=280 280w" width="280"
height="188" loading="lazy">
</div>
<div class="cert-caption">IN-BIO-132 · Non-EU Agriculture</div>
</div>
</div>
</section>
</div>