@media screen and (min-width: 320px) {
    .onyx-stages-container .stage {
        left: 130px;
    }

    .onyx-stages-container .stage:before {
        width: 30px;
    }

    .circled-image {
        height: 120px;
        width: 120px;
    }

    .ceramic-valve-img {
        left: 173px;
    }

    .ceramic-valve-line {
        width: 118px;
    }

    .clack-valve-explode p {
        left: 110px;
    }

    .mobile-hidden {
        display: none;
    }

    .know-container h2 {
        text-align: center;
    }
}

@media screen and (min-width: 375px) {
    .onyx-stages-container .stage {
        left: 170px;
    }

    .onyx-stages-container .stage:before {
        width: 70px;
    }

    .circled-image {
        height: 150px;
        width: 150px;
    }

    .ceramic-valve-img {
        left: 226px;
    }

    .ceramic-valve-line {
        width: 172px;
    }

    .clack-valve-explode p {
        left: 163px;
    }

    .mobile-hidden {
        display: none;
    }

    .know-container h2 {
        text-align: center;
    }
}

@media screen and (min-width: 430px) {
    .onyx-stages-container .stage {
        left: 227px;
    }

    .onyx-stages-container .stage:before {
        width: 120px;
    }

    .circled-image {
        height: 170px;
        width: 170px;
    }

    .ceramic-valve-img {
        left: 288px;
    }

    .ceramic-valve-line {
        width: 234px;
    }

    .clack-valve-explode p {
        left: 223px;
    }

    .mobile-hidden {
        display: none;
    }

    .know-container h2 {
        text-align: center;
    }
}

@media screen and (min-width: 480px) {
    .onyx-stages-container .stage {
        left: 280px;
    }

    .onyx-stages-container .stage:before {
        width: 170px;
    }

    .circled-image {
        height: 200px;
        width: 200px;
    }

    .ceramic-valve-img {
        left: 338px;
    }

    .ceramic-valve-line {
        width: 283px;
    }

    .clack-valve-explode p {
        left: 223px;
    }

    .mobile-hidden {
        display: none;
    }

    .know-container h2 {
        text-align: center;
    }
}

/* iPad Mini / Tablets pequeñas (7–8") */
@media (min-width: 600px) and (max-width: 768px) {
    .about-us-container {
        align-items: center;
        display: flex;
    }

    .about-us-container .full-width-image {
        margin: -1rem;
        object-fit: cover;
        width: 60%;
    }

    .about-us-container p {
        margin: 1rem 1rem 1rem 2rem;
        width: 40%;
    }

    .contact-container .flex {
        display: flex;
    }

    .contact-container .full-width-image {
        width: 50%;
    }

    .contact-container .contact-info {
        align-self: end;
        height: fit-content;
        margin: 1rem;
        width: 50%;
    }

    .faq-container {
        display: flex;
    }

    .faq-container .full-width-image {
        margin: -1rem;
        object-fit: cover;
        width: 50%;
    }

    .faq-container .accordion {
        margin: 1rem;
        width: 50%;
    }

    .tank2 {
        display: block;
        object-fit: contain;
        width: 50%;
    }

    .menu-background {
        left: 30%;
        width: 50%;
    }

    .know-container .flex {
        align-items: center;
        display: flex;
        margin-bottom: 2rem;
    }

    .know-container .flex-reversed {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 2rem;
    }

    .know-container .full-width-image {
        margin: -1rem -1rem 0rem -1rem;
        width: 50%;
    }

    .know-container .description-50 {
        margin: -1rem 0 0 2rem;
        width: 50%;
    }

    .know-container .description-50 p {
        margin-bottom: 0;
    }

    .know-container .description-30 {
        margin: 0 1rem 0 0;
        width: 50%;
    }

    .know-container .clack-valve-explode {
        width: 50%;
    }

    .ceramic-valve-line {
        width: 59%;
    }

    .ceramic-valve-img {
        left: 70%;
    }

    .clack-valve-explode p {
        left: 57%;
    }

    .onyx-stages-container {
        width: 50%;
    }

    .onyx-stages-container .stage {
        left: 29%;
    }

    .onyx-stages-container .stage:before {
        opacity: 0;
    }

    .know-container .stages-description {
        margin: 0;
        width: 50%;
    }

    .know-container .why-choose-image {
        height: 480px;
        margin: 0rem -1rem 0rem -1rem;
        object-fit: cover;
        width: 50%;
    }

    .why-choose-container .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }

    .why-choose-container .features-list,
    .why-choose-container .features-list li:last-of-type {
        margin: 0;
    }

    .power-stone img {
        height: 500px;
        object-fit: cover;
        width: 50%;
    }

    .power-stone .description {
        margin: 0 2rem 0 0;
        width: 50%;
    }

    .tablet-text-align-right {
        text-align: right;
    }

    .tablet-text-align-center {
        text-align: center !important;
    }

    .circled-image-features {
        padding: 0;
    }

    .footer .logo {
        display: block;
        margin: 0 auto;
        width: 60%;
    }

    .mobile-hidden {
        display: block;
    }

    .large-devices-hidden {
        display: none;
    }

    .know-container h2 {
        text-align: left;
    }

    .strength-image {
        margin: 0rem -1rem 0rem -1rem;
        width: 50%;
    }

    .strength .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }
}

