.service-hero {

    padding-top:110px;
    padding-bottom:50px;

    background:
    linear-gradient(
        135deg,
        #f8fafc,
        #e0f2fe
    );

    overflow:hidden;

}



.service-hero-grid {

    display:grid;

    grid-template-columns:
    1fr 450px;

    gap:70px;

    align-items:center;

}



.service-hero-content h1 {

    font-size:56px;

    line-height:1.15;

    color:var(--secondary);

    margin-bottom:25px;

    letter-spacing:-1.5px;

}



.service-hero-content p {

    font-size:19px;

    color:var(--text-light);

    max-width:600px;

    margin-bottom:35px;

}




/* =========================
   SERVICE ILLUSTRATION
========================= */


.service-hero-image {

    display:flex;

    justify-content:center;

}



.service-illustration {

    width:350px;

    height:350px;

    border-radius:40px;

    background:white;

    box-shadow:

    0 30px 70px rgba(15,23,42,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}



.service-illustration > i {

    width:140px;

    height:140px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:30px;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );

    color:white;

    font-size:70px;

}



.floating-card {


    position:absolute;

    background:white;

    padding:14px 22px;

    border-radius:50px;

    box-shadow:var(--shadow);

    font-weight:600;

    color:var(--secondary);

    display:flex;

    align-items:center;

    gap:10px;

}



.floating-card i {

    color:var(--primary);

}



.card-one {

    top:40px;

    right:-40px;

}



.card-two {

    bottom:50px;

    left:-40px;

}





/* =========================
   OVERVIEW
========================= */


.overview-grid {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:70px;

    align-items:center;

}



.overview-grid h2 {

    font-size:44px;

    color:var(--secondary);

}



.overview-grid p {

    color:var(--text-light);

    font-size:18px;

    margin-bottom:20px;

}




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


.included-services {

    background:white;

}



.included-grid {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}



.included-card {


    background:var(--background);

    border:1px solid var(--border);

    padding:35px;

    border-radius:var(--radius);

    transition:var(--transition);

}



.included-card:hover {


    transform:translateY(-8px);

    box-shadow:var(--shadow);

    border-color:transparent;

}



.included-icon {


    width:65px;

    height:65px;

    border-radius:15px;

    background:

    rgba(37,99,235,.1);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:28px;

    margin-bottom:25px;

}



.included-card h3 {

    color:var(--secondary);

    font-size:23px;

    margin-bottom:15px;

}



.included-card p {

    color:var(--text-light);

}





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


.service-benefits {

    background:#f8fafc;

}



.benefits-grid {


    display:grid;

    grid-template-columns:

    1fr 420px;

    gap:70px;

    align-items:center;

}



.benefits-content h2 {

    font-size:44px;

    color:var(--secondary);

    margin-bottom:20px;

}



.benefits-content p {

    color:var(--text-light);

    font-size:18px;

}




.benefit-list {

    margin-top:30px;

}



.benefit-list div {

    display:flex;

    gap:15px;

    align-items:center;

    margin-bottom:18px;

    font-weight:600;

}



.benefit-list i {

    color:var(--success);

}




.benefits-card {


    background:

    linear-gradient(
        135deg,
        var(--secondary),
        #1e3a8a
    );


    padding:40px;

    border-radius:17px;

}



.stats-mini div {


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

    padding:25px;

    border-radius:15px;

    margin-bottom:15px;

    text-align:center;

}



.stats-mini strong {


    display:block;

    color:white;

    font-size:38px;

}



.stats-mini span {


    color:#cbd5e1;

}






/* =========================
 WHY XECURE
========================= */


.why-grid {


    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}



.why-card {


    background:white;

    border:1px solid var(--border);

    padding:35px;

    border-radius:var(--radius);

    text-align:center;

    transition:var(--transition);

}



.why-card:hover {

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}



.why-card i {


    font-size:35px;

    color:var(--primary);

    margin-bottom:20px;

}



.why-card h3 {


    color:var(--secondary);

    margin-bottom:15px;

}



.why-card p {


    color:var(--text-light);

}

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


