@media (min-width: 768px) and (max-width: 1024.98px) {

    .visual-interact-section {
        min-height: unset !important;
        height: auto !important;
        padding-bottom: 80px !important;
        margin-top: -150px !important;
        overflow: hidden !important;
    }

    .visual-container {
        background: linear-gradient(to bottom, transparent 150px, #ffffff 150px) !important;
        height: auto !important;
        padding-top: 560px !important;
    }

    div#main-product-anim.product-image-wrapper {
        width: 320px !important;
        height: 350px !important;
        top: 60px !important;
        left: 50% !important;
        position: absolute !important;
        z-index: 15 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        will-change: transform;
    }

    div#main-product-anim.product-image-wrapper .img-main-product {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }

    .menu-items-container {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 30px 20px !important;
        padding: 0 40px !important;
        box-sizing: border-box !important;
        z-index: 20 !important;
        margin-top: 0 !important;
    }

    .menu-items-container .menu-item[class*="item-pos-"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    section:not(.sigen-hybrid-inverter) .menu-items-container:has(.menu-item:nth-child(3):last-child) .menu-item {
        flex: 0 0 calc(33.33% - 14px) !important;
        max-width: calc(33.33% - 14px) !important;
    }

    .sigen-hybrid-inverter .menu-items-container .menu-item:first-child {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    .sigen-hybrid-inverter .menu-items-container .menu-item:not(:first-child):not(:last-child) {
        flex: 0 0 calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
    }

    .sigen-hybrid-inverter .menu-items-container .menu-item:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .menu-items-container:not(:has(.menu-item:nth-child(3):last-child)) .menu-item:last-child:nth-child(odd) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }

    .menu-item img {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 8px !important;
    }

    .item-label {
        margin: 0 !important;
    }

    .item-desc {
        display: block !important;
        margin-top: 4px !important;
        max-width: 180px !important;
    }

    .ellipse-bg-glow-bottom { 
        display: none !important; 
    }

    .ellipse-main-frame {
        width: 500px !important;
        height: 500px !important;
        top: 80px !important;
        z-index: 3 !important;
    }

    .bg-text-watermark {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 240px !important;
        font-size: 52px !important;
        max-width: 320px !important;
        -webkit-text-fill-color: rgba(0, 0, 0, 0.05) !important;
        color: rgba(0, 0, 0, 0.05) !important;
        background: none !important;
        z-index: 2 !important;
        pointer-events: none !important;
        user-select: none !important;
    }
}

@media (max-width: 767.98px) {

    .visual-interact-section {
        min-height: unset !important;
        height: auto !important;
        padding-bottom: 60px !important;
        margin-top: -120px !important; 
        overflow: visible !important;
    }

    .visual-container {
        background: linear-gradient(to bottom, transparent 150px, #ffffff 150px) !important;
        height: auto !important;
        padding-top: 440px !important; 
        position: relative !important;
    }

    div#main-product-anim.product-image-wrapper {
        width: 300.871px !important;
        height: 337.418px !important;
        top: 20px !important; 
        left: 50% !important;
        transform: translateX(-50%) !important;
        position: absolute !important;
        z-index: 15 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        will-change: transform;
    }

    div#main-product-anim.product-image-wrapper .img-main-product {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }

    .ellipse-main-frame {
        width: 368.232px !important;
        height: 368.232px !important;
        position: absolute !important;
        top: -20px !important; 
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 3 !important;
        border: none !important;
        border-radius: 50% !important;
        background: linear-gradient(181deg, rgba(255, 255, 255, 0.23) -32.92%, rgba(255, 255, 255, 0) 48.2%) !important;
    }

    .menu-items-container {
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 54px 16px !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
        z-index: 20 !important;
        margin-top: 0 !important;
    }

    .menu-items-container .menu-item[class*="item-pos-"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }

    .menu-items-container .menu-item:last-child:nth-child(odd) {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .menu-item img {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 16px !important;
    }

    .item-label {
        margin: 0 !important;
    }

    .item-desc {
        display: none !important;
    }

    .ellipse-bg-glow-bottom {
        display: none !important;
    }

    .bg-text-watermark {
        display: none !important;
    }
}