@charset "UTF-8";

@media only screen and (max-width: 575px) {
    body {
        overflow-x: hidden;
    }

    /*HERO SECTION*/
    #hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
    }

    #hero::before {
        content: "";
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%; 
        height: 100%;
        background: url("/image/hero.webp") center / cover no-repeat;
        background-position: 8.5%;
        filter: grayscale(1); 
        z-index: 1;
    }

    #hero-content br {
        display: none;
    }

    .playdisp {
        line-height: 120%;
    }

    /* .logo {
        font-size: 1.5em;
        background: var(--black-colour);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;  
    }*/

    #hero-content {
        display: inline-flex;
    } 

    .paragrafi-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 6%;
        justify-content: space-evenly;
    }

    #text-large {
        font-size: 1.1em;
        text-align: justify;
        line-height: 140%;
    }

    #text-small {
        font-size: 0.85em;
    }

    #scroll-down {
        display: none;
    }

    h1 {
        font-size: 3.25em;
    }

    .mini-icon {
        display: none;
    }

    #div-buttons-hero {
        position: absolute;
        top: 4%;
        right: 4%;
    }

    #cta-center {
        align-self: center;
    }

    .cta-btn,
    .cta-2-responsive {
        font-size: 1.1em;
        padding: 12px 24px;
    }

    /*ABOUT ME*/
    #about-me, 
    #benefits,
    #cta-section {
        display: flex;
        flex-direction: column;
        padding: 38px;
    }

    #about-me br,
    #benefits br,
    #testimonials br {
        display: none;
    }

    .h2,
    .h3-var {
        font-size: 2.15em;
    }

    #parte-sx-aboutme,
    #parte-sx-benefits {
        height: 6vh;
    }

    #parte-dx-aboutme {
        height: 62vh;
    }

    /*PACCHETTI/FEATURES*/
    #features,
    #testimonials {
        padding: 38px;
    }

    .h3,
    .h4 {
        font-size: 2.15em;
    }
    
    .container {
        flex-direction: column;
        gap: 6vh;
    }

    .servizio {
        height: fit-content;
    }

    .pcards,
    .testo-ptelenco,
    .p-testimonials {
        font-size: .95em;
    }

    .servizio img {
        width: 100%;
    }

    /*BENEFITS*/
    .punto-elenco {
        flex-basis: inherit;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .icona-uno {
        top: 28%;
    }

    .icona-due {
        left: -9%;
        bottom: 82%;
    }

    .testo-ptelenco {
        min-width: auto;
    }

    /*TESTIMONIALS*/
    .card {
        width: fit-content;
    }

    .container-testimonials {
        gap: 10vh;
    }

    /*CTA*/
    #cta-section {
        justify-content: stretch;
        gap: 6vh;
        background-position: 62% center; 
        height: auto;
    }

    .cta-content {
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        gap: 6vh;
    }

    .container-sx-cta {
        width: 100%;
    }

    .cta-2-responsive {
        display: block;
        background-color: var(--pink-colour);
    }

    .cta-2 {
        display: none;
    }

    .frame {
        padding: 35px 39px;
    }

    .h6 {
        font-size: .95em;
        text-align: center;
    }

    .footer {
        padding: 38px;
        flex-direction: column;
        gap: 6vh;
    }

    .parte-sx-footer {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    #div_logo_footer {
        margin-bottom: 2.4vh;
        margin-top: 0px;
    }

    .infofooter_content {
        height: 40px;
        margin-top: 1.2vh;
        flex-direction: row;
        justify-content: space-between;
    }

    .parte-dx-footer {
        align-self: flex-start;
        gap: 2vh;
    }

    .parte-dx-footer span,
    .infofooter_content {
        font-size: 0.850em;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    .tagline,
    .tagline-packet-client,
    .psocials {
        font-size: .9125em;;
    }

    /*HERO SECTION*/
    #hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    #hero .logo {
        text-shadow: var(--shadow-style);  
        background: var(--white-colour);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; 
    } 

    #hero-content {
        display: inline-flex;
        margin-left: 2vh;
    } 

    #hero-content br {
        display: none;
    }

    .paragrafi-hero {
        margin: 0 14vh 0 6vh;
        align-items: flex-start;
        text-align: justify;
        gap: 8%;
    }

    #text-large {
        font-size: 1.1em;
        flex-basis: 55%;
    }

    #text-small {
        font-size: 0.85em;
        flex-basis: 30%;
    }

    #scroll-down {
        display: none;
    }

    h1 {
        font-size: 4.25em;
    }

    .mini-icon {
        position: absolute;
        bottom: 38px;
        left: 38px;
    }

    #div-buttons-hero {
        position: absolute;
        top: 4%;
        right: 4%;
    }

    #cta-center {
        align-self: center;
    }

    /*ABOUT ME*/
    #about-me, 
    #benefits,
    #cta-section {
        display: flex;
        flex-direction: column;
        padding: 40px;
        gap: 10vh;
    }

    #about-me br,
    #benefits br {
        display: none;
    }

    .h2 {
        font-size: 3.7em;
    }

    #parte-sx-aboutme,
    #parte-sx-benefits {
        height: 6vh;
    }

    #parte-dx-aboutme {
        height: 48vh;
    }

    /*PACCHETTI/FEATURES*/
    #features,
    #testimonials {
        padding: 40px;
    }

    .h3 {
        font-size: 3em;
    }
    
    .container {
        flex-direction: column;
        align-items: center;
        gap: 10vh;
    }

    .servizio {
        height: fit-content;
        width: 78%;
    }

    .pcards,
    .testo-ptelenco,
    .p-testimonials {
        font-size: 1em;
    }

    .servizio img {
        width: 100%;
        height: 38vh;
    }

    /*BENEFITS*/
    #parte-dx-benefits {
        display: flex;
        flex-direction: column;
        gap: 4vh;
    }

    .punto-elenco {
        gap: 6vw;
        align-self: stretch;
    }

    .icona-uno {
        left: 82%
    }

    .icona-due {
        left: -6%;
        bottom: 84%;
    }

    .testo-ptelenco {
        min-width: auto;
    }

    .paragrafo-ptelenco {
        gap: 0.5vh;
    }

    .punto-elenco:first-child .paragrafo-ptelenco {
        margin-left: 1vw;
    }

    /*TESTIMONIALS*/
    .h3-var {
        font-size: 2.75em;
    }

    .h4 {
        font-size: 2.25em;
    }

    .card {
        width: 90%;
        padding: 52px 42px;
    }

    .container-testimonials {
        gap: 12vh;
    }

    /*CTA*/
    #mini-icona-2 {
        display: none;
    }

    .link {
        font-size: .95em;
    }

    #cta-section {
        justify-content: stretch;
        gap: 6vh;
        background-position: 62% center; 
        height: auto;
    }

    .cta-content {
        flex-direction: column;
        align-items: stretch;
        gap: 6vh;
    }

    .container-sx-cta {
        width: 100%;
    }

    .h6 {
        text-align: center;
    }

    .cta-2 {
        font-size: 1.15em;
    }

    .footer {
        padding: 38px;
        flex-direction: column;
        gap: 6vh;
    }

    .parte-sx-footer {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    #div_logo_footer {
        margin-bottom: 2.4vh;
        margin-top: 0px;
    }

    .infofooter_content {
        margin-top: 2vh;
        flex-direction: row;
        justify-content: space-between;
    }

    .parte-dx-footer {
        align-self: flex-start;
        gap: 1vh;
    }

    .parte-dx-footer span,
    .infofooter_content {
        font-size: 0.850em;
    }
}

