body {
    font-family: 'Inter', sans-serif;
    color: #1f2937;
}

/* ============digital marketing================ */
/*=====================================
DIGITAL HERO
=====================================*/

.digital-hero {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg, #fff, #f8f9ff);
    overflow: hidden;
}

.digital-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -180px;
    top: -180px;
    background: #eef2ff;
    border-radius: 50%;
}

.digital-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -120px;
    bottom: -120px;
    background: #fff2e9;
    border-radius: 50%;
}

.digital-hero .container {
    position: relative;
    z-index: 2;
}

.digital-title {
    font-size: 62px;
    font-weight: 800;
    line-height: 1.12;
    color: #162D6B;
    margin-bottom: 25px;
}

.digital-title span {
    background: linear-gradient(90deg, #6B42FF, #FF4D94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.digital-desc {
    font-size: 17px;
    line-height: 31px;
    color: #666;
    margin-bottom: 35px;
    max-width: 580px;
}

.digital-btns {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

/*=====================================
360 GROWTH
=====================================*/

.digital-growth {
    position: relative;
    width: 560px;
    height: 560px;
    margin: auto;
}

.growth-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: linear-gradient(135deg, #162D6B, #6B42FF);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 30px 60px rgba(107, 66, 255, .25);
    z-index: 2;
}

.growth-center h2 {
    font-size: 70px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}

.growth-center span {
    font-size: 15px;
    color: #fff;
}

/*=====================================
FLOATING BOXES
=====================================*/

.growth-box {
    position: absolute;
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
    transition: .35s;
}

.growth-box:hover {
    transform: translateY(-10px) rotate(3deg);
}

.growth-box i {
    font-size: 34px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #6B42FF, #FF4D94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.growth-box h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #162D6B;
}

.box-one {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.box-two {
    right: 20px;
    top: 110px;
}

.box-three {
    right: 20px;
    bottom: 110px;
}

.box-four {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.box-five {
    left: 20px;
    bottom: 110px;
}

.box-six {
    left: 20px;
    top: 110px;
}

/*=====================================
DIGITAL GRID
=====================================*/

.digital-grid {
    padding: 110px 0;
    background: #fff;
}

.service-tile {
    height: 100%;
    padding: 40px 30px;
    background: #fff;
    border-radius: 24px;
    text-align: center;
    border: 1px solid #edf1ff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .05);
    transition: .35s;
    position: relative;
    overflow: hidden;
}

.service-tile::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #6B42FF, #FF4D94);
    transform: scaleX(0);
    transition: .35s;
    transform-origin: left;
}

.service-tile:hover::before {
    transform: scaleX(1);
}

.service-tile:hover {
    transform: translateY(-12px);
    box-shadow: 0 28px 60px rgba(107, 66, 255, .16);
}

.tile-icon {
    width: 90px;
    height: 90px;
    margin: auto;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #6B42FF, #FF4D94);
    font-size: 34px;
    color: #fff;
}

.service-tile h4 {
    font-size: 24px;
    font-weight: 700;
    color: #162D6B;
    margin-bottom: 15px;
}

.service-tile p {
    margin: 0;
    font-size: 15px;
    line-height: 28px;
    color: #666;
}

/*=====================================
MARKETING ECOSYSTEM
=====================================*/

.marketing-ecosystem {
    padding: 110px 0;
    background: #f8f9ff;
    position: relative;
    overflow: hidden;
}

.marketing-ecosystem::before {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    left: -180px;
    bottom: -180px;
    background: #eef2ff;
    border-radius: 50%;
}

.marketing-ecosystem::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -120px;
    top: -120px;
    background: #fff3e8;
    border-radius: 50%;
}

.marketing-ecosystem .container {
    position: relative;
    z-index: 2;
}

/*=====================================
ECOSYSTEM BOARD
=====================================*/

.ecosystem-board {
    position: relative;
    width: 520px;
    height: 520px;
    margin: auto;
}

.main-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: linear-gradient(135deg, #162D6B, #6B42FF);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 30px 60px rgba(107, 66, 255, .20);
    z-index: 2;
}

.main-circle h2 {
    font-size: 68px;
    font-weight: 800;
    /* color: #fff; */
    margin: 0;
}

.main-circle span {
    font-size: 15px;
    /* color: #fff; */
}

.eco-circle {
    position: absolute;
    width: 110px;
    height: 110px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
    transition: .35s;
}


.eco-circle i {
    font-size: 30px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #6B42FF, #FF4D94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eco-circle p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #162D6B;
}

.eco-one {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.eco-two {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.eco-three {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.eco-four {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.eco-line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 360px;
    border: 2px dashed #d8ccff;
    border-radius: 50%;
    animation: spinCircle 20s linear infinite;
}

@keyframes spinCircle {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/*=====================================
GROWTH POINTS
=====================================*/

.growth-points {
    margin-top: 35px;
}

.growth-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}

.growth-item i {
    font-size: 24px;
    color: #6B42FF;
    margin-top: 4px;
}

.growth-item h5 {
    font-size: 22px;
    font-weight: 700;
    color: #162D6B;
    margin-bottom: 8px;
}

.growth-item p {
    margin: 0;
    font-size: 15px;
    line-height: 28px;
    color: #666;
}

/*=====================================
GROWTH DASHBOARD
=====================================*/

.growth-dashboard {
    padding: 10px 0;
    background: #fff;
}

.growth-stat {
    padding: 45px 30px;
    background: #fff;
    border-radius: 26px;
    text-align: center;
    border: 1px solid #edf1ff;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .05);
    transition: .35s;
    height: 100%;
}

.growth-stat:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(107, 66, 255, .15);
}

.growth-stat h2 {
    font-size: 54px;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #6B42FF, #FF4D94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.growth-stat span {
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

/*=====================================
CTA
=====================================*/

.digital-final-cta {
    padding: 110px 0;
    background: #f8f9ff;
}

.digital-cta-box {
    padding: 60px;
    border-radius: 35px;
    background: linear-gradient(135deg, #162D6B, #3149A5);
    position: relative;
    overflow: hidden;
}

.digital-cta-box::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.digital-cta-box::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -100px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
}

.digital-cta-box>* {
    position: relative;
    z-index: 2;
}

.digital-cta-box h2 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
}

.digital-cta-box p {
    font-size: 17px;
    line-height: 30px;
    color: #eef2ff;
    margin: 0;
}

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

@media(max-width:991px) {

    .digital-hero,
    .digital-grid,
    .marketing-ecosystem,
    .growth-dashboard,
    .digital-final-cta {
        padding: 10px 0;
    }

    .digital-title {
        font-size: 44px;
        text-align: center;
    }

    .digital-desc {
        text-align: center;
        margin: auto auto 35px;
    }

    .digital-btns {
        justify-content: center;
    }

    .digital-growth,
    .ecosystem-board {
        width: 100%;
        height: auto;
        padding: 220px 0 120px;
    }

    .growth-center,
    .main-circle {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: auto;
        
    }

    .main-circle h2{
        color: black;
    }

    .growth-box,
    .eco-circle {
        position: relative;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 15px auto;
    }

    .eco-line {
        display: none;
    }

    .digital-cta-box {
        text-align: center;
        padding: 45px;
    }

}

@media(max-width:768px) {

    .digital-title {
        font-size: 36px;
    }

    .digital-btns {
        flex-direction: column;
    }

    .digital-btns .theme-btn,
    .digital-btns .theme-btn-outline {
        width: 100%;
    }

    .service-tile {
        padding: 30px 22px;
    }

    .tile-icon {
        width: 75px;
        height: 75px;
        font-size: 28px;
    }

    .growth-stat h2 {
        font-size: 42px;
    }

    .digital-cta-box h2 {
        font-size: 30px;
    }

    .digital-cta-box p {
        font-size: 15px;
        line-height: 27px;
    }

}

@media(max-width:576px) {

    .digital-hero,
    .digital-grid,
    .marketing-ecosystem,
    .growth-dashboard,
    .digital-final-cta {
        padding: 60px 0;
    }

    .digital-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .digital-desc {
        font-size: 15px;
        line-height: 28px;
    }

    .growth-center,
    .main-circle {
        width: 180px;
        height: 180px;
    }

    .growth-center h2,
    .main-circle h2 {
        font-size: 54px;
    }



    .growth-box,
    .eco-circle {
        width: 95px;
        height: 95px;
    }

    .growth-box i,
    .eco-circle i {
        font-size: 24px;
    }

    .growth-box h5 {
        font-size: 14px;
    }

    .growth-stat {
        padding: 35px 20px;
    }

    .growth-stat h2 {
        font-size: 36px;
    }

    .digital-cta-box {
        padding: 35px 25px;
        border-radius: 24px;
    }

    .digital-cta-box h2 {
        font-size: 24px;
    }

    .digital-cta-box p {
        font-size: 14px;
        line-height: 24px;
    }

}

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

.growth-box,
.eco-circle,
.service-tile,
.growth-stat {
    will-change: transform;
}

[data-aos] {
    transition-duration: .8s !important;
}


/* ==================website development======================== */

/*=====================================
WEBSITE HERO
=====================================*/

.webdev-hero {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(180deg, #ffffff, #f8f9ff);
    overflow: hidden;
}

.webdev-hero::before {
    content: "";
    position: absolute;
    left: -180px;
    top: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: #eef1ff;
}

.webdev-hero::after {
    content: "";
    position: absolute;
    right: -150px;
    bottom: -150px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: #fff2e6;
}

.webdev-hero .container {
    position: relative;
    z-index: 2;
}

.webdev-title {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
    color: #162D6B;
    margin-bottom: 25px;
}

.webdev-title span {
    color: #28479C;
}

.webdev-desc {
    font-size: 17px;
    line-height: 31px;
    color: #666;
    margin-bottom: 35px;
    max-width: 600px;
}

.webdev-btns {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 45px;
}

/*=====================================
HERO STATS
=====================================*/

.hero-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-box {
    flex: 1;
    min-width: 150px;
    padding: 25px;
    background: #fff;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .06);
    transition: .35s;
}

.stat-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 55px rgba(107, 66, 255, .15);
}

.stat-box h3 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(90deg, #6B42FF, #FF4D94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-box span {
    font-size: 15px;
    font-weight: 600;
    color: #666;
}

/*=====================================
CODE WINDOW
=====================================*/

.code-window {
    position: relative;
    background: #10131f;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 35px 70px rgba(0, 0, 0, .18);
}

.window-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    background: #1b2030;
}

.window-header span {
    width: 13px;
    height: 13px;
    border-radius: 50%;
}

.window-header span:nth-child(1) {
    background: #ff5f57;
}

.window-header span:nth-child(2) {
    background: #ffbd2f;
}

.window-header span:nth-child(3) {
    background: #28c840;
}

.code-area {
    padding: 35px;
    min-height: 420px;
}

.code-area pre {
    margin: 0;
    font-size: 17px;
    line-height: 34px;
    font-family: Consolas, monospace;
    color: #8effae;
    white-space: pre-wrap;
}

/*=====================================
TECH TAGS
=====================================*/

.tech-tag {
    position: absolute;
    padding: 10px 18px;
    background: #fff;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
    animation: floatTag 4s ease-in-out infinite;
}

@keyframes floatTag {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}

.html {
    left: -25px;
    top: 70px;
    color: #E44D26;
}

.css {
    right: -25px;
    top: 95px;
    color: #264DE4;
}

.react {
    right: -35px;
    bottom: 110px;
    color: #00C8FF;
}

.laravel {
    left: -35px;
    bottom: 120px;
    color: #FF2D20;
}

.php {
    left: 45%;
    top: -22px;
    transform: translateX(-50%);
    color: #777BB4;
}

.mysql {
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    color: #00758F;
}

/*=====================================
DEVELOPMENT SERVICES
=====================================*/

.dev-services {
    padding: 110px 0;
    background: #fff;
}

.dev-card {
    height: 100%;
    padding: 40px 30px;
    background: #fff;
    border-radius: 26px;
    border: 1px solid #edf1ff;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .05);
    transition: .35s;
    position: relative;
    overflow: hidden;
}



.dev-card:hover::before {
    transform: scaleX(1);
}

.dev-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(107, 66, 255, .16);
}

.dev-icon {
    width: 90px;
    height: 90px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    background: linear-gradient(135deg, #6B42FF, #FF4D94);
    font-size: 36px;
    color: #fff;
}

.dev-card h4 {
    font-size: 24px;
    font-weight: 700;
    color: #162D6B;
    margin-bottom: 15px;
}

.dev-card p {
    margin: 0;
    font-size: 15px;
    line-height: 29px;
    color: #666;
}

/*=====================================
TECH STACK
=====================================*/

.tech-stack {
    padding: 110px 0;
    background: #f8f9ff;
    position: relative;
    overflow: hidden;
}

.tech-stack::before {
    content: "";
    position: absolute;
    left: -160px;
    bottom: -160px;
    width: 360px;
    height: 360px;
    background: #eef2ff;
    border-radius: 50%;
}

.tech-stack::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 260px;
    height: 260px;
    background: #fff3e7;
    border-radius: 50%;
}

.tech-stack .container {
    position: relative;
    z-index: 2;
}

/*=====================================
STACK GRID
=====================================*/

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

.stack-item {
    padding: 20px;
    background: #fff;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
    transition: .35s;
}

.stack-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(107, 66, 255, .16);
}

.stack-item i {
    font-size: 34px;
    margin-bottom: 12px;
    display: block;
    background: linear-gradient(135deg, #6B42FF, #FF4D94);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stack-item span {
    font-size: 15px;
    font-weight: 700;
    color: #162D6B;
}

/*=====================================
TECH PREVIEW
=====================================*/

.tech-preview {
    position: relative;
    text-align: center;
}

.tech-preview img {
    max-width: 100%;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .12));
    animation: floatPreview 6s ease-in-out infinite;
}

