/* ==========================================
   CRM ERP PAGE - BASE
========================================== */


.crm-erp-page {

    width:100%;

    overflow:hidden;

    color:#0f172a;

}


.crm-erp-page *,
.crm-erp-page *::before,
.crm-erp-page *::after {

    box-sizing:border-box;

}



.crm-erp-page .erp-container {

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 25px;

}






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


.crm-erp-page .erp-hero-section {

    padding:90px 0;

    background:

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

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

    #fff;

}





.crm-erp-page .erp-hero {

    display:grid;

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

    gap:60px;

    align-items:center;

}




.crm-erp-page .erp-hero-content {

    max-width:650px;

}





.crm-erp-page .erp-tag {

    display:inline-flex;

    padding:8px 18px;

    border-radius:50px;

    background:#eff6ff;

    color:#2563eb;

    font-weight:700;

    font-size:14px;

}






.crm-erp-page h1 {

    font-size:58px;

    line-height:1.12;

    letter-spacing:-2px;

    margin:25px 0;

}





.crm-erp-page h1 span {

    display:block;

    background:

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

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}





.crm-erp-page .erp-hero-content p {

    color:#64748b;

    font-size:18px;

    line-height:1.8;

}






/* BUTTONS */


.crm-erp-page .erp-buttons {

    display:flex;

    gap:20px;

    margin-top:35px;

}



.crm-erp-page .erp-primary-btn,
.crm-erp-page .erp-secondary-btn {

    padding:15px 32px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    display:inline-flex;

    justify-content:center;

    align-items:center;

}



.crm-erp-page .erp-primary-btn {

    background:#2563eb;

    color:#fff;

}



.crm-erp-page .erp-secondary-btn {

    border:1px solid #dbeafe;

    color:#2563eb;

}






/* TRUST */


.crm-erp-page .erp-trust {

    display:flex;

    gap:35px;

    margin-top:40px;

}



.crm-erp-page .erp-trust div {

    display:flex;

    flex-direction:column;

}


.crm-erp-page .erp-trust strong {

    font-size:28px;

}


.crm-erp-page .erp-trust small {

    color:#64748b;

}








/* ==========================================
   ERP DASHBOARD
========================================== */


.crm-erp-page .erp-visual {

    position:relative;

    display:flex;

    justify-content:center;

}





.crm-erp-page .erp-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);

}






.crm-erp-page .erp-dashboard-top {

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

}



.crm-erp-page .erp-dashboard-top span {

    width:8px;

    height:8px;

    background:#94a3b8;

    border-radius:50%;

}






.crm-erp-page .erp-dashboard-content {

    height:100%;

    padding:30px;

    text-align:center;

    background:

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

}



.crm-erp-page .erp-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;

}




.crm-erp-page .erp-bars {

    margin-top:30px;

}



.crm-erp-page .erp-bars div {

    height:45px;

    background:#dbeafe;

    border-radius:12px;

    margin-top:15px;

}


.crm-erp-page .erp-bars div:nth-child(2){

    width:80%;

    margin-left:auto;

    margin-right:auto;

}


.crm-erp-page .erp-bars div:nth-child(3){

    width:60%;

    margin-left:auto;

    margin-right:auto;

}






/* ERP STATS */


.crm-erp-page .erp-stats {

    display:flex;

    gap:15px;

    margin-top:25px;

}


.crm-erp-page .erp-stats div {

    flex:1;

    background:#fff;

    padding:15px;

    border-radius:15px;

}



.crm-erp-page .erp-stats strong {

    display:block;

    color:#2563eb;

}






/* FLOATING CARDS */


.crm-erp-page .erp-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;

}


.crm-erp-page .erp-card-one {

    left:-70px;

    top:80px;

}



.crm-erp-page .erp-card-two {

    right:-70px;

    bottom:80px;

}





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


.crm-erp-page .erp-services {

    background:#f8fafc;

    padding:90px 0;

}



.crm-erp-page .erp-section-heading {

    max-width:800px;

    text-align:center;

    margin:auto;

}


.crm-erp-page .erp-section-heading span {

    color:#2563eb;

    font-weight:700;

}



.crm-erp-page .erp-section-heading h2 {

    font-size:45px;

    margin:20px 0;

}



.crm-erp-page .erp-section-heading p {

    color:#64748b;

    font-size:18px;

}





.crm-erp-page .erp-service-grid {

    display:grid;

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

    gap:30px;

    margin-top:60px;

}





.crm-erp-page .erp-service-card {

    background:#fff;

    padding:35px;

    border-radius:25px;

    border:1px solid #e2e8f0;

}



.crm-erp-page .erp-icon {

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:20px;

    background:#eff6ff;

    font-size:32px;

    margin-bottom:25px;

}

/* ==========================================
   SERVICE CARD CONTENT
========================================== */


.crm-erp-page .erp-service-card h3 {

    font-size:24px;

    margin-bottom:15px;

    color:#0f172a;

}



.crm-erp-page .erp-service-card p {

    color:#64748b;

    line-height:1.7;

}






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


.crm-erp-page .erp-why-section {

    padding:90px 0;

    background:#fff;

}





.crm-erp-page .erp-why-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}





.crm-erp-page .erp-small-title {

    color:#2563eb;

    font-weight:700;

    font-size:14px;

}





.crm-erp-page .erp-why-content h2 {

    font-size:45px;

    line-height:1.2;

    margin:20px 0;

}





