CATALOG

.fragderm-benefits {
width:100%;
padding:70px 20px;
background:
linear-gradient(135deg,#f8f4ed,#ffffff);
overflow:hidden;
}
.fragderm-benefits-wrapper {
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}
/* CARD */
.fragderm-benefit-card {
position:relative;
padding:35px 28px;
background:rgba(255,255,255,.75);
border:1px solid rgba(0,0,0,.05);
border-radius:18px;
box-shadow:
0 15px 40px rgba(0,0,0,.06);
backdrop-filter:blur(12px);
overflow:hidden;
transition:.4s ease;
animation:fragdermFloat 4s ease-in-out infinite;
}
.fragderm-benefit-card:nth-child(2){
animation-delay:.5s;
}
.fragderm-benefit-card:nth-child(3){
animation-delay:1s;
}
.fragderm-benefit-card:nth-child(4){
animation-delay:1.5s;
}
.fragderm-benefit-card:hover {
transform:
translateY(-12px);
box-shadow:
0 25px 60px rgba(0,0,0,.12);
}
/* ICON */
.fragderm-benefit-icon {
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#728252;
color:white;
font-size:25px;
margin-bottom:25px;
animation:
fragdermPulse 2.5s infinite;
}
.fragderm-benefit-card h3 {
margin:0 0 12px;
font-size:22px;
font-weight:600;
color:#20231f;
}
.fragderm-benefit-card p {
margin:0;
font-size:15px;
line-height:1.7;
color:#66645f;
}
/* LIGHT EFFECT */
.fragderm-benefit-card::before {
content:””;
position:absolute;
width:120px;
height:120px;
background:rgba(114,130,82,.12);
border-radius:50%;
top:-50px;
right:-50px;
}
.fragderm-benefit-card::after {
content:””;
position:absolute;
width:80px;
height:80px;
background:rgba(196,158,92,.12);
border-radius:50%;
bottom:-30px;
left:-30px;
}
/* ANIMATION */
@keyframes fragdermFloat {
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
}
@keyframes fragdermPulse {
0%{
box-shadow:
0 0 0 0 rgba(114,130,82,.35);
}
70%{
box-shadow:
0 0 0 15px rgba(114,130,82,0);
}
100%{
box-shadow:
0 0 0 0 rgba(114,130,82,0);
}
}
/* TABLET */
@media(max-width:900px){
.fragderm-benefits-wrapper{
grid-template-columns:repeat(2,1fr);
}
}
/* MOBILE */
@media(max-width:600px){
.fragderm-benefits{
padding:40px 10px;
}
.fragderm-benefits-wrapper{
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.fragderm-benefit-card{
padding:18px 12px;
border-radius:12px;
}
.fragderm-benefit-icon{
width:35px;
height:35px;
font-size:16px;
margin-bottom:12px;
}
.fragderm-benefit-card h3{
font-size:14px;
line-height:1.3;
}
.fragderm-benefit-card p{
font-size:10px;
line-height:1.5;
}
}