.elementor-3086 .elementor-element.elementor-element-f9e4e92{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-d127d4a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-b538e42{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-9e540a7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-ae60b90{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-32e87b2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-a546fd0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-5a3e6ed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-b1eab34{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3086 .elementor-element.elementor-element-cae68a6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-f455286 */<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تعمیر تخصصی سرفیس</title>

<style>
body {
    margin: 0;
    font-family: sans-serif;
    direction: rtl;
    background: #0b0f19;
    color: #fff;
}

/* HERO */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 10%;
    gap: 40px;
    background: radial-gradient(circle at top right, #1a237e, #0b0f19 60%);
}

.hero-content {
    max-width: 600px;
}

/* TEXT STYLING */
.hero h1 {
    font-size: 42px;
    margin-bottom: 20px;
    color: #ddbec5;
    line-height: 1.4;
}

.hero h2 {
    font-size: 20px;
    font-weight: 400;
    color: #b0bec5;
    margin-bottom: 25px;
    line-height: 1.8;
    text-align: justify;
}

.hero p {
    font-size: 16px;
    line-height: 2.2;
    color: #cfd8dc;
    margin-bottom: 30px;
    text-align: justify;
}

/* BUTTONS */
.buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    display: inline-block;
    text-align: center;
    min-width: 120px;
}

.btn-call {
    background: #1e88e5;
    color: #fff;
}
.btn-call:hover { background: #1565c0; }

.btn-whatsapp {
    background: #25D366;
    color: #fff;
}
.btn-whatsapp:hover { background: #1ebe5d; }

.btn-bale {
    background: #0088cc;
    color: #fff;
}
.btn-bale:hover { background: #006fa3; }

/* IMAGE */
.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-image div {
    width: 320px;
    height: 220px;
    background: linear-gradient(135deg, #1e88e5, #0d47a1);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 60px 20px;
    }

    .hero h2,
    .hero p {
        text-align: justify;
    }

    .buttons {
        justify-content: center;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero-image div {
        width: 260px;
        height: 180px;
    }
}
</style>
</head>

<body>

<section class="hero">

    <div class="hero-content">
        <h1>تعمیر تخصصی Microsoft Surface در تهران</h1>
        
        <h2>
            تعمیر سرفیس پرو، سرفیس بوک و سرفیس لپ‌تاپ با عیب‌یابی دقیق و بدون آسیب به تاچ و LCD
        </h2>

        <p>
            اگر دستگاه سرفیس شما دچار مشکل روشن نشدن، شکستگی صفحه، خرابی تاچ،
            ضعف باتری یا ایرادات مادربرد شده، تعمیر آن نیازمند تخصص واقعی در
            ساختار پیچیده Microsoft Surface است. ما با تجهیزات پیشرفته و تجربه
            تخصصی، تعمیرات را بدون ریسک آسیب بیشتر انجام می‌دهیم.
        </p>

        <div class="buttons">
            <a href="tel:+982100000000" class="btn btn-call">📞 تماس</a>
            <a href="https://wa.me/989120000000" class="btn btn-whatsapp">💬 واتساپ</a>
            <a href="https://ble.ir/your_id" class="btn btn-bale">🔵 پیام در بله</a>
        </div>
    </div>

    <div class="hero-image">
        <div></div>
    </div>

</section>

</body>
</html>/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-99e6c97 */body{
    margin:0;
    font-family:sans-serif;
    direction:rtl;
    background:#ffffff;
    color:#111;
}

/* TRUST BAR SECTION */
.trust-bar{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:20px;
    padding:60px 10%;
    background:#ffffff;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

/* CARD */
.trust-item{
    flex:1;
    background:#ffffff;
    border:1px solid #e6e6e6;
    border-radius:14px;
    padding:25px 20px;
    text-align:center;
    transition:0.3s;
    box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.trust-item:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* NUMBER */
.trust-number{
    font-size:22px;
    font-weight:bold;
    color:#1976d2;
    margin-bottom:10px;
}

/* TITLE */
.trust-title{
    font-size:14px;
    font-weight:700;
    margin-bottom:10px;
    color:#111;
}

/* DESCRIPTION */
.trust-desc{
    font-size:13px;
    line-height:2;
    color:#555;
    text-align:justify;
}

/* RESPONSIVE */
@media (max-width:900px){
    .trust-bar{
        flex-direction:column;
        padding:40px 20px;
    }

    .trust-item{
        text-align:right;
    }

    .trust-desc{
        text-align:justify;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8d2c1dc */body{
    margin:0;
    font-family:sans-serif;
    direction:rtl;
    background:#ffffff;
    color:#111;
}

/* SECTION */
.problems-section{
    padding:80px 10%;
    background:#fafafa;
}

/* TITLE */
.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:28px;
    margin-bottom:10px;
    color:#111;
}

.section-title p{
    font-size:14px;
    color:#666;
}

/* GRID */
.problems-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* CARD */
.problem-card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:14px;
    padding:20px;
    transition:0.3s;
    box-shadow:0 5px 20px rgba(0,0,0,0.04);
}

.problem-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* TITLE */
.problem-title{
    font-size:16px;
    font-weight:700;
    color:#d32f2f;
    margin-bottom:10px;
}

/* TEXT */
.problem-text{
    font-size:13px;
    line-height:2;
    color:#444;
    text-align:justify;
}

/* RESPONSIVE */
@media (max-width:900px){
    .problems-grid{
        grid-template-columns:repeat(1,1fr);
    }

    .problems-section{
        padding:50px 20px;
    }

    .section-title h2{
        font-size:22px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-73d3008 */body{
    margin:0;
    font-family:sans-serif;
    direction:rtl;
    background:#ffffff;
    color:#111;
}

/* SECTION */
.services-section{
    padding:80px 10%;
    background:#f9fafc;
}

/* HEADER */
.section-header{
    text-align:center;
    margin-bottom:50px;
}

.section-header h2{
    font-size:28px;
    margin-bottom:10px;
}

.section-header p{
    font-size:14px;
    color:#666;
}

/* GRID */
.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* CARD */
.service-card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:16px;
    padding:25px 20px;
    transition:0.3s;
    box-shadow:0 5px 20px rgba(0,0,0,0.04);
}

.service-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

/* ICON PLACEHOLDER */
.service-icon{
    width:50px;
    height:50px;
    border-radius:12px;
    background:linear-gradient(135deg,#1976d2,#42a5f5);
    margin-bottom:15px;
}

/* TITLE */
.service-title{
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
    color:#111;
}

/* TEXT */
.service-text{
    font-size:13px;
    line-height:2;
    color:#555;
    text-align:justify;
}

/* RESPONSIVE */
@media (max-width:900px){
    .services-grid{
        grid-template-columns:1fr;
    }

    .services-section{
        padding:50px 20px;
    }

    .section-header h2{
        font-size:22px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f5cad5c */body{
    margin:0;
    font-family:system-ui, sans-serif;
    direction:rtl;
    background:#ffffff;
    color:#111;
}

/* SECTION */
.whyus{
    padding:90px 10%;
    background:#f7f8fa;
}

/* HEADER */
.header{
    text-align:center;
    margin-bottom:50px;
}

.header h2{
    font-size:30px;
    font-weight:800;
    margin-bottom:10px;
    color:#111;
}

.header p{
    font-size:14px;
    color:#666;
}

/* GRID */
.grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

/* CARD */
.card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:14px;
    padding:25px 22px;
    transition:0.25s ease;
    box-shadow:0 5px 20px rgba(0,0,0,0.04);
}

/* hover */
.card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
    border-color:#d0d7de;
}

/* TITLE */
.title{
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
    color:#111;
}

/* TEXT */
.text{
    font-size:13px;
    line-height:2.1;
    color:#555;
    text-align:justify;
}

/* RESPONSIVE */
@media (max-width:900px){
    .whyus{
        padding:60px 20px;
    }

    .grid{
        grid-template-columns:1fr;
    }

    .header h2{
        font-size:22px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0a1d065 */body{
    margin:0;
    font-family:system-ui, sans-serif;
    direction:rtl;
    background:#ffffff;
    color:#111;
}

/* SECTION */
.process{
    padding:90px 10%;
    background:#f7f8fa;
}

/* HEADER */
.header{
    text-align:center;
    margin-bottom:60px;
}

.header h2{
    font-size:30px;
    font-weight:800;
    margin-bottom:10px;
}

.header p{
    font-size:14px;
    color:#666;
}

/* STEPS WRAPPER */
.steps{
    display:flex;
    flex-direction:column;
    gap:18px;
    position:relative;
}

/* LINE (visual timeline) */
.steps::before{
    content:"";
    position:absolute;
    right:20px;
    top:0;
    bottom:0;
    width:2px;
    background:#d9dee7;
}

/* STEP */
.step{
    position:relative;
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:14px;
    padding:20px 25px;
    padding-right:50px;
    box-shadow:0 5px 18px rgba(0,0,0,0.04);
    transition:0.25s;
}

.step:hover{
    transform:translateX(-5px);
    box-shadow:0 10px 28px rgba(0,0,0,0.08);
}

/* NUMBER DOT */
.step::before{
    content:"";
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    background:#1976d2;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(25,118,210,0.15);
}

/* TITLE */
.title{
    font-size:16px;
    font-weight:700;
    margin-bottom:6px;
}

/* TEXT */
.text{
    font-size:13px;
    line-height:2;
    color:#555;
    text-align:justify;
}

/* RESPONSIVE */
@media (max-width:900px){
    .process{
        padding:60px 20px;
    }

    .steps::before{
        right:10px;
    }

    .step{
        padding-right:45px;
    }

    .header h2{
        font-size:22px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a0d0bc3 */body{
    margin:0;
    font-family:system-ui, sans-serif;
    direction:rtl;
    background:#ffffff;
    color:#111;
}

/* SECTION */
.price-section{
    padding:90px 10%;
    background:#f7f8fa;
}

/* HEADER */
.header{
    text-align:center;
    margin-bottom:50px;
    
    
}

.header h2{
    font-size:30px;
    font-weight:800;
    margin-bottom:10px;
}

.header p{
    font-size:14px;
    color:#666;
}

/* GRID */
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* CARD */
.card{
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:16px;
    padding:25px 22px;
    box-shadow:0 5px 18px rgba(0,0,0,0.04);
    transition:0.25s;
}

/* hover */
.card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
    border-color:#d0d7de;
}

/* ICON STYLE (no image, minimal dot style) */
.dot{
    width:10px;
    height:10px;
    background:#1976d2;
    border-radius:50%;
    margin-bottom:12px;
}

/* TITLE */
.title{
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
}

/* TEXT */
.text{
    font-size:13px;
    line-height:2;
    color:#555;
    text-align:justify;
}

/* HIGHLIGHT BOX */
.highlight{
    margin-top:20px;
    padding:15px;
    border-right:4px solid #1976d2;
    background:#eef5ff;
    font-size:13px;
    line-height:2;
    color:#1a3c6e;
}

/* RESPONSIVE */
@media (max-width:900px){
    .price-section{
        padding:60px 20px;
    }

    .grid{
        grid-template-columns:1fr;
    }

    .header h2{
        font-size:22px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-94c5fe4 */body{
    margin:0;
    font-family:system-ui, sans-serif;
    direction:rtl;
    background:#0b1220;
    color:#fff;
}

/* SECTION */
.cta{
    padding:100px 10%;
    background: radial-gradient(circle at top, #162447, #0b1220);
    text-align:center;
}

/* TITLE */
.cta h2{
    font-size:32px;
    font-weight:900;
    color:#EEd8dc;
    margin-bottom:15px;
}

/* TEXT */
.cta p{
    font-size:14px;
    color:#cfd8dc;
    line-height:2;
    max-width:800px;
    margin:0 auto 30px auto;
    text-align:justify;
}

/* BUTTONS WRAPPER */
.buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

/* BUTTON BASE */
.btn{
    padding:14px 22px;
    border-radius:12px;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    transition:0.25s;
    display:inline-block;
    width:220px; /* یکسان شدن اندازه دکمه‌ها */
    text-align:center;
}

/* PRIMARY */
.btn-primary{
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    color:#fff;
    box-shadow:0 10px 25px rgba(0,114,255,0.3);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(0,114,255,0.4);
}

/* SECONDARY */
.btn-secondary{
    background:linear-gradient(135deg,#7f00ff,#e100ff);
    color:#fff;
    border:none;
}

.btn-secondary:hover{
    transform:translateY(-3px);
}

/* THIRD BUTTON */
.btn-tertiary{
    background:linear-gradient(135deg,#ff7a18,#af002d);
    color:#fff;
    border:none;
}

.btn-tertiary:hover{
    transform:translateY(-3px);
}

/* INFO BOX */
.info{
    margin-top:35px;
    font-size:13px;
    color:#90a4ae;
}

/* RESPONSIVE */
@media (max-width:900px){
    .cta{
        padding:70px 20px;
    }

    .cta h2{
        font-size:22px;
    }

    .cta p{
        font-size:13px;
    }

    .buttons{
        flex-direction:column;
        align-items:center;
    }

    .btn{
        width:100%;
        max-width:280px;
        text-align:center;
    }
}/* End custom CSS */