.page-banner {
    margin-top: -128px;
    padding: 120px 0 7px;
    background: linear-gradient( 135deg, #051937, #082A5A );
    position: relative;
    overflow: hidden;
}

    /* Glow */

    .page-banner::before {
        content: '';
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        background: #20C997;
        filter: blur(150px);
        opacity: .15;
        top: -150px;
        right: -100px;
    }

.banner-wrapper {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 50px;
    padding: 40px 0 0 0;
    align-items: center;
}

.banner-badge {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    color: #20C997;
    border: 1px solid rgba(255,255,255,.1);
    margin-bottom: 25px;
}

.banner-content h1 {
    color: #fff;
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 25px;
}

    .banner-content h1 span {
        color: #20C997;
    }

.banner-content p {
    color: #D8E8FF;
    max-width: 550px;
    line-height: 1.8;
    margin-bottom: 35px;
}

.breadcrumb-box {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 25px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(15px);
}

    .breadcrumb-box a {
        color: #fff;
        text-decoration: none;
    }

    .breadcrumb-box span:last-child {
        color: #20C997;
    }

.banner-image {
    text-align: center;
}

    .banner-image img {
        width: 100%;
        margin-bottom: -20px;
        max-width: 300px;
        animation: floatDoctor 5s ease-in-out infinite;
    }

@keyframes floatDoctor {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.banner-content {
    animation: slideLeft 1s ease forwards;
}

.banner-image {
    animation: slideRight 1s ease forwards;
}

@keyframes slideLeft {

    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {

    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* Responsive */

@media(max-width:991px) {

    .banner-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .banner-content p {
        margin: auto auto 35px;
    }

    .banner-content h1 {
        font-size: 52px;
    }

    .banner-image {
        margin-top: 30px;
    }
}

@media(max-width:576px) {

    .page-banner {
        padding: 150px 0 60px;
    }

    .banner-content h1 {
        font-size: 38px;
    }
}

.banner-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient( rgba(255,255,255,.03) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.03) 1px, transparent 1px );
    background-size: 60px 60px;
    animation: gridMove 12s linear infinite;
    pointer-events: none;
}

@keyframes gridMove {

    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(60px);
    }
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .25;
    animation: floatGlow 8s ease-in-out infinite;
}

.glow-1 {
    width: 300px;
    height: 300px;
    background: #20C997;
    top: 10%;
    left: -100px;
}

.glow-2 {
    width: 350px;
    height: 350px;
    background: #0D6EFD;
    right: -100px;
    top: 20%;
    animation-delay: 2s;
}

.glow-3 {
    width: 250px;
    height: 250px;
    background: #22D3EE;
    bottom: -80px;
    left: 40%;
    animation-delay: 4s;
}

@keyframes floatGlow {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-40px);
    }

    100% {
        transform: translateY(0px);
    }
}


/*=========================================
 CARDIOLOGY PREMIUM SECTION
=========================================*/

.cardio-premium {
    position: relative;
    padding: 60px 0;
    overflow: hidden;
    
}

.cardio-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.cardio-content h2 {
    font-size: 58px;
    line-height: 1.1;
    margin: 20px 0;
    color: #081B3D;
}

    .cardio-content h2 span {
        display: block;
        background: linear-gradient( 90deg, #0D6EFD, #20C997 );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.cardio-content p {
    font-size: 18px;
    color: #64748B;
    line-height: 1.9;
    margin-bottom: 35px;
}

.cardio-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 40px;
}

.list-item {
    background: #fff;
    padding: 18px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: .4s;
}

    .list-item:hover {
        transform: translateY(-6px);
    }

    .list-item i {
        color: #0D6EFD;
        font-size: 20px;
    }

.cardio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 35px;
    border-radius: 50px;
    background: linear-gradient( 135deg, #0D6EFD, #20C997 );
    color: #fff;
    font-weight: 700;
}

/* Right Side */

.cardio-image {
    position: relative;
    text-align: center;
}

    .cardio-image img {
        width: 100%;
        max-width: 520px;
        position: relative;
        z-index: 2;
        animation: floatDoctor 4s ease-in-out infinite;
    }

@keyframes floatDoctor {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.floating-card {
    position: absolute;
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(20px);
    padding: 18px 24px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,.08);
    z-index: 3;
}

.card-1 {
    left: 0;
    top: 15%;
    animation: floatCard 4s ease infinite;
}

.card-2 {
    right: 0;
    bottom: 15%;
    animation: floatCard 5s ease infinite;
}

@keyframes floatCard {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Pulse Ring */

.pulse-ring {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    border: 2px solid rgba(13,110,253,.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation: pulse 3s linear infinite;
}

@keyframes pulse {

    0% {
        transform: translate(-50%,-50%) scale(.9);
        opacity: 1;
    }

    100% {
        transform: translate(-50%,-50%) scale(1.3);
        opacity: 0;
    }
}

/* Background Shapes */

.floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
}

.shape-1 {
    width: 350px;
    height: 350px;
    background: rgba(13,110,253,.12);
    left: -100px;
    top: -50px;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: rgba(32,201,151,.10);
    right: -100px;
    bottom: -100px;
}
@media(max-width:991px) {

    .cardio-wrapper {
        grid-template-columns: 1fr;
    }

    .cardio-content {
        text-align: center;
    }

    .cardio-list {
        grid-template-columns: 1fr;
    }

    .cardio-content h2 {
        font-size: 42px;
    }

    .floating-card {
        display: none;
    }
}





/*=====================================
 HEART ROADMAP
=====================================*/
.ortho-ecosystem {
    padding: 120px 0;
    background: #f8fbff;
    overflow: hidden;
}

.ecosystem-heading {
    text-align: center;
    max-width: 750px;
    margin: auto auto 80px;
}

.ecosystem-wrapper {
    position: relative;
    width: 700px;
    height: 700px;
    margin: auto;
}

.ecosystem-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.center-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(32,201,151,.25), transparent 70% );
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.ecosystem-center img {
    width: 320px;
    position: relative;
    z-index: 2;
}

