* {
padding
:
0
;
margin
:
0
;
box-sizing: border-box;
font-family
:
'Poppins'
,
sans-serif
;
}
body {
background
:
#ffffff
;
color
:
#000000
;
}
.container {
background
: linear-gradient(to
right
,
#ffd98e
,
#77efff
);
width
:
100
vw;
position
:
absolute
;
transform: translate(
-50%
,
-50%
);
top
:
50%
;
left
:
50%
;
max-width
:
40em
;
min-height
:
35em
;
border-radius:
0.5em
;
display
: flex;
flex-
direction
: column;
justify-
content
:
center
;
align-items:
center
;
box-shadow:
0
0
20px
rgba(
0
,
0
,
0
,
0.3
);
}
.title {
font-size
:
3em
;
margin
:
10px
0
;
text-align
:
center
;
color
:
green
;
text-shadow
:
2px
2px
4px
rgba(
0
,
0
,
0
,
0.3
);
}
.switcher {
font-size
:
1.5em
;
margin
:
10px
0
;
text-align
:
center
;
color
:
#000000
;
}
.testimonial-container {
width
:
100%
;
max-width
:
80%
;
height
:
auto
;
position
:
relative
;
margin
:
auto
;
padding
:
2em
1.5em
;
border
:
1px
solid
#f8f8f8
;
border-radius:
0.5em
;
background
: rgba(
219
,
162
,
221
,
0.849
);
backdrop-filter: blur(
5px
);
transition: transform
0.3
s ease-in-out;
overflow
:
hidden
;
text-align
:
center
;
box-shadow:
0
0
10px
rgba(
0
,
0
,
0
,
0.2
);
}
.container:hover .testimonial-container {
transform: scale(
1.05
);
}
.container button {
font-size
:
1.7em
;
height
:
2.1em
;
width
:
2.1em
;
background
:
#fff
;
position
:
absolute
;
color
:
#000000
;
box-shadow:
0
0
1em
rgba(
1
,
17
,
39
,
0.25
);
border-radius:
50%
;
cursor
:
pointer
;
margin
:
auto
;
top
:
0
;
bottom
:
0
;
border
:
none
;
transition: background-color
0.3
s ease-in-out;
z-index
:
1
;
}
.container button:hover {
background-color
:
#ffffff
;
color
:
#000000
;
}
.testimonial-container h
3
{
font-size
:
1.4em
;
text-align
:
center
;
margin-bottom
:
0.5em
;
color
:
#001aff
;
}
.testimonial-container h
6
{
font-size
:
1em
;
letter-spacing
:
0.05em
;
font-weight
:
400
;
text-align
:
center
;
color
:
#ff0d0d
;
}
.testimonial-container p {
font-size
:
1em
;
line-height
:
1.5
;
letter-spacing
:
0.05em
;
text-align
:
center
;
color
:
#000000
;
}
.testimonial-container img {
display
:
block
;
margin
:
1.8em
auto
1.25em
auto
;
border-radius:
50%
;
object-fit: cover;
width
:
4.4em
;
height
:
4.4em
;
}
button#prev {
left
:
-1.1em
;
}
button#next {
right
:
-1.1em
;
}
button#prev:hover{
background-color
:
#000000
;
color
:
white
;
}
button#next:hover{
background-color
:
#000000
;
color
:
white
;
}
@media
screen
and (
max-width
:
650px
) {
.container {
font-size
:
14px
;
min-height
:
30em
;
}
.testimonial-container {
min-height
:
auto
;
}
}