body{
    margin:0;
}

/* SECTION */
.sdhx-hero-section{
    background:#032E4A;
    padding:120px 60px 60px;
    text-align:center;
}

/* TITLE */
.sdhx-title{
    color:#fff;
    font-size:40px;
    margin:70px 0 40px;
}

/* BOX */
.sdhx-carousel-box{
    position:relative;
    width:80%;
    height:550px;
    margin:0 auto;
    border-radius:50px;
    overflow:hidden;
    border:2px solid #fff;
}

/* CAROUSEL */
.sdhx-carousel{
    width:100%;
    height:100%;
    position:relative;
}

.sdhx-slide{
    position:absolute;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:1s;
    border-radius:50px;
}

.sdhx-slide.active{
    opacity:1;
}

/* ARROWS */
.sdhx-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    border:2px solid #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:24px;
    z-index:3;
    background:#032E4A;
    color:#fff;
}

.sdhx-left{ left:-80px; }
.sdhx-right{ right:-80px; }

/* =========================
   CARD GRID ( FIXED)
========================= */
.sdhx-card-wrap{
    max-width: 1200px;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:30px;
    margin-top:-88px;
    justify-items:center;
    margin: 0 auto;
}

/* ITEM */
.sdhx-item{
    width:100%;
    margin-top: -100px;
}

/* CARD */
.sdhx-card-box{
    width:100%;
    position:relative;
    box-shadow:
        0 8px 20px rgba(0,0,0,0.15),
        0 25px 40px rgba(0,0,0,0.25),
        0 50px 80px rgba(0,0,0,0.25);
}

.sdhx-card{
    width:100%;
    padding:60px 20px 25px;
    background:#032E4A;
    border-radius:15px;
    color:#fff;
    text-align:center;
    position:relative;
    -webkit-mask-image: radial-gradient(circle 60px at 50% -10px, transparent 70%, black 71%);
    mask-image: radial-gradient(circle 60px at 50% -10px, transparent 70%, black 71%);
}



/* ICON */
.sdhx-icon{
    position:absolute;
    top:-50px;
    left:50%;
    transform:translateX(-50%);
    width:75px;
    height:75px;
    border-radius:50%;
    background:#2ee59d;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000;
    z-index:1;
}

/* TEXT */
.sdhx-card h3{
    font-size:20px;
    margin-bottom:10px;
    color: #ffffff;
}

.sdhx-card p{
    font-size:13px;
    color:#ffffff8a;
}

