/* ---------------------------------------------------------------- */
/* 19.Testimonial
/* ---------------------------------------------------------------- */
.testimonial-item {
padding: 30px;
display: flex;
position: relative;
margin-bottom: 24px;
border-radius: 50px;
background: $color_white;
transition: all 0.5s ease;
justify-content: space-between;
box-shadow: 0 15px 30px 0 rgba($color_primary,0.15);
.img {
padding: 10px;
height: 100px;
flex: 0 0 100px;
margin-right: 15px;
border-radius: 50%;
display: inline-block;
border: 2px solid $color_primary;
img {
border-radius: 50%;
}
}
.body {
h5 {
margin-bottom: 10px;
}
span {
display: block;
font-weight: 500;
margin-bottom: 20px;
color: $color_primary;
}
p {
margin-bottom: 15px;
}
.rating {
i {
margin-right: 2px;
color: $color_primary;
&:last-child {
margin-right: 0;
}
}
}
}
.quote-icon {
top: 30px;
right: 30px;
padding: 10px;
position: absolute;
color: $color_white;
text-align: center;
border-radius: 50%;
display: inline-block;
transition: all 0.5s ease;
border: 2px solid $color_primary;
i {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
transition: all 0.5s ease;
background: $color_primary;
}
}
}
/* ---------------------------------------------------------------- */
/* Responsive Media Query (768px)
/* ---------------------------------------------------------------- */
@media only screen and (max-width:767.98px) {
.testimonial-item {
display: block;
.img {
height: auto;
margin-right: 0;
margin-bottom: 15px;
}
}
} |