.orbit-card {
    position: absolute;
    padding: 18px 28px;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    font-weight: 700;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
    animation: floatCard 4s ease-in-out infinite;
}

.orbit-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-2 {
    top: 20%;
    left: 0;
}

.orbit-3 {
    top: 20%;
    right: 0;
}

.orbit-4 {
    bottom: 20%;
    left: 0;
}

.orbit-5 {
    bottom: 20%;
    right: 0;
}

.orbit-6 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes floatCard {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}
@media(max-width:991px) {

    .ecosystem-wrapper {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .ecosystem-center {
        position: relative;
        transform: none;
        grid-column: 1/3;
        text-align: center;
    }

    .orbit-card {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
    }
}

.cardio-excellence {
    padding: 60px 0;
    /*background: linear-gradient(180deg, #f8fbff 0%, #c5dbef 100%);*/
}
    .cardio-excellence-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.cardio-left img {
    margin-top: 40px;
    max-width: 550px;
    animation: floatDoctor 4s ease-in-out infinite;
}

.cardio-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.trust-card {
    background: #fff;
    padding: 35px;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,.06);
    transition: .4s;
}
    .trust-card:nth-child(1),
    .trust-card:nth-child(3) {
        background: linear-gradient(180deg, #f8fbff 0%, #c6f8de 100%);
        margin-bottom: 20px;
    }

    .trust-card:nth-child(2),
    .trust-card:nth-child(4) {
        background: linear-gradient(180deg, #f8fbff 0%, #c6f8de 100%);
        margin-top: 20px;
    }

    .trust-card:hover {
        transform: translateY(-15px);
    }

    .trust-card h3 {
        font-size: 48px;
        background: linear-gradient(135deg,#0D6EFD,#20C997);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .trust-card span {
        color: #64748B;
    }




.dental-about {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.dental-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.dental-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    color: #20C997;
    font-weight: 700;
}

.dental-content h2 {
    font-size: 58px;
    line-height: 1.05;
    margin: 25px 0;
    color: #081B3D;
}

    .dental-content h2 span {
        display: block;
        background: linear-gradient(135deg,#0D6EFD,#20C997);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.dental-content p {
    font-size: 18px;
    color: #64748B;
    line-height: 1.9;
    max-width: 600px;
    margin-bottom: 40px;
}

.dental-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.feature-box {
    background: #fff;
    padding: 22px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: .4s;
}

    .feature-box:hover {
        transform: translateY(-8px);
    }

    .feature-box i {
        color: #20C997;
        font-size: 24px;
    }

.dental-btns {
    display: flex;
    align-items: center;
    gap: 25px;
}

.dental-btn {
    padding: 18px 35px;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg,#0D6EFD,#20C997);
}

.help-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .help-box i {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(32,201,151,.12);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #20C997;
    }

    .help-box h4 {
        color: #081B3D;
    }

.dental-image {
    position: relative;
    text-align: center;
}

.tooth-circle {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32,201,151,.18), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.dental-image img {
    max-width: 520px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.floating-card {
    position: absolute;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(20px);
    padding: 15px 22px;
    border-radius: 18px;
    box-shadow: 0 15px 30px rgba(0,0,0,.08);
    z-index: 3;
}

.card-1 {
    left: 0;
    top: 25%;
}

.card-2 {
    right: 0;
    bottom: 20%;
}
@media(max-width:991px) {

    .dental-wrapper {
        grid-template-columns: 1fr;
    }

    .dental-content {
        text-align: center;
    }

        .dental-content h2 {
            font-size: 48px;
        }

    .dental-features {
        grid-template-columns: 1fr;
    }

    .floating-card {
        display: none;
    }
}
.dental-why {
    padding: 60px 0;
    background: #f8fbff;
    overflow: hidden;
}

.dental-why-wrap {
    display: block;
    gap: 80px;
    align-items: center;
}

.dental-why-image {
    position: relative;
    text-align: center;
}

.image-bg {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32,201,151,.25), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.dental-why-image img {
    max-width: 450px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.floating-badge {
    position: absolute;
    background: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 15px 30px rgba(0,0,0,.08);
    z-index: 3;
    font-weight: 700;
}

.badge-1 {
    top: 20%;
    left: 0;
}

.badge-2 {
    bottom: 20%;
    right: 0;
}

.dental-why-content p {
    color: #64748B;
    text-align: center;
    line-height: 1.8;
    margin: 20px 0 35px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.why-card {
    background: #fff;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0,0,0,.05);
    transition: .4s;
}

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

    .why-card i {
        font-size: 32px;
        margin-bottom: 15px;
        color: #20C997;
    }

    .why-card h4 {
        font-size: 22px;
        margin-bottom: 10px;
        color: #081B3D;
    }

    .why-card p {
        margin: 0;
        text-align: left;
    }
@media(max-width:991px) {

    .dental-why-wrap {
        grid-template-columns: 1fr;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .floating-badge {
        display: none;
    }

    .dental-why-content {
        text-align: center;
    }

    .dental-why-image img {
        max-width: 320px;
    }
}

.dental-difference {
    padding: 60px 0;
    overflow: hidden;
}

.difference-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    margin-top: 80px;
}

    .difference-row.reverse .difference-image {
        order: 2;
    }

    .difference-row.reverse .difference-content {
        order: 1;
    }

.difference-image {
    position: relative;
}

    .difference-image img {
        width: 100%;
        border-radius: 30px;
        display: block;
        transition: .6s;
    }

    .difference-image:hover img {
        transform: scale(1.04);
    }

.difference-content {
    padding: 20px;
}

.difference-icon {
    width: 90px;
    height: 90px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #0D6EFD, #20C997 );
    color: #fff;
    font-size: 34px;
    margin-bottom: 25px;
    box-shadow: 0 20px 40px rgba(13,110,253,.20);
}

.difference-content h3 {
    font-size: 36px;
    color: #081B3D;
    margin-bottom: 20px;
}

.difference-content p {
    color: #64748B;
    line-height: 1.9;
    font-size: 17px;
}

.difference-image::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(32,201,151,.12);
    filter: blur(60px);
    top: -40px;
    left: -40px;
    z-index: -1;
}

.difference-image::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(13,110,253,.10);
    filter: blur(60px);
    bottom: -30px;
    right: -30px;
    z-index: -1;
}
@media(max-width:991px) {

    .difference-row {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 60px;
    }

        .difference-row.reverse .difference-image,
        .difference-row.reverse .difference-content {
            order: unset;
        }

    .difference-content {
        text-align: center;
    }

    .difference-icon {
        margin: 0 auto 20px;
    }

    .difference-content h3 {
        font-size: 28px;
    }
}


.neuro-conditions {
    padding: 60px 0;
    background: #fff;
}

.condition-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    margin-top: 60px;
}

.condition-card {
    background: #fff;
    padding: 35px;
    border-radius: 25px;
    text-align: center;
    border: 1px solid #e5eef8;
    box-shadow: 0 15px 40px rgba(0,0,0,.05);
    transition: .4s;
}

    .condition-card:hover {
        transform: translateY(-10px);
        border-color: #0D6EFD;
    }

    .condition-card i {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg,#0D6EFD,#20C997);
        color: #fff;
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
    }

    .condition-card h3 {
        margin-bottom: 15px;
        color: #081B3D;
    }

    .condition-card p {
        color: #64748B;
        line-height: 1.7;
    }
@media(max-width:991px) {

    .condition-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:767px) {

    .condition-grid {
        grid-template-columns: 1fr;
    }
}
/*=============================
 NEURO EXPERTISE PREMIUM
==============================*/

.neuro-expertise-v2 {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient( 180deg, #ffffff 0%, #f5faff 100%);
}

.neuro-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
}

.shape-1 {
    width: 350px;
    height: 350px;
    background: rgba(13,110,253,.15);
    top: -100px;
    left: -100px;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: rgba(32,201,151,.12);
    right: -150px;
    bottom: -150px;
}

.neuro-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-top: 70px;
}

.neuro-image-box {
    position: relative;
    text-align: center;
}

.neuro-circle {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,110,253,.15), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.neuro-image-box img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 500px;
}

.floating-info {
    position: absolute;
    z-index: 3;
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(20px);
    padding: 15px 22px;
    border-radius: 18px;
    font-weight: 700;
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.info-1 {
    left: 0;
    top: 20%;
}

.info-2 {
    right: 0;
    bottom: 20%;
}

.neuro-content-box {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.neuro-card {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(20px);
    padding: 30px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 20px 50px rgba(0,0,0,.05);
    transition: .4s;
}

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

    .neuro-card.active {
        background: linear-gradient( 135deg, #0D6EFD, #20C997);
        color: #fff;
    }

.card-icon {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    background: linear-gradient( 135deg, #0D6EFD, #20C997);
}

.neuro-card.active .card-icon {
    background: rgba(255,255,255,.2);
}

.neuro-card h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.neuro-card p {
    line-height: 1.8;
    color: inherit;
}
@media(max-width:991px) {

    .neuro-main-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .floating-info {
        display: none;
    }

    .neuro-content-box {
        gap: 18px;
    }

    .neuro-card {
        flex-direction: column;
        text-align: center;
    }

    .card-icon {
        margin: auto;
    }
}
.neuro-tech {
    padding: 60px 0;
    background: linear-gradient( 135deg, #061B47, #0A4EA3 );
}

.tech-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 25px;
}

.large-card {
    grid-row: span 2;
    overflow: hidden;
}

.tech-card {
    background: #fff;
    border-radius: 30px;
    padding: 35px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.05);
    transition: .4s;
}

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

.tech-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 25px;
}

.tech-card i {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    background: linear-gradient( 135deg, #0D6EFD, #20C997);
    margin-bottom: 20px;
}

.tech-content span {
    color: #0D6EFD;
    font-weight: 700;
}

.tech-card h3 {
    margin: 15px 0;
    color: #081B3D;
    font-size: 24px;
}

.tech-card p {
    color: #64748B;
    line-height: 1.8;
}
@media(max-width:991px) {

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .large-card {
        grid-row: auto;
    }
}


.ortho-about {
    padding: 90px 0 30px;
    background: #fff;
    overflow: hidden;
}

.ortho-about-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.ortho-about-image {
    position: relative;
    text-align: center;
}

.ortho-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(32,201,151,.18), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.ortho-about-image img {
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 2;
}

.floating-box {
    position: absolute;
    z-index: 3;
    background: #fff;
    padding: 16px 24px;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.box-1 {
    top: 18%;
    left: 0;
}

.box-2 {
    bottom: 18%;
    right: 0;
}

.ortho-about-content p {
    color: #64748B;
    line-height: 1.9;
    margin-bottom: 20px;
}

.ortho-features {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 18px;
    margin-top: 35px;
}

.feature-item {
    background: #fff;
    padding: 20px;
    border-radius: 18px;
    font-weight: 700;
    color: #081B3D;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
    transition: .3s;
}

    .feature-item:hover {
        transform: translateY(-6px);
    }

    .feature-item i {
        color: #20C997;
        margin-right: 10px;
    }

@media(max-width:991px) {

    .ortho-about-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .floating-box {
        display: none;
    }

    .ortho-features {
        grid-template-columns: 1fr;
    }

    .ortho-about-content {
        text-align: center;
    }
}

.ortho-specialties {
    padding: 0 0 60px;
    background: #fff;
}

.specialty-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 280px;
    gap: 25px;
    margin-top: 60px;
}

.large-card {
    grid-row: span 2;
}

.specialty-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    cursor: pointer;
    transition: .4s;
}

    .specialty-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .8s;
    }

.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(8,27,61,.95), rgba(8,27,61,.2) );
    z-index: 1;
}

.card-content {
    position: absolute;
    left: 25px;
    bottom: 25px;
    z-index: 2;
    color: #fff;
}

    .card-content span {
        display: inline-block;
        background: #20C997;
        padding: 8px 15px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .card-content h3 {
        font-size: 28px;
    }

    .card-content p {
        margin-top: 12px;
        max-width: 320px;
    }

.specialty-card:hover img {
    transform: scale(1.12);
}

.specialty-card:hover {
    transform: translateY(-8px);
}
@media(max-width:991px) {

    .specialty-grid {
        grid-template-columns: 1fr;
    }

    .large-card {
        grid-row: auto;
    }
}


.cardio-scan-section {
    padding: 90PX;
    background: #f8fbff;
    overflow: hidden;
}

.scan-heading {
    text-align: left;
    max-width: 850px;
}

.scan-wrapper {
    display: grid;
    grid-template-columns: 770px 1fr;
    gap: 80px;
    align-items: center;
}

.scan-center {
    position: relative;
    text-align: center;
}

    .scan-center img {
        width: 100%;
        max-width: 420px;
        position: relative;
        z-index: 2;
    }

.scan-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(13,110,253,.15), transparent 70%);
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.scan-line {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 300px;
    height: 6px;
    border-radius: 50px;
    background: linear-gradient( 90deg, transparent, #20C997, #0D6EFD, transparent);
    box-shadow: 0 0 25px #20C997;
    animation: heartScan 4s linear infinite;
    z-index: 5;
}

@keyframes heartScan {

    0% {
        top: 8%;
    }

    100% {
        top: 88%;
    }
}

.scan-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.scan-card {
    background: #fff;
    padding: 25px;
    border-radius: 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
    transition: .4s;
}

    .scan-card:hover {
        transform: translateX(10px);
    }

.scan-icon {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient( 135deg, #0D6EFD, #20C997);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    flex-shrink: 0;
}

.scan-card h3 {
    margin-bottom: 8px;
    color: #081B3D;
}

.scan-card p {
    color: #64748B;
    line-height: 1.7;
}














/* new css  */

@media (max-width:768px) {

    .scan-wrapper {
        display: block;
    }

    .scan-center {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 35px;
    }

        .scan-center img {
            width: 220px; /* apne hisab se 200-250px kar sakte ho */
            max-width: 220px;
            height: auto;
        }

    .scan-heading {
        display: block;
    }

    .scan-card {
        margin: 0 0 15px !important;
    }

    .scan-services {
        width: 100%;
    }

        .scan-services .section-title {
            text-align: center !important;
            margin-bottom: 25px;
        }
}
@media (max-width:768px) {

    .scan-wrapper {
        display: flex;
        flex-direction: column;
    }
    .scan-services {
        display: grid;
         grid-template-columns: none; 
        gap: 30px;
    }
    .cardio-scan-section {
        padding: 0;
    }
        .scan-center {
        order: 1;
    }

    .scan-services {
        order: 2;
    }

    .scan-center img {
        width: 220px;
        max-width: 220px;
    }
}

/*=========================================
        AEPS NETWORK SECTION
=========================================*/

.dx-aeps-network {
    position: relative;
    padding: 110px 0;
    background: #fff;
    overflow: hidden;
}

    .dx-aeps-network::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        left: -220px;
        top: -220px;
      /*  background: radial-gradient(circle,#0A4EA312 0%,transparent 70%);*/
        border-radius: 50%;
    }

    .dx-aeps-network::after {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        right: -180px;
        bottom: -180px;
       /* background: radial-gradient(circle,#22c7b812 0%,transparent 70%);*/
        border-radius: 50%;
    }

/*================ Heading ================*/

.dx-aeps-heading {
    text-align: center;
    max-width: 1320px;
    margin: auto;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.dx-aeps-tag {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 50px;
    background: #eaf8f6;
    color: #18b7aa;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    margin-bottom: 20px;
}

.dx-aeps-heading h2 {
    font-size: 54px;
    line-height: 1.1;
    color: #081B3D;
    margin-bottom: 20px;
    font-weight: 800;
}

    .dx-aeps-heading h2 span {
        
        background: linear-gradient(90deg,#0D6EFD,#20C997);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.dx-aeps-heading p {
    color: #64748b;
    font-size: 17px;
    line-height: 30px;
}

/*================ Wrapper ================*/

.dx-network-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 360px 1fr;
    gap: 70px;
    align-items: center;
    z-index: 2;
}

/*================ Left Right ================*/

.dx-network-side {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*================ Boxes ================*/

.dx-network-box {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid #edf3fb;
    position: relative;
    transition: .4s;
    box-shadow: 0 18px 45px rgba(10,78,163,.08);
}

    .dx-network-box:hover {
        transform: translateY(-8px);
        border-color: #22c7b8;
        box-shadow: 0 22px 55px rgba(10,78,163,.18);
    }

    .dx-network-box::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        border-radius: 30px;
        background: linear-gradient(90deg,#0D6EFD,#20C997);
    }

.dx-step {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
}

.dx-network-box h3 {
    color: #081B3D;
    font-size: 23px;
    margin-bottom: 12px;
}

.dx-network-box p {
    color: #6b7c92;
    line-height: 28px;
}

/*================ Center Circle ================*/

.dx-network-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dx-center-ring {
    width: 330px;
    height: 330px;
    border-radius: 50%;
    padding: 16px;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    animation: ringRotate 18s linear infinite;
}

.dx-center-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 25px 60px rgba(10,78,163,.15);
}

    .dx-center-circle i {
        font-size: 65px;
        margin-bottom: 20px;
        background: linear-gradient(90deg,#0D6EFD,#20C997);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .dx-center-circle h3 {
        font-size: 34px;
        color: #081B3D;
        line-height: 1.2;
    }

    .dx-center-circle span {
        display: block;
        color: #22c7b8;
    }

/*================ Lines ================*/

.dx-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    opacity: .35;
}

.line-left-top {
    width: 130px;
    left: 30%;
    top: 28%;
}

.line-left-bottom {
    width: 130px;
    left: 30%;
    bottom: 28%;
}

.line-right-top {
    width: 130px;
    right: 30%;
    top: 28%;
}

.line-right-bottom {
    width: 130px;
    right: 30%;
    bottom: 28%;
}

/*================ Animation ================*/

@keyframes ringRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

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

@media(max-width:1200px) {

    .dx-network-wrapper {
        grid-template-columns: 1fr 300px 1fr;
        gap: 40px;
    }

    .dx-center-ring {
        width: 280px;
        height: 280px;
    }

    .dx-center-circle h3 {
        font-size: 28px;
    }

    .dx-network-box {
        padding: 24px;
    }

        .dx-network-box h3 {
            font-size: 20px;
        }

    .line-left-top,
    .line-left-bottom {
        width: 90px;
    }

    .line-right-top,
    .line-right-bottom {
        width: 90px;
    }
}

/*================ Tablet =================*/

@media(max-width:991px) {

    .dx-aeps-network {
        padding: 80px 0;
    }

    .dx-aeps-heading {
        margin-bottom: 55px;
    }

        .dx-aeps-heading h2 {
            font-size: 42px;
        }

    .dx-network-wrapper {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .dx-network-center {
        order: 1;
    }

    .dx-network-side:first-child {
        order: 2;
    }

    .dx-network-side:last-child {
        order: 3;
    }

    .dx-center-ring {
        width: 250px;
        height: 250px;
    }

    .dx-center-circle i {
        font-size: 55px;
    }

    .dx-center-circle h3 {
        font-size: 26px;
    }

    .dx-network-side {
        gap: 20px;
    }

    .dx-line {
        display: none;
    }
}

/*================ Mobile =================*/

@media(max-width:767px) {

    .dx-aeps-network {
        padding: 70px 0;
    }

    .dx-aeps-heading {
        margin-bottom: 40px;
    }

        .dx-aeps-heading h2 {
            font-size: 34px;
        }

        .dx-aeps-heading p {
            font-size: 15px;
            line-height: 28px;
        }

    .dx-center-ring {
        width: 220px;
        height: 220px;
    }

    .dx-center-circle {
        padding: 20px;
    }

        .dx-center-circle i {
            font-size: 45px;
            margin-bottom: 15px;
        }

        .dx-center-circle h3 {
            font-size: 22px;
        }

    .dx-network-box {
        padding: 22px;
    }

        .dx-network-box h3 {
            font-size: 19px;
        }

        .dx-network-box p {
            font-size: 14px;
            line-height: 25px;
        }

    .dx-step {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }
}

/*================ Small Mobile =================*/

@media(max-width:480px) {

    .dx-aeps-heading h2 {
        font-size: 30px;
    }

    .dx-aeps-tag {
        font-size: 12px;
        padding: 8px 16px;
    }

    .dx-center-ring {
        width: 190px;
        height: 190px;
        padding: 12px;
    }

    .dx-center-circle i {
        font-size: 38px;
    }

    .dx-center-circle h3 {
        font-size: 18px;
    }

    .dx-network-box {
        border-radius: 18px;
        padding: 18px;
    }

        .dx-network-box h3 {
            font-size: 17px;
        }

        .dx-network-box p {
            font-size: 13px;
            line-height: 22px;
        }

    .dx-step {
        width: 38px;
        height: 38px;
        margin-bottom: 14px;
        font-size: 13px;
    }
}
/*=========================================
      WEBSITE FLOW
=========================================*/

.dx-webflow-section {
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    background: #fff;
}

    .dx-webflow-section::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        left: -180px;
        top: -180px;
        border-radius: 50%;
       /* background: rgba(13,110,253,.07);*/
        filter: blur(70px);
    }

    .dx-webflow-section::after {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        right: -120px;
        bottom: -120px;
        border-radius: 50%;
        background: rgba(32,201,151,.08);
        filter: blur(70px);
    }

/*========================*/

.dx-webflow-heading {
    max-width: 1320px;
    margin: auto;
    text-align: center;
    margin-bottom: 80px;
}

.dx-webflow-tag {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 50px;
    background: #eaf8f6;
    color: #18b7aa;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .8px;
    margin-bottom: 20px;
}

.dx-webflow-heading h2 {
    font-size: 56px;
    color: #081B3D;
    margin-bottom: 18px;
    font-weight: 800;
}

    .dx-webflow-heading h2 span {
        background: linear-gradient(90deg,#0D6EFD,#20C997);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.dx-webflow-heading p {
    color: #64748B;
    line-height: 30px;
}

/*========================*/

.dx-webflow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 35px;
}

.dx-flow-line {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 80px;
    height: 4px;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    border-radius: 50px;
    z-index: 0;
}

/*========================*/

.dx-flow-card {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 45px 30px;
    border-radius: 28px;
    text-align: center;
    border: 1px solid #EDF3FB;
    box-shadow: 0 18px 45px rgba(13,110,253,.08);
    transition: .45s;
}

    .dx-flow-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 28px;
        padding: 2px;
        background: linear-gradient(90deg,#0D6EFD,#20C997);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        opacity: 0;
        transition: .4s;
    }

    .dx-flow-card:hover {
        transform: translateY(-12px);
    }

        .dx-flow-card:hover::before,
        .dx-flow-card.active::before {
            opacity: 1;
        }

/*========================*/

.dx-flow-number {
    width: 70px;
    height: 70px;
    margin: auto;
    margin-top: -75px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    box-shadow: 0 12px 30px rgba(13,110,253,.25);
}

/*========================*/

.dx-flow-icon {
    width: 85px;
    height: 85px;
    margin: auto;
    border-radius: 22px;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 34px;
    margin-bottom: 28px;
    transition: .4s;
}

.dx-flow-card:hover .dx-flow-icon {
    transform: rotate(-8deg) scale(1.08);
}

/*========================*/

.dx-flow-card h3 {
    font-size: 28px;
    color: #081B3D;
    margin-bottom: 15px;
}

.dx-flow-card p {
    color: #64748B;
    line-height: 28px;
}

/*========================*/

@media(max-width:991px) {

    .dx-webflow {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .dx-flow-line {
        display: none;
    }

    .dx-flow-number {
        margin-top: -60px;
    }
}

@media(max-width:767px) {

    .dx-webflow-heading h2 {
        font-size: 34px;
    }

    .dx-flow-card {
        padding: 35px 22px;
    }

    .dx-flow-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

    .dx-flow-card h3 {
        font-size: 22px;
    }
}

/*====================================================
        WEBSITE DEVELOPMENT SECTION
====================================================*/

.dx-dev-studio {
    position: relative;
    padding: 120px 0;
    background: #f8fbff;
    overflow: hidden;
}

    .dx-dev-studio::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        left: -220px;
        top: -220px;
        border-radius: 50%;
        filter: blur(90px);
    }

    .dx-dev-studio::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -180px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(32,201,151,.08);
        filter: blur(90px);
    }

/*================ Heading ================*/

.dx-dev-heading {
    max-width: 760px;
    margin: auto;
    text-align: center;
    margin-bottom: 90px;
}

.dx-dev-tag {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 40px;
    background: rgba(13,110,253,.08);
    color: #0D6EFD;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.dx-dev-heading h2 {
    font-size: 58px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #081B3D;
    font-weight: 800;
}

.dx-dev-heading span {
    display: block;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dx-dev-heading p {
    color: #64748B;
    line-height: 30px;
    font-size: 17px;
}

/*================ Layout ================*/

.dx-dev-wrapper {
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 80px;
    align-items: center;
}

/*================ Left ================*/

.dx-dev-left {
    position: relative;
}

.dx-dev-main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 620px;
}

    .dx-dev-main img {
        width: 100%;
        max-width: 560px;
        position: relative;
        z-index: 2;
        animation: devFloat 6s ease-in-out infinite;
    }

/*================ Floating Windows ================*/

.dx-floating-window {
    position: absolute;
    width: 240px;
    background: #ffffffa3;
    border-radius: 20px;
    padding: 18px;
    border: 1px solid #edf3fb;
    box-shadow: 0 20px 50px rgba(13,110,253,.10);
    backdrop-filter: blur(10px);
    z-index: 3;
    transition: .4s;
}

    .dx-floating-window:hover {
        transform: translateY(-8px);
    }

.window-one {
    left: 0;
    top: 40px;
}

.window-two {
    right: 0;
    bottom: 70px;
}

.window-head {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

    .window-head span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

        .window-head span:nth-child(1) {
            background: #ff5f56;
        }

        .window-head span:nth-child(2) {
            background: #ffbd2e;
        }

        .window-head span:nth-child(3) {
            background: #27c93f;
        }

.dx-floating-window h4 {
    color: #081B3D;
    margin-bottom: 6px;
    font-size: 18px;
}

.dx-floating-window small {
    color: #64748B;
    font-size: 14px;
}

/*================ Cards ================*/

.dx-dev-right {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.dx-dev-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 30px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid #edf3fb;
    box-shadow: 0 18px 45px rgba(13,110,253,.07);
    transition: .45s;
    position: relative;
    overflow: hidden;
}

    .dx-dev-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(13,110,253,.05), rgba(32,201,151,.05) );
        opacity: 0;
        transition: .4s;
    }

    .dx-dev-card:hover {
        transform: translateX(12px);
        border-color: #20C997;
        box-shadow: 0 25px 60px rgba(13,110,253,.15);
    }

        .dx-dev-card:hover::before {
            opacity: 1;
        }

.dx-card-icon {
    min-width: 74px;
    width: 74px;
    height: 74px;
    border-radius: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    color: #fff;
    font-size: 28px;
    position: relative;
    z-index: 2;
    transition: .4s;
}

.dx-dev-card:hover .dx-card-icon {
    transform: rotate(-10deg) scale(1.08);
}

.dx-dev-card h3 {
    font-size: 26px;
    color: #081B3D;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.dx-dev-card p {
    color: #64748B;
    line-height: 28px;
    position: relative;
    z-index: 2;
}

/*================ Animation ================*/

@keyframes devFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

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

@media (max-width:1200px) {

    .dx-dev-wrapper {
        grid-template-columns: 1fr 460px;
        gap: 50px;
    }

    .dx-dev-main {
        min-height: 520px;
    }

        .dx-dev-main img {
            max-width: 470px;
        }

    .dx-floating-window {
        width: 210px;
    }

    .dx-dev-heading h2 {
        font-size: 48px;
    }

    .dx-dev-card {
        padding: 26px;
    }

        .dx-dev-card h3 {
            font-size: 23px;
        }
}


/*===========================*/

@media(max-width:991px) {

    .dx-dev-studio {
        padding: 90px 0;
    }

    .dx-dev-wrapper {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .dx-dev-left {
        order: 1;
    }

    .dx-dev-right {
        order: 2;
    }

    .dx-dev-main {
        min-height: 430px;
    }

        .dx-dev-main img {
            max-width: 360px;
        }

    .window-one {
        left: 30px;
        top: 20px;
    }

    .window-two {
        right: 30px;
        bottom: 20px;
    }

    .dx-dev-heading {
        margin-bottom: 60px;
    }

        .dx-dev-heading h2 {
            font-size: 42px;
        }
}


/*===========================*/

@media(max-width:767px) {

    .dx-dev-studio {
        padding: 70px 0;
    }

    .dx-dev-heading {
        margin-bottom: 45px;
    }

        .dx-dev-heading h2 {
            font-size: 34px;
        }

        .dx-dev-heading p {
            font-size: 15px;
            line-height: 26px;
        }

    .dx-dev-main {
        min-height: 320px;
    }

        .dx-dev-main img {
            max-width: 260px;
        }

    .dx-floating-window {
        width: 170px;
        padding: 14px;
        border-radius: 16px;
    }

    .window-one {
        left: 0;
        top: 0;
    }

    .window-two {
        right: 0;
        bottom: 10px;
    }

    .window-head span {
        width: 10px;
        height: 10px;
    }

    .dx-floating-window h4 {
        font-size: 15px;
    }

    .dx-floating-window small {
        font-size: 12px;
    }

    .dx-dev-card {
        padding: 22px;
        gap: 18px;
        border-radius: 20px;
    }

    .dx-card-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        font-size: 22px;
        border-radius: 16px;
    }

    .dx-dev-card h3 {
        font-size: 20px;
    }

    .dx-dev-card p {
        font-size: 14px;
        line-height: 24px;
    }
}


/*===========================*/

@media(max-width:480px) {

    .dx-dev-heading h2 {
        font-size: 28px;
    }

    .dx-dev-tag {
        font-size: 12px;
        padding: 8px 18px;
    }

    .dx-dev-main {
        min-height: 260px;
    }

        .dx-dev-main img {
            max-width: 200px;
        }

    .dx-floating-window {
        position: absolute;
        width: 140px;
        padding: 12px;
    }

    .window-one {
        top: -5px;
        left: -5px;
    }

    .window-two {
        right: -5px;
        bottom: -5px;
    }

    .dx-floating-window h4 {
        font-size: 13px;
    }

    .dx-floating-window small {
        font-size: 11px;
    }

    .dx-dev-card {
        padding: 18px;
        gap: 15px;
    }

    .dx-card-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 18px;
    }

    .dx-dev-card h3 {
        font-size: 17px;
        margin-bottom: 8px;
    }

    .dx-dev-card p {
        font-size: 13px;
        line-height: 22px;
    }
}



