/* =========================================================
   ISECTION
   PREMIUM OEM CTA
   HIGH CONTRAST VERSION
========================================================= */

.isection{
    position:relative;
    width:100%;
    min-height:680px;
    padding:100px 0;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(45,105,255,.30),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 40%,
            rgba(0,190,255,.25),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #020b1f 0%,
            #071c3d 50%,
            #063866 100%
        );

    color:#ffffff !important;
    isolation:isolate;
}


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

.isection-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.isection-grid{
    position:absolute;
    inset:0;

    opacity:.13;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    transform:
        perspective(600px)
        rotateX(60deg)
        scale(1.5);

    transform-origin:center bottom;
}


/* =========================================================
   GLOW ORBS
========================================================= */

.isection-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(5px);
    pointer-events:none;
}

.isection-orb-1{
    width:420px;
    height:420px;

    background:
        radial-gradient(
            circle,
            rgba(31,105,255,.38),
            transparent 70%
        );

    left:-180px;
    top:-150px;
}

.isection-orb-2{
    width:350px;
    height:350px;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.30),
            transparent 70%
        );

    right:-120px;
    bottom:-130px;
}

.isection-orb-3{
    width:200px;
    height:200px;

    background:
        radial-gradient(
            circle,
            rgba(71,120,255,.28),
            transparent 70%
        );

    left:45%;
    top:20%;
}


/* =========================================================
   PARTICLES
========================================================= */

.isection-particle{
    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#55c8ff;

    box-shadow:
        0 0 15px #55c8ff,
        0 0 30px rgba(69,184,255,.7);

    z-index:1;
}

.isection-particle.p1{
    left:10%;
    top:25%;
}

.isection-particle.p2{
    left:25%;
    top:70%;
}

.isection-particle.p3{
    left:50%;
    top:15%;
}

.isection-particle.p4{
    left:70%;
    top:75%;
}

.isection-particle.p5{
    left:85%;
    top:30%;
}

.isection-particle.p6{
    left:60%;
    top:55%;
}


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

.isection-container{
    width:min(1200px,92%);
    margin:auto;

    display:grid;

    grid-template-columns:
        1.1fr
        .9fr;

    align-items:center;

    gap:60px;

    position:relative;
    z-index:5;
}


/* =========================================================
   CONTENT
========================================================= */

.isection-content{
    position:relative;
    z-index:20;

    color:#ffffff !important;
}


/* =========================================================
   LABEL
========================================================= */

.isection-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:10px 18px;

    border:1px solid rgba(87,199,255,.55);

    border-radius:50px;

    background:rgba(30,120,220,.15);

    color:#66caff !important;

    font-size:13px;
    font-weight:800;

    letter-spacing:1.5px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 20px rgba(50,160,255,.12);
}

.isection-label i{
    color:#58c8ff !important;
    font-size:15px;
}


/* =========================================================
   TITLE
========================================================= */

.isection-title{
    max-width:700px;

    margin:25px 0 22px;

    font-size:58px;

    line-height:1.08;

    font-weight:800;

    letter-spacing:-2px;

    color:#ffffff !important;

    text-shadow:
        0 4px 20px rgba(0,0,0,.45),
        0 0 30px rgba(57,170,255,.18);
}


/* Every span inside title */

.isection-title span{
    display:inline-block;

    color:#ffffff !important;

    text-shadow:
        0 0 18px rgba(76,190,255,.45),
        0 4px 18px rgba(0,0,0,.45);
}


/* Highlight effect */

.isection-title strong{
    color:#54baff !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.isection-description{
    max-width:650px;

    color:#e7f5ff !important;

    font-size:17px;

    line-height:1.8;

    margin-bottom:35px;

    font-weight:400;

    text-shadow:
        0 2px 10px rgba(0,0,0,.45);
}


/* =========================================================
   PHONE / CONTACT
========================================================= */

.isection-contact{
    display:flex;
    align-items:center;

    gap:17px;

    margin-bottom:35px;

    color:#ffffff !important;
}

.isection-phone-icon{
    width:58px;
    height:58px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            145deg,
            #238cff,
            #1644b8
        );

    box-shadow:
        0 10px 30px rgba(35,140,255,.45),
        0 0 25px rgba(35,140,255,.25);
}

.isection-phone-icon i{
    font-size:20px;
    color:#ffffff !important;
}

.isection-phone-text{
    color:#ffffff !important;
}

.isection-phone-text small{
    display:block;

    color:#cdeaff !important;

    margin-bottom:3px;

    font-size:14px;
}

.isection-phone-text h3{
    margin:0;

    font-size:24px;

    letter-spacing:1px;

    color:#ffffff !important;

    text-shadow:
        0 2px 10px rgba(0,0,0,.5);
}


/* =========================================================
   BUTTONS
========================================================= */

.isection-buttons{
    display:flex;

    gap:16px;

    flex-wrap:wrap;
}

.isection-btn{
    min-width:180px;

    padding:15px 22px;

    border-radius:10px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:12px;

    text-decoration:none !important;

    font-weight:700;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        color .35s ease;

    position:relative;

    z-index:10;
}

.isection-btn-primary{
    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #258fff,
            #2452d6
        );

    box-shadow:
        0 12px 30px rgba(35,105,255,.4);
}

.isection-btn-secondary{
    color:#ffffff !important;

    border:1px solid rgba(255,255,255,.45);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(10px);
}

.isection-btn:hover{
    transform:
        translateY(-5px)
        scale(1.03);

    color:#ffffff !important;
}

.isection-btn-primary:hover{
    box-shadow:
        0 18px 45px rgba(35,140,255,.6);
}

.isection-btn-secondary:hover{
    background:#ffffff;

    color:#09214a !important;
}


