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


.hero{
    padding-top:200;
}

.services-hero-wrapper{
    position:relative;
    padding-top:200px;
}

.services-hero-left{
    position:relative;
}

.services-hero-left .section-tag{
    margin-bottom:24px;
}

.services-hero-left h1{
    max-width:850px;
}

.services-hero-left p{
    max-width:720px;
}

.services-hero-right{
    position:relative;
    width:100%;
    margin-top:70px;
    display:flex;
    justify-content:center;
    align-items:center;
}

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

.hero-preview{

    width:min(560px,100%);

    border-radius:28px;

    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(35px);

    box-shadow:
        0 35px 90px rgba(0,0,0,.45),
        0 0 80px rgba(255,45,85,.10);

}

.hero-preview-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 28px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.hero-preview-header span{

    color:#fff;

    font-weight:700;

}

.hero-status{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:#6cff9c;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#4dff88;

    box-shadow:0 0 18px rgba(77,255,136,.8);

    animation:servicePulse 2s infinite;

}

.hero-preview-body{

    padding:26px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.preview-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-radius:18px;

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

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

    transition:.35s;

}

.preview-item:hover{

    transform:translateX(6px);

    border-color:rgba(255,45,85,.25);

    background:rgba(255,45,85,.05);

}

.preview-item span{

    color:#9f9f9f;

    font-size:14px;

}

.preview-item strong{

    color:#fff;

    font-weight:700;

}

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

.services-hero-right .floating-card{

    min-width:180px;

    justify-content:flex-start;

}

.services-hero-right .floating-card-1{

    left:-120px;

    top:40px;

}

.services-hero-right .floating-card-2{

    right:-70px;

    top:180px;

}

.services-hero-right .floating-card-3{

    left:-50px;

    bottom:35px;

}

/*=========================================================
    SERVICE STATS
=========================================================*/

.services-stats{

    padding:110px 0;

}

.services-stats-grid{

    display:grid;

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

    gap:28px;

}

.service-stat-card{

    position:relative;

    overflow:hidden;

    padding:42px 30px;

    text-align:center;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(30px);

    transition:.4s;

}

.service-stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top,
        rgba(255,45,85,.10),
        transparent 70%
    );

    opacity:0;

    transition:.4s;

}

.service-stat-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,45,85,.28);

    box-shadow:
        0 30px 70px rgba(255,45,85,.12);

}

.service-stat-card:hover::before{

    opacity:1;

}

.service-stat-card h2{

    font-size:48px;

    margin-bottom:14px;

    color:#fff;

}

.service-stat-card p{

    color:#a8a8a8;

    font-size:15px;

    letter-spacing:.5px;

}

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

@keyframes servicePulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.35);

        opacity:.6;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}
/* HERO SPACING */

.services-hero-wrapper{

    padding-top:70px;
    padding-bottom:140px;

}

.services-hero-right{

    margin-top:90px;

}

/* STATS */

.services-stats{

    padding-top:40px;
    padding-bottom:120px;

}
.hero-preview{

    width:min(620px,100%);

}
.services-hero-right .floating-card-1{

    left:-140px;
    top:30px;

}

.services-hero-right .floating-card-2{

    right:-95px;
    top:190px;

}

.services-hero-right .floating-card-3{

    left:-70px;
    bottom:45px;

}
/*=========================================================
    SERVICES PANEL
=========================================================*/

.services-panel-section{

    position:relative;

    padding:120px 0;

}

.services-layout{

    display:grid;

    grid-template-columns:260px 1fr 260px;

    gap:35px;

    align-items:start;

}

/*=========================================================
    SIDE CARDS
=========================================================*/

.services-left,
.services-right{

    display:flex;

    flex-direction:column;

    gap:22px;

    position:sticky;

    top:140px;

}

.service-mini-card{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:26px;

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(30px);

    transition:.35s;

}

.service-mini-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top,
        rgba(255,45,85,.10),
        transparent 70%
    );

    opacity:0;

    transition:.35s;

}

.service-mini-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,45,85,.25);

    box-shadow:

        0 25px 55px rgba(255,45,85,.12);

}

.service-mini-card:hover::before{

    opacity:1;

}