.service-process {

    background:white;

}



.service-process-grid {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

}



.service-step {


    background:var(--background);

    border:1px solid var(--border);

    padding:35px 25px;

    border-radius:var(--radius);

    text-align:center;

    position:relative;

    transition:var(--transition);

}



.service-step:hover {

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}



.step-number {


    position:absolute;

    top:15px;

    right:20px;

    font-size:45px;

    font-weight:800;

    color:

    rgba(37,99,235,.12);

}



.service-step i {


    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:20px auto;

    border-radius:50%;

    background:

    rgba(37,99,235,.1);

    color:var(--primary);

    font-size:30px;

}



.service-step h3 {


    color:var(--secondary);

    font-size:22px;

    margin-bottom:15px;

}



.service-step p {


    color:var(--text-light);

    font-size:15px;

}








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


.technology-section {


    background:var(--background);

}



.technology-grid {


    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

}
.technology-item:hover {


    color:var(--primary);

    border-color:var(--primary);

    transform:translateY(-5px);

    box-shadow:

    0 15px 35px rgba(37,99,235,.12);

}







/* =====================================================
   SERVICE FAQ
===================================================== */


.service-faq {


    background:white;

}






.service-cta {


    padding:50px 0;

    linear-gradient(

        135deg,

        var(--secondary),

        #1e3a8a

    );

}



.cta-content {


    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}



.cta-content h2 {


    color:white;

    font-size:38px;

    margin-bottom:10px;

}



.cta-content p {


    color:#cbd5e1;

    font-size:18px;

}








/* =====================================================
   REMOTE SUPPORT MENU
===================================================== */


.status-dot {


    width:8px;

    height:8px;

    border-radius:50%;

    background:#10b981;

    display:inline-block;


    animation:pulseDot 2s infinite;

}



@keyframes pulseDot {


    0% {

        box-shadow:
        0 0 0 0 rgba(16,185,129,.5);

    }


    70% {

        box-shadow:
        0 0 0 8px rgba(16,185,129,0);

    }


    100% {

        box-shadow:
        0 0 0 0 rgba(16,185,129,0);

    }

}








/* =====================================================
   RESPONSIVE SERVICE PAGES
===================================================== */



@media(max-width:1100px){



.service-hero-grid {


    grid-template-columns:1fr;

    text-align:center;

}



.service-hero-content p {


    margin-left:auto;

    margin-right:auto;

}



.service-hero .hero-actions {


    justify-content:center;

}



.service-hero-image {


    margin-top:40px;

}



.overview-grid,


.benefits-grid {


    grid-template-columns:1fr;

}



.benefits-card {


    max-width:450px;

    margin:auto;

}



.service-process-grid {


    grid-template-columns:

    repeat(2,1fr);

}



.included-grid {


    grid-template-columns:

    repeat(2,1fr);

}



.why-grid {


    grid-template-columns:

    repeat(2,1fr);

}



}





@media(max-width:700px){



.service-hero {


    padding-top:100px;

}



.service-hero-content h1 {


    font-size:38px;

}



.service-illustration {


    width:280px;

    height:280px;

}



.floating-card {


    font-size:13px;

    padding:10px 15px;

}



.card-one {


    right:-20px;

}



.card-two {


    left:-20px;

}



.included-grid,


.why-grid,


.service-process-grid,


.technology-grid {


    grid-template-columns:1fr;

}



.cta-content {


    flex-direction:column;

    text-align:center;

}



.cta-content h2 {


    font-size:30px;

}



}
/* =========================
   GENERIC BENEFIT CARDS
========================= */


.benefits-grid-simple {

    display:grid;

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

    gap:30px;

}



.benefit-card {


    background:white;

    border:1px solid var(--border);

    padding:35px;

    border-radius:var(--radius);

    transition:var(--transition);


}



.benefit-card:hover {


    transform:translateY(-8px);

    box-shadow:var(--shadow);

    border-color:transparent;


}



.benefit-card i {


    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:
    rgba(37,99,235,.1);

    color:var(--primary);

    font-size:28px;

    margin-bottom:25px;


}



