@media screen and ( max-width:600px ){
    body,
        html,
        :root{
            width: 100vw;
        }
         img, h1, h2,h3, div {
            max-width: 100%;
        }
        *{
            text-align: center;
        }
        h2, h1{
            padding: 10px;
        }
    .hero img:nth-child(1){
        width: 30vw;
    }
    .hero img:nth-child(2){
        width: 90vw;
    }
    .hero{
        width: 95vw;
    }
    .hero h1{
        width: 100%;
        font-size: 1.5rem;
        line-height: 1.9rem;
    }
    .section-4 .container{
        flex-direction: column;
    }
    
    .section-1, .section-2, .section-3, .section-4, .section-5, .section-6, .section-7, .section-8, .section-9, .section-10, .section-11, .section-12, .section-13{
        width: 100%;
        max-width: 100vw;
        padding: 1rem;
    }
    .section-10 .container{
        flex-direction: column;
    }
    .red{
        padding: 1rem;
        font-size: 1.2rem;
        line-height: 1.5rem;
    }
    .section-1 h2:nth-child(2){
        font-size: 1.4rem;
    }
    .r{
        margin: 5px;
    }
    .price small{
        font-size: 1.5rem;
    }
    .price b{
        font-size: 2.4rem;
    }
    .button{
        padding: 1.1rem;
        display: block;
        min-width: 100%;
    }
    .hard{
        font-size: 2rem;
        width: 100%;
    }
    .hard-2{
        width: 100%;
        font-size: 1.4rem;
    }
    .card-l{
        flex-direction: column;
    }
        .section-2 .container{
            flex-direction: column;
        }
    .section-2 .container .left, .section-2 .container .right{
        flex-direction: column;
    }
    .section-2 .left, .section-2 .right{
        width: 100%;
        text-align: center;
        border: none;
    }
    .section-1 h2{
        padding: 1rem;
    }
    .section-2 .container *{
        text-align: center;
        justify-content: center;
        align-items: center;
        margin: 1rem auto;
        padding: 0;
        min-height: auto;
    }
    .section-2 .container{
        padding: 5px;
    }
    .x-ray{
        font-size: 1.8rem;
        line-height: 2rem;

    }
        .section-4 .container{
                width: 100%;
                border: none;
                margin: 5px;
                padding: 1rem 0;
        }
    .section-4 .container *{
        flex-direction: column;
        width: 100%;
        border: none;
        margin: 0;
        padding: 0;
    }
    .section-4 h1{
        font-size: 2rem;
    }
    .section-4 .left-2, .section-4 .right-2{
        min-height: auto;
        gap: 1rem;
    }
    .container .left-2, .container .right-2{
        flex-direction: column;
        gap: 2rem;
        border: none;
    }
    .section-4 .container{
        flex-direction: column;
    }
    .section-5{
        padding: 1rem;
    }
    .section-6 .container{
        flex-direction: column;
    }
    .section-6 .container * {
        width: 100%;
        margin: 0;
        padding: 0;
    }
        .section-6 .container img {
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    .section-4 .container *{
        width: 100%;
        margin: 0;
        padding: 0;
        margin: 0 auto;
    }
    .section-7 h1{
        font-size: 1.5rem;
        line-height: 1.7rem;
    }
    .cards-container{
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .cards-container *{
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .card-square{
        width: 100%;
        max-width: 100%;
        margin: 10px 0;
        padding: 1rem;
    }
    .section-9 .container{
        flex-direction: column;
    }
    .section-9  *{
        width: 100%;
        margin: 0;
        padding: 0;
        max-width: 100%;
    }
    .section-9 .card-l{
        margin: 10px 0;
        height: auto;
        padding: 1rem;
    }
    .section-10 * {
        width: 100%;
        max-width: 100%;
        padding: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .section-10 h1{
        margin-bottom: 1rem;
    }
    .pai{
        flex-direction: row;
    }
    
        .section-11 * {
            width: 100%;
            max-width: 100%;
            padding: 0;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }
        .section-12{
            flex-direction: column;
            padding: 1rem;
        }
                .section-12 * {
                    width: 100%;
                    max-width: 100%;
                    padding: 0;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;
                }
        .section-12 img{
            width: 60%;
        }
        .section-13 *{
            width: 100%;
            text-align: left;
            margin: 0;
            padding: 0;
            gap: 0;
        }
        .section-13 h1{
            font-size: 1.2rem;
            text-align: center;
        }
        .last{
            font-size: 1.2rem;
            text-align: center;
            padding: 1.5rem 0;
        }


}