@media only screen and (min-width: 682px) and (max-width: 922px) {
    h1 {
        font-size: 5em;
    }

    .h2 {
        font-size: 4em;
    }

    #about-me, 
    #benefits, 
    #cta-section {
        gap: 4vh;
    }

    #parte-dx-aboutme {
        height: 38vh;
    }

    .h3 {
        font-size: 3.125em;
    }

    .servizio img {
        height: auto;
    }

    .servizio,
    .card {
        width: 88%;
    }
    
    .container {
        gap: 8vh
    }

    .punto-elenco {
        margin: 0 4vw;
    }

    .h3-var {
        font-size: 3em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 922px) {
    body {
        overflow-x: hidden;
    }

    .tagline,
    .tagline-packet-client,
    .psocials {
        font-size: .9125em;;
    }

    /*HERO SECTION*/
    #hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    #hero .logo {
        text-shadow: var(--shadow-style);  
        background: var(--white-colour);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; 
    } 

    #hero-content {
        display: inline-flex;
        margin-left: 2vh;
    } 

    #hero-content br {
        display: none;
    }

    .paragrafi-hero {
        margin: 0 14vh 0 6vh;
        align-items: flex-start;
        text-align: justify;
        gap: 8%;
    }

    #text-large {
        font-size: 1.1em;
        flex-basis: 55%;
    }

    #text-small {
        font-size: 0.85em;
        flex-basis: 30%;
    }

    #scroll-down {
        display: none;
    }

    #hero .mini-icon {
        position: absolute;
        bottom: 38px;
        left: 38px;
    }

    #div-buttons-hero {
        position: absolute;
        top: 4%;
        right: 4%;
    }

    #cta-center {
        align-self: center;
    }

    /*ABOUT ME*/
    #about-me, 
    #benefits,
    #cta-section,
    #testimonials {
        display: flex;
        flex-direction: column;
        padding: 40px;
        gap: 10vh;
    }

    #about-me br,
    #benefits br {
        display: none;
    }

    #parte-sx-aboutme,
    #parte-sx-benefits {
        height: 6vh;
    }

    /*PACCHETTI*/
    #features {
        padding: 4.5%;
        align-items: center;
    }

    #features .container { 
        gap: 10vh;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        /* idth: fit-content;
        flex-wrap: wrap;
        justify-content: flex-start; */
    }

    .servizio {
        width: 100%;
        height: fit-content;
    }

    .servizio img {
        width: 100%;
    }

    .pcards,
    .testo-ptelenco,
    .p-testimonials {
        font-size: 1em;
    }

    /*BENEFITS*/
    #parte-dx-benefits {
        display: flex;
        flex-direction: column;
        gap: 4vh;
    }

    .punto-elenco {
        gap: 4vw;
        align-self: stretch;
    }

    .icona-uno {
        left: 86%;
        top: 32%;
    }

    .icona-due {
        left: -6%;
        bottom: 84%;
    }

    .testo-ptelenco {
        min-width: auto;
    }

    .paragrafo-ptelenco {
        gap: 0.5vh;
    }

    .punto-elenco:first-child .paragrafo-ptelenco {
        margin-left: 1vw;
    }

    /*TESTIMONIALS*/
    #testimonials .container {
        flex-direction: column;
        align-items: center;
        gap: 12vh;
    }

    /*CTA*/
    #cta-section {
        background-position: center;
        height: fit-content;
    }

    .tagline-cta {
        margin-top: 6vh;
    }

    .cta-content {
        gap: 2vw;
    }

    .frame {
        gap: 2vw;
        padding: 32px 37px;
        width: 66%
    }

    /*FOOTER*/
    .parte-sx-footer {
        flex-wrap: wrap;
        width: 62%;
    }

    #div_logo_footer {
        flex-basis: 100%;
        margin-bottom: 6vh;
    }
}

