* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

.topo-black {
    background-color: black;
    display: flex;
    justify-content: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.topo-black-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 980px;
    height: 905px;
    gap: 20px;
    margin: 100px 0;
}

.logo-airPodsPro2 {
    width: 304px;
    height: 40px;
}

.texto1-header {
    color: #f5f5f7;
    font-size: 80px;
    line-height: 84px;
    letter-spacing: -0.015rem;
    font-weight: 600;
    ;
}

.airpods-header {
    height: 518px;
    width: 470px;
    margin: 50px 0;
}

.texto-inferior-header {
    color: #f5f5f7;
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
}

.middle-grey {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1d1d1f;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding-top: 100px;
    gap: 20px;
}

.grupo1-container {
    background-image: url(../images/iplace_productpage_airpodspro_2024_features_bg_large_2x.png);
    display: flex;
    flex-direction: column;
    background-size: cover;
    align-items: center;
    border-radius: 20px;
    width: 980px;
    height: 503px;
    padding: 45px;
}

h3 {
    color: #f5f5f7;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.007rem;
    font-weight: 600;
}

.subgrupo1-container {
    display: flex;
    flex-direction: row;
}

.grupo1-miniTextos-esquerda {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grupo1-miniTextos {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grupo1-miniTextos-Bottom {
    padding-top: 50px;
}

.grupo1-icone {
    width: 35px;
    height: 42px;
}

.grupo1-miniTexto-branco {
    padding-top: 15px;
    color: #f5f5f7;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
}

.grupo1-miniTexto-cinza {
    color: #86868b;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
}

.grupo1-miniTextos-e {
    padding-right: 80px;
}

.grupo1-miniTextos-d {
    padding-right: 0px;
    padding-left: 90px;
}

.grupo1-fone-meio {
    padding: 40px 70px 20px 0px;
    height: 325px;
    width: 299.98px;
}

.grupo2-container {
    background-color: black;
    display: flex;
    flex-direction: column;
    background-size: cover;
    align-items: center;
    border-radius: 20px;
    width: 980px;
    height: 503px;
    padding: 45px;
}

.subgrupo2-container {
    padding-top: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.grupo2-icone {
    align-self: flex-start;
    margin-top: 70px;
    margin-right: 30px;
    width: 34px;
    height: 43px;
}

.grupo2-texto {
    color: #86868b;
    font-size: 17px;
    line-height: 25px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    width: 316px;
    padding-right: 50px;
}

.grupo2-imagem {
    height: 333px;
    margin-left: 50px;
}

.letras-brancas {
    color: #f5f5f7;
}

.grupo3-container {
    background-color: black;
    display: flex;
    flex-direction: column;
    background-size: cover;
    align-items: center;
    border-radius: 20px;
    width: 980px;
    height: 503px;
    padding: 45px;
}

.grupo3-texto {
    color: #86868b;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.007rem;
    font-weight: 600;
}

.grupo3-image {
    margin-top: 50px;
    height: 302px;
}

.grupo3-texto-tamanhos-container {
    display: flex;
    flex-direction: row;
    gap: 110px;
    margin-top: -80px;
    margin-left: 120px;
    align-self: first baseline;
}

.grupo3-texto-tamanhos {
    color: #00ff41;
}

.grupo4-container {
    background-image: url(../images/iplace_productpage_airpodspro_2024_spatial_audio_bg_large_2x.png);
    display: flex;
    flex-direction: column;
    background-size: cover;
    align-items: center;
    justify-content: flex-end;
    border-radius: 20px;
    width: 980px;
    height: 503px;
    padding: 45px;
}

.grupo4-texto {
    color: #86868b;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.007rem;
    font-weight: 600;
}

.grupo5-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.subgrupo-5A-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: black;
    border-radius: 20px;
    width: 647px;
    height: 500px;
}

.grupo-5A-texto {
    color: #86868b;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.007rem;
    font-weight: 600;
    padding: 50px 40px 0;
}

.grupo5A-image {
    width: 377px;
    height: 304px;
}

.subgrupo-5B-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    border-radius: 20px;
    width: 313px;
    height: 500px;
}

.grupo5B-image {
    width: 118px;
    height: 119px;
    margin-bottom: 30px;
}

.grupo-5B-texto {
    color: #86868b;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.007rem;
    font-weight: 600;
}

.grupo6-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-bottom: 100px;
}

.subgrupo-6A-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    border-radius: 20px;
    width: 313px;
    height: 500px;
}

.grupo6A-image {
    width: 118px;
    height: 119px;
    margin-bottom: 30px;
}

.grupo-6A-texto {
    color: #86868b;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.007rem;
    font-weight: 600;
}

.subgrupo-6B-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: black;
    border-radius: 20px;
    width: 647px;
    height: 500px;
}

.grupo-6B-texto {
    color: #86868b;
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: 0.007rem;
    font-weight: 600;
    padding: 50px 40px 0;
}

.grupo6B-image {
    width: 248px;
    height: 336px;
}

.bottom-white {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;


}