/* iPad 10", Galaxy Tab, Surface Go */
@media (min-width: 769px) and (max-width: 1024px) {
    .about-us-container {
        align-items: center;
        display: flex;
    }

    .about-us-container .full-width-image {
        margin: -1rem;
        object-fit: cover;
        width: 60%;
    }

    .about-us-container p {
        margin: 1rem 1rem 1rem 2rem;
        width: 40%;
    }

    .contact-container .flex {
        display: flex;
    }

    .contact-container .full-width-image {
        width: 50%;
    }

    .contact-container .contact-info {
        align-self: end;
        height: fit-content;
        margin: 1rem;
        width: 50%;
    }

    .faq-container {
        display: flex;
    }

    .faq-container .full-width-image {
        margin: -1rem;
        object-fit: cover;
        width: 50%;
    }

    .faq-container .accordion {
        margin: 1rem;
        width: 50%;
    }

    .tank2 {
        display: block;
        object-fit: contain;
        width: 50%;
    }

    .menu-background {
        left: 30%;
        width: 50%;
    }

    .know-container .flex {
        align-items: center;
        display: flex;
        margin-bottom: 2rem;
    }

    .know-container .flex-reversed {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 2rem;
    }

    .know-container .full-width-image {
        margin: -1rem -1rem 0rem -1rem;
        width: 50%;
    }

    .know-container .description-50 {
        margin: -1rem 0 0 2rem;
        width: 50%;
    }

    .know-container .description-50 p {
        margin-bottom: 0;
    }

    .know-container .description-30 {
        margin: 0 1rem 0 0;
        width: 50%;
    }

    .know-container .clack-valve-explode {
        width: 50%;
    }

    .ceramic-valve-line {
        width: 65%;
    }

    .ceramic-valve-img {
        left: 76%;
    }

    .clack-valve-explode p {
        left: 57%;
    }

    .onyx-stages-container {
        width: 40%;
    }

    .onyx-stages-container .stage {
        left: 29%;
    }

    .onyx-stages-container .stage:before {
        opacity: 0;
    }

    .know-container .stages-description {
        margin: 0;
        width: 60%;
    }

    .know-container .why-choose-image {
        height: 480px;
        margin: 0rem -1rem 0rem -1rem;
        object-fit: cover;
        width: 50%;
    }

    .why-choose-container .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }

    .why-choose-container .features-list,
    .why-choose-container .features-list li:last-of-type {
        margin: 0;
    }

    .power-stone img {
        height: 500px;
        object-fit: cover;
        width: 50%;
    }

    .power-stone .description {
        margin: 0 2rem 0 0;
        width: 50%;
    }

    .tablet-text-align-right {
        text-align: right;
    }

    .tablet-text-align-center {
        text-align: center !important;
    }

    .circled-image-features {
        padding: 0;
    }

    .footer .logo {
        display: block;
        margin: 0 auto;
        width: 60%;
    }

    .mobile-hidden {
        display: block;
    }

    .large-devices-hidden {
        display: none;
    }

    .know-container h2 {
        text-align: left;
    }

    .strength-image {
        margin: 0rem -1rem 0rem -1rem;
        width: 50%;
    }

    .strength .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }
}

