<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>feature-cts-trust Section</title>
<style>
.feature-cts-trusts-container {
display: flex;
justify-content: space-around;
align-items: center;
padding: 15px 10px;
width: 100%;
background-color: #FAFAFA; /* Background color */
flex-wrap: nowrap; /* Prevent columns from wrapping to a new line */
}
.feature-cts-trust {
text-cts-trust-align: center; /* Center the text-cts-trust inside each feature-cts-trust */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px; /* Fixed width to ensure columns always stay in one row */
box-sizing: border-box; /* Ensure padding doesn’t affect width */
}
.text-cts-trust {
margin-top: 10px;
font-size: 16px;
color: #333;
font-weight: 500;
text-cts-trust-align: center !important; /* Ensure the text-cts-trust is centered */
margin: 0 !important;
padding: 0 !important;
}
.icon-cts-trust img {
width: 50px;
height: 50px;
}
.divider {
width: 1px;
height: 50px;
background-color: #ccc; /* Divider color */
}
/* Optional: If you want to ensure a consistent gap between the items */
.feature-cts-trust + .divider {
margin: 0 20px; /* Adds space between columns */
}
/* Mobile specific styling */
@media (max-width: 768px) {
.feature-cts-trusts-container {
justify-content: space-between; /* Spread out the columns evenly */
padding: 10px 0;
}
.feature-cts-trust {
width: 100%; /* Allow the feature-cts-trust to take full width */
margin-bottom: 20px;
}
.text-cts-trust {
font-size: 12px;
text-cts-trust-align: center; /* Ensure text-cts-trust is centered */
}
.divider {
display: none; /* Hide the divider on mobile */
}
}
</style>
</head>
<body>
<div class="feature-cts-trusts-container">
<div class="feature-cts-trust">
<div class="icon-cts-trust">
<center>
<img src="https://cdn.shopify.com/s/files/1/0605/5798/3989/files/free-shipping2.svg?v=1731866810" alt="Free Shipping icon-cts-trust">
</center>
</div>
<p class="text-cts-trust">Free Shipping</p>
</div>
<div class="divider"></div>
<div class="feature-cts-trust">
<div class="icon-cts-trust">
<center>
<img src="https://cdn.shopify.com/s/files/1/0605/5798/3989/files/return-box.svg?v=1731866966" alt="7 Days Return icon-cts-trust">
</center>
</div>
<p class="text-cts-trust">7 Days Return</p>
</div>
<div class="divider"></div>
<div class="feature-cts-trust">
<div class="icon-cts-trust">
<center>
<img src="https://cdn.shopify.com/s/files/1/0605/5798/3989/files/indian-rupee.svg?v=1731867101" alt="Cash on Delivery icon-cts-trust">
</center>
</div>
<p class="text-cts-trust">Cash on Delivery</p>
</div>
</div>
</body>
</html>