/* BUTTON */
.ux-btn{
    display:inline-block;
    margin-top:80px;
    padding:14px 36px;
    border-radius:50px;
    background:linear-gradient(90deg,#e8f0ec,#2ee59d);
    color:#0c2c3f;
    font-weight:600;
    text-decoration:none;
}

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

/* 1200px → 2 card */
@media (max-width:1200px){
    .sdhx-card-wrap{
        grid-template-columns: repeat(2, 1fr);
    }
    .sdhx-item {
        margin-bottom: 150px;
    }
}

/* 992px → 2 card */
@media (max-width:992px){
    .sdhx-card-wrap{
        grid-template-columns: repeat(2, 1fr);
    }

    .sdhx-carousel-box{
        width:95%;
        height:420px;
    }

    .sdhx-left{ left:10px; }
    .sdhx-right{ right:10px; }
}

/* 768px → 1 card */
@media (max-width:768px){
    .sdhx-card-wrap{
        grid-template-columns: 1fr;
    }

    .sdhx-carousel-box{
        width:100%;
        height:300px;
        border-radius:20px;
    }

    .sdhx-slide{
        border-radius:20px;
    }

    .sdhx-arrow{
        width:40px;
        height:40px;
        font-size:18px;
    }
}

/* 480px */
@media (max-width:480px){
    .sdhx-title{ font-size:22px; }
    .sdhx-carousel-box{ height:240px; }
}










/* SECTION */
.procxf-section{
    position:relative;
    height:900px;
    font-family:'Segoe UI',sans-serif;
    background: url("../images/new-service-details/service-details-service-bg.jpeg") no-repeat center center;
    background-size: cover;
}

/* SVG */
.procxf-svg{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
}

.procxf-svg line{
    stroke:#143d4f;
    stroke-width:6;
    stroke-linecap:round;
}

/* .service-progress-stragy-card{
    position:relative;
    transition:all 0.4s ease;
}

.service-progress-stragy-card:hover{
     transform: translateY(-6px);

    filter: brightness(1.08);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.45),
        0 40px 80px rgba(0,0,0,0.5),
        0 0 0 2px rgba(46,229,157,0.8),
        0 0 40px rgba(46,229,157,1);
} */


/* CENTER */
.procxf-center{
    position:absolute;
    top:44%;
    left:50%;
    transform:translate(-50%,-50%);
    width:300px;
    height:300px;
    border-radius:50%;
    background:#35596D;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-align:center;
    z-index:2;
}
.procxf-center::before{
    content:"";
    position:absolute;
    inset:-12px;
    border-radius:50%;
    border:2px solid #1ecf8c;
    z-index: 10;
}
.procxf-center::after{
    content:"";
    position:absolute;
    inset:-24px;
    border-radius:50%;
    border:40px solid #032E4A;
}

.procxf-center h2{
    color: #ffffff;
    font-size: 35px;
}


.procxf-bg {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #032e4a61;
    transform: translateY(-50%);
    z-index: 1;
}

.procxf-bg1{
    top: 170px;
    left: 1083px;
}
.procxf-bg2{
    top: 310px;
    left: 1134px;
}
.procxf-bg3{
    top: 450px;
    left: 1135px;
}
.procxf-bg4{
    top: 590px;
    left: 1085px;
}
.procxf-bg5{
    top: 170px;
    left: 710px;
}
.procxf-bg6{
    top: 310px;
    left: 650px;
}
.procxf-bg7{
    top: 450px;
    left: 650px;
}
.procxf-bg8{
    top: 590px;
    left: 702px;
}

/* CARD */
.procxf-card{
    position:absolute;
    width:600px;
    height:100px;
    border-radius:60px;
    background:linear-gradient(90deg,#0c2c3f 40%, #123e52 60%);
    display:flex;
    align-items:center;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
    isolation:isolate;
    z-index:2;
}


/* CONTENT */
.procxf-inner{
    margin-left:110px;
    color:#fff;
}

.procxf-inner h3{
    color: #ffffff;
}

/* ICON */
.procxf-icon{
    position:absolute;
    width:70px;
    height:70px;
    background:#2ee59d;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    z-index:3;
}



/* STEP */
.procxf-step{
    position:absolute;
    padding:0px 3px;
    border-radius:20px;
    font-size:20px;
    color: #ffffff;
}

/* RIGHT */
.procxf-r1{ top:120px; right:210px; }
.procxf-r2{ top:260px; right:160px; }
.procxf-r3{ top:400px; right:160px; }
.procxf-r4{ top:540px; right:210px; }

.procx-right .procxf-icon{ right:515px; }
.procx-right .procxf-step{ right:10px; }

/* LEFT */
.procxf-l1{ top:120px; left:220px; }
.procxf-l2{ top:260px; left:160px; }
.procxf-l3{ top:400px; left:160px; }
.procxf-l4{ top:540px; left:210px; }

.procx-left .procxf-icon{ left:515px; }
.procx-left .procxf-step{ left:10px; }


/* FLEX FIX */
.d-flax{
    display:flex;
    align-items:center;
    gap:20px;
}

/* LEFT TEXT */
.procxf-inner h3{
    font-size:18px;
    font-weight:700;
    margin-bottom:5px;
    color:#fff;
}

.procxf-inner p{
    font-size:12px;
    color:rgba(255,255,255,0.7);
    line-height:1.4;
    margin:0;
    max-width:200px;
}

/* LIST */
.d-flax ul{
    background: #1ecf8c17;
    list-style:none;
    padding: 20px 10px;
    margin:0;
}

/* LIST ITEM */
.d-flax ul li{
    position:relative;
    font-size:11px;
    color:rgba(255,255,255,0.75);
    margin-bottom:6px;
    padding-left:18px;
    line-height:9px
}

/* ✔ CHECK ICON */
.d-flax ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    font-size:10px;
    color:#2ee59d;
    font-weight:bold;
}

/* FLEX LEFT SIDE */
.d-flax-left{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-left: 112px;
}
.d-flax-left ul{
    background: #1ecf8c17;
    padding: 20px 10px;
}

/* UL LEFT */
.left-list{
    list-style:none;
    padding:0px 15px;
    margin:0;
    text-align:left;
}

.left-list li{
    position:relative;
    font-size:11px;
    color:rgba(255,255,255,0.75);
    margin-bottom:6px;
    padding-left:18px;
    line-height:9px;
}

/* ✔ CHECK ICON */
.left-list li::before{
    content:"✔";
    position:absolute;
    left:0;
    top:0;
    font-size:10px;
    color:#2ee59d;
    font-weight:bold;
}

/* TEXT RIGHT */
.procxf-inner-left{
    max-width:200px;
}

.procxf-inner-left h3{
    font-size:18px;
    font-weight:700;
    margin-bottom:5px;
    color:#fff;
}

.procxf-inner-left p{
    font-size:12px;
    color:rgba(255,255,255,0.7);
    line-height:1.4;
    margin:0;
}











/* =========================
   SECTION
========================= */
.uxsvc-section{
    background:#08364a;
    padding:70px 20px;
    font-family:'Segoe UI', sans-serif;
    text-align:center;
}

/* =========================
   TITLE
========================= */
.uxsvc-title{
    color:#fff;
    font-size:34px;
    margin-bottom:70px;
}

/* =========================
   GRID
========================= */
.uxsvc-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    align-items:stretch;
    max-width:1500px;
    margin:0 auto;
}

