USP
Page: Homepage


Snippet Code
<style>
.little-smiles-section {
background: #FFD2EA;
/* padding: 50px 20px; */
text-align: center;
width: 100%;
}
.little-smiles-title {
font-size: 30px;
font-weight: 600;
color: #3c322c;
margin-bottom: 45px;
line-height: 1.2;
font-family: Poppins;
font-style: normal;
letter-spacing: normal;
}
.little-smiles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: 1600px;
margin: 0 auto;
}
.little-smiles-card {
background: #ffffff;
border-radius: 14px;
padding: 45px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 230px;
}
.little-smiles-card img {
width: 116px;
height: 116px;
object-fit: contain;
margin-bottom: 25px;
}
.little-smiles-card p {
margin: 0;
font-size: 20px;
color: #000000;
font-weight: 600;
line-height: 1.4;
font-family: Nunito, sans-serif;
font-style: normal;
letter-spacing: normal;
}
.little-smiles-section .section-image-overlay {
width: 7%;
/* top: 6%; */
left: 91%;
}
.section-image-overlay.ambient {
animation: animateAmbientOverlay 9s ease-in-out infinite;
}
.section-image-overlay {
position: absolute;
object-fit: contain;
height: auto;
max-width: 100%;
max-height: 100%;
}
@keyframes animateAmbientOverlay {
0% {
transform: translate(-50%, -50%) scale(1) rotate(0);
}
25% {
transform: translate(-45%, -55%) scale(.96) rotate(-4deg);
}
50% {
transform: translate(-55%, -45%) scale(1.03) rotate(4deg);
}
75% {
transform: translate(-45%, -55%) scale(.96) rotate(-4deg);
}
100% {
transform: translate(-50%, -50%) scale(1) rotate(0);
}
}
/* Tablet */
@media screen and (max-width: 1024px) {
.little-smiles-grid {
grid-template-columns: repeat(3, 1fr);
}
.little-smiles-title {
font-size: 34px;
}
.little-smiles-card p {
font-size: 24px;
}
}
/* Mobile */
@media screen and (max-width: 768px) {
/* .little-smiles-section {
padding: 35px 15px;
} */
.little-smiles-grid {
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.little-smiles-title {
font-size: 26px;
margin-bottom: 35px;
}
.little-smiles-card {
min-height: 139px;
padding: 15px 15px;
}
.little-smiles-card img {
width: 41px;
height: 41px;
margin-bottom: 25px;
}
.little-smiles-card p {
font-size: 16px;
}
.little-smiles-section .section-image-overlay {
width: 15%;
/* top: 3%; */
left: 90%;
}
}
</style>
<section class="little-smiles-section">
<img
src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/ChatGPT_Image_May_20__2026__02_46_12_PM-removebg-preview.png?v=1779342902&width=120"
alt="background shape" width="120" height="120" loading="lazy" sizes="(min-width: 1600px) 100vw,
(min-width: 750px) calc(100vw - 130px), calc(100vw - 50px)" class="section-image-overlay ambient">
<h2 class="little-smiles-title">Made for Little Smiles</h2>
<div class="little-smiles-grid">
<div class="little-smiles-card">
<img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/11647844_1.png?v=1779342997" alt="Comfort First">
<p>Cash on Delivery</p>
</div>
<div class="little-smiles-card">
<img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/18293694_1.png?v=1779342996"
alt="Style With Soul">
<p>Free Ship in India</p>
</div>
<div class="little-smiles-card">
<img src="https://cdn.shopify.com/s/files/1/0743/8175/4566/files/10378077_1.png?v=1779342996"
alt="For Every Occasion">
<p>Usually Ship on Time</p>
</div>
<!-- <div class="little-smiles-card">
<img
src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/imgi_352_11_d1adf90c-a796-4cc6-9d3c-80fc9545cb18-removebg-preview.png?v=1778578891"
alt="Mom-Approved Quality">
<p>Mom-Approved Quality</p>
</div> -->
</div>
</section>