.service-mini-icon{

    width:60px;

    height:60px;

    display:grid;

    place-items:center;

    margin-bottom:22px;

    border-radius:18px;

    background:rgba(255,45,85,.10);

    color:var(--primary);

    font-size:24px;

}

.service-mini-card h3{

    font-size:22px;

    margin-bottom:12px;

}

.service-mini-card p{

    color:#aaaaaa;

    line-height:1.8;

}

/*=========================================================
    SERVICE PANEL
=========================================================*/

.service-panel{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:34px;

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,.86),
        rgba(10,10,10,.76)
    );

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

    backdrop-filter:blur(35px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.45),

        0 0 90px rgba(255,45,85,.08);

}

.service-panel::before{

    content:"";

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    top:-180px;

    right:-180px;

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

    filter:blur(120px);

}

.service-panel-header{

    position:relative;

    margin-bottom:40px;

}

.panel-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,45,85,.12);

    color:var(--primary);

    font-weight:700;

    font-size:13px;

    margin-bottom:18px;

}

.service-panel-header h2{

    font-size:42px;

    margin-bottom:16px;

}

.service-panel-header p{

    color:#aaaaaa;

    max-width:520px;

}

/*=========================================================
    FORM
=========================================================*/

.service-form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.service-field{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.service-field label{

    color:#d8d8d8;

    font-size:15px;

    font-weight:600;

}

.service-field input,
.service-field select{

    width:100%;

    height:62px;

    padding:0 20px;

    border-radius:18px;

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

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

    color:#fff;

    font-size:15px;

    transition:.35s;

}

.service-field input::placeholder{

    color:#777;

}

.service-field input:focus,
.service-field select:focus{

    border-color:rgba(255,45,85,.35);

    box-shadow:

        0 0 0 4px rgba(255,45,85,.08);

}

/*=========================================================
    PRICE
=========================================================*/

.service-price{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 24px;

    margin-top:8px;

    border-radius:20px;

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

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

}

.service-price span{

    color:#a8a8a8;

}

.service-price strong{

    font-size:28px;

    color:#fff;

}

.service-submit{

    width:100%;

    margin-top:10px;

}
/*=========================================================
    QUICK SERVICES
=========================================================*/

.quick-services{

    position:relative;

    padding:120px 0;

}

.quick-services-grid{

    display:grid;

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

    gap:24px;

    margin-top:70px;

}

.quick-service-card{

    position:relative;

    overflow:hidden;

    height:170px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:20px;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(30px);

    transition:.4s;

}

.quick-service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top,
        rgba(255,45,85,.12),
        transparent 75%
    );

    opacity:0;

    transition:.4s;

}

.quick-service-card:hover{

    transform:

        translateY(-10px)

        scale(1.02);

    border-color:rgba(255,45,85,.28);

    box-shadow:

        0 30px 70px rgba(255,45,85,.15);

}

.quick-service-card:hover::before{

    opacity:1;

}

.quick-service-card i{

    font-size:34px;

    color:var(--primary);

    transition:.35s;

}

.quick-service-card:hover i{

    transform:

        scale(1.15)

        rotate(-8deg);

}

.quick-service-card span{

    color:#fff;

    font-size:17px;

    font-weight:700;

}

/*=========================================================
    PLATFORM SHOWCASE
=========================================================*/

.platform-showcase{

    position:relative;

    padding:120px 0;

}

.platform-showcase-grid{

    display:grid;

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

    gap:28px;

    margin-top:70px;

}

.platform-item{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    height:110px;

    border-radius:24px;

    background:

    linear-gradient(

        180deg,

        rgba(18,18,18,.82),

        rgba(10,10,10,.72)

    );

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

    backdrop-filter:blur(30px);

    transition:.4s;

}

.platform-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,45,85,.08),

        transparent

    );

    opacity:0;

    transition:.4s;

}

.platform-item:hover{

    transform:

        translateY(-8px);

    border-color:rgba(255,45,85,.25);

    box-shadow:

        0 25px 60px rgba(255,45,85,.12);

}

.platform-item:hover::before{

    opacity:1;

}

.platform-item i{

    font-size:34px;

    color:var(--primary);

    transition:.35s;

}

.platform-item:hover i{

    transform:

        scale(1.12);

}

.platform-item span{

    font-size:20px;

    font-weight:700;

    color:#fff;

}

/*=========================================================
    ORDER INFORMATION
=========================================================*/

