/* =========================================
MODERN DIGITAL MARKETING HERO
========================================= */

.dm-hero-modern{

    padding:
    130px 0;

    background:
    linear-gradient(
        180deg,
        #f8fbff 0%,
        #eef4ff 100%
    );

    overflow:hidden;
}

.dm-modern-content{

    position:relative;

    z-index:2;
}

.dm-modern-badge{

    display:inline-flex;

    padding:12px 24px;

    border-radius:100px;

    background:
    rgba(109,40,217,.08);

    color:#6d28d9;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:28px;
}

.dm-modern-content h1{

    font-size:78px;

    line-height:1.05;

    font-weight:800;

    color:#071c38;

    margin-bottom:28px;
}

.dm-modern-content p{

    font-size:20px;

    line-height:1.9;

    color:#6b7a8b;

    margin-bottom:40px;

    max-width:700px;
}

/* BUTTONS */

.dm-modern-buttons{

    display:flex;

    gap:18px;

    margin-bottom:50px;
}

.dm-btn-primary{

    height:60px;

    padding:0 34px;

    display:inline-flex;

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

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );

    color:#fff;

    font-weight:700;

    text-decoration:none;

    box-shadow:
    0 20px 45px rgba(124,58,237,.25);
}

.dm-btn-secondary{

    height:60px;

    padding:0 34px;

    display:inline-flex;

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

    border-radius:18px;

    background:#fff;

    border:1px solid #e5ecf5;

    color:#071c38;

    font-weight:700;

    text-decoration:none;
}

/* STATS */

.dm-modern-stats{

    display:flex;

    gap:22px;
}

.dm-stat-box{

    background:#fff;

    padding:28px 35px;

    border-radius:24px;

    min-width:180px;

    box-shadow:
    0 18px 45px rgba(0,0,0,.05);
}

.dm-stat-box h3{

    font-size:42px;

    font-weight:800;

    color:#6d28d9;

    margin-bottom:8px;
}

.dm-stat-box span{

    color:#6d7c8c;

    font-size:15px;
}

/* IMAGE */

.dm-modern-image{

    position:relative;
}

.dm-modern-image img{

    width:100%;

    animation:
    dmFloat 5s ease-in-out infinite;

    filter:
    drop-shadow(0 35px 70px rgba(0,0,0,.12));
}

@keyframes dmFloat{

    0%{
        transform:translateY(0);
    }

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

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

/* FLOATING CARDS */

.dm-floating-card{

    position:absolute;

    background:#fff;

    border-radius:22px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:16px;

    box-shadow:
    0 25px 55px rgba(0,0,0,.08);
}

.dm-floating-card i{

    width:54px;
    height:54px;

    border-radius:16px;

    display:flex;

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

    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );

    color:#fff;

    font-size:22px;
}

.dm-floating-card h5{

    font-size:18px;

    font-weight:700;

    color:#071c38;

    margin-bottom:4px;
}

.dm-floating-card span{

    font-size:14px;

    color:#6f7d8c;
}

.card-one{

    top:40px;
    left:-50px;
}

.card-two{

    bottom:40px;
    right:-50px;
}

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

.dm-modern-services{

    padding:
    120px 0;

    background:#fff;
}

.dm-section-heading{

    text-align:center;

    margin-bottom:70px;
}

.dm-section-heading span{

    display:inline-block;

    padding:10px 22px;

    border-radius:100px;

    background:
    rgba(109,40,217,.08);

    color:#6d28d9;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;
}

.dm-section-heading h2{

    font-size:58px;

    line-height:1.1;

    font-weight:800;

    color:#071c38;
}

/* SERVICE CARDS */

.dm-service-modern-card{

    background:#fff;

    padding:42px 35px;

    border-radius:32px;

    height:100%;

    border:1px solid #edf2f8;

    transition:.35s ease;

    box-shadow:
    0 20px 55px rgba(0,0,0,.04);
}

.dm-service-modern-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 30px 70px rgba(0,0,0,.08);
}

.dm-service-icon{

    width:78px;
    height:78px;

    border-radius:22px;

    display:flex;

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

    background:
    linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );

    color:#fff;

    font-size:30px;

    margin-bottom:28px;
}

.dm-service-modern-card h4{

    font-size:28px;

    font-weight:700;

    color:#071c38;

    margin-bottom:18px;
}

.dm-service-modern-card p{

    font-size:16px;

    line-height:1.8;

    color:#6d7c8c;
}

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

@media(max-width:991px){

    .dm-hero-modern{

        padding:
        90px 0;
    }

    .dm-modern-content h1{

        font-size:46px;
    }

    .dm-modern-content p{

        font-size:17px;
    }

    .dm-modern-buttons{

        flex-direction:column;
    }

    .dm-modern-stats{

        flex-direction:column;
    }

    .dm-floating-card{

        position:relative;

        margin-top:20px;

        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
    }

    .dm-section-heading h2{

        font-size:38px;
    }

}


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

.dm-why-section{

    padding:
    120px 0;

    background:#fff;
}

.dm-small-badge{

    display:inline-flex;

    padding:10px 22px;

    border-radius:100px;

    background:
    rgba(109,40,217,.08);

    color:#6d28d9;

    font-size:13px;

    font-weight:700;

    margin-bottom:24px;
}

.dm-why-content h2{

    font-size:62px;

    line-height:1.1;

    font-weight:800;

    color:#071c38;

    margin-bottom:28px;
}

.dm-why-content p{

    font-size:18px;

    line-height:1.9;

    color:#6d7b8c;

    margin-bottom:38px;
}

.dm-why-list{

    display:flex;

    flex-direction:column;

    gap:20px;
}

.dm-why-item{

    display:flex;

    align-items:center;

    gap:16px;

    background:#f8fbff;

    padding:20px 24px;

    border-radius:20px;
}

.dm-why-item i{

    color:#7c3aed;

    font-size:20px;
}

.dm-why-item span{

    font-size:17px;

    font-weight:600;

    color:#071c38;
}

.dm-why-image{

    text-align:center;
}

.dm-why-image img{

    width:100%;

    max-width:700px;

    filter:
    drop-shadow(0 35px 70px rgba(0,0,0,.12));

    animation:
    dmFloat2 5s ease-in-out infinite;
}

@keyframes dmFloat2{

    0%{
        transform:translateY(0);
    }

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

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

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

.dm-marquee-section{

    padding:
    100px 0;

    background:
    linear-gradient(
        135deg,
        #071225,
        #111d3b
    );

    overflow:hidden;
}

.dm-marquee-title{

    text-align:center;

    margin-bottom:60px;
}

.dm-marquee-title h3{

    font-size:54px;

    font-weight:800;

    color:#fff;
}

.dm-marquee-wrapper{

    overflow:hidden;

    position:relative;
}

.dm-marquee-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    animation:
    marqueeMove 28s linear infinite;
}

@keyframes marqueeMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

.dm-logo-box{

    min-width:240px;

    height:110px;

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

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

    border-radius:28px;

    display:flex;

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

    gap:16px;

    backdrop-filter:blur(12px);
}

.dm-logo-box i{

    font-size:32px;

    color:#a855f7;
}

.dm-logo-box span{

    font-size:20px;

    font-weight:700;

    color:#fff;
}

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

@media(max-width:991px){

    .dm-why-content h2{

        font-size:40px;
    }

    .dm-why-content p{

        font-size:16px;
    }

    .dm-why-image{

        margin-top:50px;
    }

    .dm-marquee-title h3{

        font-size:34px;
    }

    .dm-logo-box{

        min-width:190px;

        height:90px;
    }

    .dm-logo-box span{

        font-size:16px;
    }

}