/* ==========================================
   DIGITAL MARKETING PAGE BASE
========================================== */


.digital-marketing-page {

    width:100%;

    overflow:hidden;

    color:#0f172a;

}


.digital-marketing-page *,
.digital-marketing-page *::before,
.digital-marketing-page *::after {

    box-sizing:border-box;

}



.digital-marketing-page .dm-container {

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 25px;

}






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


.digital-marketing-page .dm-hero-section {

    padding:90px 0;

    background:

    radial-gradient(
        circle at top right,
        rgba(37,99,235,.16),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(6,182,212,.12),
        transparent 35%
    ),

    #ffffff;

}





.digital-marketing-page .dm-hero {

    display:grid;

    grid-template-columns:
    minmax(0,1fr)
    450px;

    align-items:center;

    gap:60px;

}





.digital-marketing-page .dm-hero-content {

    max-width:650px;

}





.digital-marketing-page .dm-tag {

    display:inline-flex;

    padding:8px 18px;

    border-radius:50px;

    background:#eff6ff;

    color:#2563eb;

    font-weight:700;

    font-size:14px;

}







.digital-marketing-page h1 {

    font-size:58px;

    line-height:1.12;

    letter-spacing:-2px;

    margin:25px 0;

}





.digital-marketing-page h1 span {

    display:block;

    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );


    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}





.digital-marketing-page .dm-hero-content p {

    font-size:18px;

    line-height:1.8;

    color:#64748b;

}






/* BUTTONS */


.digital-marketing-page .dm-buttons {

    display:flex;

    gap:20px;

    margin-top:35px;

}



.digital-marketing-page .dm-primary-btn,
.digital-marketing-page .dm-secondary-btn {

    padding:15px 32px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    display:inline-flex;

    justify-content:center;

    align-items:center;

}





.digital-marketing-page .dm-primary-btn {

    background:#2563eb;

    color:#fff;

}





.digital-marketing-page .dm-secondary-btn {

    border:1px solid #dbeafe;

    color:#2563eb;

}






/* TRUST STATS */


.digital-marketing-page .dm-trust {

    display:flex;

    gap:35px;

    margin-top:40px;

}



.digital-marketing-page .dm-trust div {

    display:flex;

    flex-direction:column;

}



.digital-marketing-page .dm-trust strong {

    font-size:28px;

}



.digital-marketing-page .dm-trust small {

    color:#64748b;

}








/* ==========================================
   MARKETING DASHBOARD
========================================== */


.digital-marketing-page .dm-visual {

    position:relative;

    display:flex;

    justify-content:center;

}





.digital-marketing-page .dm-dashboard {

    width:360px;

    height:500px;

    background:#fff;

    border:8px solid #0f172a;

    border-radius:35px;

    overflow:hidden;

    box-shadow:

    0 40px 90px rgba(15,23,42,.25);

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

}





.digital-marketing-page .dm-dashboard-top {

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

}



.digital-marketing-page .dm-dashboard-top span {

    width:8px;

    height:8px;

    border-radius:50%;

    background:#94a3b8;

}






.digital-marketing-page .dm-dashboard-content {

    height:100%;

    padding:35px 25px;

    text-align:center;

    background:

    linear-gradient(
        180deg,
        #eff6ff,
        #fff
    );

}





.digital-marketing-page .dm-logo {

    width:90px;

    height:90px;

    margin:auto;

    border-radius:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


    color:#fff;

    font-size:30px;

    font-weight:800;

}







.digital-marketing-page .dm-dashboard-content p {

    color:#64748b;

}






/* CHART */


.digital-marketing-page .dm-chart {

    height:120px;

    margin-top:25px;

    border-radius:20px;

    background:#dbeafe;

    position:relative;

    overflow:hidden;

}




.digital-marketing-page .dm-chart-line {

    position:absolute;

    bottom:20px;

    left:20px;

    width:80%;

    height:5px;

    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    transform:rotate(-8deg);

}