.order-information{

    padding:120px 0;

}

.order-information-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    padding:55px;

    border-radius:34px;

    background:

    linear-gradient(

        180deg,

        rgba(18,18,18,.84),

        rgba(10,10,10,.74)

    );

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

    backdrop-filter:blur(35px);

}

.order-information-left h2{

    font-size:44px;

    margin-bottom:18px;

}

.order-information-left p{

    color:#ababab;

    line-height:1.9;

}

.order-information-right ul{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.order-information-right li{

    display:flex;

    align-items:center;

    gap:16px;

    color:#ececec;

    padding:18px 20px;

    border-radius:18px;

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

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

    transition:.35s;

}

.order-information-right li:hover{

    transform:translateX(8px);

    border-color:rgba(255,45,85,.25);

}

.order-information-right i{

    color:#46ff92;

    font-size:18px;

}
/*=========================================================
    SERVICE INFORMATION
=========================================================*/

.service-information{

    position:relative;

    padding:130px 0;

}

.service-info-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.service-info-box{

    position:relative;

    overflow:hidden;

    padding:36px;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(30px);

    transition:.4s;

}

.service-info-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at top,
        rgba(255,45,85,.10),
        transparent 70%
    );

    opacity:0;

    transition:.35s;

}

.service-info-box:hover{

    transform:translateY(-10px);

    border-color:rgba(255,45,85,.28);

    box-shadow:

        0 30px 70px rgba(255,45,85,.12);

}

.service-info-box:hover::before{

    opacity:1;

}

.service-info-icon{

    width:72px;

    height:72px;

    display:grid;

    place-items:center;

    margin-bottom:26px;

    border-radius:22px;

    background:rgba(255,45,85,.10);

    color:var(--primary);

    font-size:28px;

}

.service-info-box h3{

    font-size:24px;

    margin-bottom:16px;

}

.service-info-box p{

    color:#aaaaaa;

    line-height:1.9;

}

/*=========================================================
    SERVICE STEPS
=========================================================*/

.service-steps{

    position:relative;

    padding:130px 0;

}

.steps-grid{

    display:grid;

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

    gap:28px;

    margin-top:70px;

}

.step-card{

    position:relative;

    overflow:hidden;

    padding:45px 30px;

    border-radius:30px;

    text-align:center;

    background:

    linear-gradient(

        180deg,

        rgba(18,18,18,.82),

        rgba(10,10,10,.72)

    );

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

    backdrop-filter:blur(30px);

    transition:.4s;

}

.step-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top,

        rgba(255,45,85,.12),

        transparent 70%

    );

    opacity:0;

    transition:.35s;

}

.step-card:hover{

    transform:

        translateY(-10px);

    border-color:rgba(255,45,85,.25);

    box-shadow:

        0 30px 65px rgba(255,45,85,.12);

}

.step-card:hover::before{

    opacity:1;

}

.step-card span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:62px;

    height:62px;

    margin-bottom:24px;

    border-radius:50%;

    background:rgba(255,45,85,.12);

    color:var(--primary);

    font-size:22px;

    font-weight:800;

}

.step-card h3{

    font-size:22px;

    color:#fff;

}

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

.services-cta{

    padding:140px 0;

}

.services-cta-box{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:90px 70px;

    border-radius:40px;

    background:

    linear-gradient(

        135deg,

        rgba(255,45,85,.08),

        rgba(141,61,255,.05)

    );

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

    backdrop-filter:blur(35px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.45),

        0 0 90px rgba(255,45,85,.08);

}

.services-cta-box::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    filter:blur(180px);

    top:-220px;

    left:50%;

    transform:translateX(-50%);

}

.services-cta-box span{

    color:var(--primary);

    font-weight:700;

    letter-spacing:2px;

}

.services-cta-box h2{

    font-size:58px;

    max-width:820px;

    margin:24px auto;

    line-height:1.15;

}

.services-cta-box p{

    max-width:720px;

    margin:0 auto 45px;

    color:#b2b2b2;

    line-height:1.9;

}
/*=========================================================
    POPULAR SERVICES
=========================================================*/

.popular-services{

    position:relative;

    padding:130px 0;

}

.popular-services-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.popular-service-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    padding:40px;

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(35px);

    transition:.35s;

}