/* Orientación vertical (portrait) */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
    /* estilos aquí */
}

/* Orientación horizontal (landscape) */
@media (min-width: 600px) and (max-width: 1366px) and (orientation: landscape) {
    /* estilos aquí */
}

/* Laptops pequeñas / Notebooks (13" o menos) */
@media (min-width: 1025px) and (max-width: 1366px) {

    .bg-image {
        bottom: 0;
        object-fit: cover;
        top: unset;
        width: 100%;
    }

    .about-us-container {
        align-items: center;
        display: flex;
    }

    .about-us-container .full-width-image {
        margin: -1rem;
        object-fit: cover;
        width: 60%;
    }

    .about-us-container p {
        margin: 1rem 1rem 1rem 2rem;
        width: 40%;
    }

    .contact-container .flex {
        display: flex;
    }

    .contact-container .full-width-image {
        width: 50%;
    }

    .contact-container .contact-info {
        align-self: end;
        height: fit-content;
        margin: 1rem;
        width: 50%;
    }

    .faq-container {
        display: flex;
    }

    .faq-container .full-width-image {
        margin: -1rem;
        object-fit: cover;
        width: 50%;
    }

    .faq-container .accordion {
        margin: 1rem;
        width: 50%;
    }

    .tank2 {
        display: block;
        justify-self: anchor-center;
        object-fit: contain;
        right: 40%;
        width: 50%;
    }

    .menu-background {
        justify-self: anchor-center;
        left: 7%;
        width: 50%;
    }

    .know-container .flex {
        align-items: center;
        display: flex;
        margin-bottom: 2rem;
    }

    .know-container .flex-reversed {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 2rem;
    }

    .know-container .full-width-image {
        margin: -1rem -1rem 0rem -1rem;
        width: 50%;
    }

    .know-container .description-50 {
        margin: -1rem 0 0 2rem;
        width: 50%;
    }

    .know-container .description-50 p {
        margin-bottom: 0;
    }

    .know-container .description-30 {
        margin: 0 1rem 0 0;
        width: 50%;
    }

    .know-container .clack-valve-explode {
        width: 50%;
    }

    .ceramic-valve-line {
        width: 65%;
    }

    .ceramic-valve-img {
        left: 76%;
    }

    .clack-valve-explode p {
        left: 57%;
    }

    .onyx-stages-container {
        width: 40%;
    }

    .onyx-stages-container .stage {
        left: 29%;
    }

    .onyx-stages-container .stage:before {
        opacity: 0;
    }

    .know-container .stages-description {
        margin: 0;
        width: 60%;
    }

    .know-container .why-choose-image {
        height: 480px;
        margin: 0rem -1rem 0rem -1rem;
        object-fit: cover;
        width: 50%;
    }

    .why-choose-container .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }

    .why-choose-container .features-list,
    .why-choose-container .features-list li:last-of-type {
        margin: 0;
    }

    .power-stone img {
        height: 500px;
        object-fit: cover;
        width: 50%;
    }

    .power-stone .description {
        margin: 0 2rem 0 0;
        width: 50%;
    }

    .tablet-text-align-right {
        text-align: right;
    }

    .tablet-text-align-center {
        text-align: center !important;
    }

    .circled-image-features {
        padding: 0;
    }

    .footer .logo {
        display: block;
        margin: 0 auto;
        width: 60%;
    }

    .mobile-hidden {
        display: block;
    }

    .large-devices-hidden {
        display: none;
    }

    .know-container h2 {
        text-align: left;
    }

    .extra-large-devices-hidden {
        display: none;
    }

    .strength-image {
        margin: 0rem -1rem 0rem -1rem;
        width: 50%;
    }

    .strength .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }
}