@media only screen and (min-width: 923px) and (max-width: 1200px) {
    body {
        overflow-x: hidden;
    }

   #hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    #hero .logo {
        text-shadow: var(--shadow-style);  
        background: var(--white-colour);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; 
    } 

    #hero-content {
        display: inline-flex;
        margin-left: 2vh;
        align-items: flex-start;
    } 

    #hero-content br {
        display: none;
    }

    .paragrafi-hero {
        align-items: flex-start;
        justify-content: flex-start;
        text-align: justify;
        gap: 8%;
    }

    #text-large {
        font-size: 1.1em;
        flex-basis: 50%;
        margin-left: 2vw;
    }

    #text-small {
        font-size: 0.85em;
        flex-basis: 30%;
    }

    h1 {
        font-size: 4.85em;
    }

    .paragrafi-hero br {
        display: none;
    }

    #scroll-down {
        display: none;
    }

    #hero .mini-icon {
        position: absolute;
        bottom: 38px;
        left: 38px;
    }

    #div-buttons-hero {
        position: absolute;
        top: 4%;
        right: 4%;
    }

    #cta-center {
        align-self: center;
    }

    /*ABOUT ME*/
    #about-me, 
    #benefits,
    #cta-section,
    #testimonials {
        display: flex;
        flex-direction: column;
        padding: 42px;
        gap: 10vh;
    }

    #about-me br,
    #benefits br {
        display: none;
    }

    .h2 {
        font-size: 4em;
    }

    #parte-sx-aboutme,
    #parte-sx-benefits {
        height: 6vh;
    }

    #parte-dx-aboutme {
        height: 38vh;
    }

    /*PACCHETTI*/
    .h3 {
        font-size: 3.225em;
    }

    .container {
        width: 88vw;
    }

    .servizio {
        width: 80%;
        height: fit-content;
    }

    .servizio img {
        height: 26vh;
    }

    .pcards,
    .testo-ptelenco,
    .p-testimonials {
        font-size: 1em;
    }

    #parte-dx-benefits {
        align-items: flex-end;
        gap: 4vw;
    }

    .punto-elenco {
        margin-right: 20vw;
        gap: 3vw;
    }

    .punto-elenco:first-child .paragrafo-ptelenco {
        margin-left: 1vw;
    }

    .container-testimonials {
        gap: 2%;
    }
    
    /*CTA*/
    #cta-section {
        background-position: center;
        height: fit-content;
        padding: 42px;
    }

    .tagline-cta {
        margin-top: 6vh;
    }

    .cta-content {
        gap: 2vw;
    }

    .frame {
        gap: 2vw;
        padding: 32px 37px;
        width: 66%
    }

    .h3-var {
        font-size: 3em;
    }

    /*FOOTER*/
    .parte-sx-footer {
        flex-wrap: wrap;
        width: 62%;
    }

    #div_logo_footer {
        flex-basis: 100%;
        margin-bottom: 6vh;
    }
}

