/** Shopify CDN: Minification failed

Line 8:0 Unexpected "<"
Line 818:0 Unexpected "<"

**/

<style>

/* =====================================
   MAGICSHINE TECHNOLOGY
   WHITE BACKGROUND VERSION
   COLOR ONLY UPDATE
===================================== */


/* =========================
   GLOBAL
========================= */

.technology-showcase {

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;

}



/* =========================
   BACKGROUND GLOW
========================= */

.technology-bg {

    position:absolute;

    width:700px;

    height:700px;

    left:50%;

    top:30%;

    transform:translate(-50%,-50%);

    background:#ff5a00;

    opacity:0.06;

    filter:blur(180px);

    border-radius:50%;

    pointer-events:none;

}




/* =========================
   CONTAINER
========================= */

.technology-container {

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:0 auto;

    padding:0 24px;

}




/* =========================
   HEADER
========================= */


.technology-header {

    max-width:850px;

    margin:0 auto 60px;

    text-align:center;

}



.technology-header p {


    margin:0;

    color:#ff7a30;

    font-size:13px;

    line-height:1.4;

    letter-spacing:5px;

    text-transform:uppercase;

}



.technology-header h2 {


    margin:25px 0 0;


    color:#111111;


    font-size:56px;


    font-weight:800;


    line-height:1.1;

}



.technology-header h2 span {


    color:#ff5a00;


}




.technology-header > div {


    margin-top:25px;


    color:#000000;


    font-size:18px;


    line-height:1.6;


}




/* =========================
 IMAGE DISPLAY
========================= */


.technology-display {


    position:relative;


    max-width:900px;


    margin:0 auto;


}



.technology-image {


    position:relative;


    height:480px;


    overflow:hidden;


    border:


    1px solid rgba(0,0,0,0.08);



    border-radius:30px;



    background:#f5f5f5;



    box-shadow:


    0 30px 80px rgba(0,0,0,0.08);


}



.technology-image img {


    display:block;


    width:100%;


    height:100%;


    object-fit:cover;


    opacity:1;


    transform:scale(1);


    transition:


    opacity .3s ease,


    transform .6s ease;


}




.technology-image img.is-changing {


    opacity:0;


    transform:scale(1.02);


}




/* =========================
 IMAGE OVERLAY
========================= */


.technology-overlay {


    position:absolute;


    inset:0;


    background:


    linear-gradient(

        to bottom,

        transparent 25%,

        rgba(255,255,255,0.01) 100%

    );


    pointer-events:none;


}





/* =========================
 INFO TEXT
========================= */


.technology-info {


    position:absolute;


    z-index:2;


    right:40px;


    bottom:40px;


    left:40px;


    pointer-events:none;


}



.technology-info h3 {


    margin:0 0 10px;


    color:#ffffff;


    font-size:40px;


    line-height:1.15;


}



.technology-info p {


    max-width:600px;


    margin:0;


    color:#ffffff;


    font-size:16px;


    line-height:1.6;


}



/* =========================
 TECHNOLOGY TABS
========================= */


.technology-tabs {


    display:grid;


    grid-template-columns:repeat(6,minmax(0,1fr));


    gap:15px;


    margin-top:50px;


}



.tech-tab {


    appearance:none;


    width:100%;


    padding:22px 10px;



    border:


    1px solid rgba(0,0,0,0.08);



    border-radius:18px;



    background:


    rgba(255,255,255,0.9);



    color:#777777;



    font:inherit;


    text-align:center;


    cursor:pointer;


    transition:


    transform .35s ease,


    color .35s ease,


    border-color .35s ease,


    background-color .35s ease;


}




.tech-tab-label {


    display:block;


}


/* =========================
   ICON STYLE
========================= */


.tech-icon {


    display:flex;


    align-items:center;


    justify-content:center;


    width:42px;


    height:42px;


    margin:0 auto 12px;


    border-radius:50%;


    background:rgba(255,90,0,0.12);


    color:#a52a98;


    font-size:20px;


    transition:


    background-color .35s ease,


    color .35s ease;


}



.tech-icon img {


    width:36px;


    height:36px;


    display:block;


}



/* =========================
   TAB HOVER / ACTIVE
========================= */


.tech-tab:hover,
.tech-tab.active {


    transform:translateY(-8px);


    border-color:#a52a98;


    background:


    rgba(255,90,0,0.08);


    color:#a52a98;


}




.tech-tab.active .tech-icon {


    background:#a52a98;


    color:#ffffff;


}





.tech-tab:focus-visible {


    outline:


    2px solid #ff7a30;


    outline-offset:4px;


}



/* =========================
   MOBILE / TABLET
========================= */


@media(max-width:900px){


    .technology-showcase {


        padding:80px 0;


    }



    .technology-tabs {


        grid-template-columns:


        repeat(2,minmax(0,1fr));


    }



    .technology-header h2 {


        font-size:40px;


    }



    .technology-image {


        height:420px;


    }


}





@media(max-width:600px){



    .technology-showcase {


        padding:65px 0;


    }




    .technology-container {


        padding:0 16px;


    }




    .technology-header {


        margin-bottom:40px;


    }




    .technology-header h2 {


        font-size:34px;


    }




    .technology-header > div {


        font-size:16px;



    }




    .technology-image {


        height:360px;


        border-radius:22px;


    }




    .technology-info {


        right:24px;


        bottom:25px;


        left:24px;


    }




    .technology-info h3 {


        font-size:30px;


    }




    .technology-info p {


        font-size:14px;

        color: #ffffff;


    }




    .technology-tabs {


        gap:10px;


        margin-top:30px;


    }




    .tech-tab {


        padding:18px 8px;


        border-radius:14px;


    }



}



</style>