/* =========================
   CARD
========================= */
.uxsvc-card{
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
    transition: 
        transform 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;
}

/* IMAGE FIX (🔥 no cut issue) */
.uxsvc-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:18px 18px 0 0;
}

/* =========================
   BOTTOM
========================= */
.uxsvc-bottom{
    background:#a8e6cf;
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.uxsvc-bottom span{
    color:#032E4A;
    font-size:22px;
    text-align:left;
}

/* =========================
   ICON
========================= */
.uxsvc-icon{
    width:30px;
    height:30px;
    border-radius:50%;
    background:#2ee59d;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.uxsvc-icon i{
    position:absolute;
    font-size:20px;
    transition:.3s;
}

/* ICON STATE */
.arrow-down{
    opacity:1;
    transform:translateY(0);
}
.arrow-up{
    opacity:0;
    transform:translateY(-10px);
}

.uxsvc-card.active .arrow-down{
    opacity:0;
    transform:translateY(10px);
}
.uxsvc-card.active .arrow-up{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   ACCORDION
========================= */
.uxsvc-accordion{
    max-height:0;
    overflow:hidden;
    transition:.4s;
    text-align:left;
}

/* ACTIVE */
.uxsvc-card.active{
    grid-row:span 2;
    border:2px solid #2ee59d;
}

/* OPEN */
.uxsvc-card.active .uxsvc-accordion{
    max-height:220px;
    padding:20px;
}

/* LIST */
.uxsvc-accordion ul{
    list-style:none;
    padding:10px;
}

.uxsvc-accordion li{
    color:#fff;
    font-size:13px;
    margin-bottom:10px;
    position:relative;
    padding-left:18px;
}

.uxsvc-accordion li::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#2ee59d;
}

/* =========================
   HOVER
========================= */
.uxsvc-card:hover{
    transform: translateY(-8px);
    box-shadow:
        0 20px 40px rgba(0,0,0,0.4),
        0 40px 80px rgba(0,0,0,0.45),
        0 0 0 2px rgba(46,229,157,0.6),
        0 0 25px rgba(46,229,157,0.8);
    filter: brightness(1.05);
}

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

/* 1200px */
@media (max-width:1200px){
    .uxsvc-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* 992px */
@media (max-width:992px){
    .uxsvc-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .uxsvc-bottom span{
        font-size:20px;
    }

    .uxsvc-card img{
        height:180px;
    }
}

/* 768px */
@media (max-width:768px){
    .uxsvc-grid{
        grid-template-columns:1fr;
    }

    .uxsvc-title{
        font-size:26px;
    }

    .uxsvc-bottom span{
        font-size:18px;
    }

    .uxsvc-card img{
        height:350px;
    }
}

/* 480px */
@media (max-width:480px){
    .uxsvc-section{
        padding:50px 15px;
    }

    .uxsvc-title{
        font-size:22px;
    }

    .uxsvc-bottom{
        padding:14px;
    }

    .uxsvc-bottom span{
        font-size:16px;
    }

    .uxsvc-card img{
        height:200px;
    }

    .uxsvc-icon{
        width:26px;
        height:26px;
    }
}














/* SECTION */
.mx-industry{
    background:#08364a;
    padding:80px 20px;
    text-align:center;
    font-family:'Segoe UI', sans-serif;
}

/* TITLE */
.mx-title{
    color:#fff;
    font-size:34px;
    margin-bottom:50px;
}

.mx-wrapper{
    position:relative;
    max-width:1200px;
    margin:auto;
    padding-top:10px;
}

.mx-slider{
    overflow:hidden;
    padding-top:10px;
}

/* TRACK */
.mx-track{
    display:flex;
    gap:25px;
    transition:transform 0.5s ease;
    padding-top:10px;
}

/* CARD */
.mx-card{
    min-width:calc((100% - 75px) / 4);
    height:320px;
    border-radius:20px;
    overflow:hidden;
    position:relative;
}

/* IMAGE */
.mx-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 0.4s ease;
}

.mx-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(46,229,157,0.35), transparent);
    opacity:0;
    transition:0.3s;
}



