/*=============== BASE ===============*/
h1, h2, h3, h4 {
color: hsl(220, 20%, 8%);
}

a {
text-decoration: none;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
max-width: 1120px;
margin-inline: 1.5rem;
}

/*=============== TESTIMONIAL CARD ===============*/
.testimonial {
padding: 50px 0 50px 0;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}

.testimonial__swiper {
padding-bottom: 7rem;
}

.testimonial__title {
text-align: center;
}

.testimonial__card {
width: 280px;
background-color: hsl(0, 0%, 100%);
box-shadow: 0 8px 16px hsla(265, 75%, 4%, 0.1);
padding: 2rem 1.5rem 3rem;
border-radius: 1.5rem;
text-align: center;
font-family: "Montserrat", sans-serif;
color: hsl(220, 8%, 35%);
}

.testimonial__img {
width: 100px;
border-radius: 4rem;
border: 4px solid #F64A00;
margin: 0 auto 0.5rem;
}

.testimonial__name {
font-size: 1rem;
margin-bottom: 2rem;
font-family: "Unbounded", sans-serif;
}

.testimonial__rating {
display: flex;
justify-content: center;
align-items: center;
column-gap: 1rem;
margin-bottom: 0.75rem;
}

.testimonial__stars {
display: flex;
align-items: center;
column-gap: 0.25rem;
}

.testimonial__stars i {
font-size: 1rem;
color: hsl(18, 88%, 58%);
}

.testimonial__number {
font-size: 1rem;
}

.testimonial .swiper-pagination-bullets {
bottom: 4rem;
}

.testimonial .swiper-pagination-bullet {
background-color: #F64A00;
transition: opacity 0.4s;
}

.testimonial .swiper-button-prev {
left: calc(50% - 3rem);
}

.testimonial .swiper-button-next {
right: calc(50% - 3rem);
}

.testimonial .swiper-button-prev::after,
.testimonial .swiper-button-next::after {
content: "";
}

.testimonial :is(.swiper-button-prev, .swiper-button-next) {
top: initial;
bottom: 0;
width: 2.5rem;
height: 2.5rem;
background-color: #F64A00;
color: hsl(0, 0%, 100%);
border-radius: 50%;
font-size: 1.5rem;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 300px) {
.testimonial__title {
font-size: 1.25rem;
}
.testimonial__card {
width: 240px;
padding-inline: 1rem;
}
}

/* For medium devices */
@media screen and (min-width: 640px) {
.testimonial__swiper {
max-width: 640px;
}
}

/* For large devices */
@media screen and (min-width: 1150px) {
.testimonial__swiper {
max-width: 760px;
}
.testimonial__title {
margin-bottom: 4rem;
font-size: 2.25rem;
}
.testimonial__card {
width: 330px;
padding: 3rem 2rem 4rem;
border-radius: 2rem;
}
.testimonial__number {
font-size: 1rem;
}
}