.popular-service-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,45,85,.28);

    box-shadow:
        0 35px 80px rgba(255,45,85,.12);

}

.popular-service-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.popular-service-card p{

    color:#a7a7a7;

    line-height:1.8;

    margin-bottom:28px;

}

.popular-service-price{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.06);

}

.popular-service-price strong{

    color:#fff;

    font-size:28px;

}

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

.services-faq{

    padding:130px 0;

}

.faq-wrapper{

    max-width:950px;

    margin:70px auto 0;

    display:flex;

    flex-direction:column;

    gap:20px;

}

.faq-item{

    border-radius:24px;

    overflow:hidden;

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

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

    transition:.35s;

}

.faq-item:hover{

    border-color:rgba(255,45,85,.25);

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 32px;

    cursor:pointer;

}

.faq-question h3{

    font-size:20px;

    font-weight:600;

}

.faq-question i{

    color:var(--primary);

    transition:.35s;

}

.faq-item.active i{

    transform:rotate(180deg);

}

.faq-answer{

    padding:0 32px 28px;

    color:#a9a9a9;

    line-height:1.9;

}

/*=========================================================
    LIVE STATUS
=========================================================*/

.live-status{

    padding:130px 0;

}

.live-status-grid{

    display:grid;

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

    gap:26px;

}

.status-card{

    position:relative;

    text-align:center;

    padding:38px;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(35px);

    transition:.35s;

}

.status-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,45,85,.25);

}

.status-circle{

    width:18px;

    height:18px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#43ff8d;

    box-shadow:

        0 0 20px #43ff8d,

        0 0 40px #43ff8d;

}

.status-card h3{

    margin-bottom:12px;

    font-size:20px;

}

.status-card p{

    color:#9d9d9d;

}

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

.recent-services{

    padding:130px 0;

}

.recent-services-table{

    overflow:hidden;

    border-radius:28px;

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

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

    backdrop-filter:blur(35px);

}

.recent-services-table table{

    width:100%;

    border-collapse:collapse;

}

.recent-services-table th{

    padding:24px;

    text-align:left;

    color:#fff;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.recent-services-table td{

    padding:22px 24px;

    color:#b5b5b5;

    border-bottom:1px solid rgba(255,255,255,.04);

}

.recent-services-table tr:hover{

    background:rgba(255,45,85,.04);

}
/*=========================================================
    LIVE SERVICE PREVIEW
=========================================================*/

.live-service-preview{

    padding:130px 0;

}

.live-preview-wrapper{

    display:grid;

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

    gap:35px;

}

.live-preview-card{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:30px;

    background:linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(30px);

    transition:.35s;

}

.live-preview-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,45,85,.25);

    box-shadow:0 30px 70px rgba(255,45,85,.10);

}

.preview-card-header{

    margin-bottom:28px;

}

.preview-card-header h2{

    margin-top:12px;

    font-size:30px;

}

.preview-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.preview-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-radius:18px;

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

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

}

.preview-row span{

    color:#999;

}

.preview-row strong{

    color:#fff;

    font-weight:700;

}

.service-online{

    color:#4cff8d !important;

}

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

.recent-services{

    padding:120px 0;

}

.recent-services-grid{

    display:grid;

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

    gap:24px;

    margin-top:70px;

}

.recent-service{

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    border:none;

    cursor:pointer;

    color:#fff;

    font-size:16px;

    font-weight:600;

    border-radius:22px;

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

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

    transition:.35s;

}

.recent-service:hover{

    transform:translateY(-6px);

    border-color:rgba(255,45,85,.25);

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

}

.recent-service i{

    color:var(--primary);

    font-size:22px;

}

/*=========================================================
    SERVICE FILTERS
=========================================================*/

.service-filters{

    padding:120px 0;

}

.service-filter-wrapper{

    margin-top:60px;

    display:flex;

    flex-direction:column;

    gap:28px;

}

.service-search{

    position:relative;

}

.service-search i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    color:#777;

}

.service-search input{

    width:100%;

    height:65px;

    padding:0 22px 0 60px;

    border-radius:22px;

    color:#fff;

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

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

}