.grupo-bottom {
    background-color: #f5f5f7;
    display: flex;
    flex-direction: row;
    background-size: cover;
    align-items: center;
    justify-content: space-around;
    border-radius: 20px;
    width: 980px;
    height: 503px;
    padding: 45px;
}

.grupo-bottom-texto {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 364px;
    padding-right: 30px;
}

.grupo-bottom-texto1 {
    columns: #1d1d1f;
    font-size: 21px;
    line-height: 25px;
    letter-spacing: 0.011rem;
    font-weight: 600;
}

.grupo-bottom-texto2 {
    columns: #1d1d1f;
    font-size: 40px;
    line-height: 44px;
    letter-spacing: 0rem;
    font-weight: 600;
}

.grupo-bottom-texto3 {
    font-family: Arial, Helvetica, sans-serif;
    columns: #1d1d1f;
    font-size: 17px;
    line-height: 25px;
    font-weight: 400;
}

.grupo-bottom-image-container {
    justify-self: center;
}

.grupo-bottom-image {
    justify-self: center;
}

.avisos-legais {
    width: 980px;
    padding-top: 50px;
    font-family: Arial, Helvetica, sans-serif;
    color: #6E6E73;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    padding-bottom: 10px;
}

.avisos-legais-texto-A {
    padding-bottom: 10px;
}

.avisos-legais-texto {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    padding-bottom: 10px;
}