/* HOVER */
.mx-card:hover img{
    transform:scale(1.08);
}

.mx-card:hover{
    transform:translateY(-6px); 
}

.mx-card::after{
    opacity:0;
    transition:0.3s;
}

.mx-card:hover::after{
    opacity:1;
}


.mx-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    border:2px solid #fff;
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(6px);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    z-index:10;
    transition:0.3s;
}

.mx-nav:hover{
    background:#2ee59d;
    border-color:#2ee59d;
    color:#000;
}

/* POSITION */
.mx-nav-left{ left:-70px; }
.mx-nav-right{ right:-70px; }








/* case study section */
.case-section {
    background: #032E4A;
    padding: 80px 20px;
}

/* HEADER */
.case-header {
    text-align: center;
    color: #fff;
}

.case-header h2 {
    font-size: 40px;
    margin-bottom: 10px;
    color: #ffffff;
}

.case-header p {
    opacity: 0.8;
    margin-bottom: 20px;
    color: #ffffff;
    font-size: 20px;
}

/* FILTER */
.case-filter {
    display: inline-flex;
    background: #244d5d;
    border-radius: 6px;
    gap: 5px;
    margin-bottom: 50px;
}

.case-filter button {
    border: none;
    padding: 8px 16px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: 6px;
}

.case-filter .active {
    background: #00d084;
    color: #000;
}

/* GRID */
.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    max-width: 1500px;
    margin: 0 auto;
}

/* CARD */
.case-card {
    background: #BAF7DC;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
}

.case-card:hover {
    transform: translateY(-10px);
}

/* IMAGE */
.case-card img {
    width: 100%;
    height: 300px;
    border-radius: 20px;
}

/* CONTENT */
.case-content {
    padding: 20px;
    color: #0b3a4a;
}

.case-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #032E4A;
}

.case-content p {
    font-size: 16px;
    margin-bottom: 15px;
    color: #032E4A;
}

.case-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 200px;

    background: #0b3a4a;
    color: #fff;
    padding: 8px 10px 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;

    margin: 20px auto 0;
}