/*=========================================
        STORY SERVICES SECTION
=========================================*/

.dx-story-service {
    position: relative;
    padding: 120px 0;
    background: #fff;
    overflow: hidden;
}

    .dx-story-service::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        left: -220px;
        top: -220px;
        border-radius: 50%;
        background: rgba(13,110,253,.06);
        filter: blur(80px);
    }

    .dx-story-service::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -180px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(32,201,151,.07);
        filter: blur(80px);
    }

/*====================*/

.dx-story-heading {
    max-width: 760px;
    margin: auto;
    text-align: center;
    margin-bottom: 90px;
}

.dx-story-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 40px;
    background: rgba(13,110,253,.08);
    color: #0D6EFD;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 18px;
}

.dx-story-heading h2 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #081B3D;
    font-weight: 800;
}

    .dx-story-heading h2 span {
        display: block;
        background: linear-gradient(90deg,#0D6EFD,#20C997);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.dx-story-heading p {
    color: #64748B;
    font-size: 17px;
    line-height: 30px;
}

/*====================*/

.dx-story-wrapper {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 90px;
    align-items: flex-start;
}

/*====================
      LEFT
====================*/

.dx-story-left {
    position: sticky;
    top: 120px;
}

.dx-story-card {
    position: relative;
    overflow: hidden;
    padding: 45px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid #EDF3FB;
    box-shadow: 0 20px 60px rgba(13,110,253,.08);
    transition: .45s;
}

    .dx-story-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(13,110,253,.04), rgba(32,201,151,.05) );
        opacity: 0;
        transition: .4s;
    }

    .dx-story-card:hover::before {
        opacity: 1;
    }