/* Laptops grandes (15"-16") / Monitores estándar Full HD */
@media (min-width: 1367px) and (max-width: 1920px) {

    #particles-js {
        height: 80%;
        width: 500px;
    }

    .bg-image {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .common-content:before {
        transform: rotate(-0.1deg) translateY(-9px);
    }

    .extra-large-devices-hidden {
        display: none;
    }

    .about-us-container {
        display: flex;
        margin: -1rem auto;
        width: 60%;
    }

    .about-us-container .full-width-image {
        height: 75vh;
        margin: 0;
        object-fit: cover;
        object-position: top;
        width: 50%;
    }

    .about-us-container .description {
        align-self: center;
        padding: 3rem;
        width: 50%;
    }

    .about-us-container .desktop-footer .footer {
        align-self: center;
    }

    .tank2 {
        display: block;
        object-fit: contain;
        right: 50%;
        transform: translateX(3000px);
        width: 30%;
    }

    .menu-background {
        right: 32%;
        transform: translateX(-2000px);
        width: 33%;
    }

    .content {
        justify-content: center;
    }

    .faq-container {
        display: flex;
        margin: -1rem auto;
        width: 60%;
    }

    .faq-container .full-width-image {
        margin: 0;
        object-fit: cover;
        width: 50%;
    }

    .faq-container .accordion {
        align-self: center;
        margin: 1rem;
        width: 50%;
    }

    .faq-container .desktop-footer .footer {
        align-self: center;
    }

    .footer .logo {
        display: block;
        margin: 0 auto;
        width: 40vh;
    }

    .contact-container {
        margin: 0 auto;
        width: 60%;
    }

    .contact-container .flex {
        display: flex;
    }

    .contact-container .full-width-image {
        height: 50vh;
        object-fit: contain;
        width: 50%;
    }

    .contact-container .contact-info {
        align-self: center;
        height: fit-content;
        margin: 1rem;
        width: 50%;
    }

    .contact-container .contact-form {
        width: 100%;
    }

    .know-container {
        margin: 0 auto;
        width: 60%;
    }

    .know-container .flex {
        align-items: center;
        display: flex;
        margin-bottom: 2rem;
    }

    .know-container .flex-reversed {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 2rem;
    }

    .know-container .full-width-image {
        height: 70vh;
        margin: -1rem -1rem 0rem -1rem;
        object-fit: cover;
        width: 50%;
    }

    .why-choose-container .why-choose-image, .know-container .full-width-image-margin-up {
        height: 70vh !important;
        object-fit: cover;
    }

    .know-container .description-50 {
        margin: -1rem 0 0 2rem;
        width: 50%;
    }

    .know-container .description-50 p {
        margin-bottom: 0;
    }

    .know-container .description-30 {
        margin: 0 1rem 0 0;
        width: 50%;
    }

    .know-container .clack-valve-explode {
        width: 50%;
    }

    .ceramic-valve-line {
        width: 65%;
    }

    .ceramic-valve-img {
        left: 76%;
    }

    .clack-valve-explode p {
        left: 57%;
    }

    .onyx-stages-container {
        width: 40%;
    }

    .onyx-stages-container .stage {
        left: 29%;
    }

    .onyx-stages-container .stage:before {
        opacity: 0;
    }

    .know-container .stages-description {
        margin: 0;
        width: 60%;
    }

    .know-container .why-choose-image {
        height: 480px;
        margin: 0rem -1rem 0rem -1rem;
        object-fit: cover;
        width: 50%;
    }

    .know-container h2 {
        text-align: left;
    }

    .why-choose-container .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }

    .why-choose-container .features-list,
    .why-choose-container .features-list li:last-of-type {
        margin: 0;
    }

    .power-stone img {
        height: 500px;
        object-fit: cover;
        width: 50%;
    }

    .power-stone .description {
        margin: 0 2rem 0 0;
        width: 50%;
    }

    .tablet-text-align-right {
        text-align: right;
    }

    .tablet-text-align-center {
        text-align: center !important;
    }

    .circled-image-features {
        padding: 0;
    }

    .mobile-hidden {
        display: block;
    }

    .large-devices-hidden {
        display: none;
    }

    .extra-large-devices-hidden {
        display: none;
    }

    .strength-image {
        margin: 0rem -1rem 0rem -1rem;
        width: 50%;
    }

    .strength .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }
}