@keyframes floatPreview {

    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }

}

.preview-badge {
    position: absolute;
    padding: 12px 20px;
    background: #fff;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.preview-badge.one {
    left: 0;
    top: 70px;
    color: #28a745;
}

.preview-badge.two {
    right: 0;
    top: 170px;
    color: #6B42FF;
}

.preview-badge.three {
    left: 40px;
    bottom: 60px;
    color: #ff7b00;
}


/*=====================================
DEVICE SHOWCASE
=====================================*/

.device-showcase {
    padding: 110px 0;
    background: #f8f9ff;
}

.device-list {
    margin-top: 35px;
    padding: 0;
    list-style: none;
}

.device-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 600;
    color: #444;
}

.device-list i {
    color: #6B42FF;
    font-size: 18px;
}

/*=====================================
CTA
=====================================*/

.webdev-cta {
    padding: 110px 0;
    background: #fff;
}

.webdev-cta-box {
    padding: 60px;
    border-radius: 35px;
    background: linear-gradient(135deg, #162D6B, #3149A5);
    position: relative;
    overflow: hidden;
}

.webdev-cta-box::before {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 260px;
    height: 260px;
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
}

.webdev-cta-box::after {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -100px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
}

.webdev-cta-box>* {
    position: relative;
    z-index: 2;
}

.webdev-cta-box h2 {
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
}

.webdev-cta-box p {
    font-size: 17px;
    line-height: 30px;
    color: #eef2ff;
    margin: 0;
}

.cta-btn {
    border: 1px solid #ffff;
    border-radius: 25px;
    padding: 8px 15px;
    margin-top: 100px;
    color: #ffffff;
    transition: 0.3s;
}

.cta-btn:hover {
    transform: scaleY(-5px);
    background-color: #077fcb;
    color: white;


}

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

@media(max-width:991px) {

    .webdev-hero,
    .dev-services,
    .tech-stack,
    .device-showcase,
    .webdev-cta {
        padding: 80px 0;
    }

    .webdev-title {
        font-size: 46px;
        text-align: center;
    }

    .webdev-desc {
        text-align: center;
        margin: auto auto 35px;
    }

    .webdev-btns,
    .hero-stats {
        justify-content: center;
    }

    .stack-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .process-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .process-arrow {
        margin: 0;
        transform: rotate(90deg);
    }

    .webdev-cta-box {
        text-align: center;
        padding: 45px;
    }

    .preview-badge {
        position: relative;
        display: inline-block;
        margin: 10px;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

}

@media(max-width:768px) {

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

    .webdev-title {
        font-size: 36px;
    }

    .webdev-btns {
        flex-direction: column;
    }

    .webdev-btns .theme-btn,
    .webdev-btns .theme-btn-outline {
        width: 100%;
    }

    .webdev-cta-box h2 {
        font-size: 30px;
    }

    .webdev-cta-box p {
        font-size: 15px;
        line-height: 26px;
    }

}

@media(max-width:576px) {

    .webdev-hero,
    .dev-services,
    .tech-stack,
    .device-showcase,
    .webdev-cta {
        padding: 60px 0;
    }

    .stack-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stack-item {
        padding: 15px;
    }

    .stack-item i {
        font-size: 28px;
    }

    .stack-item span {
        font-size: 13px;
    }

    .process-step {
        width: 100%;
    }

    .hero-stats {
        flex-direction: column;
    }

    .stat-box {
        width: 100%;
    }

    .webdev-title {
        font-size: 30px;
        line-height: 1.25;
    }

    .webdev-desc {
        font-size: 15px;
        line-height: 28px;
    }

    .webdev-cta-box {
        padding: 35px 25px;
        border-radius: 24px;
    }

    .webdev-cta-box h2 {
        font-size: 24px;
    }

    .webdev-cta-box p {
        font-size: 14px;
        line-height: 24px;
    }

}

/*=====================================
ANIMATION
=====================================*/

.dev-card,
.stack-item,
.process-step,
.stat-box {
    will-change: transform;
}

[data-aos] {
    transition-duration: .8s !important;
}


/* ======================hire tech page======================== */
.hire-section {
    padding: 90px 0;
    background: #fff;
    font-family: 'Poppins', sans-serif;
}

/* TOP */
.hire-top h2 {
    font-size: 34px;
    font-weight: 800;
    color: #162D6B;
}

.hire-top p {
    color: #666;
    max-width: 800px;
    margin: 10px auto;
    line-height: 1.7;
}

/* IMAGE */
.tech-box img {
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* FORM */
.hire-form input,
.hire-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #eee;
    border-radius: 10px;
    outline: none;
}

.hire-form textarea {
    height: 120px;
}

.hire-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(90deg, #6B42FF, #FF4D94);
    border: none;
    color: #fff;
    border-radius: 30px;
    font-weight: 600;
    transition: .3s;
}

.hire-btn:hover {
    transform: translateY(-5px);
}

/* BOX */
.box {
    background: #f8f9ff;
    padding: 25px;
    border-radius: 20px;
    height: 100%;
}

.box h3 {
    color: #162D6B;
    margin-bottom: 15px;
}

.box ul {
    padding-left: 18px;
}

.box ul li {
    margin-bottom: 8px;
    color: #555;
}

/* CTA */
.cta {
    background: linear-gradient(135deg, #162D6B, #3149A5);
    padding: 30px;
    border-radius: 20px;
    color: #fff;
    text-align: center;
}

.cta-btn {
    background: #fff;
    color: #162D6B;
    padding: 10px 25px;
    border-radius: 25px;
    border: none;
    font-weight: 700;
    transition: .3s;
}

.cta-btn:hover {
    transform: scale(1.05);
}

/* =================api integrat page=================== */
.api-section {
    padding: 80px 0;
    background: #fff;
    font-family: Poppins;
}

.api-section h2 {
    font-size: 34px;
    font-weight: 800;
    color: #162D6B;
}

.api-section p {
    color: #666;
    max-width: 700px;
    margin: 10px auto;
}

/* BOX */
.api-box {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: .3s;
    height: 100%;
}

.api-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.api-box h4 {
    color: #2b4594;
    font-size: 18px;
    margin-bottom: 10px;
}

.api-box p {
    font-size: 14px;
    color: #666;
}


.api-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 25px;
    background: #fff;
    color: #162D6B;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
}

.api-btn:hover {
    transform: scale(1.05);
}

/* ====================industry page==================== */

.industry-section {
    padding: 40px 0;
    background: #fff;
    font-family: Poppins;
}

.industry-section h2 {
    font-size: 34px;
    font-weight: 800;
    color: #162D6B;
}

.industry-section p {
    color: #666;
    max-width: 800px;
    margin: 10px auto;
    line-height: 1.7;
}

.industry-card {
    background: #fff;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: .3s;
    height: 100%;
}

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.industry-card h3 {
    color: #2b4594;
    font-size: 20px;
    margin-bottom: 10px;
}

.industry-card p {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
}

.industry-card ul {
    padding-left: 18px;
}

.industry-card ul li {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #242424;
}

.why-box {
    background: linear-gradient(135deg, #162D6B, #3149A5);
    padding: 40px;
    border-radius: 20px;
    color: #fff;
}

.why-box h3 {
    margin-bottom: 15px;
}

.why-box ul li {
    margin-bottom: 8px;
}

/* ==================startup page================= */
.dps-service-section {
    padding: 90px 0;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
}

/* HERO */
.dps-hero {
    text-align: center;
    margin-bottom: 60px;
}

.dps-hero h2 {
    font-size: 34px;
    font-weight: 800;
    color: #0c2447;
    /* DPS blue */
}

.dps-hero p {
    max-width: 800px;
    margin: 10px auto;
    color: #555;
    line-height: 1.7;
    font-size: 15px;
}

/* SERVICES LIST (NOT CARDS) */
.dps-services {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dps-item {
    padding: 20px 25px;
    border-left: 4px solid #077fcb;
    background: #f9fbff;
    border-radius: 10px;
    transition: .3s;
}

.dps-item:hover {
    background: #eef6ff;
    transform: translateX(5px);
}

.dps-item h3 {
    color: #0c2447;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.dps-item p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.startup-value {
    padding: 100px 0;
    background: #f8fbff;
    font-family: 'Poppins', sans-serif;
}

.startup-value .container {
    display: flex;
    gap: 60px;
    align-items: center;
}

/* LEFT */
.value-left {
    flex: 1;
}

.value-left h2 {
    font-size: 34px;
    font-weight: 900;
    color: #0c2447;
    margin-bottom: 15px;
}

.value-left p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.value-left ul {
    padding-left: 18px;
}

.value-left ul li {
    margin-bottom: 10px;
    color: #444;
    font-weight: 500;
}

/* RIGHT VISUAL BLOCK */
.value-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.value-box {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    border-left: 4px solid #077fcb;
    transition: .3s;
}

.value-box:hover {
    transform: translateX(8px);
    background: #eef6ff;
}

.value-box h3 {
    color: #0c2447;
    margin-bottom: 8px;
}

.value-box p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* RESPONSIVE */
@media(max-width:768px) {

    .startup-value .container {
        flex-direction: column;
    }

}

/* ==================contact page============= */
.contact-page {
    padding: 90px 0;
    background: #fff;
    font-family: 'Poppins', sans-serif;
}

/* HERO */
.contact-hero h2 {
    font-size: 34px;
    font-weight: 900;
    color: #0c2447;
}

.contact-hero p {
    max-width: 750px;
    margin: 10px auto;
    color: #666;
    line-height: 1.7;
}

/* FORM */
.contact-form {
    background: #f8fbff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-form h3 {
    margin-bottom: 20px;
    color: #0c2447;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;
    transition: .3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #077fcb;
    box-shadow: 0 0 0 3px rgba(7, 127, 203, 0.1);
}

.contact-form textarea {
    height: 130px;
    resize: none;
}

/* BUTTON */
.contact-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(90deg, #077fcb, #0c2447);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    transition: .3s;
}

.contact-btn:hover {
    transform: translateY(-5px);
}

/* INFO */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-box {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-left: 4px solid #077fcb;
    transition: .3s;
}

.info-box:hover {
    transform: translateX(8px);
    background: #eef6ff;
}

.info-box h6 {
    color: #0c2447;
    margin-bottom: 5px;
}

.info-box p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* CTA */
.contact-cta {
    background: linear-gradient(135deg, #0c2447, #077fcb);
    padding: 50px;
    border-radius: 20px;
    color: #fff;
}

.contact-cta h3 {
    font-size: 28px;
    font-weight: 800;
}

.cta-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 28px;
    background: #fff;
    color: #0c2447;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.cta-btn:hover {
    transform: scale(1.05);
}

/* RESPONSIVE */
@media(max-width:768px) {

    .contact-hero h2 {
        font-size: 26px;
    }

}

/* ================== AI integrate page======================= */
.ai-modern {
    padding: 120px 0;
    background: #fff;
    font-family: 'Poppins', sans-serif;
}

/* HERO */
.ai-hero {
    text-align: center;
    margin-bottom: 50px;
}

.ai-hero h2 {
    font-size: 36px;
    font-weight: 900;
    color: #0c2447;
}

.ai-hero p {
    max-width: 750px;
    margin: 10px auto;
    color: #666;
    line-height: 1.7;
}

.ai-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 28px;
    background: linear-gradient(90deg, #077fcb, #0c2447);
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
}

/* INTRO BLOCK (IMPORTANT UX FIX) */
.ai-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 50px;
}

.ai-highlight {
    background: #f8fbff;
    padding: 25px;
    border-left: 4px solid #077fcb;
    border-radius: 12px;
}

.ai-highlight h3 {
    color: #0c2447;
    margin-bottom: 10px;
}

.ai-highlight p,
.ai-highlight ol li {
    color: #666;
    line-height: 1.6;
}

/* FLOW (CLEAR SCANNING UX) */
.ai-flow {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.flow-step {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    transition: .3s;
}

.flow-step:hover {
    transform: translateX(6px);
    background: #f8fbff;
    border-color: #077fcb;
}

.flow-step span {
    width: 35px;
    height: 35px;
    background: #077fcb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
}

.flow-step h4 {
    color: #0c2447;
    margin-bottom: 5px;
}

/* TAGS */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.tags span {
    background: #eef6ff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: #0c2447;
}

/* CTA */


.ai-use {
    margin-top: 20px;
}

/* RESPONSIVE */
@media(max-width:768px) {

    .ai-intro {
        grid-template-columns: 1fr;
    }

}

/* --- SECTION 1: DYNAMIC USE CASES / INDUSTRIES --- */
.ai-industries-section {
    padding: 60px 0;
    background: #fafcff;
}

.ai-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.industry-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 20px;
    padding: 35px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.industry-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #077fcb, #0c2447);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.industry-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(7, 127, 203, 0.1);
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-icon {
    font-size: 32px;
    margin-bottom: 20px;
    background: #eef6ff;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #077fcb;
}

.industry-card h4 {
    font-size: 20px;
    color: #0c2447;
    margin-bottom: 12px;
    font-weight: 700;
}

.industry-card p {
    color: #030303;
    font-size: 16px;
    font-weight: 700px;
    line-height: 1.6;
}

/* --- SECTION 2: TECH STACK / PARTNERS INTEGRATION --- */
.ai-tech-section {
    padding: 60px 0;
    text-align: center;
    background: #ffffff;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.tech-box {
    background: #fff;
    border: 1px dashed #cedee9;
    padding: 25px 15px;
    border-radius: 16px;
    font-weight: 600;
    color: #0c2447;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tech-box:hover {
    background: #f1f7fe;
    border-style: solid;
    border-color: #077fcb;
    color: #077fcb;
}

.tech-badge {
    font-size: 11px;
    background: #eef6ff;
    color: #077fcb;
    padding: 2px 8px;
    border-radius: 10px;
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 768px) {
    .ai-grid-3 {
        grid-template-columns: 1fr;
    }
    .tech-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==============brand-design-page=============== */
.brand-section {
    padding: 90px 0;
    font-family: 'Poppins', sans-serif;
    background:
        linear-gradient(135deg, #eaf4ff 0%, #ffffff 40%, #f3f9ff 100%);
    position: relative;
}


.brand-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(7, 127, 203, 0.12), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(12, 36, 71, 0.10), transparent 45%);
    z-index: 0;
}

.brand-section>.container {
    position: relative;
    z-index: 1;
}

/* HERO */
.brand-hero {
    text-align: center;
    margin-bottom: 50px;
}

.brand-hero h2 {
    font-size: 34px;
    font-weight: 900;
    color: #0c2447;
}

.brand-hero p {
    max-width: 750px;
    margin: 10px auto;
    color: #666;
    line-height: 1.7;
}

.brand-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 28px;
    background: linear-gradient(90deg, #077fcb, #0c2447);
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}

.brand-btn:hover {
    transform: translateY(-5px);
}

/* GRID */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.brand-box {
    background: #f8fbff;
    padding: 25px;
    border-radius: 15px;
    border-left: 4px solid #077fcb;
    transition: .3s;
}

.brand-box:hover {
    transform: translateY(-6px);
    background: #eef6ff;
}

.brand-box h3 {
    color: #0c2447;
    margin-bottom: 8px;
}

.brand-box p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* PROCESS */
.brand-process {
    margin-top: 60px;
    text-align: center;
}

.brand-process h3 {
    color: #0c2447;
    margin-bottom: 20px;
    font-size: 26px;
}

.steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.steps div {
    background: #f8fbff;
    padding: 12px 18px;
    border-radius: 30px;
    color: #0c2447;
    font-weight: 500;
    border: 1px solid #e6f0ff;
}

.steps span {
    background: #077fcb;
    color: #fff;
    padding: 5px 10px;
    border-radius: 50%;
    margin-right: 8px;
    font-size: 12px;
}



/* RESPONSIVE */
@media(max-width:768px) {

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

    .steps {
        flex-direction: col;
        align-items: center;
    }

}

/* =====================================
   DPS BRAND INTERACTIVE ENGINE STYLES
===================================== */

.dps-brand-interactive-engine {
    padding: 120px 0;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
}

.dps-brand-interactive-engine .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Split-Panel Asymmetric Flex Grid Layout */
.dps-idnt-engine-row {
    display: flex;
    align-items: flex-start;
    gap: 70px;
}

/* Left Navigation Side Rules */
.dps-idnt-left-panel {
    flex: 1.1;
    position: sticky;
    top: 100px; /* Locks elements smoothly into position on active scrolls */
}

.dps-idnt-sticky-header {
    margin-bottom: 50px;
}

.dps-idnt-mini-tag {
    display: inline-block;
    padding: 5px 14px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border: 1px solid rgba(7, 127, 203, 0.12);
}

.dps-idnt-sticky-header h2 {
    font-size: 44px;
    font-weight: 900;
    color: #0c2447;
    line-height: 1.15;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.dps-idnt-sticky-header h2 span {
    color: #077fcb;
}

.dps-idnt-sticky-header p {
    font-size: 15px;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}

/* Left Timeline Interactive Items */
.dps-idnt-timeline-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dps-idnt-trigger-item {
    padding: 25px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dps-idnt-meta-line {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
}

.dps-idnt-index {
    font-size: 13px;
    font-weight: 800;
    color: #a0aec0;
    transition: color 0.3s ease;
}

.dps-idnt-trigger-item h4 {
    font-size: 19px;
    font-weight: 700;
    color: #4a5568;
    margin: 0;
    transition: color 0.3s ease;
}

.dps-idnt-trigger-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #718096;
    margin: 0;
    padding-left: 32px;
}

/* Active Highlight Interactions triggered via Javascript or Hover states */
.dps-idnt-trigger-item:hover,
.dps-idnt-trigger-item.active {
    background: #f8fbff;
    border-color: #edf2f7;
}

.dps-idnt-trigger-item:hover h4,
.dps-idnt-trigger-item.active h4 {
    color: #0c2447;
}

.dps-idnt-trigger-item:hover .dps-idnt-index,
.dps-idnt-trigger-item.active .dps-idnt-index {
    color: #077fcb;
}

/* RIGHT PANEL: Live Visual Code Board Spec Sheet Box */
.dps-idnt-right-panel {
    flex: 0.9;
    width: 100%;
    position: sticky;
    top: 100px;
}

.dps-idnt-spec-board {
    background: #0f141c; /* Tech Dark Code theme theme background */
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 35px 75px rgba(12, 36, 71, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dps-idnt-board-header {
    background: #161b24;
    padding: 16px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dps-idnt-dots {
    display: flex;
    gap: 8px;
}

.dps-idnt-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.dps-idnt-dots span:nth-child(1) { background: #ef4444; }
.dps-idnt-dots span:nth-child(2) { background: #f59e0b; }
.dps-idnt-dots span:nth-child(3) { background: #10b981; }

.dps-idnt-tab {
    font-family: monospace;
    font-size: 13px;
    color: #718096;
}

.dps-idnt-board-body {
    padding: 40px;
    min-height: 420px;
    position: relative;
}

/* Controlled Visibility Display Toggle Mechanics */
.dps-idnt-spec-view {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    opacity: 0;
    transform: translateY(15px);
    visibility: hidden;
    transition: all 0.4s ease;
}

.dps-idnt-spec-view.active {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Graphics Elements inside right interface panel */
.dps-idnt-graphic-box {
    height: 150px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

/* Individual Interactive Graphic Vectors styling */
.dps-idnt-vector-grid-graphic i {
    font-size: 48px;
    color: #077fcb;
}

.grid-line-x, .grid-line-y {
    position: absolute;
    background: rgba(7, 127, 203, 0.15);
}
.grid-line-x { width: 100%; height: 1px; left: 0; top: 50%; }
.grid-line-y { height: 100%; width: 1px; top: 0; left: 50%; }

.dps-idnt-typo-preview {
    font-size: 72px;
    font-weight: 800;
    color: #ffffff;
}

.dps-idnt-color-swatch {
    display: flex;
    gap: 15px;
}
.dps-idnt-color-swatch span {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
}

.dps-idnt-code-tag {
    font-family: monospace;
    font-size: 24px;
    color: #10b981;
    font-weight: 700;
}

/* Code Blocks Colors styling */
.dps-idnt-spec-view pre {
    margin: 0;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.7;
    color: #a0aec0;
}

.code-k { color: #f43f5e; } /* Keys JSON color */
.code-v { color: #38bdf8; } /* Values JSON color */


/* =====================================
   RESPONSIVE FLOW CONTROLLER LAWS
===================================== */

@media (max-width: 991px) {
    .dps-brand-interactive-engine { padding: 80px 0; }
    .dps-idnt-engine-row { flex-direction: column; gap: 50px; }
    .dps-idnt-left-panel, .dps-idnt-right-panel { position: relative; top: 0; flex: none; width: 100%; }
    .dps-idnt-sticky-header { text-align: center; }
    .dps-idnt-sticky-header h2 { font-size: 36px; }
}

@media (max-width: 576px) {
    .dps-brand-interactive-engine { padding: 60px 0; }
    .dps-idnt-sticky-header h2 { font-size: 28px; }
    .dps-idnt-board-body { padding: 25px; min-height: auto; }
    .dps-idnt-trigger-item { padding: 15px; }
    .dps-idnt-trigger-item h4 { font-size: 16px; }
    .dps-idnt-trigger-item p { padding-left: 0; font-size: 13px; margin-top: 5px; }
    .dps-idnt-spec-view pre { font-size: 12px; }
    .dps-idnt-graphic-box { height: 120px; }
}

/* ===================photo editing page=============== */
body {
    font-family: 'Poppins', sans-serif;
    background: #f6f9ff;
}

/* SECTION */
.photo-dps {
    padding: 80px 0;
    background: #fff;
}

/* TAG */
.tag {
    display: inline-block;
    padding: 6px 14px;
    background: #eef3ff;
    color: #2b4b9b;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* HERO */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero h1 {
    font-size: 40px;
    color: #0c2447;
    font-weight: 900;
    line-height: 1.2;
}

.hero h1 span {
    color: #2b4b9b;
}

.hero p {
    margin: 15px 0;
    color: #666;
    line-height: 1.7;
}

/* BUTTONS */
.btns {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.btn1 {
    background: #2b4b9b;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.btn2 {
    border: 2px solid #2b4b9b;
    color: #2b4b9b;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

/* FEATURES */
.features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.features div {
    background: #f1f6ff;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 20px;
    color: #2b4b9b;
}

/* IMAGE */
.hero img {
    max-width: 100%;
    border-radius: 10px;
}

/* TITLE */
.photo-section-title {
    text-align: center;
    margin: 60px 0 30px;
    color: #03142e;
    font-size: 28px;
    font-weight: 800;
}

/* GRID */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    background: #fff;
    border: 1px solid #e8eefc;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    transition: .3s;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* GLOBAL */
.global {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    background: #f1f6ff;
    border-radius: 12px;
    color: #2b4b9b;
}

/* WHO */
.who {
    margin-top: 40px;
}

.who h3 {
    color: #0c2447;
    margin-bottom: 10px;
}

.who ul {
    padding-left: 20px;
    color: #555;
    line-height: 1.8;
}

/* CTA */
.cta {
    margin-top: 60px;
    text-align: center;
    background: #2b4b9b;
    color: #fff;
    padding: 50px;
    border-radius: 15px;
}

.cta a {
    display: inline-block;
    margin-top: 15px;
    background: #fff;
    color: #2b4b9b;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

/* RESPONSIVE */
@media(max-width:768px) {

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

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

    .btns {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ====================second breadcrumb================= */

.premium-breadcrumb {
    position: relative;
    padding: 150px 0 20px;
    background: linear-gradient(135deg, #2b4aa0, #1c3b8f);
    overflow: hidden;
}

/* soft glow effect */
.premium-breadcrumb::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    top: -120px;
    left: -100px;
}

.premium-breadcrumb::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    bottom: -120px;
    right: -100px;
}

.premium-breadcrumb .container {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

/* TITLE */
.premium-breadcrumb h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* SUBTITLE / PATH */
.premium-breadcrumb .path {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.12);
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.premium-breadcrumb .path a {
    color: #fff;
    text-decoration: none;
    opacity: 0.85;
}

.premium-breadcrumb .path a:hover {
    opacity: 1;
    color: #ffd36b;
}

.premium-breadcrumb .dot {
    width: 5px;
    height: 5px;
    background: #ffb347;
    border-radius: 50%;
}

/* ANIMATION */
.premium-breadcrumb {
    animation: fadeDown .8s ease-in-out;
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

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

/* RESPONSIVE */
@media(max-width:768px) {
    .premium-breadcrumb {
        padding: 100px 15px 10px;
    }

    .premium-breadcrumb h1 {
        font-size: 28px;
    }
}


/* ==================website developement page================ */

/* =========================
   HERO SECTION (CLEAN DPS BLUE)
========================= */

.webdev-hero {
    padding: 90px 0;
    background: #ffffff;
}



.webdev-desc {
    font-size: 16px;
    color: #666;
    line-height: 28px;
    margin: 20px 0;
}

/* BUTTONS (SIMPLE DPS STYLE) */

.theme-btn {
    padding: 10px 22px;
    background: #0c2447;
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
    border: 1px solid #0c2447;
}

.theme-btn:hover {
    background: transparent;
    color: #0c2447;
}

.theme-btn-outline {
    padding: 10px 22px;
    border: 1px solid #077fcb;
    color: #077fcb;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
}

.theme-btn-outline:hover {
    background: #077fcb;
    color: #fff;
}

/* =========================
   CODE WINDOW (CLEAN DARK UI)
========================= */

.code-window {
    background: #10131f;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.window-header {
    display: flex;
    gap: 8px;
    padding: 12px 15px;
    background: #1b2030;
}

.window-header span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.window-header span:nth-child(1) {
    background: #ff5f57;
}

.window-header span:nth-child(2) {
    background: #ffbd2f;
}

.window-header span:nth-child(3) {
    background: #28c840;
}

.code-area {
    padding: 25px;
    font-family: monospace;
    color: #b7c7ff;
    font-size: 15px;
    line-height: 26px;
}

/* =========================
   SERVICES CARDS (CLEAN WHITE)
========================= */

.dev-services {
    padding: 80px 0;
    background: #f8fbff;
}

.dev-card {
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 15px;
    padding: 30px 20px;
    transition: 0.3s;
    height: 100%;
}

.dev-card:hover {
    transform: translateY(-8px);
    border-color: #077fcb;
}

.dev-icon {
    width: 60px;
    height: 60px;
    background: #0c2447;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 15px;
}

.dev-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #0c2447;
}

.dev-card p {
    font-size: 14px;
    color: #666;
}

/* =========================
   PROCESS SECTION (SIMPLE)
========================= */



.process-wrapper {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.process-step {
    width: 200px;
    background: #f8fbff;
    padding: 25px 15px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e9eef5;
    transition: 0.3s;
}

.process-step:hover {
    border-color: #077fcb;
}

.step-number {
    width: 55px;
    height: 55px;
    margin: auto;
    background: #0c2447;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    margin-bottom: 10px;
}

/* =========================
   CTA (CLEAN DPS BLUE)
========================= */

.webdev-cta {
    padding: 80px 0;
}

.webdev-cta-box {
    background: #0c2447;
    color: #fff;
    padding: 50px;
    border-radius: 18px;
    text-align: center;
}

.webdev-cta-box h2 {
    font-size: 32px;
    font-weight: 800;
}

.webdev-cta-box p {
    color: #dbe6ff;
}

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

@media(max-width:768px) {

    .webdev-title {
        font-size: 30px;
    }

    .process-step {
        width: 100%;
    }

    .webdev-cta-box {
        padding: 30px 20px;
    }
}

.dev-process {
    padding: 80px 0;
    background: #f8fbff;
}

.dev-process h2 {
    font-size: 32px;
    font-weight: 800;
    color: #0c2447;
}

/* GRID */
.process-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 40px;
}

/* CARD */
.process-card {
    background: #fff;
    border: 1px solid #e9eef5;
    padding: 25px 15px;
    border-radius: 12px;
    transition: 0.3s;
    text-align: center;
}

.process-card:hover {
    border-color: #077fcb;
    transform: translateY(-5px);
}

/* ICON */
.process-card .icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: #0c2447;
    color: #fff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* TEXT */
.process-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: #0c2447;
    margin-bottom: 10px;
}

.process-card p {
    font-size: 13px;
    color: #666;
    line-height: 20px;
}

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

@media(max-width:576px) {
    .process-grid {
        grid-template-columns: 1fr;
    }
}

/* =============mobile app developmen===================== */

/* MAIN SECTION */
.app-dev-page {
    padding: 80px 0;
    background: #ffffff;
}

/* TITLE */
.app-heading {
    font-size: 36px;
    font-weight: 800;
    color: #154388;
    margin-bottom: 15px;
}

/* TEXT */
.app-text {
    font-size: 15px;
    color: #555;
    line-height: 26px;
    margin-bottom: 10px;
}

/* SUB TITLE */
.app-subtitle {
    font-size: 24px;
    font-weight: 700;
    color: #0e4394;
    margin-top: 20px;
}

/* SMALL TEXT */
.app-small {
    font-size: 14px;
    color: #666;
}

/* LIST */
.app-list {
    margin-top: 15px;
    padding-left: 18px;
}

.app-list li {
    font-size: 14px;
    color: #444;
    margin-bottom: 6px;
    position: relative;
}

.app-list li::marker {
    color: #077fcb;
}

/* FOOTER TEXT */
.app-footer-text {
    margin-top: 15px;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

/* IMAGE */
.app-mockup {
    max-width: 90%;
}

/* RESPONSIVE */
@media(max-width:768px) {

    .app-heading {
        font-size: 26px;
        text-align: center;
    }

    .app-text,
    .app-small,
    .app-footer-text {
        text-align: center;
    }

    .app-subtitle {
        text-align: center;
        font-size: 20px;
    }

    .app-list {
        text-align: left;
        margin: auto;
        display: inline-block;
    }

    .app-mockup {
        margin-top: 25px;
    }
}


/* MAIN SECTION */
.custom-app {
    padding: 90px 0;
    background: #ffffff;
}

/* GRID */
.custom-grid {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* LEFT */
.custom-left {
    flex: 1;
}

.badge {
    display: inline-block;
    background: #0c2447;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 15px;
}

.custom-left h1 {
    font-size: 40px;
    font-weight: 800;
    color: #0c2447;
    line-height: 1.3;
}

.custom-left p {
    color: #666;
    margin-top: 15px;
    line-height: 26px;
}

/* POINTS */
.custom-points {
    margin-top: 20px;
}

.point {
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}

.point span {
    color: #077fcb;
    font-weight: bold;
}

/* BUTTON */
.custom-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 22px;
    background: #0c2447;
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    transition: 0.3s;
}

.custom-btn:hover {
    background: #077fcb;
}

/* RIGHT SIDE */
.custom-right {
    flex: 1;
    height: 500px;
}

.mobile-showcase{
    display:flex;
    justify-content:center;
    align-items:center;
}


.phone-frame{
    width:320px;
    height:500px;
    background:#111;
    border-radius:45px;
    padding:14px;
    position:relative;
    box-shadow:0 30px 70px rgba(0,0,0,.25);
}


.phone-screen{
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:35px;
    background:#000;
}


.phone-screen video{
    width:100%;
    height:100%;
    object-fit:cover;
}


.speaker{
    position:absolute;
    top:18px;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:20px;
    background:#000;
    border-radius:20px;
    z-index:2;
}



/* RESPONSIVE */
@media(max-width:768px) {

    .custom-grid {
        flex-direction: column;
        text-align: center;
    }

    .custom-left h1 {
        font-size: 26px;
    }

    .custom-right {
        height: 320px;
    }

   
}


/* ======================ux/ui page============== */

/* MAIN WRAPPER */
.uxui-modern {
    padding: 90px 0;
    background: #ffffff;
    font-family: sans-serif;
}

/* TOP */
.uxui-top {
    text-align: center;
    margin-bottom: 60px;
}

.uxui-top h1 {
    font-size: 40px;
    color: #27469C;
    font-weight: 800;
}

.uxui-top p {
    color: #555;
    max-width: 700px;
    margin: 15px auto;
    line-height: 26px;
}

/* CENTER GRID */
.uxui-center {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.uxui-feature {
    padding: 25px;
    border: 1px solid #e8ecf5;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
}

.uxui-feature:hover {
    border-color: #27469C;
    transform: translateY(-5px);
}

.uxui-feature h3 {
    color: #27469C;
    margin-bottom: 10px;
}

/* BOTTOM */
.uxui-bottom {
    display: flex;
    gap: 40px;
    align-items: center;
}

/* LEFT BOX */
.uxui-box-left {
    flex: 1;
}

.uxui-box-left h2 {
    color: #27469C;
    margin-bottom: 15px;
}

.uxui-box-left ul {
    padding-left: 18px;
}

.uxui-box-left li {
    margin-bottom: 8px;
    color: #444;
}

/* RIGHT VISUAL */
.uxui-box-right {
    flex: 1;
    position: relative;
    height: 300px;
}

.circle-ui {
    width: 220px;
    height: 220px;
    background: #27469C;
    opacity: 0.1;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.floating-card {
    position: absolute;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e6eaf3;
    border-radius: 10px;
    color: #27469C;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* positions */
.floating-card:nth-child(2) {
    top: 20px;
    left: 20px;
}

.floating-card:nth-child(3) {
    top: 120px;
    right: 10px;
}

.floating-card:nth-child(4) {
    bottom: 20px;
    left: 40px;
}

/* RESPONSIVE */
@media(max-width:768px) {

    .uxui-center {
        grid-template-columns: 1fr 1fr;
    }

    .uxui-bottom {
        flex-direction: column;
        text-align: center;
    }

    .uxui-top h1 {
        font-size: 26px;
    }
}


/* =====================development page=================== */


/* MAIN SECTION */
.webdev-page {
    padding: 90px 0;
    background: #ffffff;
}

/* BADGE */
.badge {
    display: inline-block;
    background: #2B4594;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 15px;
}

/* TITLE */
.webdev-page h1 {
    font-size: 38px;
    font-weight: 800;
    color: #2B4594;
    line-height: 1.3;
}

/* PARAGRAPH */
.webdev-page p {
    font-size: 15px;
    color: #555;
    margin-top: 15px;
    line-height: 26px;
}

/* LIST */
.feature-list {
    margin-top: 20px;
    padding-left: 18px;
}

.feature-list li {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
}

/* BUTTON */
.main-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 22px;
    background: #2B4594;
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    transition: 0.3s;
}

.main-btn:hover {
    background: #077fcb;
}

/* IMAGE BOX */
.mock-box {
    padding: 20px;
}

.mock-box img {
    max-width: 90%;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* RESPONSIVE */
@media(max-width:768px) {

    .webdev-page h1 {
        font-size: 26px;
        text-align: center;
    }

    .webdev-page p,
    .feature-list {
        text-align: center;
    }

    .main-btn {
        display: block;
        text-align: center;
    }

    .mock-box img {
        margin-top: 20px;
    }
}


/* SECTION */
.why-choose {
    padding: 90px 0;
    background: #f8faff;
}

/* TITLE */
.section-title h2 {
    font-size: 32px;
    font-weight: 800;
    color: #27469C;
}

.section-title p {
    color: #666;
    margin-top: 10px;
}

/* BOX */
.why-box {
    background: #fff;
    border: 1px solid #e6eaf3;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: 0.3s;
    height: 100%;
}

.why-box:hover {
    transform: translateY(-8px);
    border-color: #27469C;
}

/* ICON */
.why-box .icon {
    font-size: 28px;
    margin-bottom: 10px;
    color: #27469C;
}

/* HEADING */
.why-box h4 {
    font-size: 18px;
    font-weight: 700;
    color: #27469C;
}

/* TEXT */
.why-box p {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

/* RESPONSIVE */
@media(max-width:768px) {

    .section-title h2 {
        font-size: 24px;
    }
}


/* ====================re-design & development page================= */

/* MAIN WRAPPER */
.dd-page {
    padding: 90px 0;
    background: #ffffff;
}

/* HERO */
.dd-hero {
    text-align: center;
    margin-bottom: 60px;
}

.dd-badge {
    display: inline-block;
    background: #27469C;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 15px;
}

.dd-hero h1 {
    font-size: 38px;
    font-weight: 800;
    color: #27469C;
    line-height: 1.3;
}

.dd-hero p {
    color: #555;
    max-width: 700px;
    margin: 10px auto;
    line-height: 26px;
}

/* GRID */
.dd-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 30px;
    align-items: center;
}

/* BOX */
.dd-box {
    background: #f8faff;
    border: 1px solid #e6eaf3;
    padding: 25px;
    border-radius: 14px;
}

.dd-box h2 {
    color: #27469C;
    font-size: 20px;
    margin-bottom: 15px;
}

.dd-box ul {
    padding-left: 18px;
}

.dd-box li {
    margin-bottom: 8px;
    color: #444;
    font-size: 14px;
}

/* CENTER AREA */
.dd-center {
    position: relative;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* BACK CIRCLE */
.dd-circle {
    width: 220px;
    height: 220px;
    background: #27469C;
    opacity: 0.08;
    border-radius: 50%;
}

/* FLOATING CARDS */
.dd-card {
    position: absolute;
    background: #fff;
    border: 1px solid #e6eaf3;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 600;
    color: #27469C;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* positions */
.c1 {
    top: 10px;
    left: 20px;
}

.c2 {
    top: 120px;
    right: 10px;
}

.c3 {
    bottom: 10px;
    left: 40px;
}

/* CTA */
.dd-cta {
    margin-top: 60px;
    text-align: center;
    background: #27469C;
    color: #fff;
    padding: 50px;
    border-radius: 16px;
}

.dd-cta h2 {
    font-size: 26px;
    margin-bottom: 15px;
}

.dd-btn {
    display: inline-block;
    background: #fff;
    color: #27469C;
    padding: 10px 22px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
}

/* RESPONSIVE */
@media(max-width:992px) {

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

    .dd-center {
        height: 250px;
        margin: 20px 0;
    }

    .dd-hero h1 {
        font-size: 26px;
    }
}


/* SECTION */
.dd-process {
    padding: 40px 0;
    background: #dee0e6;
}

/* HEADER */
.dd-head h2 {
    font-size: 32px;
    font-weight: 800;
    color: #27469C;
}

.dd-head p {
    color: #555;
    max-width: 600px;
    margin: 10px auto 40px;
}

/* STEPS GRID */
.dd-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* STEP BOX */
.step {
    background: #fff;
    border: 1px solid #e6eaf3;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
}

.step:hover {
    transform: translateY(-8px);
    border-color: #27469C;
}

/* NUMBER */
.num {
    width: 50px;
    height: 50px;
    margin: auto;
    background: #27469C;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

/* TEXT */
.step h4 {
    font-size: 16px;
    color: #27469C;
    margin-bottom: 10px;
}

.step p {
    font-size: 13px;
    color: #666;
}

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

@media(max-width:576px) {
    .dd-steps {
        grid-template-columns: 1fr;
    }
}

/* ====================cms website development page======== */


/* MAIN */
.cms-page {
    padding: 90px 0;
    background: #ffffff;
}

/* HERO */
.cms-hero {
    text-align: center;
    margin-bottom: 60px;
}

.cms-badge {
    display: inline-block;
    background: #27469C;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    margin-bottom: 15px;
}

.cms-hero h1 {
    font-size: 38px;
    font-weight: 800;
    color: #27469C;
    line-height: 1.3;
}

.cms-hero p {
    color: #555;
    max-width: 700px;
    margin: 10px auto;
}

/* GRID */
.cms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.cms-card {
    background: #f8faff;
    border: 1px solid #e6eaf3;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
}

.cms-card:hover {
    transform: translateY(-6px);
    border-color: #27469C;
}

.cms-card h3 {
    color: #27469C;
    font-size: 16px;
}

.cms-card p {
    font-size: 13px;
    color: #666;
    margin-top: 10px;
}

/* CONTENT */
.cms-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* LEFT */
.cms-left {
    flex: 1;
}

.cms-left h2 {
    color: #27469C;
    margin-bottom: 15px;
}

.cms-left ul {
    padding-left: 18px;
}

.cms-left li {
    margin-bottom: 8px;
    color: #444;
}

/* RIGHT BOX */
.cms-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cms-box {
    background: #ffffff;
    border: 1px solid #e6eaf3;
    padding: 20px;
    border-radius: 12px;
}

.cms-box h3 {
    color: #27469C;
    margin-bottom: 8px;
}

/* RESPONSIVE */
@media(max-width:992px) {

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

    .cms-content {
        flex-direction: column;
    }
}

@media(max-width:576px) {

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

    .cms-hero h1 {
        font-size: 24px;
    }
}


/* SECTION */

/* SECTION */
.cms-timeline {
    padding: 90px 0;
    background: #ffffff;
}

/* HEADER */
.cms-head h2 {
    font-size: 32px;
    font-weight: 800;
    color: #27469C;
}

.cms-head p {
    color: #666;
    max-width: 600px;
    margin: 10px auto 50px;
}

/* TIMELINE WRAPPER */
.timeline {
    position: relative;
    max-width: 900px;
    margin: auto;
}

/* CENTER LINE */
.timeline::before {
    content: "";
    position: absolute;
    width: 3px;
    background: #27469C;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* ITEM */
.t-item {
    padding: 20px;
    position: relative;
    width: 50%;
}

/* LEFT */
.t-item.left {
    left: 0;
    text-align: right;
}

/* RIGHT */
.t-item.right {
    left: 50%;
}

/* CONTENT BOX */
.content {
    background: #f8faff;
    border: 1px solid #e6eaf3;
    padding: 20px;
    border-radius: 12px;
    display: inline-block;
    max-width: 300px;
}

/* TITLE */
.content h3 {
    color: #27469C;
    margin-bottom: 10px;
}

/* DOT */
.t-item::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #27469C;
    border-radius: 50%;
    top: 25px;
}

/* DOT POSITION */
.t-item.left::after {
    right: -6px;
}

.t-item.right::after {
    left: -6px;
}

/* RESPONSIVE */
@media(max-width:768px) {

    .timeline::before {
        left: 10px;
    }

    .t-item {
        width: 100%;
        left: 0 !important;
        text-align: left;
        padding-left: 30px;
    }

    .t-item::after {
        left: 4px !important;
    }

    .content {
        max-width: 100%;
    }
}

/* ====================multivendor section============ */

.marketplace-section {
    background: #fff;
}

.section-badge {
    background: #2F4EA2;
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
}

.section-title {
    color: #2F4EA2;
    font-size: 42px;
    font-weight: 700;
}

.section-desc {
    max-width: 700px;
    margin: auto;
    color: #666;
    font-size: 17px;
}

.feature-card {
    background: #fff;
    border: 1px solid #E6EBF5;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    transition: .35s;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(47, 78, 162, .15);
}

.icon-box {
    width: 75px;
    height: 75px;
    margin: auto;
    border-radius: 50%;
    background: #EEF3FF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #2F4EA2;
    margin-bottom: 20px;
    transition: .3s;
}

.feature-card:hover .icon-box {
    background: #2F4EA2;
    color: #fff;
}

.feature-card h5 {
    color: #2F4EA2;
    font-weight: 700;
    margin-bottom: 15px;
}

.feature-card p {
    color: #666;
    line-height: 1.7;
}


.multi-vendor-section {
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF4FF 100%);
}

.section-tag {
    display: inline-block;
    padding: 8px 20px;
    background: #E8EEFF;
    color: #2F4EA2;
    font-weight: 600;
    border-radius: 30px;
}

.section-title {
    font-size: 42px;
    font-weight: 700;
    color: #2F4EA2;
    margin-bottom: 25px;
}

.multi-vendor-section p {
    color: #5F6472;
    line-height: 1.9;
    margin-bottom: 20px;
    text-align: justify;
}

.image-box {
    height: 500px;
    background: #fff;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(47, 78, 162, .12);
    border: 1px solid #DCE6FA;
}

.image-box img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

@media (max-width:766px) {

    .image-box {
        height: 300px;
    }
}

/* ================digital transformation page============ */

.digital-transformation-content {
    padding: 80px 0;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    color: #1f2a44;
}

/* Container spacing */
.digital-transformation-content .container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
}

/* Headings */
.digital-transformation-content h2 {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #1f3c88;
}

.digital-transformation-content h3 {
    font-size: 26px;
    margin-top: 50px;
    margin-bottom: 20px;
    color: #274690;
    position: relative;
}

.digital-transformation-content h3::after {
    content: "";
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #1f3c88, #4a90e2);
    position: absolute;
    left: 0;
    bottom: -8px;
    border-radius: 5px;
}

/* Sub headings */
.digital-transformation-content h4 {
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: #2f5597;
}

/* Paragraph */
.digital-transformation-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 15px;
}

/* Lists */
.digital-transformation-content ul {
    margin-top: 15px;
    margin-bottom: 25px;
    padding-left: 20px;
}

.digital-transformation-content ul li {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 10px;
    color: #2d3748;
    position: relative;
    padding-left: 15px;
}

/* Bullet styling */
.digital-transformation-content ul li::before {
    content: "•";
    color: #1f3c88;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Strong text */
.digital-transformation-content strong {
    color: #1f3c88;
}

/* Responsive */
@media (max-width: 768px) {

    .digital-transformation-content {
        padding: 50px 0;
    }

    .digital-transformation-content h2 {
        font-size: 26px;
    }

    .digital-transformation-content h3 {
        font-size: 22px;
    }

    .digital-transformation-content p {
        font-size: 15px;
    }
}

/* ===========desktop app development page============= */

.desktop-app-section {
    padding: 80px 0;
    background: #f6f8ff;
}

.desktop-app-section .container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.content-wrapper {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

/* TEXT SIDE */
.text-content {
    width: 65%;
}

.text-content h2 {
    font-size: 34px;
    color: #1f3c88;
    margin-bottom: 20px;
}

.text-content h3 {
    font-size: 22px;
    color: #2b4594;
    margin-top: 30px;
    margin-bottom: 10px;
}

.text-content p {
    font-size: 16px;
    line-height: 1.9;
    color: #4a5568;
    margin-bottom: 15px;
}

/* IMAGE SIDE */
.image-content {
    width: 35%;
    position: sticky;
    top: 100px;
}

.image-content img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* RESPONSIVE */
@media(max-width: 900px) {

    .content-wrapper {
        flex-direction: column;
    }

    .text-content,
    .image-content {
        width: 100%;
    }

    .image-content {
        position: relative;
        top: 0;
    }
}

/* ==========marketing automation page=============== */

img {
    width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/*==============================
SECTION
==============================*/


.marketing-section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-size: 38px;
    color: #0b4db8;
    margin-bottom: 15px;
}

.section-title p {
    color: #666;
}

/*==============================
BUTTON
==============================*/

.btn {
    display: inline-block;
    padding: 15px 35px;
    background: #0b4db8;
    color: #fff;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s;
}

.btn:hover {
    background: #ff6b00;
    transform: translateY(-4px);
}

/*==============================
HERO
==============================*/

.marketing-hero {
    /* background:linear-gradient(135deg,#0b4db8,#2b7cff); */
    color: #fff;
    padding: 80px 0;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: 52px;
    margin-bottom: 25px;
    line-height: 1.2;
}

.hero-text p {
    font-size: 18px;
    margin-bottom: 35px;
}

.hero-image {
    flex: 1;
}

/*==============================
ABOUT
==============================*/

.about {
    background: #fff;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.about-image,
.about-text {
    flex: 1;
}

.about-text p {
    margin-bottom: 20px;
    color: #555;
}

.about-text ul {
    margin-top: 20px;
}

.about-text li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}

.about-text li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #0b4db8;
}

/*==============================
SERVICES
==============================*/

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    text-align: center;
    transition: .35s;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

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

.card i {
    font-size: 45px;
    color: #0b4db8;
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
}

/*==============================
TOOLS
==============================*/

.tools {
    background: #eef5ff;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.tools-grid div {
    background: #fff;
    padding: 25px;
    text-align: center;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    transition: .3s;
}

.tools-grid div:hover {
    background: #0b4db8;
    color: #fff;
}

/*==============================
INDUSTRIES
==============================*/

.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.industry {
    background: #fff;
    padding: 35px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
    transition: .3s;
}

.industry:hover {
    background: #0b4db8;
    color: #fff;
}

/*==============================
PROCESS
==============================*/

.process {
    background: #eef5ff;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.step {
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
}

.step span {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b4db8;
    color: #fff;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 700;
}

.step h3 {
    margin-bottom: 15px;
}

/*==============================
BENEFITS
==============================*/

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.benefit-grid div {
    background: #fff;
    padding: 35px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .08);
    transition: .3s;
}

.benefit-grid div:hover {
    transform: translateY(-8px);
}

.benefit-grid i {
    font-size: 45px;
    color: #0b4db8;
    margin-bottom: 20px;
}

.benefit-grid h3 {
    font-size: 20px;
}

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

@media(max-width:992px) {

    .hero-content,
    .about-content {
        flex-direction: column;
    }

    .hero {
        text-align: center;
    }

    .hero-text h1 {
        font-size: 42px;
    }

    .section-title h2 {
        font-size: 32px;
    }

}

@media(max-width:768px) {

    .hero {
        padding: 90px 0;
    }

    .hero-text h1 {
        font-size: 34px;
    }

    .hero-text p {
        font-size: 16px;
    }

    .section-title h2 {
        font-size: 28px;
    }

    .card,
    .industry,
    .step,
    .benefit-grid div,
    .tools-grid div {
        padding: 25px;
    }

}

@media(max-width:480px) {

    .hero-text h1 {
        font-size: 28px;
    }

    .section-title h2 {
        font-size: 24px;
    }

    .btn {
        padding: 12px 25px;
    }

}

/* =====================PR & BRANDING page===================== */


.pr-main-title h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #0e4394;
}

.pr-main-title h1 span {
    color: #0c2447;
}

.pr-main-title p {
    color: grey;
    text-align: justify;
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;

}

.img-main-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-img {
    height: 400px;
    width: 400px;
    border-radius: 25px;
    box-shadow: 0px 0px 8px #162D6B;
}

.about-heading {
    color: #674890;
    font-size: 40px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.lamp-img-right {
    height: 150px;
    width: 150px;
    transform: scaleX(-1);
}

.lamp-img-left {
    height: 150px;
    width: 150px;
}

.service-list {
    width: 70%;
    margin: auto;

}

.service-list li {
    font-weight: 700;
    margin-bottom: 0px;
}

.service-list li span {
    font-size: 30px;
}

@media(max-width:768px){
    .about-heading {
    color: #674890;
    text-align: justify;
    font-size: 30px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.service-list {
    text-align: justify;
    width: 100%;
    margin: auto;

}


}

/* ==============marketing strategy page============ */


.strategy-text p {
    font-size: 18px;
    text-align: justify;

}

.strategy-badge {
    border-radius: 25px;
    background-color: #0b4db8;
    color: #fff;
    padding: 5px 15px;
}

.strategy-what {

    border-top: 2px dotted black;
}


.strategy-card {
    width: 45%;
    margin: auto;
    padding: 20px;
    background-color: #E5D9C3;
    border-radius: 15px;
    transition: 0.3s ease;
}

.strategy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.strategy-card h3 {
    color: #0c2447;
    font-size: 30px;
}

/* ===========app marketing page============= */

.app-hero-content h2 {
    color: #0A2A43;
    font-weight: 700;
    font-size: 52px;
}

.app-hero-content h2 span {
    color: #0b4db8;
}



.app-hero-content p {
    color: #00758F;
    font-size: 18px;

}

.app-img {
    height: 600px;
    /* transform: scaleX(-1); */

}

.why-choose-content h2 {
    color: #0e4394;
    font-size: 43px;
}

.why-choose-content ul li {
    margin-top: 15px;
    line-height: 23px;
    text-align: justify;
    list-style: decimal;
}

.bg-img {
    background-image: url('/frontend/assets/image/app-image-2.png');
    background-repeat: no-repeat;
    position: relative;

}

.watch-img {
    height: 250px;
    width: 250px;
    position: absolute;
    top: 40%;
    left: 10%;

}

/* ============content writing box=========== */
.writing-content-box h1 {
    color: #0e4394;
    font-size: 40px;
    font-weight: 900;
}

.writing-content-box h3 {
    color: #674890;

    font-weight: 900;
}

.writing-content-box p {
    color: grey;
    font-size: 18px;
}

.writing-content-box h2 {
    color: #0e4394;
    font-size: 30px;
    font-weight: 900;

}

.writing-content-box ul li {
    list-style: disc;


}

/* ==============video marketing page============= */
/* =====================================
   DPS VIDEO MARKETING SECTION STYLES
===================================== */

.dps-video-marketing {
    /* padding: 110px 0; */
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

/* Structural Grid Rules */
.dps-video-marketing .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.vm-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.vm-content-col {
    flex: 1.1;
}

.vm-visual-col {
    flex: 0.9;
}

/* Typography & Badges */
.vm-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(7, 127, 203, 0.15);
}

.vm-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.25;
    color: #0c2447;
    margin-bottom: 20px;
}

.vm-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 35px;
}

/* Feature Component Blocks */
.vm-features-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.vm-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.vm-item-icon {
    width: 50px;
    height: 50px;
    background: #0c2447;
    color: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: 0.3s ease;
}

.vm-feature-item:hover .vm-item-icon {
    background: #077fcb;
    transform: translateY(-3px);
}

.vm-item-text h4 {
    font-size: 18px;
    font-weight: 700;
    color: #0c2447;
    margin-bottom: 6px;
}

.vm-item-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* Button UI Elements */
.vm-action-btns {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.vm-btn-primary {
    padding: 12px 28px;
    background: #0c2447;
    color: #ffffff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s ease;
    border: 1px solid #0c2447;
    box-shadow: 0 10px 20px rgba(12, 36, 71, 0.15);
}

.vm-btn-primary:hover {
    background: transparent;
    color: #0c2447;
    transform: translateY(-3px);
}

.vm-btn-secondary {
    padding: 12px 28px;
    border: 1px solid #077fcb;
    color: #077fcb;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s ease;
}

.vm-btn-secondary:hover {
    background: #077fcb;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(7, 127, 203, 0.15);
}

/* Right Side: Interactive Visual Player Showcase */
.vm-player-wrapper {
    position: relative;
    padding: 20px;
}

.vm-main-preview {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #0c2447;
    box-shadow: 0 30px 60px rgba(12, 36, 71, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.vm-main-preview img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    /* Assures images render fully without un-aesthetic stretching or cropping */
    transition: transform 0.5s ease;
}

.vm-player-wrapper:hover .vm-main-preview img {
    transform: scale(1.03);
}

/* Pulsing Custom Play Button */
.vm-play-trigger {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: #ffffff;
    color: #077fcb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    transition: 0.3s ease;
    z-index: 3;
    padding-left: 4px;
    /* Perfectly centers the dynamic play icon triangular core */
}

.vm-play-trigger::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff;
    border-radius: 50%;
    animation: vm-pulse 2s infinite linear;
    z-index: -1;
}

.vm-play-trigger:hover {
    transform: translate(-50%, -50%) scale(1.1);
    color: #0c2447;
    box-shadow: 0 20px 45px rgba(7, 127, 203, 0.3);
}

@keyframes vm-pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.3;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Premium Apple-Style Glassmorphism Badges */
.vm-glass-badge {
    position: absolute;
    width: 170px;
    padding: 15px 18px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(12, 36, 71, 0.08);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 4;
    transition: transform 0.3s ease;
}

.vm-glass-badge:hover {
    transform: translateY(-5px);
}

.badge-icon-box {
    width: 40px;
    height: 40px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.vm-glass-badge h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0c2447;
}

.vm-glass-badge p {
    margin: 0;
    font-size: 11px;
    color: #666666;
    font-weight: 500;
}

/* Badge Positioning Elements */
.badge-top-right {
    top: -10px;
    right: -20px;
}

.badge-bottom-left {
    bottom: -10px;
    left: -20px;
}


/* =====================================
   RESPONSIVE (TABLETS & MOBILE MEDIA)
===================================== */

@media (max-width: 991px) {
    .dps-video-marketing {
        padding: 80px 0;
    }

    .vm-row {
        flex-direction: column;
        gap: 50px;
    }

    .vm-content-col,
    .vm-visual-col {
        width: 100%;
        text-align: center;
    }

    .vm-title {
        font-size: 34px;
    }

    .vm-features-list {
        text-align: left;
        max-width: 600px;
        margin: 0 auto 35px;
    }

    .vm-action-btns {
        justify-content: center;
    }

    .vm-player-wrapper {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .dps-video-marketing {
        padding: 60px 0;
    }

    .vm-title {
        font-size: 28px;
    }

    .vm-desc {
        font-size: 14px;
    }

    .vm-btn-primary,
    .vm-btn-secondary {
        width: 100%;
        text-align: center;
    }

    .vm-glass-badge {
        width: 140px;
        padding: 10px 12px;
        gap: 10px;
    }

    .badge-icon-box {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .vm-glass-badge h5 {
        font-size: 15px;
    }

    .vm-glass-badge p {
        font-size: 10px;
    }

    .badge-top-right {
        right: 0px;
    }

    .badge-bottom-left {
        left: 0px;
    }

    .vm-play-trigger {
        width: 60px;
        height: 60px;
        font-size: 18px;
    }
}

/* ======================================== */
/* =====================================
   DPS FIXED CONTENT VIDEO HERO STYLES
===================================== */

.dps-hero-video-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    background: #0c2447;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}


.dps-hero-video-wrapper .swiper {
    width: 100%;
    height: 100%;
}

.vhs-video-slide {
    position: relative;
    width: 100%;
    height: 100%;
}


.vhs-video-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vhs-video-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Fixed Overlay Layer Architecture */
.vhs-static-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Luxury color mesh that guarantees ultimate readability for your text overlay */
    /* background: linear-gradient(90deg, rgba(12, 36, 71, 0.9) 0%, rgba(12, 36, 71, 0.6) 50%, rgba(12, 36, 71, 0.4) 100%); */
    z-index: 5;
    /* Sits firmly above the video slider elements */
    display: flex;
    align-items: center;
}

.vhs-static-overlay .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Static Content Design Core */
.vhs-static-content {
    max-width: 740px;
    text-align: left;
}

.vhs-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(7, 127, 203, );
    color: #077fcb;
    border: 1px solid rgba(7, 127, 203, 0.3);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.vhs-main-title {
    font-size: 64px;
    font-weight: 900;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 22px;
    letter-spacing: -0.5px;
}

.vhs-main-title span {
    color: #077fcb;
    /* DPS Signature Identity Accent Color */
}


.vhs-btn-solid {
    padding: 14px 34px;
    background: #077fcb;
    color: #ffffff;
    border: 1px solid #077fcb;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 10px 25px rgba(7, 127, 203, 0.25);
    transition: 0.3s ease-in-out;
}

.vhs-btn-solid:hover {
    background: transparent;
    color: #077fcb;
    transform: translateY(-3px);
}

.vhs-btn-glass {
    padding: 14px 34px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #ffffff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s ease-in-out;
}

.vhs-btn-glass:hover {
    background: #ffffff;
    color: #0c2447;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);
}

/* Minimal Line Pagination Overrides */
.vhs-line-pagination {
    bottom: 40px !important;
    left: auto !important;
    right: 5% !important;
    width: auto !important;
    z-index: 10 !important;
}

.vhs-line-pagination .swiper-pagination-bullet {
    width: 25px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    opacity: 1;
    transition: 0.3s ease;
}

.vhs-line-pagination .swiper-pagination-bullet-active {
    width: 50px;
    background: #077fcb !important;
}


/* =====================================
   STRICT RESPONSIVE BREAKPOINT LAWS
===================================== */

@media (max-width: 991px) {
    .vhs-main-title {
        font-size: 46px;
    }



    .vhs-line-pagination {
        right: 50% !important;
        transform: translateX(50%);
        bottom: 30px !important;
    }
}

@media (max-width: 768px) {
    .dps-hero-video-wrapper {
        height: 90vh;
        /* Optimized viewport handling over smaller devices */
    }

    .vhs-static-content {
        text-align: center;
        margin: 0 auto;
    }

}

@media (max-width: 576px) {
    .dps-hero-video-wrapper {
        height: 100vh;
        /* Preserves premium immersive container fill ratio */
    }

    .vhs-badge {
        margin-bottom: 18px;
    }

    .vhs-main-title {
        font-size: 34px;
        line-height: 1.25;
    }



    .vhs-btn-solid,
    .vhs-btn-glass {
        width: 100%;
        text-align: center;
        padding: 12px 24px;
    }
}

/* ======================== */
/* =====================================
   DPS VIDEO PROCESS WORKFLOW STYLES
===================================== */

.dps-process-workflow {
    /* padding: 110px 0; */
    background: #ffffff;
    position: relative;
    font-family: 'Poppins', sans-serif;
}

/* Container Engine */
.dps-process-workflow .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Header Typography */
.dps-proc-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 65px;
}

.dps-proc-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(7, 127, 203, 0.12);
}

.dps-proc-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: #0c2447;
    line-height: 1.25;
    margin-bottom: 15px;
}

.dps-proc-header h2 span {
    color: #077fcb;
}

.dps-proc-header p {
    font-size: 16px;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}

/* 3-Column Luxury Matrix Grid Layout */
.dps-proc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Premium Adaptive Process Cards */
.dps-proc-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    padding: 40px 30px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(12, 36, 71, 0.03);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dps-proc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(7, 127, 203, 0.2);
    box-shadow: 0 25px 55px rgba(12, 36, 71, 0.08);
}

/* Icons & Structural Badge Counter */
.dps-proc-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    position: relative;
}

.dps-proc-icon-wrapper i {
    font-size: 32px;
    color: #0c2447;
    transition: color 0.3s ease;
}

.dps-proc-card:hover .dps-proc-icon-wrapper i {
    color: #077fcb;
}

.dps-proc-step-num {
    font-size: 14px;
    font-weight: 700;
    color: #a0aec0;
    background: #f7fafc;
    padding: 4px 12px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.dps-proc-card:hover .dps-proc-step-num {
    color: #077fcb;
    background: #eef6ff;
}

/* Card Inside Typography */
.dps-proc-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0c2447;
    margin-bottom: 12px;
}

.dps-proc-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #555555;
    margin: 0;
    flex-grow: 1;
    /* Assures equal visual grid consistency even with text size variance */
}

/* Sleek Active Indicator Lines */
.dps-proc-hover-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #077fcb;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.dps-proc-card:hover .dps-proc-hover-bar {
    transform: scaleX(1);
}

/* =====================================
   RESPONSIVE GRID LAYOUT SYSTEM
===================================== */

@media (max-width: 991px) {
    .dps-process-workflow {
        padding: 80px 0;
    }

    .dps-proc-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns on Tablets */
        gap: 25px;
    }

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

@media (max-width: 768px) {
    .dps-proc-card {
        padding: 35px 25px;
    }
}

@media (max-width: 576px) {
    .dps-process-workflow {
        padding: 60px 0;
    }

    .dps-proc-header {
        margin-bottom: 45px;
    }

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

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

    .dps-proc-grid {
        grid-template-columns: 1fr;
        /* Full 1 Column stack on Mobile viewports */
        gap: 20px;
    }
}

/* ======================influece marketing page============= */

.dps-influencer-page {
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    color: #1f2a44;
}

.dps-influencer-page .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- HERO SECTION --- */
.dps-inf-hero {
    padding: 10px 0 90px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
    position: relative;
    overflow: hidden;
}

.dps-inf-hero-row {
    display: flex;
    align-items: center;
    gap: 60px;
}

.dps-inf-hero-text {
    flex: 1.1;
}

.dps-inf-hero-visual {
    flex: 0.9;
}

.dps-inf-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(7, 127, 203, 0.15);
}

.dps-inf-hero-text h1 {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.15;
    color: #0c2447;
    margin-bottom: 20px;
}

.dps-inf-hero-text h1 span {
    color: #077fcb;
}

.dps-inf-hero-text p {
    font-size: 16px;
    line-height: 1.75;
    color: #555555;
    margin-bottom: 35px;
}

.dps-inf-hero-btns {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.dps-inf-btn-solid {
    padding: 13px 32px;
    background: #0c2447;
    color: #ffffff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s ease;
    border: 1px solid #0c2447;
    box-shadow: 0 10px 20px rgba(12, 36, 71, 0.15);
}

.dps-inf-btn-solid:hover {
    background: transparent;
    color: #0c2447;
    transform: translateY(-3px);
}

.dps-inf-btn-outline {
    padding: 13px 32px;
    border: 1px solid #077fcb;
    color: #077fcb;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s ease;
}

.dps-inf-btn-outline:hover {
    background: #077fcb;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(7, 127, 203, 0.15);
}

/* Visual Wrapper & Floating Stat Badge */
.dps-inf-visual-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(12, 36, 71, 0.12);
}

.dps-inf-visual-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    /* Assures images display fully without crop distortion */
}

.dps-inf-floating-stat {
    position: absolute;
    bottom: 25px;
    left: 25px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 15px 30px rgba(12, 36, 71, 0.1);
}

.dps-inf-floating-stat i {
    font-size: 22px;
    color: #077fcb;
}

.dps-inf-floating-stat h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0c2447;
}

.dps-inf-floating-stat p {
    margin: 0;
    font-size: 12px;
    color: #666666;
}

/* --- ECOSYSTEM TIERS --- */
.dps-inf-tiers {
    padding: 10px 0;
    background: #f8fbff;
}

.dps-inf-section-title {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 55px;
}

.dps-inf-section-title h2 {
    font-size: 38px;
    font-weight: 800;
    color: #0c2447;
    margin-bottom: 15px;
}

.dps-inf-section-title h2 span {
    color: #077fcb;
}

.dps-inf-section-title p {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
}

.dps-inf-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.dps-inf-tier-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 10px 35px rgba(12, 36, 71, 0.02);
    transition: all 0.3s ease;
}

.dps-inf-tier-card:hover {
    transform: translateY(-8px);
    border-color: rgba(7, 127, 203, 0.2);
    box-shadow: 0 20px 45px rgba(12, 36, 71, 0.06);
}

.dps-inf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.dps-inf-icon {
    width: 50px;
    height: 50px;
    background: #f0f7ff;
    color: #077fcb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.dps-inf-tier-tag {
    font-size: 11px;
    font-weight: 700;
    color: #0c2447;
    background: #edf2f7;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dps-inf-tier-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0c2447;
    margin-bottom: 12px;
}

.dps-inf-tier-card p {
    font-size: 14px;
    line-height: 1.65;
    color: #555555;
    margin-bottom: 25px;
}

.dps-inf-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
}

.dps-inf-card-list li {
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dps-inf-card-list li i {
    color: #28a745;
    /* Success Green for Checkmarks */
}

/* --- PIPELINE PROCESS SECTION --- */
.dps-inf-process {
    padding: 90px 0;
    background: #ffffff;
}

.dps-inf-proc-content {
    max-width: 800px;
    margin: 0 auto;
}

.dps-inf-proc-content h2 {
    font-size: 36px;
    font-weight: 800;
    color: #0c2447;
    margin-bottom: 15px;
    text-align: center;
}

.dps-inf-proc-content h2 span {
    color: #077fcb;
}

.dps-inf-proc-content>p {
    font-size: 16px;
    color: #555555;
    text-align: center;
    margin-bottom: 50px;
    line-height: 1.7;
}

.dps-inf-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dps-inf-step-item {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    padding: 25px;
    background: #f8fbff;
    border-left: 4px solid #0c2447;
    border-radius: 0 16px 16px 0;
    transition: 0.3s ease;
}

.dps-inf-step-item:hover {
    background: #eef6ff;
    border-left-color: #077fcb;
    transform: translateX(6px);
}

.dps-inf-step-num {
    width: 40px;
    height: 40px;
    background: #0c2447;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.dps-inf-step-item:hover .dps-inf-step-num {
    background: #077fcb;
}

.dps-inf-step-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: #0c2447;
    margin-bottom: 6px;
}

.dps-inf-step-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

/* =====================================
   RESPONSIVE DESIGN SYSTEM ENGINE
===================================== */

@media (max-width: 991px) {
    .dps-inf-hero {
        padding: 90px 0 60px;
    }

    .dps-inf-hero-row {
        flex-direction: column;
        gap: 45px;
    }

    .dps-inf-hero-text,
    .dps-inf-hero-visual {
        width: 100%;
        text-align: center;
    }

    .dps-inf-hero-btns {
        justify-content: center;
    }

    .dps-inf-hero-text h1 {
        font-size: 40px;
    }

    .dps-inf-visual-card {
        max-width: 550px;
        margin: 0 auto;
    }

    .dps-inf-tier-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .dps-inf-section-title h2 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {

    .dps-inf-tiers,
    .dps-inf-process {
        padding: 70px 0;
    }

    .dps-inf-tier-card {
        padding: 30px 22px;
    }
}

@media (max-width: 576px) {
    .dps-inf-hero {
        padding: 70px 0 50px;
    }

    .dps-inf-hero-text h1 {
        font-size: 30px;
        line-height: 1.25;
    }

    .dps-inf-hero-text p {
        font-size: 14px;
        line-height: 1.65;
    }

    .dps-inf-btn-solid,
    .dps-inf-btn-outline {
        width: 100%;
        text-align: center;
    }

    .dps-inf-floating-stat {
        left: 15px;
        bottom: 15px;
        padding: 10px 14px;
    }

    .dps-inf-section-title h2,
    .dps-inf-proc-content h2 {
        font-size: 26px;
    }

    .dps-inf-tier-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dps-inf-step-item {
        gap: 15px;
        padding: 20px;
    }

    .dps-inf-step-num {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

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

/* =====================================
   WHY CHOOSE DPS INFLUENCER STYLES
===================================== */

.dps-why-choose-inf {
    padding: 10px 0;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
}

.dps-why-choose-inf .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header UI Elements */
.dps-wcd-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.dps-wcd-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(7, 127, 203, 0.12);
}

.dps-wcd-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: #0c2447;
    line-height: 1.25;
    margin-bottom: 15px;
}

.dps-wcd-header h2 span {
    color: #077fcb;
}

.dps-wcd-header p {
    font-size: 16px;
    line-height: 1.7;
    color: #666666;
    margin: 0;
}

/* Modern Apple-Style Bento Grid Mechanics */
.dps-wcd-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Bento Cards Design Core */
.dps-wcd-box {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(12, 36, 71, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Bento Span Row Logic (Large Boxes take 2 columns spaces) */
.dps-wcd-large-1 {
    grid-column: span 2;
    background: linear-gradient(135deg, #ffffff 0%, #fcfdfe 100%);
}

.dps-wcd-large-2 {
    grid-column: span 2;
    background: linear-gradient(135deg, #ffffff 0%, #fcfdfe 100%);
}

/* Card Elements Hovers */
.dps-wcd-box:hover {
    transform: translateY(-6px);
    border-color: rgba(7, 127, 203, 0.2);
    box-shadow: 0 25px 50px rgba(12, 36, 71, 0.07);
}

.dps-wcd-icon {
    width: 55px;
    height: 55px;
    background: #f0f7ff;
    color: #077fcb;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.dps-wcd-box:hover .dps-wcd-icon {
    background: #0c2447;
    color: #ffffff;
}

.dps-wcd-info {
    position: relative;
    z-index: 2;
}

.dps-wcd-box h3 {
    font-size: 22px;
    font-weight: 700;
    color: #0c2447;
    margin-bottom: 12px;
}

.dps-wcd-box p {
    font-size: 14px;
    line-height: 1.7;
    color: #555555;
    margin: 0;
}

/* Soft Radial Gradient Light Effect Behind Text on Hovers */
.dps-wcd-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(7, 127, 203, 0.04) 0%, transparent 70%);
    top: -50px;
    right: -50px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.dps-wcd-box:hover .dps-wcd-glow {
    opacity: 1;
}

/* =====================================
   FLUID BENTO GRID RESPONSIVE BREAKPOINTS
===================================== */

@media (max-width: 991px) {
    .dps-why-choose-inf {
        padding: 80px 0;
    }

    /* Adapts to 2 Columns grid structure on Medium Viewports */
    .dps-wcd-bento {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .dps-wcd-large-1,
    .dps-wcd-large-2 {
        grid-column: span 2;
        /* Large cards retain full width in double layouts */
    }

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

@media (max-width: 768px) {
    .dps-wcd-box {
        padding: 30px;
    }

    .dps-wcd-box h3 {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .dps-why-choose-inf {
        padding: 60px 0;
    }

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

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

    /* Strictly Flattens Bento down into 1 single block stack layout on Mobiles */
    .dps-wcd-bento {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dps-wcd-large-1,
    .dps-wcd-large-2 {
        grid-column: span 1;
    }
}

/* ==================requirement=============== */
/* =====================================
   DPS PROJECT REQUIREMENT ENGINE STYLES
===================================== */

.dps-requirement-page {
    padding: 50px 0 40px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
    font-family: 'Poppins', sans-serif;
    color: #1f2a44;
    position: relative;
    overflow: hidden;
}

.dps-requirement-page .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Dynamic Split Row System */
.dps-req-split-row {
    display: flex;
    align-items: flex-start;
    gap: 70px;
}

/* LEFT SIDE PANEL STYLES */
.dps-req-left-panel {
    flex: 0.9;
    position: sticky;
    top: 120px; /* Locks viewport interaction smoothly on active track scrolls */
}

.dps-req-mini-tag {
    display: inline-block;
    padding: 6px 16px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    border: 1px solid rgba(7, 127, 203, 0.12);
}

.dps-req-sticky-meta h2 {
    font-size: 46px;
    font-weight: 900;
    line-height: 1.15;
    color: #0c2447;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.dps-req-sticky-meta h2 span {
    color: #077fcb;
}

.dps-req-sticky-meta p {
    font-size: 15px;
    line-height: 1.75;
    color: #555555;
    margin-bottom: 45px;
}

/* Feature Help Grid Points */
.dps-req-help-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.dps-req-help-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.dps-req-help-icon {
    width: 48px;
    height: 48px;
    background: #ffffff;
    color: #077fcb;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(12, 36, 71, 0.05);
    border: 1px solid #edf2f7;
}

.dps-req-help-item h4 {
    font-size: 17px;
    font-weight: 700;
    color: #0c2447;
    margin-bottom: 6px;
}

.dps-req-help-item p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* RIGHT SIDE PANEL FORM WRAPPER STYLES */
.dps-req-right-panel {
    flex: 1.1;
    width: 100%;
}

.dps-req-form-wrapper {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 32px;
    padding: 50px;
    box-shadow: 0 30px 70px rgba(12, 36, 71, 0.05);
    position: relative;
}

.dps-req-form-wrapper h3 {
    font-size: 26px;
    font-weight: 800;
    color: #0c2447;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.form-sub-desc {
    font-size: 14px;
    color: #718096;
    margin-bottom: 40px;
}

/* Form Input Element Mechanics */
.dps-req-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dps-req-form-row {
    display: flex;
    gap: 24px;
}

.dps-req-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dps-req-input-group.full-width {
    flex: none;
    width: 100%;
}

.dps-req-input-group label {
    font-size: 13px;
    font-weight: 700;
    color: #0c2447;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dps-req-input-group input,
.dps-req-input-group select,
.dps-req-input-group textarea {
    width: 100%;
    padding: 14px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    font-size: 14px;
    color: #0c2447;
    outline: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dps-req-input-group textarea {
    height: 140px;
    resize: none;
}

/* Interactive Input States Protection */
.dps-req-input-group input:focus,
.dps-req-input-group select:focus,
.dps-req-input-group textarea:focus {
    border-color: #077fcb;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(7, 127, 203, 0.08);
}

/* Custom High-End File Upload Container Layer */
.dps-req-file-upload {
    position: relative;
    width: 100%;
}

.dps-req-file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

.dps-req-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 20px;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    margin: 0;
}

.dps-req-file-label i {
    font-size: 28px;
    color: #077fcb;
}

.dps-req-file-label span {
    font-size: 13.5px;
    color: #64748b;
}

.dps-req-file-label span b {
    color: #077fcb;
}

.dps-req-file-upload:hover .dps-req-file-label {
    border-color: #077fcb;
    background: #eef6ff;
}

/* Luxury Form Submit Button Component */
.dps-req-action-block {
    margin-top: 15px;
}

.dps-req-submit-btn {
    width: 100%;
    padding: 16px 30px;
    background: #0c2447;
    border: 1px solid #0c2447;
    color: #ffffff;
    border-radius: 35px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(12, 36, 71, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dps-req-submit-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.dps-req-submit-btn:hover {
    background: #077fcb;
    border-color: #077fcb;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(7, 127, 203, 0.25);
}

.dps-req-submit-btn:hover i {
    transform: translateX(5px);
}


/* =====================================
   STRICT FLUID RESPONSIVE BREAKPOINT SYSTEM
===================================== */

@media (max-width: 1024px) {
    .dps-req-sticky-meta h2 { font-size: 38px; }
    .dps-req-form-wrapper { padding: 40px 30px; }
}

@media (max-width: 991px) {
    .dps-requirement-page { padding: 100px 0 70px; }
    .dps-req-split-row { flex-direction: column; gap: 60px; }
    .dps-req-left-panel, .dps-req-right-panel { position: relative; top: 0; flex: none; width: 100%; }
    .dps-req-sticky-meta { text-align: center; max-width: 700px; margin: 0 auto; }
    .dps-req-help-list { text-align: left; max-width: 600px; margin: 0 auto; }
}

@media (max-width: 576px) {
    .dps-requirement-page { padding: 80px 0 50px; }
    .dps-req-sticky-meta h2 { font-size: 28px; }
    .dps-req-form-wrapper { padding: 30px 20px; border-radius: 24px; }
    .dps-req-form { gap: 18px; }
    .dps-req-form-row { flex-direction: column; gap: 18px; }
    .dps-req-form-wrapper h3 { font-size: 22px; }
    .dps-req-input-group label { font-size: 11px; }
    .dps-req-input-group input, .dps-req-input-group select, .dps-req-input-group textarea { padding: 12px 16px; font-size: 13.5px; }
    .dps-req-file-label { padding: 22px 15px; }
    .dps-req-file-label i { font-size: 24px; }
    .dps-req-file-label span { font-size: 12px; }
    .dps-req-submit-btn { padding: 14px 20px; font-size: 14px; }
}

/* ================data analytics page============= */
/* =====================================
   DPS DATA ANALYTICS & INSIGHTS ENGINE STYLES
===================================== */

.dps-data-analytics-engine {
    padding: 100px 0;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
}

.dps-data-analytics-engine .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header UI Parameters */
.dps-anlt-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 75px;
}

.dps-anlt-badge {
    display: inline-block;
    padding: 6px 18px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(7, 127, 203, 0.15);
}

.dps-anlt-header h2 {
    font-size: 46px;
    font-weight: 900;
    line-height: 1.15;
    color: #0c2447;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.dps-anlt-header h2 span {
    color: #077fcb;
}

.dps-anlt-header p {
    font-size: 16px;
    line-height: 1.75;
    color: #555555;
    margin: 0;
}

/* Split Screen Navigation Architecture Layout */
.dps-anlt-dashboard-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 70px;
}

/* LEFT SIDE: Pipeline Flow Trackers */
.dps-anlt-pipeline-panel {
    flex: 1.1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dps-anlt-node {
    padding: 28px;
    border-radius: 24px;
    border: 1px solid #edf2f7;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dps-anlt-node-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 8px;
}

.dps-anlt-phase {
    font-size: 11px;
    font-weight: 700;
    color: #a0aec0;
    background: #f7fafc;
    padding: 3px 10px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.dps-anlt-node h4 {
    font-size: 18px;
    font-weight: 700;
    color: #4a5568;
    margin: 0;
    transition: color 0.3s ease;
}

.dps-anlt-node p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #718096;
    margin: 0;
    padding-left: 0;
    transition: color 0.3s ease;
}

/* Hover & Active Synchronization States Styles */
.dps-anlt-node:hover,
.dps-anlt-node.active {
    background: #f8fbff;
    border-color: rgba(7, 127, 203, 0.25);
    transform: translateX(5px);
}

.dps-anlt-node:hover h4,
.dps-anlt-node.active h4 {
    color: #0c2447;
}

.dps-anlt-node:hover .dps-anlt-phase,
.dps-anlt-node.active .dps-anlt-phase {
    color: #077fcb;
    background: #eef6ff;
}

.dps-anlt-node:hover p,
.dps-anlt-node.active p {
    color: #555555;
}

/* RIGHT SIDE: Immersive Interactive Code Console */
.dps-anlt-display-panel {
    flex: 0.9;
    width: 100%;
    position: sticky;
    top: 100px; /* Lock terminal into view port during dynamic track scrollings */
}

.dps-anlt-terminal-box {
    background: #0b0f17; /* Dark Tech Terminal Theme Background Color */
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 35px 75px rgba(12, 36, 71, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.dps-anlt-terminal-top {
    background: #111622;
    padding: 16px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.dps-anlt-window-dots {
    display: flex;
    gap: 8px;
}

.dps-anlt-window-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dps-anlt-window-dots span:nth-child(1) { background: #ef4444; }
.dps-anlt-window-dots span:nth-child(2) { background: #f59e0b; }
.dps-anlt-window-dots span:nth-child(3) { background: #10b981; }

.dps-anlt-file-tab {
    font-family: monospace;
    font-size: 13px;
    color: #718096;
}

.dps-anlt-terminal-body {
    padding: 40px;
    min-height: 380px;
    position: relative;
}

/* Visibility State Rules Mapping */
.dps-anlt-screen-view {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    opacity: 0;
    transform: scale(0.98);
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dps-anlt-screen-view.active {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

/* Dynamic Live Graphics Processing Simulation Modules */
.dps-anlt-visual-preview {
    height: 140px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 18px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}

/* Screen 1: Radar */
.dps-anlt-scanning-radar {
    position: relative;
    font-size: 40px;
    color: #077fcb;
}
.radar-beam {
    position: absolute;
    width: 100px;
    height: 100px;
    background: conic-gradient(from 0deg, rgba(7, 127, 203, 0.2), transparent);
    top: -30px;
    left: -30px;
    border-radius: 50%;
    animation: anlt-spin 3s infinite linear;
}

/* Screen 2: Transfer */
.dps-anlt-transfer-animation {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 32px;
    color: #a0aec0;
}
.dps-anlt-transfer-animation i:last-child { color: #077fcb; }
.transfer-particles {
    display: flex;
    gap: 8px;
}
.transfer-particles span {
    width: 6px;
    height: 6px;
    background: #077fcb;
    border-radius: 50%;
    animation: anlt-flash 1.2s infinite ease-in-out;
}
.transfer-particles span:nth-child(2) { animation-delay: 0.4s; }
.transfer-particles span:nth-child(3) { animation-delay: 0.8s; }

/* Screen 4: Chart Mock */
.dps-anlt-chart-mock {
    width: 100%;
    max-width: 200px;
}
.mock-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 80px;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}
.mock-bar-chart span {
    width: 30px;
    background: linear-gradient(0deg, #0c2447 0%, #077fcb 100%);
    border-radius: 6px 6px 0 0;
    animation: anlt-grow 1s ease-out forwards;
}

/* Screen 5: Pass Badge */
.dps-anlt-secure-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 36px;
    color: #10b981;
}
.dps-anlt-secure-badge span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Code Syntax Elements Colors */
.dps-anlt-screen-view pre {
    margin: 0;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.65;
    color: #cbd5e1;
}
.t-comment { color: #64748b; }
.t-success { color: #10b981; font-weight: 700; }
.t-warning { color: #f59e0b; font-weight: 700; }
.t-info { color: #38bdf8; }

/* Terminal Footer */
.dps-anlt-terminal-footer {
    background: #111622;
    padding: 14px 30px;
    display: flex;
    gap: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.dps-anlt-terminal-footer span {
    font-size: 12px;
    font-family: monospace;
    color: #4a5568;
}
.dps-anlt-terminal-footer i {
    margin-right: 6px;
}

/* Keyframes Engine Rules */
@keyframes anlt-spin { 100% { transform: rotate(360deg); } }
@keyframes anlt-flash { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes anlt-grow { from { height: 0; } }


/* =====================================
   STRICT FLUID RESPONSIVE ENGINE LAWS
===================================== */

@media (max-width: 991px) {
    .dps-data-analytics-engine { padding: 80px 0; }
    .dps-anlt-dashboard-wrapper { flex-direction: column; gap: 50px; }
    .dps-anlt-pipeline-panel, .dps-anlt-display-panel { position: relative; top: 0; flex: none; width: 100%; }
    .dps-anlt-header h2 { font-size: 36px; }
}

@media (max-width: 576px) {
    .dps-data-analytics-engine { padding: 60px 0; }
    .dps-anlt-header h2 { font-size: 28px; }
    .dps-anlt-header p { font-size: 14px; }
    .dps-anlt-node { padding: 20px; border-radius: 16px; }
    .dps-anlt-node h4 { font-size: 16px; }
    .dps-anlt-node p { font-size: 13px; margin-top: 4px; }
    .dps-anlt-terminal-body { padding: 25px; min-height: auto; }
    .dps-anlt-screen-view { top: 25px; left: 25px; right: 25px; }
    .dps-anlt-screen-view pre { font-size: 11.5px; }
    .dps-anlt-visual-preview { height: 110px; margin-bottom: 20px; }
}

/* =====================================
   DPS DATA ANALYTICS OPTIONAL EXTRA SECTIONS
===================================== */

.dps-dax-matrix-section {
    padding: 15px 0;
    background: #f8fbff;
    font-family: 'Poppins', sans-serif;
}

.dps-dax-matrix-section .container,
.dps-dax-ecosystem-section .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Typography Header Blocks */
.dps-dax-title-block {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 65px;
}

.dps-dax-pill {
    display: inline-block;
    padding: 5px 14px;
    background: #eef6ff;
    color: #077fcb;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    border: 1px solid rgba(7, 127, 203, 0.12);
}

.dps-dax-title-block h2,
.dps-dax-eco-left h3 {
    font-size: 38px;
    font-weight: 900;
    color: #0c2447;
    line-height: 1.2;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.dps-dax-title-block h2 span,
.dps-dax-eco-left h3 span {
    color: #077fcb;
}

.dps-dax-title-block p,
.dps-dax-eco-left > p {
    font-size: 15px;
    line-height: 1.7;
    color: #555555;
    margin: 0;
}

/* Section 1 Matrix Grid Cards Layout */
.dps-dax-matrix-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.dps-dax-matrix-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 24px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 40px rgba(12, 36, 71, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.dps-dax-card-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.dps-dax-badge-icon {
    width: 44px;
    height: 44px;
    background: #f0f7ff;
    color: #077fcb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.dps-dax-matrix-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0c2447;
    margin: 0;
}

.dps-dax-card-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 25px;
}

/* Bullet Configuration inside pricing cards */
.dps-dax-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1; /* Retains symmetric tracking borders lines cross row card blocks */
}

.dps-dax-bullet-list li {
    font-size: 13px;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.dps-dax-bullet-list li i {
    color: #10b981; /* Metric Green for validated configurations */
    font-size: 14px;
}

.dps-dax-model-tag {
    font-size: 11px;
    font-weight: 700;
    color: #a0aec0;
    background: #f7fafc;
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* High-Contrast Interactive Hover Rules */
.dps-dax-matrix-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(12, 36, 71, 0.06);
    border-color: rgba(7, 127, 203, 0.2);
}

.dps-dax-matrix-card:hover .dps-dax-badge-icon {
    background: #0c2447;
    color: #ffffff;
}

/* Highlight Featured Strategy Layer Rules */
.featured-model {
    border-color: rgba(7, 127, 203, 0.3);
    background: linear-gradient(180deg, #ffffff 0%, #fcfdfe 100%);
    box-shadow: 0 20px 45px rgba(7, 127, 203, 0.04);
}
.accent-tag {
    color: #077fcb;
    background: #eef6ff;
}


/* --- SECTION 2: DYNAMIC STACK COHESION LAYER --- */
.dps-dax-ecosystem-section {
    padding: 20px 0;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.dps-dax-ecosystem-row {
    display: flex;
    align-items: center;
    gap: 70px;
}

.dps-dax-eco-left {
    flex: 1.1;
}

.dps-dax-eco-right {
    flex: 0.9;
    width: 100%;
}

/* Dynamic Interactive Tech Tokens Board */
.dps-dax-token-canvas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 35px;
}

.dps-dax-token-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dps-token {
    font-size: 13px;
    font-weight: 600;
    color: #4a5568;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 18px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.dps-token:hover {
    background: #eef6ff;
    border-color: #077fcb;
    color: #077fcb;
    transform: scale(1.03);
}

/* Right Side: Encrypted Security Graphic Frame (Strict Containment, No Stretch) */
.dps-dax-security-shield-box {
    background: linear-gradient(135deg, #0c2447 0%, #112952 100%);
    border-radius: 28px;
    padding: 45px;
    color: #ffffff;
    box-shadow: 0 25px 60px rgba(12, 36, 71, 0.15);
    position: relative;
    overflow: hidden;
}

.dps-dax-shield-icon {
    width: 50px;
    height: 50px;
    background: rgba(7, 127, 203, 0.2);
    color: #077fcb;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 25px;
}

.dps-dax-security-shield-box h4 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #ffffff;
}

.dps-dax-security-shield-box p {
    font-size: 13.5px;
    line-height: 1.65;
    color: #94a3b8;
    margin-bottom: 30px;
}

.dps-dax-compliance-checks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 25px;
}

.dps-dax-check {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dps-dax-check i {
    color: #10b981; /* Safe compliance marker */
}


/* =====================================
   STRICT FLUID RESPONSIVE PARAMETERS
===================================== */

@media (max-width: 991px) {
    .dps-dax-matrix-section, .dps-dax-ecosystem-section { padding: 80px 0; }
    .dps-dax-matrix-row { grid-template-columns: repeat(2, 1fr); gap: 25px; }
    .dps-dax-matrix-card:last-child { grid-column: span 2; } /* Full span center rows balance layout on tablets view */
    .dps-dax-ecosystem-row { flex-direction: column; gap: 50px; }
    .dps-dax-eco-left, .dps-dax-eco-right { width: 100%; text-align: center; }
    .dps-dax-token-row { justify-content: center; }
    .dps-dax-shield-icon { margin: 0 auto 25px; }
    .dps-dax-compliance-checks { text-align: left; }
    .dps-dax-title-block h2, .dps-dax-eco-left h3 { font-size: 32px; }
}

@media (max-width: 576px) {
    .dps-dax-matrix-section, .dps-dax-ecosystem-section { padding: 60px 0; }
    .dps-dax-title-block h2, .dps-dax-eco-left h3 { font-size: 26px; }
    .dps-dax-title-block { margin-bottom: 45px; }
    .dps-dax-matrix-row { grid-template-columns: 1fr; gap: 20px; }
    .dps-dax-matrix-card:last-child { grid-column: span 1; }
    .dps-dax-matrix-card { padding: 30px 22px; border-radius: 20px; }
    .dps-dax-security-shield-box { padding: 30px 22px; border-radius: 20px; }
    .dps-dax-security-shield-box h4 { font-size: 19px; }
    .dps-dax-token-row { gap: 8px; }
    .dps-token { padding: 6px 14px; font-size: 12px; }
}