/*====================*/

.dx-service-label {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 40px;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 22px;
}

.dx-story-card h3 {
    color: #081B3D;
    font-size: 38px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.dx-story-card p {
    color: #64748B;
    line-height: 30px;
    margin-bottom: 35px;
}

/*====================*/

.dx-story-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 320px;
    margin-bottom: 35px;
}

    .dx-story-image::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: linear-gradient( 90deg, rgba(13,110,253,.12), rgba(32,201,151,.12) );
        animation: storyGlow 6s ease-in-out infinite;
    }

    .dx-story-image img {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 260px;
        transition: .4s;
    }

.dx-story-card:hover img {
    transform: translateY(-10px) scale(1.04);
}

/*====================*/

.dx-story-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    padding: 0 34px;
    border-radius: 50px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    transition: .4s;
}

    .dx-story-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(13,110,253,.25);
    }

/*====================
      RIGHT
====================*/

.dx-story-right {
    position: relative;
    padding-left: 80px;
}

    .dx-story-right::before {
        content: "";
        position: absolute;
        left: 28px;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 20px;
        background: linear-gradient( 180deg, #0D6EFD, #20C997 );
    }

/*=====================================
      PAYMENT SERVICES SECTION
======================================*/

.dx-payment-services {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: #fff;
}

    .dx-payment-services::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        left: -250px;
        top: -250px;
        border-radius: 50%;
        background: rgba(13,110,253,.06);
        filter: blur(90px);
    }

    .dx-payment-services::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -180px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(32,201,151,.07);
        filter: blur(90px);
    }