.service-filter-buttons{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.filter-button{

    padding:14px 24px;

    border-radius:999px;

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

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

    color:#ddd;

    cursor:pointer;

    transition:.3s;

}

.filter-button:hover,
.filter-button.active{

    color:#fff;

    border-color:rgba(255,45,85,.25);

    background:rgba(255,45,85,.10);

}

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

.services-table{

    padding:120px 0;

}

.table-wrapper{

    overflow:hidden;

    border-radius:30px;

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

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

    backdrop-filter:blur(30px);

}

.table-header{

    display:grid;

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

    padding:24px 30px;

    font-weight:700;

    color:#fff;

    border-bottom:1px solid rgba(255,255,255,.06);

}

#servicesTableBody{

    min-height:350px;

}
/*=========================================================
    ORDER NOTICE
=========================================================*/

.order-notice{

    padding:110px 0 70px;

}

.order-notice-card{

    display:flex;

    align-items:center;

    gap:28px;

    padding:38px 42px;

    border-radius:30px;

    background:linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(30px);

}

.order-notice-card i{

    width:74px;

    height:74px;

    display:grid;

    place-items:center;

    flex-shrink:0;

    border-radius:22px;

    background:rgba(255,45,85,.12);

    color:var(--primary);

    font-size:30px;

}

.order-notice-card h3{

    margin-bottom:12px;

    font-size:28px;

}

.order-notice-card p{

    color:#a8a8a8;

    line-height:1.8;

}

/*=========================================================
    EMPTY STATE
=========================================================*/

.empty-service-state{

    padding:70px 0 120px;

}

.empty-state-card{

    text-align:center;

    padding:90px 60px;

    border-radius:34px;

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

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

    backdrop-filter:blur(30px);

}

.empty-state-card i{

    font-size:70px;

    color:var(--primary);

    margin-bottom:30px;

}

.empty-state-card h2{

    font-size:42px;

    margin-bottom:18px;

}

.empty-state-card p{

    max-width:620px;

    margin:auto;

    color:#a9a9a9;

    line-height:1.9;

}

/*=========================================================
    ORDER CALCULATOR
=========================================================*/

.order-calculator{

    padding:130px 0;

}

.calculator-wrapper{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:50px;

    align-items:center;

    padding:55px;

    border-radius:34px;

    background:linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

}

.calculator-left h2{

    margin:20px 0;

    font-size:46px;

}

.calculator-left p{

    color:#a8a8a8;

    line-height:1.8;

}

.calculator-right{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.calculator-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 24px;

    border-radius:18px;

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

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

}

.calculator-row span{

    color:#9f9f9f;

}

.calculator-row strong{

    color:#fff;

    font-size:22px;

}

/*=========================================================
    PLATFORM STATUS
=========================================================*/

.platform-status{

    padding:130px 0;

}

.platform-status-grid{

    display:grid;

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

    gap:28px;

    margin-top:70px;

}

.platform-status-card{

    text-align:center;

    padding:45px 30px;

    border-radius:30px;

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

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

    transition:.35s;

}

.platform-status-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,45,85,.25);

}

.platform-status-card i{

    font-size:44px;

    color:var(--primary);

    margin-bottom:22px;

}

.platform-status-card h3{

    margin-bottom:14px;

}

.status-online{

    color:#45ff92;

}

.status-maintenance{

    color:#ffd35f;

}

/*=========================================================
    ORDER SECURITY
=========================================================*/

.order-security{

    padding:130px 0;

}

.security-grid{

    display:grid;

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

    gap:30px;

}

.security-item{

    text-align:center;

    padding:45px;

    border-radius:30px;

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

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

    transition:.35s;

}

.security-item:hover{

    transform:translateY(-10px);

    border-color:rgba(255,45,85,.25);

}

.security-item i{

    font-size:42px;

    margin-bottom:24px;

    color:var(--primary);

}

.security-item h3{

    margin-bottom:14px;

}

.security-item p{

    color:#aaa;

    line-height:1.8;

}
/*=========================================================
    SERVICE FEATURES
=========================================================*/

.service-features{

    padding:130px 0;

}

.service-features-grid{

    display:grid;

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

    gap:28px;

}

.feature-box{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:45px 30px;

    border-radius:30px;

    background:linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(30px);

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-10px);

    border-color:rgba(255,45,85,.25);

    box-shadow:0 30px 60px rgba(255,45,85,.10);

}

.feature-box i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:22px;

}

.feature-box h3{

    margin-bottom:14px;

}