.digital-marketing-page .dm-dashboard-stats {

    display:flex;

    gap:15px;

    margin-top:20px;

}



.digital-marketing-page .dm-dashboard-stats div {

    flex:1;

    background:#fff;

    padding:15px;

    border-radius:15px;

}



.digital-marketing-page .dm-dashboard-stats strong {

    display:block;

    color:#2563eb;

}







/* FLOATING CARDS */


.digital-marketing-page .dm-floating-card {

    position:absolute;

    width:180px;

    padding:18px;

    background:#fff;

    border-radius:18px;

    box-shadow:

    0 15px 40px rgba(15,23,42,.12);
    z-index: 5;

}



.digital-marketing-page .dm-card-one {

    left:-110px;

    top:90px;

}



.digital-marketing-page .dm-card-two {

    right:-70px;

    bottom:90px;

}






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


.digital-marketing-page .dm-services {

    padding:90px 0;

    background:#f8fafc;

}





.digital-marketing-page .dm-section-heading {

    max-width:800px;

    margin:auto;

    text-align:center;

}



.digital-marketing-page .dm-section-heading span {

    color:#2563eb;

    font-weight:700;

}





.digital-marketing-page .dm-section-heading h2 {

    font-size:45px;

    line-height:1.2;

    margin:20px 0;

}



.digital-marketing-page .dm-section-heading p {

    color:#64748b;

    font-size:18px;

}







.digital-marketing-page .dm-service-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:60px;

}






.digital-marketing-page .dm-service-card {

    background:#fff;

    padding:35px;

    border-radius:25px;

    border:1px solid #e2e8f0;

    transition:.3s ease;

}




.digital-marketing-page .dm-service-card:hover {

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(15,23,42,.12);

}






.digital-marketing-page .dm-icon {

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    background:#eff6ff;

    font-size:32px;

    margin-bottom:25px;

}




.digital-marketing-page .dm-service-card h3 {

    font-size:24px;

    margin-bottom:15px;

}



.digital-marketing-page .dm-service-card p {

    color:#64748b;

    line-height:1.7;

}





@keyframes dmFloat {

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}

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


.digital-marketing-page .dm-why-section {

    padding:90px 0;

    background:#fff;

}




.digital-marketing-page .dm-why-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}




.digital-marketing-page .dm-small-title {

    color:#2563eb;

    font-size:14px;

    font-weight:700;

}




.digital-marketing-page .dm-why-content h2 {

    font-size:45px;

    line-height:1.2;

    margin:20px 0;

}




.digital-marketing-page .dm-why-content p {

    color:#64748b;

    font-size:18px;

    line-height:1.8;

}




.digital-marketing-page .dm-check-list {

    padding:0;

    margin-top:35px;

}



.digital-marketing-page .dm-check-list li {

    list-style:none;

    color:#334155;

    font-size:17px;

    margin-bottom:18px;

}







/* STATS */


.digital-marketing-page .dm-stats-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}




.digital-marketing-page .dm-stat-card {

    background:#f8fafc;

    padding:35px;

    border-radius:25px;

    border:1px solid #e2e8f0;

    text-align:center;

}




.digital-marketing-page .dm-stat-card h3 {

    font-size:45px;

    margin:0;

    background:

    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    -webkit-background-clip:text;

    color:transparent;

}




.digital-marketing-page .dm-stat-card p {

    color:#64748b;

}









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


.digital-marketing-page .dm-process-section {

    padding:90px 0;

    background:#f8fafc;

}




.digital-marketing-page .dm-process-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-top:60px;

}





.digital-marketing-page .dm-process-card {

    background:#fff;

    padding:35px 25px;

    border-radius:25px;

    border:1px solid #e2e8f0;

    transition:.3s ease;

}




.digital-marketing-page .dm-process-card:hover {

    transform:translateY(-8px);

    box-shadow:

    0 25px 60px rgba(15,23,42,.12);

}