/*======================*/

.dx-payment-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 90px;
    margin-top: 80px;
}

/*======================*/

.dx-payment-row {
    display: grid;
    grid-template-columns: 1fr 430px;
    align-items: center;
    gap: 80px;
    position: relative;
}

    .dx-payment-row.reverse {
        grid-template-columns: 430px 1fr;
    }

    /*======================*/

    .dx-payment-row::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -45px;
        width: 3px;
        height: 70px;
        transform: translateX(-50%);
        background: linear-gradient( 180deg, #0D6EFD, #20C997 );
        opacity: .35;
    }

    .dx-payment-row:last-child::after {
        display: none;
    }

/*======================*/

.dx-payment-content {
    background: #fff;
    border-radius: 28px;
    padding: 45px;
    border: 1px solid #EDF3FB;
    box-shadow: 0 20px 60px rgba(13,110,253,.08);
    transition: .45s;
    position: relative;
    overflow: hidden;
}

    .dx-payment-content::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(13,110,253,.04), rgba(32,201,151,.05) );
        opacity: 0;
        transition: .4s;
    }

    .dx-payment-content:hover {
        transform: translateY(-10px);
        border-color: #20C997;
        box-shadow: 0 30px 70px rgba(13,110,253,.15);
    }

        .dx-payment-content:hover::before {
            opacity: 1;
        }