.feature-box p{

    color:#a8a8a8;

    line-height:1.8;

}

/*=========================================================
    SERVICE RULES
=========================================================*/

.service-rules{

    padding:130px 0;

}

.rules-card{

    padding:55px;

    border-radius:34px;

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

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

    backdrop-filter:blur(30px);

}

.rules-header{

    margin-bottom:45px;

}

.rules-header h2{

    margin-top:18px;

    font-size:42px;

}

.rules-list{

    display:grid;

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

    gap:22px;

}

.rules-list li{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 24px;

    border-radius:18px;

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

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

}

.rules-list i{

    color:#49ff94;

}

/*=========================================================
    BALANCE REMINDER
=========================================================*/

.balance-reminder{

    padding:120px 0;

}

.balance-reminder-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:55px;

    border-radius:34px;

    background:linear-gradient(
        135deg,
        rgba(255,45,85,.08),
        rgba(255,255,255,.03)
    );

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

}

.balance-reminder-card h2{

    font-size:40px;

    margin-bottom:16px;

}

.balance-reminder-card p{

    color:#aaa;

}

/*=========================================================
    ORDER HISTORY
=========================================================*/

.order-history-preview{

    padding:130px 0;

}

.history-table{

    overflow:hidden;

    margin-top:60px;

    border-radius:28px;

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

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

}

.history-head,

.history-row{

    display:grid;

    grid-template-columns:120px 2fr 150px 180px;

    align-items:center;

}

.history-head{

    padding:24px 30px;

    font-weight:700;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.history-row{

    padding:22px 30px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.history-row:last-child{

    border-bottom:none;

}

.history-row:hover{

    background:rgba(255,45,85,.04);

}

.status-processing{

    color:#ffb84a;

}

.status-completed{

    color:#4cff8d;

}

.status-pending{

    color:#7fb7ff;

}

/*=========================================================
    PLATFORM COUNTER
=========================================================*/

.platform-counter{

    padding:120px 0;

}

.platform-counter-grid{

    display:grid;

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

    gap:28px;

}

.counter-card{

    text-align:center;

    padding:45px;

    border-radius:30px;

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

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

    transition:.35s;

}

.counter-card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,45,85,.25);

}

.counter-card i{

    font-size:40px;

    color:var(--primary);

    margin-bottom:22px;

}

.counter-card h2{

    font-size:48px;

    margin-bottom:10px;

}

.counter-card span{

    color:#aaa;

}

/*=========================================================
    RECOMMENDATIONS
=========================================================*/

.service-recommendations{

    padding:130px 0;

}

.recommendation-grid{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:60px;

}

.recommendation-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 28px;

    border-radius:22px;

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

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

    transition:.35s;

}

.recommendation-card:hover{

    border-color:rgba(255,45,85,.25);

    transform:translateX(8px);

}

.recommendation-icon{

    width:65px;

    height:65px;

    display:grid;

    place-items:center;

    border-radius:18px;

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

    color:var(--primary);

    font-size:30px;

}

.recommendation-content{

    flex:1;

    padding:0 25px;

}

.recommendation-content h3{

    margin-bottom:8px;

}

.recommendation-content p{

    color:#aaa;

}

