/* iPhone */
@media (min-width: 320px) and (max-width: 550px) {

    /* ** HEADER ** */

    header {
        padding: 20px;
    }

    header.hinterna {
        padding: 0;
        top: 0;
    }

    header.scrolled {
        padding: 0;
    }

    .scrolled .blocco_header, .hinterna .blocco_header {
        padding: 10px 20px;
        border-radius: 0;
        overflow: hidden;
    }

    .scrolled .blocco_header::before, .hinterna .blocco_header::before {
        border-radius: 0;
    }

    .blocco_nav_header {
        display: none;
    }

    .open_menu {
        display: flex;
    }
    
    header.hinterna .open_menu {
        color: var(--darkercolor);
    }

    .quick_info_container {
        display: none;
    }

    /* ** HOME ** */

    .hero_home_content {
        width: 100%;
        padding: 0 20px;
    }

    .hero_home_content h1 {
        font-size: 62px;
    }

    .hero_home_content p {
        font-size: 24px;
    }

    .scrolling {
        left: 20px;
        transform: none;
    }

    .trattamenti_home_container, .gallery_home_container {
        padding: 6% 0;
        background-color: var(--darkercolor);
        position: relative;
        overflow: hidden;
    }

    .gallery_home_container {
        background-color: var(--lightcolor);
    }

    .gallery-item {
        width: 50%;
    }

    .blocco_trattamento {
        width: 50%;
        padding: 20px;
    }

    .about_home_container {
        padding: 6.333% 20px;
    }

    .foto_ah {
        width: 100%;
        aspect-ratio: 16 / 10;
        background-color: var(--darkcolor);
        border-radius: 15px;
        margin: 0 0 32px;
    }

    .txt_ah {
        width: 100%;
        padding: 0;
    }

    .title_trattamenti_home, .title_gallery_home {
        padding: 0 20px;
        text-align: left;
    }

    .title_trattamenti_home h2, .title_gallery_home h2 {
        line-height: 1.2;
        margin: 0 0 32px;
        font-size: 32px;
    }

    .title_trattamenti_home p, .title_gallery_home p {
        font-size: 16px;
    }

    .blocco_trattamento {
        width: 100%;
        padding: 20px;
    }

    /* ** Percorsi ** */

    .hero_interno_container {
        padding: 100px 20px 20px;
    }

    .txt_title h1 {
        font-size: 42px;
        width: 100%;
    }

    .btn_double {
        flex-wrap: wrap;
    }

    .txt_ah p {
        color: var(--darkcolor);
        font-size: 16px;
        line-height: 200%;
        font-weight: 400;
    }

    .txt_ah .btn {
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%;
    }

    .btn_info .btn_link {
        width: 100%;
    }

    .btn.btn_full a.btn_link {
        width: 100%;
    }

    .percorsi.container {
        padding: 72px 20px
    }

    .percorso_item {
        height: auto;
        padding: 10px;
        border-radius: 15px;
    }

    .foto_percorso_item {
        width: 100%;
        aspect-ratio: 16 / 9;
        margin: 0 0 16px;
        border-radius: 10px;
    }

    .txt_percorso_item {
        padding: 0;
        width: 100%;
    }

    .txt_percorso_item h2 {
        font-size: 28px;
        line-height: 1.2;
    }

    /* ** Call to ***/

    .donna_callto {
        width: 40%;
        display: none;
    }

    .callto_content {
        width: 100%;
        padding: 0;
    }

    .callto_content h3 {font-size: 36px;}

    .callto_txt_content .btn {
        width: 100%;
        margin: 0 0 15px;
    }

    /* ** CONTATTI ** */

    .intro_contatti_container {
        padding: 42px 0;
    }

    .recapiti_contatti h2 {
        font-size: 28px;
        margin: 0 0 15px;
    }

    .txt_title {
        width: 100%;
        padding-right: 0;
    }

    .txt_title p {
        font-size: 18px;
        width: 100%;
    }

    .recapiti_contatti {
        width: 100%;
        padding: 0 20px;
    }

    .form_contatti {
        width: 100%;
        padding: 0 20px;
    }

    .form_container {
        padding: 0;
    }

    .input_group {margin: 0;}
    .form_container .input_half {
        width: 100%;
        padding: 0;
        margin: 0 0 15px;
    }

    .sumit_btn button {
        width: 100%;
        margin: 0 0 32px;
    }

    .blocco_info_content {
        border-radius: 0;
        padding: 20px 20px 0;
    }

    .info {
        width: 100%;
        padding: 0;
    }

    /* ** FOOTER **/

    footer {
        padding: 0 20px;
    }

    .fascia-obb-content {
        padding: 32px 0;
    }

}