/*======================*/

.dx-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    border-radius: 50px;
    margin-bottom: 24px;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

    .dx-service-badge span {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255,255,255,.18);
    }

/*======================*/

.dx-payment-content h3 {
    font-size: 38px;
    line-height: 1.2;
    color: #081B3D;
    margin-bottom: 20px;
    font-weight: 800;
}

.dx-payment-content p {
    color: #64748B;
    line-height: 30px;
    margin-bottom: 30px;
    font-size: 16px;
}

/*======================*/

.dx-payment-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}

.dx-payment-content li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #081B3D;
    font-weight: 500;
    transition: .35s;
}

    .dx-payment-content li:hover {
        transform: translateX(8px);
    }

    .dx-payment-content li i {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(90deg,#0D6EFD,#20C997);
        color: #fff;
        font-size: 12px;
    }

/*======================*/

.dx-payment-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    padding: 0 34px;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    transition: .4s;
}

    .dx-payment-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(13,110,253,.25);
    }

/*======================*/

.dx-payment-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 420px;
}

.dx-image-bg {
    position: absolute;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: linear-gradient( 90deg, rgba(13,110,253,.12), rgba(32,201,151,.12) );
    animation: dxFloatCircle 6s ease-in-out infinite;
}

    .dx-image-bg::before {
        content: "";
        position: absolute;
        inset: 25px;
        border-radius: 50%;
        border: 2px dashed rgba(13,110,253,.22);
    }