.benefit-card h3 {


    color:var(--secondary);

    margin-bottom:15px;


}



.benefit-card p {


    color:var(--text-light);


}
/* =========================
REMOTE SUPPORT BOX
========================= */






.remote-features {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:30px;
}


.remote-features div {
    display:flex;
    align-items:center;
    gap:12px;
    background:#f8fafc;
    padding:14px;
    border-radius:12px;
    font-weight:600;
}



.remote-features i {


    color:var(--primary);


}



.remote-action {


    background:var(--background);

    padding:40px;

    border-radius:20px;

    text-align:center;


}



.remote-icon {


    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--accent)
    );

    color:white;

    font-size:38px;


}
.overview {

    background:white;

}

.security-panel {


    color:white;


}



.panel-header {


    display:flex;

    align-items:center;

    gap:15px;

    font-size:22px;

    font-weight:700;

    margin-bottom:30px;


}



.panel-header i {


    color:var(--accent);

    font-size:30px;


}



.security-row {


    display:flex;

    justify-content:space-between;

    padding:18px;

    margin-bottom:15px;

    background:

    rgba(255,255,255,.08);

    border-radius:12px;


}



.security-row span {


    color:#cbd5e1;


}



.security-row strong {


    color:#4ade80;


}
.remote-support-box {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 50px;
    align-items: center;
}
.technology-item {

    height:90px;

    background:white;

    border:1px solid var(--border);

    border-radius:15px;

    display:flex;

    align-items:center;

    gap: 12px;

    justify-content:center;

    text-align:center;

    font-size:18px;

    font-weight:700;

    color:#64748b;

    transition:var(--transition);

}
.technology-item i{
    width: 20px;
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}


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

.metric div {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.metric strong {
    white-space: nowrap;
    margin-left: 15px;
}
/* =====================================================
HELP DESK SUPPORT - CUSTOM STYLES
===================================================== */



/* =========================
SERVICE HERO DASHBOARD
========================= */


.service-hero-image{
display:flex;
justify-content:center;
align-items:center;
}



.dashboard-card{

width:100%;
max-width:420px;

background:#ffffff;

border-radius:22px;

padding:28px;

box-shadow:
0 20px 45px rgba(15,23,42,.12);

border:1px solid #e5e7eb;

}



.dashboard-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}



.dashboard-title{

display:flex;

align-items:center;

gap:12px;

font-size:18px;

font-weight:700;

color:#0f172a;

}



.dashboard-title i{

color:#2563eb;

font-size:20px;

}



.online{

background:#dcfce7;

color:#15803d;

font-size:13px;

font-weight:600;

padding:6px 14px;

border-radius:50px;

}






/* METRICS */


.metric{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;

border-bottom:1px solid #e5e7eb;

}



.metric:last-child{

border-bottom:none;

}



.metric div{

display:flex;

align-items:center;

gap:12px;

font-size:15px;

color:#334155;

font-weight:500;

}



.metric i{

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

background:#eff6ff;

color:#2563eb;

border-radius:10px;

font-size:15px;

}



.metric strong{

font-size:14px;

color:#0f172a;

}



.dashboard-footer{

margin-top:18px;

padding:12px;

background:#f8fafc;

border-radius:12px;

display:flex;

align-items:center;

gap:10px;

font-size:14px;

font-weight:600;

color:#15803d;

}



.dashboard-footer i{

font-size:10px;

}







/* =====================================================
REMOTE SUPPORT PANEL
===================================================== */



.remote-support-box{

display:grid;

grid-template-columns:

1.4fr .8fr;

gap:45px;

align-items:center;

background:#ffffff;

border-radius:28px;

padding:45px;

box-shadow:

0 20px 50px rgba(15,23,42,.08);

border:1px solid #e5e7eb;

}





.remote-content h2{

margin-top:20px;

margin-bottom:15px;

}





.remote-content p{

max-width:620px;

color:#64748b;

line-height:1.7;

}







/* REMOTE FEATURES */


.remote-features{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:30px;

}




.remote-feature{

display:flex;

align-items:center;

gap:15px;

padding:16px;

background:#f8fafc;

border-radius:16px;

}