/* TEXT */
.case-btn span {
    color: #fff;
}

/* ICON ( MAIN PART) */
.case-btn i {
    background: #00d084;
    color: #0b3a4a;
    width: 35px;
    height: 35px;
    border-radius: 50%;

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

    font-size: 20px;
}

/* FOOTER */
.case-footer {
    text-align: center;
    margin-top: 40px;
}

.view-all {
    background: #cfeee2;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    color: #000;
    font-weight: 600;
}



@media (max-width: 992px) {

    .case-header h2 {
        font-size: 32px;
    }

    .case-header p {
        font-size: 18px;
    }

    .case-grid {
        grid-template-columns: repeat(2, 1fr); /* 3 → 2 */
        gap: 25px;
    }

    .case-card img {
        height: 250px;
    }

    .case-btn {
        font-size: 18px;
        width: 180px;
    }
}


@media (max-width: 768px) {

    .case-section {
        padding: 60px 15px;
    }

    .case-header h2 {
        font-size: 26px;
    }

    .case-header p {
        font-size: 16px;
    }
    .case-filter {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .case-filter button {
        padding: 6px 12px;
        font-size: 14px;
    }

    .case-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .case-card img {
        height: 350px;
    }

    .case-content h3 {
        font-size: 18px;
    }

    .case-content p {
        font-size: 14px;
    }

    .case-btn {
        width: 160px;
        font-size: 16px;
        padding: 6px 8px 6px 14px;
    }

    .case-btn i {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {

    .case-header h2 {
        font-size: 22px;
    }

    .case-header p {
        font-size: 14px;
    }

    .case-card img {
        height: 200px;
    }

    .case-btn {
        width: 140px;
        font-size: 14px;
    }
}












/* SECTION */
.nx-service-alt {
    padding: 80px 20px;
    position: relative;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
}

/* HEADER */
.nx-service-alt-header {
    position: relative;
    padding: 60px 20px 30px;
    margin-bottom: 40px;
}

.nx-service-atl-gradian {
    position: relative;
    padding: 60px 20px;
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    overflow: hidden;
}

/* PERFECT TOP GLOW */
.nx-service-atl-gradian::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 37px;
    background: radial-gradient(ellipse at top center, rgba(0, 220, 140, 0.9) 0%, /* strong top color */ rgb(0 220 140 / 77%) 25%, rgb(0 220 140 / 98%) 50%, rgb(0 220 140 / 76%) 70%, transparent 100%);
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    filter: blur(8px);
    border-top-left-radius: 120px;
    border-top-right-radius: 120px;
    filter: blur(10px); /* smooth fade */
}
/* TITLE */
.nx-service-alt-header h2 {
    position: relative;
    font-size: 32px;
    font-weight: 700;
    color: #0f2b3a;
}


/* WRAPPER = VIEWPORT */
.nx-service-alt-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 1200px; /* EXACT 4 cards */
    margin: auto;
    overflow: visible;

}

.nx-slider-viewport {
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    scroll-behavior: smooth; 
}
/* SLIDER */
.nx-service-alt-slider {
    display: flex;
    gap: 25px;
}

/* CARD */
.nx-alt-card {
    flex: 0 0 auto;
    flex: 0 0 calc((100% - 75px) / 4); 
    background: #032E4A;
    border-radius: 20px;
}
/* IMAGE */
.nx-alt-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 20px;

}

/* CONTENT */
.nx-alt-content {
    padding: 20px;
    color: #fff;
    text-align: left;
}

.nx-alt-content h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #ffffff;
}

.nx-alt-content p {
    font-size: 14px;
    color: #ffffffa1;
}
.nx2-prev,
.nx2-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;

    background: #d8f3e8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nx2-prev { left: -70px; }
.nx2-next { right: -70px; }

.nx2-prev i,
.nx2-next i {
    color: #032E4A;
    font-size: 18px;
}

.nx2-prev:hover,
.nx2-next:hover {
    background: #baf0db;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 200, 120, 0.25);
}