.digital-marketing-page .dm-number {

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


    color:#fff;

    font-weight:800;

    margin-bottom:25px;

}





.digital-marketing-page .dm-process-card h3 {

    font-size:22px;

    margin-bottom:15px;

}





.digital-marketing-page .dm-process-card p {

    color:#64748b;

    line-height:1.7;

}









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


.digital-marketing-page .dm-tools-section {

    padding:90px 0;

}




.digital-marketing-page .dm-tools-box {

    display:grid;

    grid-template-columns:1fr 350px;

    gap:50px;

    align-items:center;


    padding:60px;

    border-radius:35px;


    background:

    linear-gradient(
        135deg,
        #eff6ff,
        #f8fafc
    );

}





.digital-marketing-page .dm-tools-content span {

    color:#2563eb;

    font-weight:700;

}





.digital-marketing-page .dm-tools-content h2 {

    font-size:45px;

    line-height:1.2;

    margin:20px 0;

}




.digital-marketing-page .dm-tools-content p {

    color:#64748b;

    font-size:18px;

    line-height:1.8;

}





.digital-marketing-page .dm-tools-list {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:30px;

}





.digital-marketing-page .dm-tools-list div {

    background:#fff;

    padding:15px;

    border-radius:15px;

    font-weight:600;

}






.digital-marketing-page .dm-tools-circle {

    width:230px;

    height:230px;

    margin:auto;

    border-radius:50%;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


    color:#fff;

}





.digital-marketing-page .dm-tools-circle strong {

    font-size:55px;

}







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


.digital-marketing-page .dm-final-section {

    padding:90px 0;

}





.digital-marketing-page .dm-final-card {

    padding:70px 40px;

    border-radius:35px;

    text-align:center;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );


    color:#fff;

}





.digital-marketing-page .dm-final-card h2 {

    font-size:48px;

}





.digital-marketing-page .dm-final-card p {

    max-width:700px;

    margin:20px auto;

    color:#e0f2fe;

}







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


@media(max-width:1200px){


.digital-marketing-page .dm-hero {

    grid-template-columns:1fr 380px;

}



.digital-marketing-page .dm-service-grid {

    grid-template-columns:repeat(2,1fr);

}



.digital-marketing-page .dm-process-grid {

    grid-template-columns:repeat(2,1fr);

}



}





@media(max-width:992px){


.digital-marketing-page .dm-hero {

    grid-template-columns:1fr;

    text-align:center;

}



.digital-marketing-page .dm-hero-content {

    margin:auto;

}



.digital-marketing-page .dm-buttons {

    justify-content:center;

}



.digital-marketing-page .dm-why-grid {

    grid-template-columns:1fr;

    text-align:center;

}



.digital-marketing-page .dm-tools-box {

    grid-template-columns:1fr;

    text-align:center;

}



.digital-marketing-page .dm-floating-card {

    display:none;

}


}





@media(max-width:768px){


.digital-marketing-page .dm-container {

    padding:0 18px;

}



.digital-marketing-page h1 {

    font-size:38px;

}



.digital-marketing-page .dm-buttons {

    flex-direction:column;

}



.digital-marketing-page .dm-primary-btn,
.digital-marketing-page .dm-secondary-btn {

    width:100%;

}



.digital-marketing-page .dm-trust {

    justify-content:center;

    flex-wrap:wrap;

}



.digital-marketing-page .dm-service-grid,
.digital-marketing-page .dm-process-grid {

    grid-template-columns:1fr;

}



.digital-marketing-page .dm-stats-grid {

    grid-template-columns:1fr;

}



.digital-marketing-page .dm-tools-list {

    grid-template-columns:1fr;

}



.digital-marketing-page .dm-tools-box {

    padding:35px 20px;

}



.digital-marketing-page .dm-dashboard {

    width:280px;

    height:430px;

}



.digital-marketing-page .dm-final-card {

    padding:45px 20px;

}



.digital-marketing-page .dm-final-card h2 {

    font-size:34px;

}


}