.dx-payment-image img {
    position: relative;
    z-index: 2;
    max-width: 270px;
    width: 100%;
    transition: .45s;
}

.dx-payment-row:hover .dx-payment-image img {
    transform: translateY(-12px) scale(1.05);
}

/*======================*/

@keyframes dxFloatCircle {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}
/*=========================================
        PREMIUM EFFECTS
=========================================*/

.dx-payment-row {
    position: relative;
}

    .dx-payment-row::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(13,110,253,.05);
        filter: blur(60px);
        top: 50%;
        transform: translateY(-50%);
        left: -80px;
        transition: .5s;
    }

    .dx-payment-row.reverse::before {
        left: auto;
        right: -80px;
        background: rgba(32,201,151,.06);
    }

    .dx-payment-row:hover::before {
        transform: translateY(-50%) scale(1.2);
    }

/*==============================*/

.dx-payment-content::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    right: -70px;
    top: -70px;
    background: linear-gradient(90deg,#0D6EFD,#20C997);
    opacity: .06;
    transition: .5s;
}

.dx-payment-content:hover::after {
    transform: scale(1.3);
}

/*==============================*/

.dx-payment-image::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 2px dashed rgba(13,110,253,.12);
    animation: rotateCircle 18s linear infinite;
}

@keyframes rotateCircle {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/*==============================*/

.dx-payment-image img {
    filter: drop-shadow(0 30px 45px rgba(13,110,253,.15));
}

/*==============================*/

.dx-payment-row:hover .dx-image-bg {
    transform: scale(1.08);
}

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

@media(max-width:1200px) {

    .dx-payment-row {
        grid-template-columns: 1fr 360px;
        gap: 50px;
    }

        .dx-payment-row.reverse {
            grid-template-columns: 360px 1fr;
        }

    .dx-payment-content h3 {
        font-size: 32px;
    }

    .dx-payment-image img {
        max-width: 290px;
    }

    .dx-image-bg {
        width: 290px;
        height: 290px;
    }
}

/*==============================*/

@media(max-width:991px) {

    .dx-payment-wrapper {
        gap: 70px;
    }

    .dx-payment-row,
    .dx-payment-row.reverse {
        display: flex;
        flex-direction: column;
    }

        .dx-payment-row.reverse {
            flex-direction: column-reverse;
        }

    .dx-payment-content {
        padding: 35px;
    }

    .dx-payment-image {
        min-height: 280px;
    }

        .dx-payment-image img {
            max-width: 250px;
        }

    .dx-image-bg {
        width: 290px;
        height: 290px;
    }

    .dx-payment-row::after {
        display: none;
    }
}

/*==============================*/

@media(max-width:767px) {

    .dx-payment-services {
        padding: 80px 0;
    }

    .dx-payment-wrapper {
        margin-top: 50px;
        gap: 50px;
    }

    .dx-payment-content {
        padding: 25px;
        border-radius: 20px;
    }

        .dx-payment-content h3 {
            font-size: 26px;
        }

        .dx-payment-content p {
            font-size: 15px;
            line-height: 26px;
        }

        .dx-payment-content li {
            font-size: 14px;
            margin-bottom: 14px;
        }

    .dx-payment-image {
        min-height: 220px;
    }

        .dx-payment-image img {
            max-width: 190px;
        }

    .dx-image-bg {
        width:270px;
        height: 270px;
    }

    .dx-payment-btn {
        width: 100%;
    }
}

/*==============================*/

@media(max-width:480px) {

    .dx-payment-content {
        padding: 20px;
    }

        .dx-payment-content h3 {
            font-size: 22px;
        }

        .dx-payment-content p {
            font-size: 14px;
            line-height: 24px;
        }

    .dx-payment-image {
        min-height: 180px;
    }

        .dx-payment-image img {
            max-width: 150px;
        }

    .dx-image-bg {
        width: 240px;
        height: 240px;
    }

    .dx-service-badge {
        font-size: 12px;
        padding: 8px 16px;
    }

        .dx-service-badge span {
            width: 28px;
            height: 28px;
            font-size: 12px;
        }
}