@media screen and (min-width: 984px) and (max-width: 1100px) {
    .paragrafi-hero {
        gap: 16%;
    }

    .punto-elenco {
        margin-right: 30%;
    }

    .frame {
        width: 46%
    }

    .container-sx-cta {
        width: 36.73%;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1200px) {
    #div_logo .logo {
        background: var(--white-colour);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; 
    }

    .h2 {
        width: 80%;
    }

    .punto-elenco:first-of-type .numero-ptelenco {
        margin-left: 1%;
    } 

    .punto-elenco {
        margin-right: 30%;
    }

    .frame {
        width: 46%
    }

    .container-sx-cta {
        width: 36.73%;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1300px) {
    body {
        overflow-x: hidden;
    }

    .paragrafi-hero {
        margin-right: 10%;
    }

    #about-me,
    #benefits {
        padding: 91px 38px;
    }

    .tagline {
        font-size: 1em;
    }

    .icona-uno {
        left: 65%;
    }

    .icona-due {
        left: 45.5%;
    }

    .servizio {
        height: fit-content;
    }

    .servizio img {
        height: 10em;
    }
}

@media screen and (min-width: 1500px) {
    #hero-content {
        transform: scale(1.3);
        margin-top: 40.5px;
    }

    .servizio {
        height: 38.5em; 
    }

    .icona-due {
        left: 45%;
    }

}

@media screen and (min-width: 1700px) {
    #hero-content{
        padding-right: 2vw;
    }

    .paragrafi-hero {
        padding-right: 6vw;
    }

    #about-me {
        height: max-content;
    }

    .logo {
        font-size: 2em;
    }

    #scroll-down {
        font-size: 1.3em;
    }

    .cta-btn,
    .cta-2 {
        font-size: 1.5em;
    }

    .circle-btn {
        transform: scale(1.3);
    }

    #div-buttons-hero {
        gap: 2vw;
    }

    .h2 {
        font-size: 6.15em;
    }

    .h3,
    .numero-ptelenco {
        font-size: 4.7125em;
    }

    .tagline,
    .tagline-packet-client,
    .link {
        font-size: 1.0725em;
    }
        
    .pstyle {
        font-size: 1.3em; 
    }

    .p-testimonials {
        font-size: 1.15em;
    }

    .pcards {
        font-size: .975em;
    }

    .packet-name,
    .client-name {
        font-size: 1.625em; 
    } 
 
    .servizio {
        height: 45em; 
    }
        
    .h4 {
        font-size: 3.5em; 
    }

    .h3-var {
        font-size: 4.55em;
    }

    .h6,
    .pcontatto {
        font-size: 1.3em; 
    }

    .container-testimonials {
        width: 100%;
        gap: 2.5%;
    }

    .card {
        width: 32%;
    }

    .bottom-text {
        font-size: 1.3em;
    }

    .icona-due {
        left: 48%;
    }
}