/* IMPOSTAZIONE GENERALE */
*{                                         /* regole generali della pagina */
    margin: 0;
    padding: 0;    
    box-sizing: border-box;
    text-decoration: none;
    /*list-style: none;*/
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

:root{                                     /* tutte le root */
    --bg-color: #001;
    --second-bg-color: #112;
    --text-color: #fff;
    --main-color: #0059ff; /*#16ff00*/
    --jolly-color :#ffcc00; 
}


html{                                      /* imopostazione generale foglio html */
    font-size: 62.5%;                      /* 1rem = 10px    62.5% di 16px = 0.625 × 16px = 10px */
    overflow-x: hidden;                    /* questa proprietà nasconde qualsiasi contenuto orizzontale che debordi rispetto alla larghezza visibile del documento */
    scroll-behavior: smooth;
}

body{                                      /* imopostazione generale del body */
    background: var(--bg-color);
    color: var(--text-color);
}

section{                                   /* imopostazione generale delle section */
    min-height: 100vh;
    padding: 10rem 6% 2rem;
}

/* FINE IMPOSTAZIONE GENERALE */
/* STILE PAGINA INDEX */
/* CODICE HEADER / MENU */
header{                                    /* fascia del menu */
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 6% 1.5rem 6%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    animation: navAnimation 1.5s ease forwards;
}



@keyframes navAnimation{                  
    0%{ 
        opacity: 0;
        transform: translateY(-20rem);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}


.logo img{    
    cursor: pointer;                       /* logo pagina web */
    width: 10rem;
    height: auto;
}

.navbar{                                   /* menu */
    display: flex;
    list-style: none;
}

.navbar a{                                 /* ancore del menu */
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-color);
    margin-left: 4rem;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.navbar a:hover,                           /* ancore del menu on-hover */
.navbar a.active{
    color: var(--jolly-color);
    border-bottom: 3px solid var(--jolly-color);
}

#menu-icon{                                /* menu hamburger */
    font-size: 3.6rem;
    color: var(--main-color);
    cursor: pointer;
    display: none;
}

.nav-btn{                                  /* pulsante menu contattami */
    display: inline-block;
    padding: 1rem 2.8rem;
    background: transparent;
    color: var(--jolly-color);
    border: 2px solid var(--jolly-color);
    border-radius: 4rem;
    font-size: 1.6rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-btn:hover{                            /* pulsante menu contattami on-hover */
    background: var(--jolly-color);
    color:  #000 /*var(--text-color)*/;
    box-shadow: 0 0 20px var(--jolly-color);
    transform: scale(1.05);
}
/* FINE CODICE HEADER / MENU */

/* CODICE SEZIONE HOME */
.home{                                      /* contenitore generale */
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: var(--bg-color);*/
    background: #000011;
    background: linear-gradient(0deg,rgba(0, 0, 17, 1) 20%, rgba(0, 48, 138, 1) 100%);
}

.home-content{
    animation: homeTextAnimation 1.5s ease forwards;
}

.home-content h1{                            /* intestazione sezione home */
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}

.home-content h1 span{                       /* parola chiave animata "Sviluppatore Web" */
    font-weight: 700;
    line-height: 1.3;
    background: #0059ff;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-content p {                            /* testo contenitore home */
    font-size: 2rem;
}
/* animazione testo home */
/*
@keyframes homeTextAnimation{                
    0%{ 
        opacity: 0;
        transform: translatex(-40rem);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
*/
.social-media a{                             /* icone con link social */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: 0.2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--main-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: 0.3s ease;
}

.social-media a:hover{                       /* icone con link social on-hover */
    transform: scale(1.2) translateY(-8px);
    background-color: var(--main-color);
    color: var(--text-color);
    box-shadow: 0 0 20px var(--main-color);
}

.btn{                                        /* pulsante generale */
    display: inline-block;
    padding: 1rem 2.8rem;
    margin: 0 1rem 0 0;
    border-radius: 4rem;
    box-shadow: none;
    font-size: 1.6rem;
    color: var(--bg-color);
    letter-spacing: 0.1rem;
    font-weight: 600;
    transition: 0.3s ease;
}

.int{                                        /* grafica pulsante interno */
    background: var(--main-color);
}

.ext{                                        /* grafica pulsante esterno */
    background: var(--jolly-color);
}

.int:hover{                                  /* grafica pulsante interno on-hover */
    box-shadow: 0 0 1.6rem var(--main-color);
}

.ext:hover{                                  /* grafica pulsante esterno on-hover */
    box-shadow: 0 0 1.6rem var(--jolly-color);
}

.home-img img{                               /* contenitore immagine */
    width: 30vw;
    border: 3px solid var(--main-color);
    margin-left: 6rem;
    border-radius: 51% 49% 48% 52% / 49% 49% 51% 51%;
    animation: BorderAnimation 5s linear infinite;
}

@keyframes BorderAnimation {     /* animazione cornice immagine  */
    0%{
        border-radius: 51% 49% 48% 52% / 49% 49% 51% 51%;
    }
    35%{
        border-radius: 60% 40% 57% 43% / 40% 54% 46% 60%;
    }
    65%{
        border-radius: 67% 33% 68% 32% / 27% 70% 30% 73%;
    }
    100%{
        border-radius: 51% 49% 48% 52% / 49% 49% 51% 51%;
    }
}
.home-img{                                  /* applico l'animazione sul contenitore */
    animation: homeImgAnimation 3s ease forwards;
}

/* animazione img home */
/*
@keyframes homeImgAnimation{                
    0%{ 
        opacity: 0;
        transform: translatex(40rem);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
*/
/* FINE CODICE SEZIONE HOME */

/* CODICE SEZIONE CHI SONO */
.about{                                      /* contenitore generale about*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    /*background-color: var(--second-bg-color);*/
    background-color: var(--bg-color);
    padding: 10rem 0 2rem;
}

.about-content{                              /* contenitore testo scritto */
    width: 100%;
    padding: 1rem 6% 1rem;
}

.about-content h2{                           /* titolo testo scritto */
    text-align: left;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.about-content h2 span{                      /* parola chiave "sono" */
    color: var(--main-color);
}

.heading{                                    /* classe titolo testo scritto */
    text-align: center;
    font-size: 5rem;
}

.about-content p{                            /* paragrafo */
    font-size: 2rem;
}

.about-content p span{                       /* parola chiave del paragrafo */
    color: var(--main-color);
}

.about-content a{                            /* pulsante che manda alla pagina html chi sono */
    margin-top: 2rem;
}
/* creare nuova classe per on-hover del pulsante 'chi sono' */
/* -------------------- decorazione grafica -------------------- */

.decorazione-top{                            /* fascia decorativa */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.decorazione-bot{                            /* fascia decorativa */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.fascia-gialla{                              /* stile fascia decorativa gialla */
    width: 65rem;
    height: 7rem;
    background-color: var(--jolly-color);
    overflow: hidden;
}

.fascia-blu{                                 /* stile fascia decorativa blu */
    width: 55rem;
    height: 2rem;
    background-color: var(--main-color);
}

/*
.appearLeft{
    animation: appearLeft linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

.appearRight{
    animation: appearRight linear;
    animation-timeline: view();
    animation-range: entry 0% cover 15%;
}

@keyframes appearLeft{
    0%{
        opacity: 0;
        transform: translateX(-40rem);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes appearRight{
    0%{
        opacity: 0;
        transform: translateX(40rem);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
*/

.scroll-container{                           /* carosello scritte */
    font-size: 2.5rem;
    line-height: 7rem;
    display: flex;
    overflow: hidden;
    user-select: none;                       /* non lascia selezionare il testo */
    --gap: 4rem;
    gap: var(--gap);
}

.scroll-container ul{                        /* contenuto del carosello scritte */
    list-style: none;
    display: flex;
    flex-shrink: 0;
    gap: var(--gap);
    min-width: 100%;
    color: #0000119d;
    animation: scroll 18s linear infinite;
}

@keyframes scroll{                           /* animazione carosello scritte */
    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.logos{                                      /* elemento slider visibile */
    height: 7rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    filter: grayscale(100%) opacity(0.6);
    transition: filter 0.2s ease;            /* durata e tipo di transizione */
}

.logos:hover{                                /* elemento slider visibile on-hover */
    filter: grayscale(0%) opacity(1);
}

.logos-slide{                                /* elemento oggetto di animazione */
    display: inline-block;
    animation: 18s slide infinite linear;
}

.logos-slide img{                            /* contenuto dell'elemento oggetto di animazione */
    height: 50px;
    margin: 0 5rem;
}

@keyframes slide{                            /* animazione */
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-100%);
    }
}
/* -------------------- fine decorazione grafica -------------------- */
/* FINE CODICE SEZIONE CHI SONO */

/* CODICE SEZIONE PROGETTI */
.progetti{                         /* contenitore generale progetti */
    background: linear-gradient(0deg,rgba(0, 0, 17, 1) 10%, rgba(0, 48, 138, 1) 50%, rgba(0, 0, 17, 1) 90%);
    padding-top: calc(100px + 2rem); /* compensazione per l’header fisso */
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progetti h2{                                /* titolo sezione progetti */
    padding: 2rem 0 5rem 0;
    animation: appearBot ease;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
}

.progetti h2 span{                           /* parola chiave "progetti" */
    color: var(--main-color);
}

.swiper{                                     /* contenitore dello slider */
    margin-top: 2rem;                    /* spaziatura */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    animation: appearBot ease;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}
/*
@keyframes appearBot{
    0%{
        transform: opacity(0);
        transform: scale(0.6);
        transform: translateY(30rem);
    }
    100%{
        transform: opacity(1);
        transform: scale(1);
        transform: translateY(0);
    }
}
*/

.slider-wrapper{                             /* slider delle card */
    overflow: hidden;
    max-width: 1200px;
    margin: 0 70px 55px;
}

.card-list .card-item{                       /* card-list -> contenitore degli elementi   |   card-item -> elemento (card) */
    color: var(--text-color);
    user-select: none; /* width: 400px; */
    /*padding: 35px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* per Safari */
    /*border: 1px solid rgba(255, 255, 255, 0.5);*/
}

.card-list .card-item .project-image{        /* immagine del progetto dentro all'elemento (card) */
    width: 85%;
    height: 220px;
    object-fit: cover;
    border-radius: 1rem;
    margin: 1.5rem 0 1.5rem 0;
}

.card-list .card-item h3{                    /* stile titolo progetto */
    font-size: 1.5rem;
}

.card-list .card-item .project-skill{        /* contenitore skill del progetto */
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.5rem 0 1.5rem;
}

.project-skill .skills img{                  /* skill del progetto */
    width: 50px;
    justify-content: center;
}

.card-list .card-item .pulsante-messaggio{   /* pulsante per aprire il progetto */
    font-size: 1.25rem;
    padding: 10px 35px;
    color: #030728;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    background: var(--jolly-color);
    border: 1px solid transparent;
    transition: 0.2s ease;
    margin-bottom: 1.5rem;
}

.card-list .card-item .pulsante-messaggio:hover{    /* pulsante per aprire il progetto on-hover */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #fff;
    color: #fff;
}

.slider-wrapper .swiper-pagination-bullet{  /* pallini slider */
    background: #fff;
    height: 15px;
    width: 15px;
}

.slider-wrapper .swiper-slide-button{       /* frecce slider */
    color: #fff;
    margin-top: -50px;
    transition: 0.2s ease;
}

.slider-wrapper .swiper-slide-button:hover{ /* frecce slider on-hover */
    color: var(--jolly-color);
}

/* FINE CODICE SEZIONE PROGETTI */

/* CODICE SEZIONE CONTATTAMI */ 
.contattami{                                /* contenitore generale contattami */   
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* centra verticalmente la sezione */
    padding-top: 8rem;         /* evita la sovrapposizione con l’header */
    background: var(--bg-color);
}

.contattami h2{                             /* titolo sezione contattami */
    margin-bottom: 3rem;
    color: var(--text-color);
}

.contattami h2 span{                        /* parola chiave "contatto" */
    color: var(--main-color);
}

.contattami form{                           /* form generale */
    max-width: 90rem;
    margin: 1rem auto;
    text-align: center;
    margin-bottom: 3rem;
}

.contattami form .input-box{                /* campi azienda - email - telefono - oggetto */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.contattami form .input-box input,          /* tutti i campi compilabili */
.contattami form textarea{
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--text-color);
    background: var(--bg-color);
    border-radius: 0.8rem;
    border: 1px solid var(--main-color);
    margin: 0.7rem 0;
    resize: none;
}

.contattami form .input-box input{          /* input del form */
    width: 49%;
    margin: 0.7rem 0.35rem;
}

.contattami form .btn{                      /* pulsante "invia" */
    margin-top: 2rem;
}

.privacy-box{
    text-align: left;
    font-size: 1.2rem;
}

.privacy-box input{ 
    margin-right: 0.5rem;
}

.privacy-box a{
    color: var(--text-color);
    text-decoration: underline;
}

/* FINE CODICE SEZIONE CONTATTAMI */ 

/* CODICE SEZIONE FOOTER */
.footer{                                    /* sezione footer */
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 40px 0;
    background: var(--bg-color);
}

.footer .social{                            /* contenitore social */
    text-align: center;
    padding-bottom: 20px;
    color: var(--main-color);
}

.footer .social a{                          /* ancore social */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: 0.2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--main-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: 0.3s ease;
}

.footer .social a:hover{                    /* ancore social on-hover */
    transform: scale(1.2) translateY(-8px);
    background: var(--main-color);
    color: var(--text-color);
    box-shadow: 0 0 20px var(--main-color);
}

.footer .copiright{                         /* copiright */
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--text-color);
}

.policy{
    width: 230px;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
}

.policy,
.licenza-icone{                           /* policy */
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
}

.policy a,
.licenza-icone a{                         /* privacy e cookie */
    color: var(--text-color);
}

/* FINE CODICE SEZIONE FOOTER */
/* FINE STILE PAGINA INDEX */

/* CODICE DESIGN DELLA SCROLL BAR */
::-webkit-scrollbar{                        /* larghezza della scroll-bar del sito */
    width: 15px;
}

::-webkit-scrollbar-thumb{                  /* aspetto della scroll-bar del sito */
    background-color: var(--main-color);
    width: 50px;
}
/* FINE CODICE DESIGN DELLA SCROLL BAR */
/* RESPONSIVE PAGINA INDEX */
/* RESPONSIVE - MONITOR PC*/
@media (max-width: 1300px){
    header{                                 /* fascia header - menu */
        padding: 2rem 6% 2rem 6%;
    }
    .home-content h1 {                      /* h1 - testo principale home */
        font-size: 4.2rem;
    }
    .home-content p {                       /* testo secondario home */
        font-size: 1.8rem;
    }
}
@media (max-width: 1069px){
    header{                                 /* fascia header - menu */
        padding: 2rem 5% 2rem 5%;
    }
    section{                                /* tutte le section */
        padding: 10rem 5% 2rem;
    }
    .footer{                                /* sezione footer */
        padding: 2rem 3%;
    }
    .home-content h1 {                      /* h1 - testo principale home */  
        font-size: 4rem;
    }
    .home-content p {                       /* testo secondario home */
        font-size: 1.5rem;
    }
}
@media (max-width: 991px){
    header{                                 /* fascia header - menu */
        padding: 1rem 3% 1rem 3%;
    }
    section{                                /* tutte le section */
        padding: 10rem 3% 2rem;
    }
    .home-content h1 {                      /* h1 - testo principale home */  
        font-size: 3.6rem;
    }
}
@media (max-width: 843px){
    .home-content h1 {                      /* h1 - testo principale home */ 
        font-size: 3.3rem;
    }
}
/*  RESPONSIVE - TABLET  */
@media (max-width: 786px){
    /* sezione header */
    header{                                 /* fascia header - menu */
        padding: 1rem 3% 1rem 3%;
    }
    #menu-icon{                             /* menu hamburger */
        display: block;
    }
    .navbar{                                /* sezione menu che appare da destra */
        position: absolute;
        top: 100%;
        right: -100%;
        /*width: 255px;*/
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: rgba(0, 0, 0, 0.9);
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }
    .navbar a{                              /* ancore del menu */
        display: block;
        padding: 17px;
        font-size: 22px;
    }
    .navbar.active{                         /* impostato il menu a destra */
        right: 0;
    }
    /* sezione home */
    .home{                                  /* disposizione verticale della sezione home */
        flex-direction: column;       
    }
    .home-content h1{                       /* h1 - testo principale home */ 
        font-size: 4rem;
        margin-top: 1rem;
    }

    .home-content{                          /* testo sezione home sotto l'img */
        order: 2;
    }
    .home-img img{                          /* img sezione home */
        width: 60vw;
        margin-top: 4rem;
        margin-left: 0rem;
    }
    /* sezione chi sono */
    .fascia-gialla{                         /* stile fascia decorativa gialla */
        width: 55rem;
        height: 6rem;
    }
    .fascia-blu{                            /* stile fascia decorativa blu */
        width: 45rem;
        height: 1.5rem;
    }
    .scroll-container{                      /* carosello scritte */
        font-size: 2rem;
        line-height: 6rem;
    }
    .logos{                                 /* elemento slider visibile */
        height: 6rem;
    }
    .logos-slide img{                       /* contenuto dell'elemento oggetto di animazione */
        height: 4rem;
    }
    .about-content h2 {                     /* titolo testo scritto */
        font-size: 4.5rem;
    }
    /* sezione progetti */
    .progetti h2 {                          /* titolo sezione progetti */
        font-size: 4.5rem;
    }
    .slider-wrapper{                        /* slider delle card */
        margin: 0 10px 40px;
    }
    .slider-wrapper .swiper-slide-button {    /* rimozione frecce slider */
        display: none;
    }
    /* sezione contattami */
    .contattami h2 {                        /* titolo sezione contattami */
        font-size: 4.5rem;
    }
    .contattami form .input-box input{      /* campi input form contattami */
        width: 100%;
    }
}

@media (max-width: 620px){
    .home-img img{                          /* img sezione home */
        width: 65vw;
        margin: 0 0 3rem 0;
    }
    /* sezione chi sono */
    .fascia-gialla{                         /* stile fascia decorativa gialla */
        width: 35rem;
        height: 6rem;
    }
    .fascia-blu{                            /* stile fascia decorativa blu */
        width: 25rem;
        height: 1.5rem;
    }
    .scroll-container{                      /* carosello scritte */
        font-size: 2rem;
        line-height: 6rem;
    }
    .logos{                                 /* elemento slider visibile */
        height: 6rem;
    }
    .logos-slide img{                       /* contenuto dell'elemento oggetto di animazione */
        height: 4rem;
    }
}
/* RESPONSIVE - MOBILE */
@media (max-width: 480px){
    /* sezione header */
    header{                                 /* fascia header - menu */
        padding: 1rem 3% 1rem 3%;
    }
    /* sezione home */
    #home{                                  /* sezione home */
        min-height: 85vh;
    }
    .home-img img{                          /* img sezione home */
        width: 80vw;
        margin-bottom: 1rem;
    }
    .home-content h1{                       /* testo principale sezione home */
        font-size: 3rem;
    }
    .home-content p{                        /* testo secondario sezione home */
        font-size: 1.6rem;
    }
    .social-media a{                             /* icone con link social */
        margin: 1.5rem 1.5rem 1.5rem 0;
    }
    .heading{                               /* aspetto degli h2 della pagina */
        font-size: 5rem;
        text-align: center;
        margin: 2rem 0;
    }
    /* sezione chi sono */
    .fascia-gialla{                         /* stile fascia decorativa gialla */
        width: 28rem;
    }
    .fascia-blu{                            /* stile fascia decorativa blu */
        width: 22rem;
    }
    .about-content{                              /* contenitore testo scritto */
        padding: 4rem 6% 6rem;
    }
    .about-content p{                       /* testo secondario sezione chi sono */
        font-size: 1.7rem;
    }
    .about-content h2{                           /* titolo sezione progetti */
        font-size: 3.5rem;
    }
    /* sezione progetti */
    .progetti h2{                           /* titolo sezione progetti */
        padding: 2rem 0 2rem 0;
        font-size: 3.5rem;
    }
    /* sezione contatti */
    .contattami h2{                         /* titolo sezione contattami */
        font-size: 4rem;
    }
}
@media (max-width: 430px){
    .logo img{                              /* logo sito */
        cursor: pointer;
        width: 7rem;
        height: auto;
    }
    .nav-btn {                              /* pulsante "contattami" fascia header */
        padding: 0.8rem 2rem;
        font-size: 1.2rem;
    }
    .home-content h1{                       /* testo principale sezione home */
        font-size: 2.8rem;
    }
    .home-content p{                        /* testo secondario sezione home */
        font-size: 1.6rem;
    }
    .btn{                                   /* pulsante download CV */
        padding: 1.8rem 2rem;
        font-size: 1.3rem;
    }
}
@media (max-width: 375px){
    .home-content h1{                       /* testo principale sezione home */
        font-size: 2.4rem;
    }
}
/* FINE RESPONSIVE PAGINA INDEX */

/* STILE PAGINA CHI SONO */
#chi-sono.chi-sono {                        /* Regola specifica per la sezione con id e classe "chi-sono" */
    min-height: auto;  /* Annulla il min-height */
    color: var(--text-color);
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chi-sono h2{                               /* titolo testo scritto */
    margin: 5rem 0 5rem;
    text-align: center;
    font-size: 3.6rem;
    animation: slideTesto 1.5s linear;
}

@keyframes slideTesto{
    0%{
        opacity: 0;
        transform: translateY(-20rem);
    }
    
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

.chi-sono h2 span{                          /* parola chiave "mio percorso" */
    color: var(--main-color);
}

/* =================================== */

.chi-sono-content{                          /* sezione contenuto */
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.chi-sono-content .paragrafo{               /* paragrafi story telling */
    display: flex;
    width: 65%;
    position: relative;
    height: auto;
    padding: 4rem 4rem;
    border-radius: 70px 45px 70px 45px / 70px 40px 70px 40px;
    animation: animBlocco 5s linear infinite, slideBloccoSx 2s linear;
}

@keyframes animBlocco{
    0%{
        border-radius: 70px 45px 70px 45px / 70px 40px 70px 40px;
    }
    50%{
        border-radius: 35px 60px 35px 60px / 35px 60px 35px 60px;
    }
    100%{
        border-radius: 70px 45px 70px 45px / 70px 40px 70px 40px;
    }
}

@keyframes slideBloccoSx{
    0%{
        opacity: 0;
        transform: translateX(-60%);
    }
    
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes slideBloccoDx{
    0%{
        opacity: 0;
        transform: translateX(60%);
    }
    
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

.chi-sono-content div:nth-of-type(1){
    background-color: #0077ff; /* Colore di sfondo 1 */
    align-self: flex-start;
    animation: animBlocco 5s linear infinite, slideBloccoSx 1.5s ease-in;
}

.chi-sono-content div:nth-of-type(2){
    background-color: #0ba72d; /* Colore di sfondo 1 */
    align-self: flex-end;
    animation: animBlocco 5s linear infinite, slideBloccoDx 1.5s ease-in;
}

.chi-sono-content div:nth-of-type(3){
    background-color: #ff8800; /* Colore di sfondo 1 */
    align-self: flex-start;
    animation: animBlocco 5s linear infinite, slideBloccoSx 1.5s ease-in;
}

.chi-sono-content div:nth-of-type(4){
    background-color: #ff0000; /* Colore di sfondo 1 */
    align-self: flex-end;
    animation: animBlocco 5s linear infinite, slideBloccoDx 1.5s ease-in;
}

.chi-sono-content div:nth-of-type(5){
    background-color: #00aeff; /* Colore di sfondo 1 */
    align-self: flex-start;
    animation: animBlocco 5s linear infinite, slideBloccoSx 1.5s ease-in;
}

.chi-sono-content div:nth-of-type(6){
    background-color: #9900ff; /* Colore di sfondo 1 */
    align-self: flex-end;
    animation: animBlocco 5s linear infinite, slideBloccoDx 1.5s ease-in;
    
}

/* =================================== */

.chi-sono-btn{
    padding: 5rem 0 3rem;
}

.chi-sono-btn .btn {                            /* pulsanti sezione chi sono */
    margin-top: 1rem;
}

/* FINE CODICE SEZIONE CHI SONO*/

/* CODICE SEZIONE SKILL */
.skill{                                     /* sezione skill */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--second-bg-color);
    color: var(--text-color);
    padding-bottom: 100px;
}

.skill h2{                                  /* titolo sezione skill */
    text-align: left;
    line-height: 1.2;
    margin: 3rem 0 4.5rem 0;
    font-size: 3.6rem;
}

.skill h2 span{                             /* parola chiave titolo sezione skill */
    color: var(--main-color);
}

.skill-content{                             /* fascia contenente tre card */
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.skill .card:nth-child(n + 4) {             /* dalla 4a card in poi aggiunge margin-top: 20px */
  margin-top: 2rem;
}

.card{                                      /* spazio per eseguire la rotazione */
    flex: 0 0 calc(33.33% - 10px);          /* 3 card per riga */
    width: 31%;
    height: 40rem;
    perspective: 1000px;
}

.card-inner{                                /* elemento card che si muoverà in 3D */
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;            /* Mantiene la posizione 3D dei figli (le due facce) */
    transition: transform 0.8s;
}

.card:hover .card-inner{                    /* rotazione on hover */
    transform: rotateY(180deg);
}

.card-face{                                  /* stile facce card */
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;              /* Nasconde il lato posteriore quando non è visibile */
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.card-face>img{                                /* stile icone delle card */
    background: #fff;
    border-radius: 50%;
    padding: 8px;
}

.card-altro{                                   /* stile icona card-altro */
    background: #ffffff33;
    height: 20rem;
    width: 20rem;
    border-radius: 50%;
    position: relative;
}

.card-altro-icone{                             /* stile generale icone piccole */
    position: absolute;
    border-radius: 50%;
    background: #fff;
    padding: 1rem;
}

.card-altro-icone:nth-child(1){               /* posizionamento icona 1 -> analytics */
    position: absolute;
    top: 2.5rem;
    left: 3.5rem;
}

.card-altro-icone:nth-child(2){               /* posizionamento icona 2 -> SEO */
    position: absolute;
    top: 4.5rem;
    left: 10.5rem;
}

.card-altro-icone:nth-child(3){               /* posizionamento icona 3 -> bootstrap */
    position: absolute;
    top: 9.5rem;
    left: 3.5rem;
}

.card-altro-icone:nth-child(4){               /* posizionamento icona 4 -> figma */
    position: absolute;
    top: 11.5rem;
    left: 10.5rem;
}

.card-front{                                  /* stile faccia frontale */
    background: linear-gradient(135deg, #0059ff, #0003a0);
    color: #fff;
}

.html{                                        /* stile faccia frontale html*/
    background: linear-gradient(135deg, #E34F26, #F06529);
}

.css{                                         /* stile faccia frontale css*/
    background: linear-gradient(135deg, #264DE4, #2965F1);
}

.js{                                         /* stile faccia frontale js*/
    background: #F7DF1E;
}

.php{                                        /* stile faccia frontale php*/
    background: #777BB3;
}

.wp{                                         /* stile faccia frontale wp*/
    background: #21759B;
}

.card-back{                                  /* stile faccia posteriore */
    background: var(--second-bg-color);
    color: var(--second-bg-color);
    transform: rotateY(180deg);              /* Pre-ruota la faccia posteriore, così quando la card gira diventa visibile */
    font-size: 1.8rem;
}

.card-back ul{                               /* elenco card-back */  
    justify-items: center;
    list-style-type: none !important;
}

.card-back li{                               /* elementi dell'elenco card-back */
    line-height: 4rem;
    font-size: 1.6rem;
}

.card-back li:nth-of-type(1){                               /* elementi dell'elenco card-back */
    color: #0077ff;
}
.card-back li:nth-of-type(2){                               /* elementi dell'elenco card-back */
    color: #0ba72d;
}
.card-back li:nth-of-type(3){                               /* elementi dell'elenco card-back */
    color: #ff8800;
}
.card-back li:nth-of-type(4){                               /* elementi dell'elenco card-back */
    color: #ff0000;
}
.card-back li:nth-of-type(5){                               /* elementi dell'elenco card-back */
    color: #00aeff;
}
.card-back li:nth-of-type(6){                               /* elementi dell'elenco card-back */
    color: #9900ff;
}
.card-back li:nth-of-type(7){                               /* elementi dell'elenco card-back */
    color: #0077ff;
}
/* FINE CODICE SEZIONE SKILL */
/* FINE STILE PAGINA CHI SONO */
/* RESPONSIVE PAGINA CHI SONO */
/* RESPONSIVE - MONITOR PC*/
@media (max-width: 1300px){
    .chi-sono{                              /* sezione chi sono */
        gap: 0rem;
    }
    .chi-sono-img img{                      /* img sezione chi sono */
        width: 35vw;
    }
    .chi-sono-content > span{               /* testo sezione chi sono */
        font-size: 1.8rem;
    }
    .chi-sono-content span p{               /* paragrafi testo sezione chi sono */
        margin: 1.3rem 0;
    }
    .chi-sono-content .btn{                 /* pulsanti sezione chi sono*/
        padding: 0.8rem 2.2rem;
        margin: 3rem 1rem 0 0;
        font-size: 1.5rem;
    }
}
@media (max-width: 1207px){
    .chi-sono-content .btn{                  /* pulsanti sezione chi sono*/
        margin: 1.8rem 1rem 0 0;
    }
    .chi-sono-content .btn:nth-of-type(3){   /* terzo pulsante sezione chi sono */
        margin-top: 1.2rem;
    }
}
@media (max-width: 1175px){
    .chi-sono-content h2{                    /* titolo principale sezione chi sono */
        font-size: 3.2rem;
    }
    .chi-sono-content > span{                /* testo sezione chi sono */
        font-size: 1.7rem;
    }
    .chi-sono-content span p{                /* paragrafi testo sezione chi sono */
        margin: 1rem 0;
    }
    .card{                                   /* spazio per eseguire la rotazione */
        height: 35rem;
    }
}
@media (max-width: 1069px){
    .chi-sono-content > span{                /* testo sezione chi sono */
        font-size: 1.5rem;
    }
}
@media (max-width: 991px){
    .chi-sono-img img{                       /* img sezione chi sono */
        width: 38vw;
    }
}
@media (max-width: 950px){
    .chi-sono{                               /* disposizione verticale della sezione chi sono */
        flex-direction: column;
        height: auto;
        padding-bottom: 5rem;   
    }
    .chi-sono-img img{                       /* img sezione chi sono */
        width: 60vw;
        margin: 2rem 0 3rem;
    }
    .chi-sono-content{                       /* testo sezione chi sono */
        padding: 0rem;
    }
    .skill{                                  /* sezione skill */
        padding: 0 3% 5rem;
    }
    .skill-content{                          /* fascia delle card */
        width: 100%;
    }
    .card-back li{                           /* elementi dell'elenco card-back */
        line-height: 3rem;
        /*font-size: 1.5rem;*/
    }
}
@media (max-width: 795px){
    .card{                                   /* spazio per eseguire la rotazione */
        flex: 0 0 calc(50% - 10px);          /* 2 card per riga */
    }

}
@media (max-width: 786px){
    .chi-sono-content .paragrafo{            /* paragrafi story telling */
        width: 75%;
    }

    .chi-sono-btn .btn {
        padding: 1rem 1.6rem;
    }

    .skill-content{                          /* fascia delle card */
        row-gap: 20px;                       /* separazione verticale tra le righe */
    }
    .skill-content .card:nth-child(n + 4) {  /* rimozione margin precedente */
        margin-top: 0;
    }
    .card {                                  /* spazio per eseguire la rotazione */
        height: 30rem;
    }
}
@media (max-width: 620px){
    .chi-sono-img img{                       /* img sezione chi sono */
        width: 70vw;
    }

    .chi-sono-content .paragrafo {           /* paragrafi story telling */
        font-size: 1.3rem;
    }
    .chi-sono-content .btn{                  /* pulsanti sezione chi sono*/
        margin: 1.5rem 0.7rem 0 0;
        font-size: 1.4rem;
    }
}
@media (max-width: 540px){
    .card {
        flex: 0 0 100%;                      /* 1 card per riga */
    }
    .card-inner {
        width: 80%;
        margin-inline: auto;
    }
}
@media (max-width: 480px){
    .chi-sono-btn .btn {
        padding: 1.8rem 2rem;
        font-size: 1.3rem;
    }
    .card{                                  /* spazio per eseguire la rotazione */
        height: 25rem;
    }
    .card-altro{                            /* stile icona card-altro */
        height: 16rem;
        width: 16rem;
    }
    .card-altro-icone{                      /* stile generale icone piccole */
        padding: 0.8rem;
    }
    .card-altro-icone img{                  /* immagini icone piccole */
        height: 30px;
        width: 30px;
    }
    .card-altro-icone:nth-child(1){         /* posizionamento icona 1 -> analytics */
        top: 2rem;
        left: 3rem;
        }
    .card-altro-icone:nth-child(2){         /* posizionamento icona 2 -> SEO */
        top: 3.5rem;
        left: 8.5rem;
    }
    .card-altro-icone:nth-child(3){         /* posizionamento icona 3 -> bootstrap */
        top: 8rem;
        left: 3rem;
    }
    .card-altro-icone:nth-child(4){         /* posizionamento icona 4 -> figma */
        top: 9.5rem;
        left: 8.5rem;
    }
    .card-back li{                           /* elementi dell'elenco card-back */
            line-height: 2.5rem;
        }
}
@media (max-width: 400px){}
@media (max-width: 375px){
    .chi-sono h2,
    .skill h2{
        font-size: 2.5rem;
    }
    .card-altro{                            /* stile icona card-altro */
        height: 14rem;
        width: 14rem;
    }
    .card-altro-icone{                      /* stile generale icone piccole */
        padding: 0.7rem;
    }
    .card-altro-icone img{                  /* immagini icone piccole */
        height: 2.8rem;
        width: 2.8rem;
    }
    .card-altro-icone:nth-child(1){         /* posizionamento icona 1 -> analytics */
        top: 1rem;
        left: 3rem;
        }
    .card-altro-icone:nth-child(2){         /* posizionamento icona 2 -> SEO */
        top: 2.5rem;
        left: 8rem;
    }
    .card-altro-icone:nth-child(3){         /* posizionamento icona 3 -> bootstrap */
        top: 7rem;
        left: 2rem;
    }
    .card-altro-icone:nth-child(4){         /* posizionamento icona 4 -> figma */
        top: 8.5rem;
        left: 7rem;
    }
}