@media screen and (max-width: 600px) {

    .topo-black-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 100px 0;
        height: auto;
    }

    .logo-airPodsPro2 {
        width: auto;
        height: 30px;
    }

    .texto1-header {
        color: #f5f5f7;
        font-size: 50px;
        line-height: 55px;
        letter-spacing: -0.015rem;
        font-weight: 600;
        text-align: center;
        padding: 0 10% 0;
    }

    .airpods-header {
        display: block;
        height: auto;
        width: 70%;
        margin: 50px 0;
    }

    .texto-inferior-header {
        color: #f5f5f7;
        text-align: center;
        font-size: 24px;
        line-height: 32px;
        font-weight: 400;
        padding: 0 20% 0;
    }

    .middle-grey {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #1d1d1f;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        padding-top: 30px;
        gap: 20px;
    }
    
    .grupo1-container {
        background-image: url(../images/iplace_productpage_airpodspro_2024_features_bg_large_2x600.png);
        background-position: center;
        background-color: #1d1d1f;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        background-size: cover;
        align-items: center;
        border-radius: 20px;
        width: auto;
        height: auto;
        padding: 45px;
    }
    
    h3 {
        color: #f5f5f7;
        text-align: center;
        font-size: 45px;
        line-height: 50px;
        letter-spacing: 0.007rem;
        font-weight: 600;
    }
    
    .subgrupo1-container {
        display: flex;
        flex-direction: column;
    }
    
    .grupo1-miniTextos-esquerda {
        display: flex;
        flex-direction: column;
        align-items: center;
        order: 2
    }
    
    .grupo1-miniTextos {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .grupo1-miniTextos-Bottom {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .grupo1-icone {
        width: 35px;
        height: 42px;
    }
    
    .grupo1-miniTexto-branco {
        padding-top: 15px;
        color: #f5f5f7;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .grupo1-miniTexto-cinza {
        color: #86868b;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    .grupo1-miniTextos-e {
        padding-right: 0;
    }
    
    .grupo1-miniTextos-d {
        padding-right: 0px;
        padding-left: 0;
    }
    
    .grupo1-fone-meio {
        align-self: center;
        padding: 40px;
        padding-right: 90px;
        padding-top: 200px;
        height: auto;
        width: 70%;
    }
    
    .grupo2-container {
        background-color: black;
        display: flex;
        flex-direction: column;
        background-size: cover;
        align-items: center;
        border-radius: 20px;
        width: auto;
        height: auto;
        padding: 45px;
    }
    
    .subgrupo2-container {
        padding-top: 40px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
    
    .grupo2-icone {
        order: 2;
        align-self: flex-start;
        margin-top: 70px;
        margin-right: 0;
        margin-left: 10%;
        width: 34px;
        height: 43px;
    }
    
    .grupo2-texto {
        order: 1;
        color: #86868b;
        font-size: 17px;
        line-height: 25px;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
        width: 70%;
        margin-top: -50px;
        padding-right: 0;
        padding-left: 10%;
    }
    
    .grupo2-imagem {
        order: 3;
        height: 333px;
        margin-left: 50px;
    }
    
    .letras-brancas {
        color: #f5f5f7;
    }
    
    .grupo3-container {
        background-color: black;
        display: flex;
        flex-direction: column;
        background-size: cover;
        align-items: center;
        border-radius: 20px;
        width: auto;
        height: auto;
        padding: 45px;
    }

    .grupo3-h3 {
        font-size: 28px;
        line-height: 32px;
        padding: 0 25%;;
    }
    
    .grupo3-texto {
        color: #86868b;
        text-align: center;
        font-size: 28px;
        line-height: 32px;
        letter-spacing: 0.007rem;
        font-weight: 600;
        padding: 0 20%;
    }
    
    .grupo3-image {
        margin-top: 50px;
        width: 80%;
        height: auto;
    }
    
    .grupo3-texto-tamanhos-container {
        display: flex;
        flex-direction: row;
        gap: 60px;
        margin-top: -80px;
        margin-left: 10%;
        margin-bottom: 15%;
        align-self: first baseline;
    }
    
    .grupo3-texto-tamanhos {
        color: #00ff41;
    }
    
    .grupo4-container {
        background-image: url(../images/iplace_productpage_airpodspro_2024_spatial_audio_bg_large_2x600.png);
        display: flex;
        flex-direction: column;
        background-size: cover;
        background-repeat: no-repeat;
        align-items: center;
        justify-content: flex-end;
        border-radius: 20px;
        width: 100%;
        height: 600px;
        padding: 45px;
    }

    .grupo4-h3 {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: 0.007rem;
        font-weight: 600;
    }
    
    .grupo4-texto {
        color: #86868b;
        text-align: center;
        font-size: 28px;
        line-height: 32px;
        letter-spacing: 0.007rem;
        font-weight: 600;
    }
    
    .grupo5-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .subgrupo-5A-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: black;
        border-radius: 20px;
        width: auto;
        height: auto;
    }
    
    .grupo-5A-texto {
        color: #86868b;
        text-align: center;
        font-size: 28px;
        line-height: 32px;
        letter-spacing: 0.007rem;
        font-weight: 600;
        padding: 50px 70px;
    }
    
    .grupo5A-image {
        width: 70%;
        height: auto;
    }
    
    .subgrupo-5B-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: black;
        border-radius: 20px;
        width: 100%;
        height: auto;
    }
    
    .grupo5B-image {
        width: 15%;
        height: auto;
        padding-top: 50px;
        margin-bottom: 30px;
    }
    
    .grupo-5B-texto {
        color: #86868b;
        text-align: center;
        font-size: 28px;
        line-height: 32px;
        letter-spacing: 0.007rem;
        font-weight: 600;
        padding-bottom: 50px;
    }
    
    .grupo6-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .subgrupo-6A-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: black;
        border-radius: 20px;
        width: 100%;
        height: auto;
    }
    
    .grupo6A-image {
        width: 15%;
        height: auto;
        padding-top: 50px;
        margin-bottom: 30px;
    }
    
    .grupo-6A-texto {
        color: #86868b;
        text-align: center;
        font-size: 28px;
        line-height: 32px;
        letter-spacing: 0.007rem;
        font-weight: 600;
        padding-bottom: 50px;
    }
    
    .subgrupo-6B-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: black;
        border-radius: 20px;
        width: auto;
        height: auto;
    }
    
    .grupo-6B-texto {
        color: #86868b;
        text-align: center;
        font-size: 28px;
        line-height: 32px;
        letter-spacing: 0.007rem;
        font-weight: 600;
        padding: 50px 70px;
    }
    
    .grupo6B-image {
        width: 70%;
        height: auto;
    }

    .bottom-white {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;    
    }
    
    .grupo-bottom {
        background-color: #f5f5f7;
        display: flex;
        flex-direction: column;
        background-size: cover;
        align-items: center;
        justify-content: space-around;
        border-radius: 20px;
        width: 100%;
        height: auto;
        padding: 45px;
    }
    
    .grupo-bottom-texto {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 364px;
        padding-right: 30px;
    }
    
    .grupo-bottom-texto1 {
        columns: #1d1d1f;
        font-size: 21px;
        line-height: 25px;
        letter-spacing: 0.011rem;
        font-weight: 600;
    }
    
    .grupo-bottom-texto2 {
        columns: #1d1d1f;
        font-size: 40px;
        line-height: 44px;
        letter-spacing: 0rem;
        font-weight: 600;
    }
    
    .grupo-bottom-texto3 {
        font-family: Arial, Helvetica, sans-serif;
        columns: #1d1d1f;
        font-size: 17px;
        line-height: 25px;
        font-weight: 400;
    }
    
    .grupo-bottom-image-container {
        justify-self: center;
        padding-top: 30px;
    }
    
    .grupo-bottom-image {
        justify-self: center;
    }
    
    .avisos-legais {
        width: 100%;
        padding-top: 50px;
        font-family: Arial, Helvetica, sans-serif;
        color: #6E6E73;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        padding:10% 10% 10px;
    }
    
    .avisos-legais-texto-A {
        padding-bottom: 10px;
    }
    
    .avisos-legais-texto {
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        padding-bottom: 10px;
    }
}

    @media screen and (max-width: 430px){

        .grupo1-fone-meio {
            align-self: center;
            padding: 40px;
            padding-right: 70px;
            padding-top: 100px;
            height: auto;
            width: 70%;
        }

        .grupo3-image {
            margin-top: 50px;
            width: 80%;
            height: auto;
        }
        
        .grupo3-texto-tamanhos-container {
            display: flex;
            flex-direction: row;
            gap: 40px;
            margin-top: -30px;
            margin-left: 10%;
            margin-bottom: 15%;
            align-self: first baseline;
        }

    }