.crm-erp-page .erp-why-content p {

    color:#64748b;

    font-size:18px;

    line-height:1.8;

}





.crm-erp-page .erp-check-list {

    padding:0;

    margin-top:35px;

}



.crm-erp-page .erp-check-list li {

    list-style:none;

    margin-bottom:18px;

    color:#334155;

    font-size:17px;

}






/* WHY CARDS */


.crm-erp-page .erp-stat-grid {

    display:grid;

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

    gap:25px;

}





.crm-erp-page .erp-stat-card {

    background:#f8fafc;

    padding:35px;

    border-radius:25px;

    text-align:center;

    border:1px solid #e2e8f0;

}



.crm-erp-page .erp-stat-card h3 {

    font-size:45px;

    margin:0;

    background:

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

    -webkit-background-clip:text;

    color:transparent;

}





.crm-erp-page .erp-stat-card p {

    color:#64748b;

}







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


.crm-erp-page .erp-process-section {
    padding:90px 0;
    background:#f8fafc;
}

.crm-erp-page .mobile-screen {
    animation:
        mobileFloat 5s ease-in-out infinite;
}

.mobile-app-page .erp-logo {
    animation:
        iconPulse 3s ease-in-out infinite;
}



@keyframes mobileFloat {

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }

}



@keyframes iconPulse {

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}




.crm-erp-page .erp-process-grid {

    display:grid;

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

    gap:25px;

    margin-top:60px;

}





.crm-erp-page .erp-process-card {

    background:#fff;

    padding:35px 25px;

    border-radius:25px;

    border:1px solid #e2e8f0;

    transition:.3s ease;

}





.crm-erp-page .erp-process-card:hover {

    transform:translateY(-8px);

    box-shadow:

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

}





.crm-erp-page .erp-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;

}





.crm-erp-page .erp-process-card h3 {

    font-size:22px;

    margin-bottom:15px;

}





.crm-erp-page .erp-process-card p {

    color:#64748b;

    line-height:1.7;

}








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


.crm-erp-page .erp-tech-section {

    padding:90px 0;

}





.crm-erp-page .erp-tech-box {

    padding:60px;

    border-radius:35px;

    display:grid;

    grid-template-columns:1fr 350px;

    gap:50px;

    align-items:center;


    background:

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

}





.crm-erp-page .erp-tech-content span {

    color:#2563eb;

    font-weight:700;

}





.crm-erp-page .erp-tech-content h2 {

    font-size:45px;

    line-height:1.2;

    margin:20px 0;

}





.crm-erp-page .erp-tech-content p {

    color:#64748b;

    font-size:18px;

    line-height:1.8;

}





.crm-erp-page .erp-tech-list {

    display:grid;

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

    gap:15px;

    margin-top:30px;

}





.crm-erp-page .erp-tech-list div {

    background:#fff;

    padding:15px;

    border-radius:15px;

    font-weight:600;

}






/* TECH CIRCLE */


.crm-erp-page .erp-tech-circle {

    width:230px;

    height:230px;

    border-radius:50%;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    background:

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


    color:#fff;

}



.crm-erp-page .erp-tech-circle strong {

    font-size:45px;

}





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


.crm-erp-page .erp-final-section {

    padding:90px 0;

}





.crm-erp-page .erp-final-card {

    padding:70px 40px;

    border-radius:35px;

    text-align:center;

    color:#fff;


    background:

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

}



.crm-erp-page .erp-final-card h2 {

    font-size:48px;

}





.crm-erp-page .erp-final-card p {

    max-width:700px;

    margin:20px auto;

    color:#e0f2fe;

}








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


@media(max-width:1200px){


.crm-erp-page .erp-hero {

    grid-template-columns:1fr 380px;

}



.crm-erp-page .erp-service-grid {

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

}



.crm-erp-page .erp-process-grid {

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

}


}





@media(max-width:992px){


.crm-erp-page .erp-hero {

    grid-template-columns:1fr;

    text-align:center;

}



.crm-erp-page .erp-hero-content {

    margin:auto;

}



.crm-erp-page .erp-buttons {

    justify-content:center;

}



.crm-erp-page .erp-why-grid {

    grid-template-columns:1fr;

    text-align:center;

}



.crm-erp-page .erp-tech-box {

    grid-template-columns:1fr;

    text-align:center;

}



.crm-erp-page .erp-floating-card {

    display:none;

}


}





@media(max-width:768px){


.crm-erp-page .erp-container {

    padding:0 18px;

}



.crm-erp-page h1 {

    font-size:38px;

}



.crm-erp-page .erp-buttons {

    flex-direction:column;

}



.crm-erp-page .erp-primary-btn,
.crm-erp-page .erp-secondary-btn {

    width:100%;

}



.crm-erp-page .erp-trust {

    justify-content:center;

    gap:20px;

}



.crm-erp-page .erp-service-grid,
.crm-erp-page .erp-process-grid {

    grid-template-columns:1fr;

}



.crm-erp-page .erp-stat-grid {

    grid-template-columns:1fr;

}



.crm-erp-page .erp-tech-list {

    grid-template-columns:1fr;

}



.crm-erp-page .erp-dashboard {

    width:280px;

    height:430px;

}



.crm-erp-page .erp-final-card {

    padding:45px 20px;

}



.crm-erp-page .erp-final-card h2 {

    font-size:34px;

}


}