/* Monitores grandes o 4K */
@media (min-width: 1921px) {

    #particles-js {
        height: 80%;
        width: 500px;
    }

    .bg-image {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .common-content:before {
        transform: rotate(-0.1deg) translateY(-9px);
    }

    .extra-large-devices-hidden {
        display: none;
    }

    .about-us-container {
        display: flex;
        margin: -1rem auto;
        width: 60%;
    }

    .about-us-container .full-width-image {
        height: 75vh;
        margin: 0;
        object-fit: cover;
        object-position: top;
        width: 50%;
    }

    .about-us-container .description {
        align-self: center;
        padding: 3rem;
        width: 50%;
    }

    .about-us-container .desktop-footer .footer {
        align-self: center;
    }

    .tank2 {
        display: block;
        object-fit: contain;
        right: 50%;
        transform: translateX(3000px);
        width: 30%;
    }

    .menu-background {
        right: 32%;
        transform: translateX(-2000px);
        width: 33%;
    }

    .content {
        justify-content: center;
    }

    .faq-container {
        display: flex;
        margin: -1rem auto;
        width: 60%;
    }

    .faq-container .full-width-image {
        margin: 0;
        object-fit: cover;
        width: 50%;
    }

    .faq-container .accordion {
        align-self: center;
        margin: 1rem;
        width: 50%;
    }

    .faq-container .desktop-footer .footer {
        align-self: center;
    }

    .footer .logo {
        display: block;
        margin: 0 auto;
        width: 40vh;
    }

    .contact-container {
        margin: 0 auto;
        width: 60%;
    }

    .contact-container .flex {
        display: flex;
    }

    .contact-container .full-width-image {
        height: 50vh;
        object-fit: contain;
        width: 50%;
    }

    .contact-container .contact-info {
        align-self: center;
        height: fit-content;
        margin: 1rem;
        width: 50%;
    }

    .contact-container .contact-form {
        width: 100%;
    }

    .know-container {
        margin: 0 auto;
        width: 60%;
    }

    .know-container .flex {
        align-items: center;
        display: flex;
        margin-bottom: 2rem;
    }

    .know-container .flex-reversed {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 2rem;
    }

    .know-container .full-width-image {
        height: 70vh;
        margin: -1rem -1rem 0rem -1rem;
        object-fit: cover;
        width: 50%;
    }

    .why-choose-container .why-choose-image, .know-container .full-width-image-margin-up {
        height: 70vh !important;
        object-fit: cover;
    }

    .know-container .description-50 {
        margin: -1rem 0 0 2rem;
        width: 50%;
    }

    .know-container .description-50 p {
        margin-bottom: 0;
    }

    .know-container .description-30 {
        margin: 0 1rem 0 0;
        width: 50%;
    }

    .know-container .clack-valve-explode {
        width: 50%;
    }

    .ceramic-valve-line {
        width: 71%;
    }

    .ceramic-valve-img {
        left: 76%;
    }

    .clack-valve-explode p {
        left: 57%;
    }

    .onyx-stages-container {
        width: 40%;
    }

    .onyx-stages-container .stage {
        left: 29%;
    }

    .onyx-stages-container .stage:before {
        opacity: 0;
    }

    .know-container .stages-description {
        margin: 0;
        width: 60%;
    }

    .know-container .why-choose-image {
        height: 480px;
        margin: 0rem -1rem 0rem -1rem;
        object-fit: cover;
        width: 50%;
    }

    .know-container h2 {
        text-align: left;
    }

    .why-choose-container .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }

    .why-choose-container .features-list,
    .why-choose-container .features-list li:last-of-type {
        margin: 0;
    }

    .power-stone img {
        height: 500px;
        object-fit: cover;
        width: 50%;
    }

    .power-stone .description {
        margin: 0 2rem 0 0;
        width: 50%;
    }

    .tablet-text-align-right {
        text-align: right;
    }

    .tablet-text-align-center {
        text-align: center !important;
    }

    .circled-image-features {
        padding: 0;
    }

    .mobile-hidden {
        display: block;
    }

    .large-devices-hidden {
        display: none;
    }

    .extra-large-devices-hidden {
        display: none;
    }

    .strength-image {
        margin: 0rem -1rem 0rem -1rem;
        width: 50%;
    }

    .strength .description {
        margin: 0 0 0 2rem;
        width: 50%;
    }
}