@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:opsz,wght@17..18,400..700&display=swap');

/* mobile first */
:root{
    --first-color: #ff0062;
    --second-color: #ff9900;
    --title-color: #000;
    --text-color: #525252;
    --white-color: #fff;
    --body-color: #fff;
    --container-color: #fff;

    --body-font: "Google Sans", sans-serif; /* da @import */
    --h1-font-size: 1.5rem;
    --h3-font-size: 1rem;
    --normal-font-size: 0.938rem;

    --font-regular: 400;
    --font-semi-bold: 600;
}

/* responsive testo */
@media screen and (min-width: 1150px){
    :root{
        --h1-font-size: 2.25rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
    }
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* vecchi Edge */
}

body{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
}

h1, h2, h3, h4{
    font-family: var(--body-font); /* potenzialmente inseribile secondo font */
    color: var(--title-color);
}

a{
    text-decoration: none;
}

img{
    display: block;
    max-width: 100%;
    height: auto;
}

/* riutilizzabile */
.container{
    max-width: 1120px;
    margin-inline: 1.5rem;
}

/* testimonial card */
.testimonial{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.testimonial__swiper{
    padding-bottom: 7rem;
}

.testimonial__title{
    font-size: var(--h1-font-size);
    text-align: center;
    margin-bottom: 3rem;
}

.testimonial__card{
    width: 280px;
    background-color: var(--container-color);
    box-shadow: 0 8px 16px #a0a0a0;
    padding: 2rem 1.5rem 3rem;
    border-radius: 1.5rem;
    text-align: center;
}

.testimonial__img{
    width: 100px;
    border-radius: 50%; /* 4rem */
    border: 4px solid var(--first-color);
    margin: 0 auto 0.5rem;
}

.testimonial__name{
    font-size: var(--h3-font-size);
    margin-bottom: 2rem;
}

.testimonial__rating{
    display: flex;
    justify-content: center;
    align-items: center; /* allineamento verticale */
    column-gap: 1rem; /* separazione elementi flex */
    margin-bottom: 0.75rem;
}

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

.testimonial__stars i{
    font-size: 1rem;
    color: var(--second-color);
}

.testimonial__number{
    font-size: var(--h3-font-size);
}
/* swiper css */
.testimonial .swiper-pagination-bullets{
    bottom: 4rem;
}

.testimonial .swiper-pagination-bullet{
    background-color: var(--first-color);
    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: var(--first-color);
    color: var(--white-color);
    border-radius: 50%;
    font-size: 1.5rem;
}
/* breakpoints */

/* small device */
@media screen and (max-width: 300px){
    .testimonial__title{
        font-size: 1.25rem;
    }
    .testimonial__card{
        width: 240px;
        padding-inline: 1rem;
    }
}
/* medium device */
@media screen and (min-width: 640px){
    .testimonial__swiper{
        max-width: 640px;
    }
}
/* large device */
@media screen and (min-width: 1150px){
    .testimonial__swiper{
        max-width: 760px;
    }
    .testimonial__title{
        margin-bottom: 4rem;
    }
    .testimonial__card{
        width: 330px;
        padding: 3rem 2rem 4rem;
        border-radius: 2rem;
    }
    .testimonial__number{
        font-size: var(--normal-font-size);
    }
}