.recommendation-button{

    height:52px;

    padding:0 28px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.recommendation-button:hover{

    transform:scale(1.05);

}
/*=========================================================
    WALLET SUMMARY
=========================================================*/

.wallet-summary{

    padding:130px 0;

}

.wallet-summary-card{

    display:grid;

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

    gap:30px;

    padding:55px;

    border-radius:34px;

    background:linear-gradient(
        180deg,
        rgba(18,18,18,.82),
        rgba(10,10,10,.72)
    );

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

    backdrop-filter:blur(35px);

}

.wallet-summary-card div{

    text-align:center;

}

.wallet-summary-card small{

    display:block;

    color:#999;

    margin-bottom:14px;

    letter-spacing:1px;

    text-transform:uppercase;

}

.wallet-summary-card h2{

    font-size:42px;

    color:#fff;

}

/*=========================================================
    ORDER CONFIRMATION
=========================================================*/

.order-confirmation{

    padding:120px 0;

}

.confirmation-card{

    text-align:center;

    padding:90px 60px;

    border-radius:36px;

    background:linear-gradient(
        180deg,
        rgba(18,18,18,.84),
        rgba(10,10,10,.74)
    );

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

    backdrop-filter:blur(35px);

}

.confirmation-card i{

    font-size:70px;

    color:#48ff94;

    margin-bottom:30px;

}

.confirmation-card h2{

    font-size:48px;

    margin-bottom:20px;

}

.confirmation-card p{

    max-width:700px;

    margin:0 auto 45px;

    color:#aaa;

    line-height:1.8;

}

/*=========================================================
    ORDER SUMMARY
=========================================================*/

.order-summary-panel{

    padding:130px 0;

}

.order-summary-wrapper{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:60px;

    align-items:center;

    padding:55px;

    border-radius:34px;

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

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

}

.summary-left h2{

    margin:20px 0;

    font-size:46px;

}

.summary-left p{

    color:#aaa;

}

.summary-right{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 24px;

    border-radius:18px;

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

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

}

.summary-item span{

    color:#999;

}

.summary-item strong{

    color:#fff;

}

/*=========================================================
    SUPPORT BANNER
=========================================================*/

.support-banner{

    padding:130px 0;

}

.support-banner-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:35px;

    padding:60px;

    border-radius:34px;

    background:linear-gradient(
        135deg,
        rgba(255,45,85,.08),
        rgba(255,255,255,.03)
    );

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

}

.support-banner-card h2{

    font-size:42px;

    margin-bottom:15px;

}

.support-banner-card p{

    color:#aaa;

}

/*=========================================================
    TRUST BADGES
=========================================================*/

.trust-badges{

    padding:120px 0;

}

.trust-badges-grid{

    display:grid;

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

    gap:24px;

}

.trust-badge{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    height:90px;

    border-radius:24px;

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

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

    transition:.35s;

}

.trust-badge:hover{

    transform:translateY(-6px);

    border-color:rgba(255,45,85,.25);

}

.trust-badge i{

    color:var(--primary);

    font-size:24px;

}

.trust-badge span{

    font-weight:600;

    color:#fff;

}

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

.footer-cta{

    padding:130px 0;

}

.footer-cta-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

    padding:70px;

    border-radius:36px;

    background:linear-gradient(
        135deg,
        rgba(255,45,85,.10),
        rgba(255,255,255,.03)
    );

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

    backdrop-filter:blur(35px);

}

.footer-cta-card h2{

    font-size:48px;

    margin:20px 0;

}

.footer-cta-card p{

    max-width:650px;

    color:#aaa;

    line-height:1.8;

}

/*=========================================================
    PAGE END
=========================================================*/

.page-end-space{

    height:120px;

}
/*=========================================================
    GLOBAL CARD HOVER
=========================================================*/

.service-mini-card,
.service-stat-card,
.quick-service-card,
.platform-item,
.service-info-box,
.step-card,
.popular-service-card,
.status-card,
.platform-status-card,
.feature-box,
.counter-card,
.live-preview-card{

    will-change:transform;

}

.service-mini-card:hover,
.service-stat-card:hover,
.quick-service-card:hover,
.platform-item:hover,
.service-info-box:hover,
.step-card:hover,
.popular-service-card:hover,
.status-card:hover,
.platform-status-card:hover,
.feature-box:hover,
.counter-card:hover,
.live-preview-card:hover{

    z-index:2;

}

/*=========================================================
    BUTTONS
=========================================================*/

.service-submit,
.recommendation-button,
.popular-service-footer button{

    cursor:pointer;

    transition:.35s;

}

.popular-service-footer button{

    height:48px;

    padding:0 22px;

    border:none;

    border-radius:14px;

    background:rgba(255,45,85,.12);

    color:#fff;

    font-weight:700;

}

.popular-service-footer button:hover{

    background:var(--primary);

    transform:translateY(-3px);

}

.service-submit:hover,
.recommendation-button:hover{

    transform:translateY(-3px);

}

/*=========================================================
    INPUTS
=========================================================*/

.service-field input,
.service-field select,
.service-search input{

    outline:none;

}

.service-field input:hover,
.service-field select:hover,
.service-search input:hover{

    border-color:rgba(255,255,255,.15);

}

/*=========================================================
    SCROLLBAR
=========================================================*/