.feature-icon{

width:42px;

height:42px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

background:#eff6ff;

color:#2563eb;

border-radius:12px;

}



.feature-icon i{

font-size:18px;

}



.remote-feature h4{

margin:0 0 4px;

font-size:15px;

color:#0f172a;

}



.remote-feature span{

font-size:13px;

color:#64748b;

line-height:1.4;

}







/* REMOTE ACTION CARD */


.remote-action{

background:

linear-gradient(
145deg,
#2563eb,
#1d4ed8
);

color:white;

padding:35px;

border-radius:24px;

text-align:center;

}



.remote-icon{

width:70px;

height:70px;

margin:0 auto 20px;

display:flex;

align-items:center;

justify-content:center;

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

border-radius:20px;

}



.remote-icon i{

font-size:30px;

}



.remote-action h3{

margin-bottom:12px;

font-size:22px;

}



.remote-action p{

color:rgba(255,255,255,.85);

line-height:1.6;

}



.remote-status{

display:flex;

align-items:center;

justify-content:center;

gap:8px;

margin:20px 0;

font-size:14px;

font-weight:600;

}



.remote-status i{

color:#86efac;

font-size:12px;

}



.remote-action .btn-primary{

background:white;

color:#2563eb;

}



.remote-action small{

display:block;

margin-top:18px;

color:rgba(255,255,255,.7);

}







/* =====================================================
WHY XecureIT NETWORKS CARDS
===================================================== */



.why-card i{

font-size:32px;

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

background:#eff6ff;

color:#2563eb;

border-radius:16px;

margin-bottom:20px;

}



.why-card h3{

margin-bottom:10px;

}








/* =====================================================
TECHNOLOGY ITEMS
===================================================== */


.technology-item i{

font-size:22px;

color:#2563eb;

}







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


@media(max-width:900px){


.remote-support-box{

grid-template-columns:1fr;

padding:30px;

}


.remote-features{

grid-template-columns:1fr;

}



.dashboard-card{

max-width:100%;

}



}

@media(max-width:600px){



.remote-support-box{

padding:22px;

}



.remote-action{

padding:25px;

}



.metric{

gap:15px;

}



.metric div{

font-size:14px;

}

}
.included-card {
    background: #fff;
    border-radius: 15px;
    padding: 35px;
    transition: .4s ease;
    position: relative;
    overflow: hidden;
}


.included-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0,140,255,.15);
}


.included-icon {
    transition: .4s ease;
}


.included-card:hover .included-icon {
    transform: scale(1.15) rotate(5deg);
}
.security-btn {
    min-width: 280px;
    padding: 18px 35px;
    white-space: nowrap;
    text-align: center;
}
/* =========================================
   BENEFITS - MOBILE
========================================= */

@media (max-width: 767px) {

    .benefits-grid-simple {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;

        width: 100%;
        margin: 0;
        padding: 0;
    }


    /* BENEFIT CARD */
    .benefit-card {
        width: 100%;
        min-width: 0;

        box-sizing: border-box;

        padding: 24px 20px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: #ffffff;

        border: 1px solid #e5e7eb;
        border-radius: 10px;

        box-shadow: 0 4px 15px rgba(15, 35, 60, 0.06);

        overflow: hidden;
    }


    /* ICON */
    .benefit-card > i {
        width: 48px;
        height: 48px;

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

        margin-bottom: 16px;

        color: #1268c4;

        background: #edf6ff;

        border-radius: 8px;

        font-size: 20px;
    }


    /* TITLE */
    .benefit-card h3 {
        width: 100%;

        margin: 0 0 10px;

        color: #101828;

        font-size: 19px;
        line-height: 1.3;

        font-weight: 700;
    }


    /* DESCRIPTION */
    .benefit-card p {
        width: 100%;

        margin: 0;

        color: #667085;

        font-size: 14px;
        line-height: 1.65;

        text-align: left;
    }


    /* SUBTLE TOUCH FEEDBACK */
    .benefit-card:active {
        transform: translateY(1px);
    }

}