/* =========================================================
   3D VISUAL
========================================================= */

.isection-visual{
    position:relative;

    height:480px;

    display:flex;

    align-items:center;
    justify-content:center;

    perspective:1000px;
}


/* =========================================================
   RINGS
========================================================= */

.isection-ring{
    position:absolute;

    border-radius:50%;

    border:1px solid rgba(65,181,255,.32);

    transform-style:preserve-3d;

    box-shadow:
        0 0 20px rgba(45,170,255,.08);
}

.ring-one{
    width:420px;
    height:420px;
}

.ring-two{
    width:320px;
    height:320px;

    border-color:rgba(65,181,255,.45);
}

.ring-three{
    width:220px;
    height:220px;

    border-color:rgba(255,255,255,.25);
}


/* =========================================================
   3D MACHINE
========================================================= */

.isection-machine{
    position:relative;

    width:250px;
    height:270px;

    transform-style:preserve-3d;

    transform:
        rotateY(-18deg)
        rotateX(8deg);

    z-index:5;
}

.isection-machine-top{
    position:absolute;

    width:250px;
    height:45px;

    top:0;
    left:0;

    border-radius:12px 12px 5px 5px;

    background:
        linear-gradient(
            145deg,
            #4bbaff,
            #1760c8
        );

    transform:
        translateZ(30px);

    box-shadow:
        0 15px 30px rgba(0,0,0,.3);
}

.isection-machine-body{
    position:absolute;

    width:220px;
    height:190px;

    left:15px;
    top:40px;

    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            #142f5b,
            #071a38
        );

    border:1px solid rgba(255,255,255,.15);

    box-shadow:
        20px 25px 40px rgba(0,0,0,.35);
}

.isection-machine-screen{
    position:absolute;

    width:75px;
    height:45px;

    top:25px;
    left:25px;

    border-radius:5px;

    background:#031326;

    border:1px solid #3d8dcb;

    padding:10px;
}

.isection-machine-screen span{
    display:block;

    width:80%;
    height:3px;

    margin-bottom:5px;

    background:#42baff;

    box-shadow:
        0 0 8px #42baff;
}

.isection-machine-center{
    position:absolute;

    width:100px;
    height:100px;

    right:20px;
    top:60px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        radial-gradient(
            circle,
            #3db8ff,
            #0d3d91 55%,
            #061b3d
        );

    box-shadow:
        0 0 35px rgba(61,184,255,.5),
        0 0 70px rgba(61,184,255,.25);
}

.isection-glow-core{
    width:35px;
    height:35px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:
        0 0 20px #ffffff,
        0 0 50px #48baff,
        0 0 80px rgba(72,186,255,.7);
}

.isection-machine-side{
    position:absolute;

    width:12px;
    height:140px;

    right:-12px;
    top:25px;

    background:#0a2143;

    transform:
        skewY(-20deg);
}

.isection-machine-base{
    position:absolute;

    width:270px;
    height:30px;

    bottom:15px;
    left:-10px;

    border-radius:5px;

    background:
        linear-gradient(
            90deg,
            #102c54,
            #378dcc,
            #102c54
        );

    box-shadow:
        0 15px 30px rgba(0,0,0,.4);
}


/* =========================================================
   FLOATING BADGES
========================================================= */

.isection-badge{
    position:absolute;

    display:flex;

    align-items:center;

    gap:10px;

    padding:13px 17px;

    border-radius:14px;

    background:rgba(17,55,96,.88);

    border:1px solid rgba(117,205,255,.35);

    backdrop-filter:blur(14px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.3),
        0 0 25px rgba(45,160,255,.12);

    z-index:10;

    color:#ffffff !important;
}

.isection-badge i{
    width:40px;
    height:40px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#238fff;

    color:#ffffff !important;

    box-shadow:
        0 0 20px rgba(35,143,255,.45);
}

.isection-badge strong{
    display:block;

    font-size:14px;

    color:#ffffff !important;
}

.isection-badge small{
    display:block;

    color:#d6efff !important;

    margin-top:3px;
}

.badge-quality{
    left:0;
    top:80px;
}

.badge-delivery{
    right:-10px;
    bottom:80px;
}


/* =========================================================
   FORCE TEXT VISIBILITY
   Prevent old/global CSS from overriding this section
========================================================= */

.isection h1,
.isection h2,
.isection h3,
.isection h4,
.isection p,
.isection span,
.isection small,
.isection strong,
.isection a{
    opacity:1 !important;
}


/* Main title */
.isection .isection-title,
.isection .isection-title span{
    color:#ffffff !important;
}


/* Description */
.isection .isection-description{
    color:#eaf7ff !important;
}


/* Phone */
.isection .isection-phone-text small{
    color:#ccecff !important;
}

.isection .isection-phone-text h3{
    color:#ffffff !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

    .isection{
        padding:80px 0;
    }

    .isection-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .isection-content{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .isection-title{
        font-size:48px;
    }

    .isection-description{
        max-width:700px;
    }

    .isection-contact{
        justify-content:center;
    }

    .isection-visual{
        height:430px;
    }
}


@media(max-width:600px){

    .isection{
        padding:70px 0;
        min-height:auto;
    }

    .isection-container{
        width:90%;
        gap:20px;
    }

    .isection-title{
        font-size:36px;
        line-height:1.15;
        letter-spacing:-1px;
    }

    .isection-description{
        font-size:15px;
        line-height:1.7;
    }

    .isection-buttons{
        flex-direction:column;
        width:100%;
    }

    .isection-btn{
        width:100%;
    }

    .isection-visual{
        transform:scale(.72);
        height:360px;
        margin-top:-20px;
    }

    .badge-quality{
        left:-20px;
    }

    .badge-delivery{
        right:-20px;
    }
}