.table-wrapper::-webkit-scrollbar,
.history-table::-webkit-scrollbar{

    height:8px;

}

.table-wrapper::-webkit-scrollbar-thumb,
.history-table::-webkit-scrollbar-thumb{

    background:rgba(255,45,85,.35);

    border-radius:999px;

}

/*=========================================================
    STATUS BAR
=========================================================*/

.status-bar{

    width:100%;

    height:8px;

    margin:18px 0;

    border-radius:999px;

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

    overflow:hidden;

}

.status-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        #ff3d57,

        #ff6b81

    );

}

/*=========================================================
    POPULAR SERVICE
=========================================================*/

.popular-service-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.popular-service-icon{

    width:65px;

    height:65px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:rgba(255,45,85,.10);

    color:var(--primary);

    font-size:30px;

}

.popular-service-badge{

    padding:8px 16px;

    border-radius:999px;

    background:rgba(255,45,85,.10);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

}

.popular-service-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:35px;

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.06);

}

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

.faq-answer{

    display:none;

}

.faq-item.active .faq-answer{

    display:block;

}

.faq-item.active{

    border-color:rgba(255,45,85,.25);

}

/*=========================================================
    TRANSITIONS
=========================================================*/

button,
a,
input,
select{

    transition:

        background .3s,

        color .3s,

        border-color .3s,

        transform .3s,

        box-shadow .3s;

}

/*=========================================================
    LAST SECTION SPACING
=========================================================*/

.footer-cta{

    margin-bottom:80px;

}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background:

        radial-gradient(circle at 18% 22%,
        rgba(255,40,80,.16),
        transparent 34%),

        radial-gradient(circle at 82% 18%,
        rgba(120,70,255,.12),
        transparent 34%),

        radial-gradient(circle at 50% 65%,
        rgba(255,45,85,.08),
        transparent 42%);

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    background:

        linear-gradient(

            180deg,

            rgba(255,40,80,.03),

            transparent 35%,

            transparent 65%,

            rgba(120,70,255,.03)

        );

}
.background-system{

    filter:saturate(1.15) contrast(1.05);

}
.service-field select{

    background:#161616;

    color:#fff;

}

.service-field select option{

    background:#161616;

    color:#fff;

}
/*=========================================================
    SCROLL TOP BUTTON
=========================================================*/

.scroll-top-btn{

    position:fixed;

    right:35px;

    bottom:35px;

    width:62px;

    height:62px;

    border:none;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    background:linear-gradient(
        135deg,
        #ff3d57,
        #ff5f7d
    );

    color:#fff;

    font-size:22px;

    box-shadow:

        0 15px 35px rgba(255,61,87,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(25px);

    transition:.35s;

    z-index:9999;

}

.scroll-top-btn.show{

    opacity:1;

    visibility:visible;

    transform:none;

}

.scroll-top-btn:hover{

    transform:translateY(-6px);

    box-shadow:

        0 20px 45px rgba(255,61,87,.45);

}
.scroll-top-btn{

    position:fixed;

    right:35px;

    bottom:35px;

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:22px;

    background:linear-gradient(135deg,#ff3d57,#ff5f7d);

    color:#fff;

    cursor:pointer;

    z-index:9999;

    box-shadow:0 15px 35px rgba(255,61,87,.35);

}

/*=========================================================
    POPUP
=========================================================*/

.service-popup{

    position:fixed;

    top:30px;

    right:30px;

    z-index:99999;

    opacity:0;

    transform:translateY(-20px);

    transition:.3s;

    pointer-events:none;

}

.service-popup.show{

    opacity:1;

    transform:translateY(0);

}

.service-popup-box{

    width:340px;

    padding:22px;

    border-radius:16px;

    background:#111;

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

    box-shadow:0 20px 60px rgba(0,0,0,.45);

    color:#fff;

    text-align:center;

}

.service-popup-box.success{

    border-color:#00d26a;

}

.service-popup-box.error{

    border-color:#ff3b3b;

}

.service-popup-box i{

    font-size:40px;

    margin-bottom:15px;

}

.service-popup-box.success i{

    color:#00d26a;

}

.service-popup-box.error i{

    color:#ff3b3b;

}

.service-popup-box h3{

    margin-bottom:10px;

    font-size:20px;

}

.service-popup-box p{

    opacity:.8;

    line-height:1.6;

}